jQ+CSS3页面滚动内容元素动画特效代价

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

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

以下是 jQ+CSS3页面滚动内容元素动画特效代价的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh"  height="100%">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQ+CSS3页面滚动内容元素动画特效</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/default.css">
    <style>
    html, body, .banner, .container {
        height:100%;
        text-align: center;
    }
    .block {
        height:300px;
        background: #f47937;
        margin-bottom: 20px;
    }
    </style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<div class="container">
    <h2  class="font-zh">向下滚动页面看看效果！</h2>
  </div>
  <div class="container">
    <h2>Use Smoove to create smooth fade-in effects as you scroll down</h2>
    <div class="row">
      <div class="col-md-6"><div class="block"></div></div>
      <div class="col-md-6"><div class="block"></div></div>
    </div>
    <h2>You can also move objects across the screen...</h2>
    <div class="row">
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="-200px"></div></div>
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="-100px"></div></div>
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="100px"></div></div>
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="200px"></div></div>
    </div>
    <h2>...or rotate them</h2>
    <div class="row">
      <div class="col-md-3"><div class="block" data-move-x="-500px" data-rotate="90deg"></div></div>
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="-200px" data-rotate="45deg"></div></div>
      <div class="col-md-3"><div class="block" data-move-y="200px" data-move-x="200px" data-rotate="-45deg"></div></div>
      <div class="col-md-3"><div class="block" data-move-x="500px" data-rotate="-90deg"></div></div>
    </div>
   
    <h2>Even use cool 3D effects</h2>
    <div class="row">
      <div class="col-md-4"><div class="block" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"></div></div>
      <div class="col-md-4"><div class="block" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"></div></div>
      <div class="col-md-4"><div class="block" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"></div></div>
    </div>
    <div class="row">
      <div class="col-md-3"><div class="block" data-rotate-y="180deg" data-move-z="-200px" data-move-x="-300px"></div></div>
      <div class="col-md-3"><div class="block" data-rotate-x="180deg" data-rotate-y="180deg" data-move-z="-700px"></div></div>
      <div class="col-md-3"><div class="block" data-rotate-x="180deg" data-rotate-y="45deg" data-move-z="-500px"></div></div>
      <div class="col-md-3"><div class="block" data-rotate-y="180deg" data-move-z="-100px" data-move-x="500px"></div></div>
    </div>
    <div class="row">
      <div class="col-md-6"><div class="block" data-rotate-y="270deg" data-move-x="-150%"></div></div>
      <div class="col-md-6"><div class="block" data-rotate-y="270deg" data-move-x="150%"></div></div>
    </div>
    <h2>Scale &amp; skew them...</h2>
    <div class="row">
      <div class="col-md-6"><div class="block" data-scale="5" ></div></div>
      <div class="col-md-6"><div class="block" data-scale="0.2" data-skew="90deg,90deg"></div></div>
    </div>
    <h2>Mix it up!</h2>
  </div>
	</div>
	<script src="js/jquery.min.js"></script>
    <script src="js/jquery.smoove.js"></script>
    <script>$('.block').smoove({offset:'40%'});</script>
</body>
</html>

JS代码(jquery.smoove.min.js):

