视差滚动demo （pc）
根据设计图设定每屏的高度，js会自动缩放到全屏尺寸，效果要大尺寸才能看的出来
demo :http://runjs.cn/detail/uvizsekd
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 html,body{ 7 margin:0;padding:0; 8 } 9 .pages{ 10 width:100%; 11 height:100vh; 12 outline: 1px solid blue; 13 } 14 #a,#b,#c{ 15 width:50%; 16 height:200px; 17 } 18 #a ,#c{ 19 background:rgba(212,132,11,.5); 20 } 21 #b{ 22 background:rgba(22,32,11,.5); 23 } 24 </style> 25 </head> 26 <body> 27 <div class="pages"> 28 <div id="a">123</div> 29 <div id="c">123</div> 30 </div> 31 <div class="pages"> 32 <div id="b">bbb</div> 33 </div> 34 <div class="pages"> 35 </div> 36 </body> 37 </html> 38 <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> 39 <script> 40 var design_size = {"width" : 1920 } 41 var pages = [ 42 { 43 "height" : 4000 //* radio 44 ,"background" : "http://image.tianjimedia.com/uploadImages/2012/221/960UAS60H799.jpg" 45 ,"elems" : [ 46 {"id" : "#a" 47 ,"start" : {"left" : 0 , "top" : 0} 48 ,"end" : {"left": 200 , "top" : 3600} 49 } 50 ,{"id" : "#c" 51 ,"start" : {"right" : 0 , "bottom" : 4000} 52 ,"end" : {"right": 200 , "bottom" : 0} 53 } 54 ] 55 }, 56 { 57 "height" : 3500 //* radio 58 ,"background" : "http://image.tianjimedia.com/uploadImages/2012/072/S056Y53BS3Q6_1000x500.jpg" 59 ,"elems" : [ 60 {"id" : "#b" 61 ,"start" : {"right" : 0 , "top" : 0} 62 ,"end" : {"right": 500 , "top" : 3200} 63 } 64 ] 65 }, 66 { 67 "height" : '3.0' //* radio 68 ,"background" : "http://image.tianjimedia.com/uploadImages/2013/065/85GSC473318U.jpg" 69 ,"elems" : [ 70 ] 71 }, 72 ] 73 74 </script> 75 <script> 76 ~function (pg_conf , pg_doms){ 77 var window_height = window.innerHeight 78 var radio = $(window).width() / design_size.width 79 80 pg_doms = $(pg_doms) 81 var h_stack = [0] 82 ,_pos = 0 83 ,_play = 0 84 ,_direct 85 86 var scene , scene_dom , scene_elems 87 var animating = false 88 scrollTo(document.body , 0 ,100) 89 function scrollTo(element, to, duration) { 90 animating = true 91 if (duration <= 0) return animating = false; 92 var difference = to - element.scrollTop; 93 var perTick = difference / duration * 10; 94 95 setTimeout(function() { 96 element.scrollTop = element.scrollTop + perTick; 97 if (element.scrollTop == to) return animating = false; 98 scrollTo(element, to, duration - 10); 99 }, 10); 100 } 101 function play(index ,opt){ 102 if (!pg_conf[index]) { 103 return 104 } 105 opt = opt || {} 106 _play = index 107 scene = pg_conf[index] 108 scene_dom = pg_doms.eq(index) 109 scene_elems = scene.elems 110 if (0 && opt.movein){ 111 if ('top' == opt.movein){ 112 var to = h_stack[_play] 113 114 }else { 115 var to = h_stack[_play+1] - window_height 116 } 117 if (to) scrollTo(document.body , to ,200) 118 } 119 ///window.scrollTo(0, h_stack[_play]) 120 /* 121 scene_elems.forEach(function(e_conf){ 122 e_conf.dom.css('position','absolute').css(e_conf.start) 123 }) 124 */ 125 } 126 function roll(s){ 127 if (!scene) return 128 if (s > scene.scrTotal) return 129 var process = s / scene.scrTotal 130 131 //console.log(process , s, scene.scrTotal , scene.height , window.innerHeight) 132 scene_elems.forEach(function(e_conf){ 133 var ret = {} 134 //console.log(e_conf) 135 for (var key in e_conf.end){ 136 if (key in e_conf.start) { 137 var m = (e_conf.end[key] - e_conf.start[key] )*process + e_conf.start[key] 138 ret[key] = m 139 } 140 } 141 //console.log(ret) 142 e_conf.dom.css(ret) 143 144 }) 145 146 } 147 var t = 0 148 pg_conf.forEach(function(p , i){ 149 var dom = pg_doms.eq(i) 150 if (/^\d*\.\d*$/.test(p.height)){ 151 var height = p.height * window_height 152 }else { 153 var height = p.height * radio 154 } 155 156 t += height 157 h_stack.push(t) 158 p.height = height 159 p.scrTotal = height - window_height 160 dom.css({width:'100%' 161 ,height: height 162 ,position:'relative' 163 ,background: 'url(' + p.background+ ') ' 164 ,'background-size':'cover' 165 ,'background-attachment' : 'fixed' 166 }) 167 p.elems.forEach(function(e_conf){ 168 e_conf.dom = $(e_conf.id).css('position','absolute').css(e_conf.start) 169 for (var key in e_conf.start){ 170 e_conf.start[key] = e_conf.start[key] * radio 171 } 172 for (var key in e_conf.end){ 173 e_conf.end[key] = e_conf.end[key] * radio 174 } 175 }) 176 }) 177 play(_play) 178 179 var _threshold = window_height //- 100 180 function move(evt){ 181 if (animating) return 182 var scrl = document.body.scrollTop 183 if (scrl > _pos) _direct = 'down' 184 else _direct = 'up' 185 _pos = scrl 186 187 var boudary = h_stack[_play] 188 if ('down' == _direct){ 189 if (_play !== h_stack.length - 2){ 190 var bound_next = h_stack[_play + 1] 191 192 if (scrl + _threshold > bound_next) { 193 console.log('next') 194 play(_play+1 ,{"movein" : "top"}) 195 } 196 } 197 }else { 198 if (_play !== 0){ 199 var bound_next = h_stack[_play ] 200 if (scrl <= bound_next){ 201 console.log('pre') 202 play(_play-1 ,{"movein" : "bottom"}) 203 204 } 205 } 206 } 207 boudary = h_stack[_play] 208 roll(scrl - boudary) 209 210 } 211 window.addEventListener('scroll' , move) 212 213 }(pages , '.pages') 214 </script>
