FullPage.jsデスクトップのフェード効果を無効にし、小さなデバイスでデフォルトのスクロールを取得する

Question

私はSliceJackを使用しています FullPage.js fade effect code snippet（第1回）私のウェブサイトにトランジション効果を得るには完璧です。デスクトップ（私のメインCSSに入れてください）。

Ipadやモバイルなどの小さなデバイスでエフェクトを無効にしたいので、トランジションなしでデフォルト（標準）にスクロールできます。

私がエフェクトを無効にするオプションは、コードスニペット（最初のもの）を削除することだけですが、デスクトップでもその効果を失うことはありません。

jQuery.fullPage.jsスクリプトの976ピクセルでresponsivewidthを有効にしました。

モバイルとiPadでCSSで追加した3つのクラス（トランジション用）を空にすることはできますか？

/*Fade in effect & one pager*/ 
 
.fullpage-wrapper { 
 
\t width: 100%!important; 
 
\t transform: none!important; 
 
} 
 

 
.fp-section { 
 
\t width: 100%!important; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t visibility: hidden; 
 
\t opacity: 0; 
 
\t z-index: 0; 
 
\t transition: all .7s ease-in-out; 
 
} 
 

 
.fp-section.active { 
 
\t visibility: visible; 
 
\t opacity: 1; 
 
\t z-index: 1; 
 
} 
 
/* Remove transition when website is still loading */ 
 
body {display:none} 
 
body[class*="fp-viewing-"] {display:block}

Answer 1

あなたがfullPage.jsを使用することとfadingEffect extensionしている場合は、適切な方法でこれを解決するためにfullPage.jsコールバックや機能を利用することができます：

$('#fullpage').fullPage({ 
    responsiveWidth: 976, 
    afterResponsive: function(isResponsive){ 
     if(isResponsive){ 
      $.fn.fullpage.fadingEffect.turnOff(); 
     } 
     else{ 
      $.fn.fullpage.fadingEffect.turnOn(); 
     } 
    } 
});