js 视差滚动 记录备份
页面 元素视差滚动
<!doctype html> <html> <head> <meta charset="utf-8"> <title>社区</title> <meta http-equiv="X-UA-Compatible" content="edge,chrome=1" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 避免转码 --> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" /> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta name="apple-itunes-app" content="app-id=932758491"> <!-- <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0">--> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="address=no"> <meta name="format-detection" content="email=no"> <meta name="apple-mobile-web-app-title" content=""> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="screen-orientation" content="portrait"> <!-- uc强制竖屏 设置横屏应用得在config里面设置，网页是无法做到的 --> <meta name="x5-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="msapplication-tap-highlight" content="no"> <!-- windows phone 点击无高光 --> <meta name="HandheldFriendly" content="true"> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="wap-font-scale" content="no" /> </head> <style> * { margin: 0; padding: 0; } ul, li { list-style: none; } /*scene*/ .scenewp { position: relative; overflow: hidden; zoom: 1; } .scnitem { position: relative; width: 1200px; height: 990px; margin: 0 auto; ; } .scnitem .img_scn { position: absolute; top: 0; left: 50%; width: 1920px; margin-left: -960px; overflow: hidden; } .scnitem .img_scn img { display: block; width: 100%; -webkit-transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); } </style> <body> <div class="scenewp"> <div class="scnitem scnitem_1"> <div class="img_scn"> <img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_01.jpg" data-original="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_01.jpg" alt="场景一" style="display: block; transform: translateY(-8.24545%);"> </div> </div> <div class="scnitem scnitem_2"> <div class="img_scn"> <img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_02.jpg?version=20161110" data-original="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_02.jpg?version=20161110" alt="场景二" style="transform: translateY(-1.98922%); display: block;"> </div> </div> <div class="scnitem scnitem_3"> <div class="img_scn"> <img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_03.jpg" alt="场景三"> </div> </div> <div class="scnitem scnitem_0"> <div class="img_scn"> <img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_00.jpg" alt="直播"> </div> </div> </div> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script> // parallax 视差滚动 function Parallax(opt) { this.$ele = $(opt.ele); this.target = opt.target; this.distance = opt.distance || 9; //可滚动距离百分比 9代码9% } Parallax.prototype.scroll = function() { var that = this; var _scrolltop = $(document).scrollTop(); for (var i = 0, len = that.$ele.length; i < len; i += 1) { var $cur = $(that.$ele[i]), _winheight = $(window).height(), _pagetop = $cur.offset().top, _diff = _winheight - (_pagetop - _scrolltop), _pageheight = $cur.height(); if (_diff >= 0 && _diff < _pageheight) { var val = _diff / _pageheight * this.distance; $cur.find(that.target).css({ '-webkit-transform': 'translateY(' + -val + '%)', 'transform': 'translateY(' + -val + '%)' }); } } }; var parallax = new Parallax({ ele: '.scnitem', target: '.img_scn img', distance: 9 }); $(window).scroll(function() { parallax.scroll(); }); //翻页滚动 function Slider(opt) { this.$ele = $(opt.ele); this.liminal = opt.liminal || 160; //阈值 this.time = opt.time || 100; this.isScroll = false; this.exScrolltop = 0; } Slider.prototype.scroll = function() { var that = this; var _scrolltop = $(document).scrollTop(), _pagetop = $(that.$ele[0]).offset().top, _pageheight = $(that.$ele[0]).height(), _winheight = $(window).height(), _diff = _winheight - (_pagetop - _scrolltop); var index = Math.floor(_diff / _pageheight), diff = _diff % _pageheight, forward = false, liminal = that.liminal; if (_scrolltop > that.exScrolltop) { forward = true; that.exScrolltop = _scrolltop; } else { forward = false; that.exScrolltop = _scrolltop; } if (index == 0) { liminal = _pageheight / 2; } else { liminal = that.liminal; } if (index >= 0 && index < that.$ele.length && !that.isScroll && forward && diff > liminal && diff < _pageheight / 4 * 3) { that.isScroll = true; $('html,body').animate({ scrollTop: $(that.$ele[index]).offset().top + 'px' }, { duration: that.time, complete: function() { that.isScroll = false; } }); } } // var slider = new Slider({ // ele: '.scnitem', // liminal: 160, // time: 800 // }) </script> </body> </html>