/*!* jQuery Smoove v0.2.7 (http://smoove.donlabs.com)* Copyright (c) 2014 Adam Bouqdib* Licensed under GPL-2.0 (http://abemedia.co.uk/license)*/
!function(a,b,c){
	a.fn.smoove=function(b){
	return a.fn.smoove.init(this,a.extend({
}
,a.fn.smoove.defaults,b)),this}
,a.fn.smoove.items=[],a.fn.smoove.loaded=!1,a.fn.smoove.defaults={
	offset:150,opacity:0,transition:"all 1s ease,opacity 1.5s ease",transformStyle:"preserve-3d",transformOrigin:!1,perspective:1e3}
,a.fn.smoove.init=function(d,e){
	function f(a,b,c){
	function d(a){
	return a.charAt(0).toUpperCase()+a.slice(1)}
for(var e=["webkit","moz","ms","o"],f={
}
,g=0;
	g<e.length;
	g++)c&&(b=b.replace(c,"-"+e[g]+"-"+c)),f[d(e[g])+d(a)]=b;
	return f[a]=b,f}
function g(c){
	for(var d=0;
	d<a.fn.smoove.items.length;
	d++){
	var e=a.fn.smoove.items[d],g=e.params,h=a(b).height(),i=!c||"down"===c&&"1"===e.css("opacity")?0:g.offset,j=a(b).scrollTop()+h-e.data("top");
	if("string"==typeof i&&i.indexOf("%")&&(i=parseInt(i)/100*h),i>j){
	g.opacity!==!1&&e.css({
	opacity:g.opacity}
);
	for(var k=[],l=["move","move3D","moveX","moveY","moveZ","rotate","rotate3d","rotateX","rotateY","rotateZ","scale","scale3d","scaleX","scaleY","skew","skewX","skewY"],m=0;
	m<l.length;
	m++)"undefined"!=typeof g[l[m]]&&(k[l[m]]=g[l[m]]);
	var n="";
	for(var o in k)n+=o.replace("move","translate")+"("+k[o]+") ";
	n&&(e.css(f("transform",n)),e.parent().css(f("perspective",g.perspective)),g.transformOrigin&&e.css(f("transformOrigin",g.transformOrigin)))}
else e.css("opacity",1).css(f("transform",""))}
}
if(d.each(function(){
	var b=a(this),c=b.params=a.extend({
}
,e,b.data());
	b.params.opacity=b.params.opacity/100,b.data("top",b.offset().top),c.transition=f("transition",c.transition,"transform"),b.css(c.transition),a.fn.smoove.items.push(b)}
),!a.fn.smoove.loaded){
	a.fn.smoove.loaded=!0;
	var h,i=!1,j=0,k=a(b).height(),l=a(b).width(),m=a(c).height();
	a("body").width()===a(b).width()&&a("body").css("overflow-x","hidden"),a(b).resize(function(){
	clearTimeout(h),h=setTimeout(function(){
	var d=a(b).height(),e=a(b).width(),h=k>d?h="up":"down",i=a.fn.smoove.items;
	if(k=d,l!==e){
	for(var j=0;
	j<i.length;
	j++)i[j].css(f("transform","")).css(f("transition",""));
	var n=setInterval(function(){
	var d=a(c).height();
	if(d===m){
	b.clearInterval(n);
	for(var e=0;
	e<i.length;
	e++)i[e].data("top",i[e].offset().top),i[e].css(i[e].params.transition);
	g(h)}
m=d}
,500)}
else g(h);
	l=e}
,500)}
),a(b).on("load",function(){
	g(),a(b).scroll(function(){
	i=!0}
),setInterval(function(){
	if(i){
	i=!1;
	var c=a(b).scrollTop(),d=j>c?d="up":"down";
	j=c,g(d)}
}
,250)}
)}
}
}
(jQuery,window,document);

CSS代码(default.css):

@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?yrquyl');src:url('../fonts/icomoon.eot?#iefixyrquyl') format('embedded-opentype'),url('../fonts/icomoon.woff?yrquyl') format('woff'),url('../fonts/icomoon.ttf?yrquyl') format('truetype'),url('../fonts/icomoon.svg?yrquyl#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#f9f7f6;color:#404d5b;font-weight:500;font-size:1.05em;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
;h2.font-zh{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;font-size:1.2em;font-weight:600;}
.htmleaf-container{margin:0 auto;text-align:center;overflow:hidden;}
.htmleaf-content{font-size:150%;padding:3em 0;}
.htmleaf-content h2{margin:0 0 2em;opacity:0.1;}
.htmleaf-content p{margin:1em 0;padding:5em 0 0 0;font-size:0.65em;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
.bgcolor-13{background:#e5cd3f;color:#2d456d;}
/* Header */
.htmleaf-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;}
.htmleaf-header h1{font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.htmleaf-header h1 span{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#2d456d;}
/*nav*/
.htmleaf-demo a{color:#1d7db1;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #1d7db1;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#2d456d;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#333;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-home:before{content:"\e600";}
.icon-pacman:before{content:"\e623";}
.icon-users2:before{content:"\e678";}
.icon-bug:before{content:"\e699";}
.icon-eye:before{content:"\e610";}
.icon-eye-blocked:before{content:"\e611";}
.icon-eye2:before{content:"\e612";}
.icon-arrow-up-left3:before{content:"\e72f";}
.icon-arrow-up3:before{content:"\e730";}
.icon-arrow-up-right3:before{content:"\e731";}
.icon-arrow-right3:before{content:"\e732";}
.icon-arrow-down-right3:before{content:"\e733";}
.icon-arrow-down3:before{content:"\e734";}
.icon-arrow-down-left3:before{content:"\e735";}
.icon-arrow-left3:before{content:"\e736";}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
.htmleaf-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.htmleaf-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.htmleaf-header h1{font-size:1.2em;}
}

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