首页滚动特效：页面渲染时，CSS3 实现文字动画；滑动页面时，JavaScript 实现改变背景图片的 background-position 属性和线性改变文字透明度。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <title>首页滚动特效</title> <meta name="keywords" content="双鱼,双鱼bizhongbio,bizhongbio"/> <meta name="description" content="双鱼bizhongbio，是专注于分享web前端开发技术的个人博客。磨砺，聚变。没有伞的孩子，必须努力奔跑。"/> <meta name="author" content="双鱼bizhongbio, http://www.bizhongbio.com/" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/> <style> *{padding: 0;margin: 0;} body{font: 16px/1 'Microsoft YaHei',Arial,Helvetica,sans-serif;} #head{position: absolute;z-index: 999;width: 100%;height: 55px;background: rgba(0,0,0,.2);} #gallery{position: relative;width: 100%;height: 615px;background: #fff url(images/work.jpg) no-repeat top center;background-size: cover;} #gallery-content{position: absolute;top: 39%;width: 100%;height: 61%;text-align: center;color: #fff;} #gallery-content h1{font-size: 4em;font-weight: 400;letter-spacing: 1px;} #gallery-content p{margin: 15px 0;font-size: 2em;} #gallery-content span{display: block;margin-top: 35px;} #gallery-content span a{display: inline-block;padding: 12px 30px;line-height: 1em;text-decoration: none;border: 1px solid #fff;border-radius: 2px;} a.bookmark{margin-right: 20px;background: #fff;color: #333;} a.feature{color: #fff;} a.bookmark:hover,a.feature:hover{opacity: .65;filter: alpha(opacity=65);} #head,#gallery-content h1,#gallery-content p,#gallery-content span{ opacity: 0; filter: alpha(opacity=100); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } #head{ -webkit-animation: showhead 1500ms ease 0ms forwards; -moz-animation: showhead 1500ms ease 0ms forwards; -ms-animation: showhead 1500ms ease 0ms forwards; -o-animation: showhead 1500ms ease 0ms forwards; animation: showhead 1500ms ease 0ms forwards; } #gallery-content h1{ -webkit-animation: show 1500ms ease 1500ms forwards; -moz-animation: show 1500ms ease 1500ms forwards; -ms-animation: show 1500ms ease 1500ms forwards; -o-animation: show 1500ms ease 1500ms forwards; animation: show 1500ms ease 1500ms forwards; } #gallery-content p{ -webkit-animation: show 1500ms ease 3000ms forwards; -moz-animation: show 1500ms ease 3000ms forwards; -ms-animation: show 1500ms ease 3000ms forwards; -o-animation: show 1500ms ease 3000ms forwards; animation: show 1500ms ease 3000ms forwards; } #gallery-content span{ -webkit-animation: show 1500ms ease 4500ms forwards; -moz-animation: show 1500ms ease 4500ms forwards; -ms-animation: show 1500ms ease 4500ms forwards; -o-animation: show 1500ms ease 4500ms forwards; animation: show 1500ms ease 4500ms forwards; } @-webkit-keyframes showhead{from{opacity: 0}to{opacity: 1}} @-moz-keyframes showhead{from{opacity: 0}to{opacity: 1}} @-ms-keyframes showhead{from{opacity: 0}to{opacity: 1}} @-o-keyframes showhead{from{opacity: 0}to{opacity: 1}} @keyframes showhead{from{opacity: 0}to{opacity: 1}} @-webkit-keyframes show{from{opacity: 0;transform: translateY(30px)}to{opacity: 1;transform: translateY(0)}} @-moz-keyframes show{from{opacity: 0;transform: translateY(30px)}to{opacity: 1;transform: translateY(0)}} @-ms-keyframes show{from{opacity: 0;transform: translateY(30px)}to{opacity: 1;transform: translateY(0)}} @-o-keyframes show{from{opacity: 0;transform: translateY(30px)}to{opacity: 1;transform: translateY(0)}} @keyframes show{from{opacity: 0;transform: translateY(30px)}to{opacity: 1;transform: translateY(0)}} </style> </head> <body> <header id="head"></header> <article id="gallery"> <section id="gallery-content"> <h1>磨砺 聚变</h1> <p>没有伞的孩子，必须努力奔跑。</p> <span> <a href="http://www.bizhongbio.com/tag/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1" class="bookmark">网页设计</a> <a href="http://www.bizhongbio.com/category/demo" class="feature">网页案例</a> </span> </section> </article> <section style="height: 800px"></section> <script> window.onload = function(){ var $ = function(id){ return document.getElementById(id); }; var ogallery = $("gallery"), galleryHeight = ogallery.offsetHeight, ogalleryCon = $("gallery-content"); var addEvent = function(obj,event,fn){ if(obj.addEventListener){ obj.addEventListener(event,fn,false); }else if(obj.attachEvent){ obj.attachEvent('on'+event,fn); } }; var scrollEvevt = function(){ var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop, oopacity = 1, k = oopacity / galleryHeight; if(scrollHeight <= galleryHeight){ oopacity -= k * scrollHeight; ogallery.style.backgroundPositionY = 1/2 * scrollHeight +"px"; ogalleryCon.style.filter = "alpha(opacity:" + oopacity * 100 + ")"; ogalleryCon.style.opacity = oopacity; } }; addEvent(window,'scroll',function(){ scrollEvevt(); }); }; </script> </body> </html> |
3条评论
文章不错
谢谢支持
好棒啊