jQueryプラグインmultiScrollで全画面マウススクロール・ページ切り替え特殊効果を実現

jQueryプラグインmultiScrollで全画面マウススクロール・ページ切り替え特殊効果を実現_jquery

WBOY

リリース： 2016-05-16 16:04:42

オリジナル

1070 人が閲覧しました

いくつかの製品紹介ページでフルスクリーンスクロールの特殊効果をよく見かけますが、今日は jQuery プラグインを皆さんにお勧めします。jQuery フルスクリーンマウススクロールページの特殊効果プラグイン multiScroll.js は多くのカスタムパラメーターをサポートしています。設定: スクロール速度: 速度の切り替え、イージング: アニメーション効果、ナビゲーション: false ナビゲーションが表示されるかどうか、イベントコールバック関数呼び出し、onLeave、afterLoad などもサポートします。効果は依然として良好です。ブラウザーの互換性: IE8、9、Opera 12、および最新のブラウザでは、ブラウザは CSS3 プロパティをサポートする必要があるため、学習して使用することをお勧めします。

使用法:

1. プラグインと jQuery をロードします

<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" /> 
<script src="libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="vendors/jquery.easings.min.js"></script>  
<script type="text/javascript" src="jquery.multiscroll.js"></script>

ログイン後にコピー

2.HTML コンテンツ

<div id="multiscroll"> 
  <div class="ms-left"> 
    <div class="ms-section">Some section</div> 
    <div class="ms-section">Some section</div> 
    <div class="ms-section">Some section</div> 
  </div> 
  <div class="ms-right"> 
    <div class="ms-section">Some section</div> 
    <div class="ms-section">Some section</div> 
    <div class="ms-section">Some section</div> 
  </div> 
</div>

ログイン後にコピー

3. 関数呼び出し

<script type="text/javascript"> 
$(document).ready(function() { 
  $('#multiscroll').multiscroll{ 
    verticalCentered : true, 
    scrollingSpeed: 700, 
    easing: 'easeInQuart', 
    menu: false, 
    sectionsColor: [], 
    navigation: false, 
    navigationPosition: 'right', 
    navigationColor: '#000', 
    navigationTooltips: [], 
    loopBottom: false, 
    loopTop: false, 
    css3: false, 
    paddingTop: 0, 
    paddingBottom: 0, 
    normalScrollElements: null, 
    keyboardScrolling: true, 
    touchSensitivity: 5, 
 
    //events 
    onLeave: function(index, nextIndex, direction){}, 
    afterLoad: function(anchorLink, index){}, 
    afterRender: function(){}, 
    afterResize: function(){}, 
  }); 
}); 
</sript>

ログイン後にコピー

デモを見るスクリプトのダウンロード

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。