smoothstate.js不適用於不同的背景圖片嗎？

我正在創建從我的介紹頁面到我的主頁的平滑過渡，因爲您可以在這裏看到http://trial.kareemhackett.com所以我使用了smoothstate.js，但是我無法讓它在頁面之間平滑過渡，我覺得這是因爲我有圖像作爲不同於任何演示的背景。但希望這可能不是我在這裏帶來的情況。也許是因爲我在使用引導程序？smoothstate.js不適用於不同的背景圖片嗎？

這是我的代碼。我也嘗試了reveal.js，雖然這有點不同，我只需要合併平滑過渡。

任何幫助，非常感謝。

$(function(){ 
 
    'use strict'; 
 
    var $page = $('#main'), 
 
     options = { 
 
     debug: true, 
 
     prefetch: true, 
 
     cacheLength: 2, 
 
     onStart: { 
 
      duration: 250, // Duration of our animation 
 
      render: function ($container) { 
 
      // Add your CSS animation reversing class 
 
      $container.addClass('is-exiting'); 
 
      // Restart your animation 
 
      smoothState.restartCSSAnimations(); 
 
      } 
 
     }, 
 
     onReady: { 
 
      duration: 0, 
 
      render: function ($container, $newContent) { 
 
      // Remove your CSS animation reversing class 
 
      $container.removeClass('is-exiting'); 
 
      // Inject the new content 
 
      $container.html($newContent); 
 
      } 
 
     } 
 
     }, 
 
     smoothState = $page.smoothState(options).data('smoothState'); 
 
});

.intro { 
 
    background: url(img/headerbg.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 
.site-wrapper { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; /* For at least Firefox */ 
 
    min-height: 100%; 
 
    -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); 
 
      box-shadow: inset 0 0 100px rgba(0,0,0,.5); 
 
} 
 
.site-wrapper-inner { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.cover-container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.inner { 
 
    padding: 30px; 
 
} 
 

 
.cover { 
 
    padding: 0 20px; 
 
}

<div id="main" class="m-scene"> 
 
     <div class="scene_element scene_element--fadeinright"> 
 
     <div class="intro"> 
 
      <div class="site-wrapper"> 
 

 
      <div class="site-wrapper-inner"> 
 
       <div class="cover-container"> 
 
       <div class="inner cover"> 
 
        <a class="center-block" href="newhome.html" data-transition="fade"><img class="img-responsive" src="img/Bang_logo.png"></a> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

來源

2015-06-18 Kareem Hackett

它看起來並不像你有CSS定義的任何動畫。所以m-scene, scene_element, scene_element--fadeinright, and is-exiting沒有做任何事情。

smoothState.js似乎正在工作，但它將通過ajax替換內容，並按照指定添加is-exiting類。

來源

2015-06-19 15:38:59

我不明白爲什麼，但我有一個令人難以置信的很難得到這個或任何網頁過渡我的這個項目正在進行中。我添加了關鍵幀到這些類，但仍然沒有運氣。 –

據我所知，你錯過了CSS動畫，並且有一半時間我在jquery.smoothState.js上得到404。

我確定Bootstrap與它沒有任何關係，因爲我使用Bootstrap來創建一個網站，其中包含與您類似的過渡和背景圖片，並且我已經運作。

如果你喜歡，歡迎你檢查出的代碼，它的記錄盡我所能： http://alex-oconnell.com/client/aarmour/

來源

2015-06-24 08:36:16

smoothstate.js不適用於不同的背景圖片嗎？

回答

相關問題