插件描述：LATERAL ON-SCROLL SLIDING 是一款基于Jquery和css3开发的全屏滑动插件。将页面分为左边和右边，一边的内容是经过圆形遮罩的图片，而另一边则是相关的文字介绍。而且相邻行的图片和文字左右顺序是交替的。 随着浏览器滚动条向下移动，可视区下方的图片和文字将会以动画的形式从两边移动到靠近中线。当滚动条向上移动时，则下方淡出可视区的图片和文字将会以动画的形式向两边移开。
LATERAL ON-SCROLL SLIDING 是一款基于Jquery和css3开发的全屏滑动插件。将页面分为左边和右边，一边的内容是经过圆形遮罩的图片，而另一边则是相关的文字介绍。而且相邻行的图片和文字左右顺序是交替的。
随着浏览器滚动条向下移动，可视区下方的图片和文字将会以动画的形式从两边移动到靠近中线。当滚动条向上移动时，则下方淡出可视区的图片和文字将会以动画的形式向两边移开。
在左上方的固定位置有一个由圆形按钮组成的导航栏。点击某个按钮页面就会滚动到对应的位置。
预览图
width="474" height="300" title="滑动显示插件,LATERAL ON-SCROLL SLIDING" alt="滑动显示插件,LATERAL ON-SCROLL SLIDING"/>
width="474" height="300" title="滑动显示插件,LATERAL ON-SCROLL SLIDING" alt="滑动显示插件,LATERAL ON-SCROLL SLIDING"/>
使用步骤
1、引入以下的js和css文件
1 2 3 4 5 6 7 8 | <link rel="stylesheet" type="text/css" href="css/demo.css"><link rel="stylesheet" type="text/css" href="css/style.css"><!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="css/styleIE.css" /><![endif]--><script type="text/javascript" src="js/modernizr.custom.11333.js"></script><script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script type="text/javascript" src="js/jquery.easing.1.3.js"></script> |
2、在head标签中加入以下js代码
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 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 | <script type="text/javascript"> $(function() { var $sidescroll = (function() { // the row elements var $rows = $('#ss-container > div.ss-row'), // we will cache the inviewport rows and the outside viewport rows $rowsViewport, $rowsOutViewport, // navigation menu links $links = $('#ss-links > a'), // the window element $win = $(window), // we will store the window sizes here winSize = {}, // used in the scroll setTimeout function anim = false, // page scroll speed scollPageSpeed = 2000, // page scroll easing scollPageEasing = 'easeInOutExpo', // perspective? hasPerspective = false, perspective = hasPerspective && Modernizr.csstransforms3d, // initialize function init = function() { // get window sizes getWinSize(); // initialize events initEvents(); // define the inviewport selector defineViewport(); // gets the elements that match the previous selector setViewportRows(); // if perspective add css if (perspective) { $rows.css({ '-webkit-perspective': 600, '-webkit-perspective-origin': '50% 0%' }); } // show the pointers for the inviewport rows $rowsViewport.find('a.ss-circle').addClass('ss-circle-deco'); // set positions for each row placeRows(); }, // defines a selector that gathers the row elems that are initially visible. // the element is visible if its top is less than the window's height. // these elements will not be affected when scrolling the page. defineViewport = function() { $.extend($.expr[':'], { inviewport: function(el) { if ($(el).offset().top < winSize.height) { return true; } return false; } }); }, // checks which rows are initially visible setViewportRows = function() { $rowsViewport = $rows.filter(':inviewport'); $rowsOutViewport = $rows.not($rowsViewport) }, // get window sizes getWinSize = function() { winSize.width = $win.width(); winSize.height = $win.height(); }, // initialize some events initEvents = function() { // navigation menu links. // scroll to the respective section. $links.on('click.Scrolling', function(event) { // scroll to the element that has id = menu's href $('html, body').stop().animate({ scrollTop: $($(this).attr('href')).offset().top }, scollPageSpeed, scollPageEasing); return false; }); $(window).on({ // on window resize we need to redefine which rows are initially visible (this ones we will not animate). 'resize.Scrolling': function(event) { // get the window sizes again getWinSize(); // redefine which rows are initially visible (:inviewport) setViewportRows(); // remove pointers for every row $rows.find('a.ss-circle').removeClass('ss-circle-deco'); // show inviewport rows and respective pointers $rowsViewport.each(function() { $(this).find('div.ss-left').css({ left: '0%' }).end().find('div.ss-right').css({ right: '0%' }).end().find('a.ss-circle').addClass('ss-circle-deco'); }); }, // when scrolling the page change the position of each row 'scroll.Scrolling': function(event) { // set a timeout to avoid that the // placeRows function gets called on every scroll trigger if (anim) return false; anim = true; setTimeout(function() { placeRows(); anim = false; }, 10); } }); }, // sets the position of the rows (left and right row elements). // Both of these elements will start with -50% for the left/right (not visible) // and this value should be 0% (final position) when the element is on the // center of the window. placeRows = function() { // how much we scrolled so far var winscroll = $win.scrollTop(), // the y value for the center of the screen winCenter = winSize.height / 2 + winscroll; // for every row that is not inviewport $rowsOutViewport.each(function(i) { var $row = $(this), // the left side element $rowL = $row.find('div.ss-left'), // the right side element $rowR = $row.find('div.ss-right'), // top value rowT = $row.offset().top; // hide the row if it is under the viewport if (rowT > winSize.height + winscroll) { if (perspective) { $rowL.css({ '-webkit-transform': 'translate3d(-75%, 0, 0) rotateY(-90deg) translate3d(-75%, 0, 0)', 'opacity': 0 }); $rowR.css({ '-webkit-transform': 'translate3d(75%, 0, 0) rotateY(90deg) translate3d(75%, 0, 0)', 'opacity': 0 }); } else { $rowL.css({ left: '-50%' }); $rowR.css({ right: '-50%' }); } } // if not, the row should become visible (0% of left/right) as it gets closer to the center of the screen. else { // row's height var rowH = $row.height(), // the value on each scrolling step will be proporcional to the
|