滚动触发动画插件scrollreveal滑动滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是滚动触发动画插件scrollreveal滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
  <head>
    <!-- Last Updated March 7th -->
    <title>滚动触发动画插件scrollreveal</title>
    <meta charset="gb2312">
    <!-- Initialize proper device scaling for media queries. (Yay responsive!) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
  <h1 data-scroll-reveal="enter from the top over 1.5s">scrollR eveal.js</h1>
  <p data-scroll-reveal="enter bottom but wait 1s">Declarative on-scroll reveal animations.</p>
  <p data-scroll-reveal="enter bottom but wait 1.3s">An open-source project by <a class="inline" href="#" title="Julian Lloyd on Twitter">ChinaZ</a></p>

  <div class="column-container clearfix">

    <!-- col 1 -->
    <div class="column">
      <div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
      <div class="block block-2x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
      <div class="block block-1x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
      <div class="block block-3x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
      <div class="block block-2x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
      <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
    </div>

    <!-- col 2 -->
    <div class="column">
      <div class="block block-3x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
      <div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
      <div class="block block-2x block-grape" data-scroll-reveal="enter top"></div>
      <div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
      <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
      <div class="block block-2x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
    </div>

    <!-- col 3 -->
    <div class="column">
      <div class="block block-2x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
      <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
      <div class="block block-2x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
      <div class="block block-1x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
      <div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
      <div class="block block-3x block-orange" data-scroll-reveal="enter left"></div>
    </div>

    <!-- col 4 -->
    <div class="column">
      <div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
      <div class="block block-2x block-grape" data-scroll-reveal="enter top"></div>
      <div class="block block-3x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
      <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
      <div class="block block-2x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
      <div class="block block-1x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
    </div>

    <!-- col 5 -->
    <div class="column">
      <div class="block block-3x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
      <div class="block block-1x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
      <div class="block block-2x block-orange" data-scroll-reveal="enter left"></div>
      <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
      <div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
      <div class="block block-2x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
    </div>

    <!-- col 6 -->
    <div class="column">
      <div class="block block-1x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
      <div class="block block-3x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
      <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
      <div class="block block-3x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
      <div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
      <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
    </div>

    <!-- col 7 -->
    <div class="column">
      <div class="block block-2x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
      <div class="block block-1x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
      <div class="block block-1x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
      <div class="block block-3x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
      <div class="block block-2x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
      <div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
    </div>

    <!-- col 8 -->
    <div class="column">
      <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
      <div class="block block-2x block-orange" data-scroll-reveal="enter left"></div>
      <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
      <div class="block block-3x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
      <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
      <div class="block block-2x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
    </div>

  </div>

  <p data-scroll-reveal="after 1.3s enter bottom over 1s"><small class="floater">(Have you tried scrolling back up?)</small></p>

  <div class="withLove">
    <span class="alpha" data-scroll-reveal="move 50px enter left over 1s no reset">Made with</span>

    <svg class="heart" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="92.515px" height="73.161px" viewBox="0 0 92.515 73.161" enable-background="new 0 0 92.515 73.161" xml:space="preserve">
      <g>
        <path fill="#010101" d="M82.32,7.888c-8.359-7.671-21.91-7.671-30.271,0l-5.676,5.21l-5.678-5.21c-8.357-7.671-21.91-7.671-30.27,0
          c-9.404,8.631-9.404,22.624,0,31.255l35.947,32.991L82.32,39.144C91.724,30.512,91.724,16.52,82.32,7.888z"/>
      </g>
    </svg>

    <span class="omega" data-scroll-reveal="move 50px enter right over 1s no reset">in California</span>
  </div>

    <script src="js/scrollReveal.min.js"></script>

    <script type="text/javascript">
      (function($) {

        'use strict';

        window.scrollReveal = new scrollReveal({ reset: true, move: '50px' });
      })();
    </script>
</body>
</html>

JS代码(scrollReveal.min.js):

!function(t,e){
	"function"==typeof define&&define.amd?define(e):"object"==typeof exports?module.exports=e(require,exports,module):t.scrollReveal=e()}
