Welcome, Old Sport!

视差滚动页面的动画制作

by ilikecss ON 2014/01/03 7877

视差滚动页面的动画制作在单页面(one page)网站中很常见的一种特效,视差滚动让多层背景以不同的速度移动,带来视觉上的体验快感。在不同层块区域中我们可以添加不同动画效果,让网页更具浏览价值和用户体验。一般可将动画做成 pageload 和 scrollload 两种,在这个案例中我集成了以上两种效果。视差滚动我们可以用一款jQuery库skrollr来实现,用CSS3animation来实现滑动后的动画。

Step1. HTML

<div class="scroll-arrow"></div> <!-- 箭头锚点区域 -->
<div id="txture">
    <div data-position="left" class="notViewed animation float_l">
    <h2>层内容部分</h2>
    </div>
</div>

利用data属性配合CSS3来实现动画效果,具体参照后面的CSS样式。

Step2. CSS

/* animation 动画效果 */
.animation {
  display: inline-block;
  opacity: 0;
  filter: alpha(opacity=0);
  position: relative;
  -webkit-transition: all .55s ease-in;
  -moz-transition: all .55s ease-in;
  -ms-transition: all .55s ease-in;
  -o-transition: all .55s ease-in;
  transition: all .55s ease-in;
} 
/* 和HTML中对应的样式 */
.animation[data-position="left"] { left: -20%;} 
.animation[data-position="right"] { right: -20%;}
.animation[data-position="bottom"] { bottom: 20%;}
.animation[data-position="left"].viewed {
  left: 0%;
  opacity: 1;
  filter: alpha(opacity=100);
}
.animation[data-position="right"].viewed {
  right: 0%;
  opacity: 1;
  filter: alpha(opacity=100);
}
.animation[data-position="bottom"].viewed {
  top: -450%;
  opacity: 1;
  filter: alpha(opacity=100);
}

Step3. 引用脚本和库

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/scrollview.js"></script> // 动画脚本
<script type="text/javascript" src="js/skrollr.js"></script> // 视差滚动库
<script type="text/javascript">
	skrollr.init();
	// scrool top click //头部锚点箭头
	$('.scroll-arrow').click( function () {
	$('html, body').animate({scrollTop: $('#txture').offset().top});
	$('.scroll-arrow').hide(); 
	}); 
</script>

通过扫描二维码下载:

一些视差滚动网站参考:

  • http://www.iutopi.com/
  • http://www.janploch.de/
  • http://unfold.no/
4条评论
  1. #1

    体验盒子说道:

    不得不说,改成窄屏后感觉舒服好多。

    • ilikecss说道:

      哎,本来想学老外的,但参考了很多博友都是这种样子的。。。算了吧

  2. #2

    makaiqian说道:

    好有用,谢谢!




TOP