平滑滾動控制動畫的JavaScript插件:Scrollissimo

dc4g 9年前發布 | 7K 次閱讀 前端技術 Scrollissimo

平滑滾動控制動畫的JavaScript插件:Scrollissimo。

Scrollissimo animates Greensock's tweens and timelines on user's scroll.

Comparing Scrollissimo and another default plugins here.

Get started

Download

Scrollissimo is available for downloading from repository. Also bower users can install Scrollissimo by command:

bower install scrollissimo

Connect

The first step you need is to include Greensock:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>  <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>  <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>

... or just:

 <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

... and Scrollissimo of course:

 <script src="scrollissimo/dist/scrollissimo.min.js"></script>

To support touch devices you also need to include touch adapter:

 <script src="scrollissimo/dist/scrollissimo.touch.min.js"></script>

Next we will trigger Scrollissimo on each scroll event:

<script>
    $(document).ready(function(){
        $(window).scroll(function(){
            Scrollissimo.knock();
        });
    });
</script>

項目主頁:http://www.baiduhome.net/lib/view/home/1439888660801

 本文由用戶 dc4g 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!