(this,function(){
	return window.scrollReveal=function(t){
	"use strict";
	function e(e){
	this.docElem=t.document.documentElement,this.options=this.extend(this.defaults,e),this.styleBank={
}
,1==this.options.init&&this.init()}
var i=1,o=function(){
	return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||function(e){
	t.setTimeout(e,1e3/60)}
}
();
	return e.prototype={
	defaults:{
	after:"0s",enter:"bottom",move:"24px",over:"0.66s",easing:"ease-in-out",opacity:0,viewportFactor:.33,reset:!1,init:!0}
,init:function(){
	this.scrolled=!1;
	var e=this;
	this.elems=Array.prototype.slice.call(this.docElem.querySelectorAll("[data-scroll-reveal]")),this.elems.forEach(function(t){
	var o=t.getAttribute("data-scroll-reveal-id");
	o||(o=i++,t.setAttribute("data-scroll-reveal-id",o)),e.styleBank[o]||(e.styleBank[o]=t.getAttribute("style")),e.update(t)}
);
	var r=function(){
	e.scrolled||(e.scrolled=!0,o(function(){
	e._scrollPage()}
))}
,n=function(){
	function t(){
	e._scrollPage(),e.resizeTimeout=null}
e.resizeTimeout&&clearTimeout(e.resizeTimeout),e.resizeTimeout=setTimeout(t,200)}
;
	t.addEventListener("scroll",r,!1),t.addEventListener("resize",n,!1)}
,_scrollPage:function(){
	var t=this;
	this.elems.forEach(function(e){
	t.update(e)}
),this.scrolled=!1}
,parseLanguage:function(t){
	function e(t){
	var e=[],i=["from","the","and","then","but","with"];
	return t.forEach(function(t){
	i.indexOf(t)>-1||e.push(t)}
),e}
var i=t.getAttribute("data-scroll-reveal").split(/[,]+/),o={
}
;
	return i=e(i),i.forEach(function(t,e){
	switch(t){
	case"enter":return void(o.enter=i[e+1]);
	case"after":return void(o.after=i[e+1]);
	case"wait":return void(o.after=i[e+1]);
	case"move":return void(o.move=i[e+1]);
	case"ease":return o.move=i[e+1],void(o.ease="ease");
	case"ease-in":return o.move=i[e+1],void(o.easing="ease-in");
	case"ease-in-out":return o.move=i[e+1],void(o.easing="ease-in-out");
	case"ease-out":return o.move=i[e+1],void(o.easing="ease-out");
	case"over":return void(o.over=i[e+1]);
	default:return}
}
),o}
,update:function(t){
	var e=this.genCSS(t),i=this.styleBank[t.getAttribute("data-scroll-reveal-id")];
	return null!=i?i+=";
	":i="",t.getAttribute("data-scroll-reveal-initialized")||(t.setAttribute("style",i+e.initial),t.setAttribute("data-scroll-reveal-initialized",!0)),this.isElementInViewport(t,this.options.viewportFactor)?t.getAttribute("data-scroll-reveal-complete")?void 0:this.isElementInViewport(t,this.options.viewportFactor)?(t.setAttribute("style",i+e.target+e.transition),void(this.options.reset||setTimeout(function(){
	""!=i?t.setAttribute("style",i):t.removeAttribute("style"),t.setAttribute("data-scroll-reveal-complete",!0)}
,e.totalDuration))):void 0:void(this.options.reset&&t.setAttribute("style",i+e.initial+e.reset))}
,genCSS:function(t){
	var e,i,o=this.parseLanguage(t);
	o.enter?(("top"==o.enter||"bottom"==o.enter)&&(e=o.enter,i="y"),("left"==o.enter||"right"==o.enter)&&(e=o.enter,i="x")):(("top"==this.options.enter||"bottom"==this.options.enter)&&(e=this.options.enter,i="y"),("left"==this.options.enter||"right"==this.options.enter)&&(e=this.options.enter,i="x")),("top"==e||"left"==e)&&(o.move=o.move?"-"+o.move:"-"+this.options.move);
	var r=o.move||this.options.move,n=o.over||this.options.over,s=o.after||this.options.after,a=o.easing||this.options.easing,l=o.opacity||this.options.opacity,u="-webkit-transition:-webkit-transform "+n+" "+a+" "+s+",opacity "+n+" "+a+" "+s+";
	transition:transform "+n+" "+a+" "+s+",opacity "+n+" "+a+" "+s+";
	-webkit-perspective:1000;
	-webkit-backface-visibility:hidden;
	",c="-webkit-transition:-webkit-transform "+n+" "+a+" 0s,opacity "+n+" "+a+" "+s+";
	transition:transform "+n+" "+a+" 0s,opacity "+n+" "+a+" "+s+";
	-webkit-perspective:1000;
	-webkit-backface-visibility:hidden;
	",f="-webkit-transform:translate"+i+"("+r+");
	transform:translate"+i+"("+r+");
	opacity:"+l+";
	",p="-webkit-transform:translate"+i+"(0);
	transform:translate"+i+"(0);
	opacity:1;
	";
	return{
	transition:u,initial:f,target:p,reset:c,totalDuration:1e3*(parseFloat(n)+parseFloat(s))}
}
,getViewportH:function(){
	var e=this.docElem.clientHeight,i=t.innerHeight;
	return i>e?i:e}
