建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

scrolldeck.js jQuery带视差滚动滑动效果的html演示插件

来源:易助科技网浏览量:20收藏

简介


scrolldeck是一个很酷的jQuery插件,它可以更容易地为您的项目创建惊人的滚动演示,如幻灯片动画、图像幻灯片和视差效果。

(下载的附件中附有DEMO)


更多 HTML 演示插件:👉  [ 详情 ]


jQuery滚动效果演示插件 scrolldeck.js



使用


1.  引入文件


<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.scrollTo-1.4.3.1.min.js"></script>
<script src="js/jquery.scrollorama.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.scrolldeck.js"></script>


2.  HTML


<div class="slide">
    <p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left.</p>
    <p class="animate-in" data-animation="fly-in-right">This paragraph will fly in from the right.</p>
</div>

<div class="slide">
    <p>This slide will get be ’pinned‘ to the top of the screen until all the slide animation builds are complete.</p>
    <p class="animate-build" data-build="1">This paragraph will fade in (the default animation)</p>
    <p class="animate-build" data-animation="space-in" data-build="2">This paragraph will fade in while its letter spacing contracts to normal.</p>
</div>


3.  调用


$(document).ready(function() {
  var deck = new $.scrolldeck({
    buttons: '.nav-button',
    slides: '.slide',
    duration: 600,
    easing: 'easeInOutExpo',
    offset: 0
  });
});



相关链接


作者官网 : https://johnpolacek.com/

幻灯片动画效果演示 : https://www.jqueryscript.net/demo/jQuery-Amazing-Scrolling-Presentation-Plugin-scrolldeck/decks/responsive/

图片滑动效果演示 : https://www.jqueryscript.net/demo/jQuery-Amazing-Scrolling-Presentation-Plugin-scrolldeck/decks/infographics/

jQuery视差效果演示 :  https://www.jqueryscript.net/demo/jQuery-Amazing-Scrolling-Presentation-Plugin-scrolldeck/decks/parallax/