How to make a HTML5 scrolling page as in this exam

2020-07-17 16:12发布

问题:

I am interested in making HTML5 page with page scrolling like this one: http://www.apple.com/iphone-5s/

I would be grateful is someone could point out how this scrolling is made and/or what frameworks are involved or could reach identical result.

回答1:

It is easy.

Make bind to mouse scroll, and create slides.

<div class="b-slider">
   <div class="b-sider__item">
      Item 1
   </div>
   <div class="b-sider__item">
      Item 2
   </div>
   <div class="b-sider__item">
      Item 3
   </div>
   <div class="b-sider__item">
      Item 4
   </div>
   <div class="b-sider__item">
      Item 5
   </div>
</div>

And use jcarousel slider plugin with vertical scroll options

$('.b-slider').jcarousel('next');