,getOffset:function(t){
	var e=0,i=0;
	do isNaN(t.offsetTop)||(e+=t.offsetTop),isNaN(t.offsetLeft)||(i+=t.offsetLeft);
	while(t=t.offsetParent);
	return{
	top:e,left:i}
}
,isElementInViewport:function(e,i){
	var o=t.pageYOffset,r=o+this.getViewportH(),n=e.offsetHeight,s=this.getOffset(e).top,a=s+n,i=i||0;
	return r>=s+n*i&&a>=o||"fixed"==(e.currentStyle?e.currentStyle:t.getComputedStyle(e,null)).position}
,extend:function(t,e){
	for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);
	return t}
}
,e}
(window),scrollReveal}
);

CSS代码(style.css):

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
.floater{padding:18px 32px;background:#18212E;color:white;border-radius:64px;-moz-border-radius:64px;-webkit-border-radius:64px;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
a{cursor:pointer;}
*{-moz-box-sizing:border-box;box-sizing:border-box;}
html{overflow:-moz-scrollbars-vertical;overflow-y:scroll;}
h1,.h1{font-family:"proxima-nova",sans-serif;font-weight:100;}
html,body{font-family:"proxima-nova",sans-serif;font-weight:300;}
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
html,body{color:white;text-align:center;}
@media screen and (min-width:300px){html,body{font-size:14px;}
}
@media screen and (min-width:460px){html,body{font-size:20px;}
}
@media screen and (min-width:900px){html,body{font-size:24px;}
}
h1,.h1{line-height:1.166;margin:.66em 0;}
@media screen and (min-width:300px){h1,.h1{font-size:2.33em;}
}
@media screen and (min-width:460px){h1,.h1{font-size:2.66em;}
}
@media screen and (min-width:720px){h1,.h1{font-size:3.33em;}
}
p{color:#616c84;margin:0.33em 0;}
a.inline:link,a.inline:visited{color:#35ff99;text-decoration:none;border-radius:5px;padding:2px;}
a.inline:hover,a.inline:active{background:#35ff99;color:#202a39;}
small{font-size:.75em;}
em{font-style:italic;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center;}
html,body{height:100%;background:#202a39;}
.column-container{width:80%;max-width:1000px;margin:0 auto;overflow:hidden;height:250%;text-align:center;}
@media screen and (min-width:300px){.column-container{padding-top:20%;margin-bottom:-125px;}
}
@media screen and (min-width:720px){.column-container{padding-top:10%;}
}
.column{width:3%;height:100%;margin:0 2%;display:inline-block;}
.block{border-radius:5px;margin-bottom:150%;}
.block-1x{height:10%;}
.block-2x{height:15%;}
.block-3x{height:20%;}
.block-blueberry{background:#008597;}
.block-slate{background:#2d3443;}
.block-grape{background:#4d407c;}
.block-raspberry{background:#ff005d;}
.block-mango{background:#ffcc00;}
.block-orange{background:#ff7c35;}
.block-kiwi{background:#35ff99;}
.withLove{overflow:hidden;text-align:center;padding-bottom:2em;cursor:default;color:#616c84;}
@media screen and (min-width:900px){.withLove{margin-top:125px;}
}
.withLove *{display:inline-block;}
.withLove .alpha,.withLove .omega{width:40%;}
.withLove .alpha{text-align:right;}
.withLove .omega{text-align:left;}
.withLove .heart{margin:0 -2px;position:relative;z-index:3;-webkit-animation:throb 1.33s ease-in-out infinite;animation:throb 1.33s ease-in-out infinite;}
.withLove .heart path{fill:#ff005d;}
@media screen and (min-width:300px){.withLove .heart{width:30px;height:30px;top:.66em;}
}
@media screen and (min-width:460px){.withLove .heart{top:.8em;width:50px;height:50px;}
}
@-webkit-keyframes throb{0%{-webkit-transform:scale(1);}
50%{-webkit-transform:scale(0.8);}
100%{-webkit-transform:scale(1);}
}
@keyframes throb{0%{transform:scale(1);}
50%{transform:scale(0.8);}
100%{transform:scale(1);}
}

附件:下载该文件资源,减少时间成本(增值服务)