jQuery水平滚动展示图片特效

jQuery水平滚动展示图片特效

这是一款效果非常炫酷的jQuery水平滚动展示图片特效。该特效在滚动鼠标滚轮的时候,屏幕会水平滚动,展示图片内容。

使用方法
在页面中引入下面的文件。

1
2
3
4
5
6
7
8
<link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
<script src="assets/js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/demo.js"></script>

HTML结构
基本HTML结构如下。

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
<main class="coidea-horizontal" id="intro" role="main">
    <section class="horizontal-container">
      <h1>Community</h1>
      <h2>Capsule</h2>
      <p>I love my beauty. It's not my fault......
    </section>
    <section class="horizontal-container">
      <div class="horizontal-container-content">
        <div class="image image-desktop bottom left">
          <img class="big" src="assets/img/img-1.jpeg" alt="coidea - horizontal scroll" />
        </div>
        <div class="image image-desktop top right">
          <img class="big" src="assets/img/img-2.jpeg" alt="coidea - horizontal scroll" />
        </div>
      </div>
    </section>
    <section class="horizontal-container">
      <div class="horizontal-container-content">
        <div class="image image-desktop middle center">
          <img class="middle" src="assets/img/img-3.jpeg" alt="coidea - horizontal scroll" />
        </div>
        <div class="image image-desktop bottom right">
          <img class="big" src="assets/img/img-4.jpeg" alt="coidea - horizontal scroll" />
        </div>
      </div>
    </section>
    <section class="horizontal-container">
      <div class="horizontal-container-content">
        <div class="image image-desktop top center">
          <img class="big" src="assets/img/img-5.jpeg" alt="coidea - horizontal scroll" />
        </div>
        <div class="image image-desktop middle right">
          <img class="middle" src="assets/img/img-6.jpeg" alt="coidea - horizontal scroll" />
        </div>
      </div>
    </section>
</main>

初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该特效。

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
$('.coidea-horizontal').imagesLoaded(function() {
    $('.loader').addClass('is-loaded');
 
    var totalWidth = 0,
        timeline = new TimelineMax({ paused: true });
 
    // set width of our scrolling div
    $('.horizontal-container').each(function(index) {
      totalWidth += parseInt($(this).width(), 10);
    });
    $('.coidea-horizontal').css({
      'width': totalWidth
    })
 
    // timeline
    timeline.staggerTo('.image', 0.75, {
        scaleX: 1.20,
        transformOrigin: "right",
        ease: Back.easeOut.config(0.5)
      })
      .staggerTo('.image', 0.75, {
        scaleX: 1,
        transformOrigin: "right",
        ease: Back.easeOut.config(0.5)
      }, 0, '-=0.5');
 
    // mouse wheel
    window.addEventListener("wheel", onWheel);
    // mouse wheel - firefox
    window.addEventListener('DOMMouseScroll', onWheel);
    // touch mobile
    window.addEventListener("touchmove", onWheel);
 
    // main function
    function onWheel(event) {
     
      event.preventDefault();
      var normalized,
          delta = event.wheelDelta,
          scroll = (window.pageXOffset || document.scrollLeft) - (document.clientLeft || 0) || 0;
      if (delta) {
       
        normalized = (delta % 120) == 0 ? -delta / 120 : -delta / 3;
      } else {
       
        delta = event.deltaY || event.detail || 0;
        normalized = -(delta % 3 ? delta * 10 : delta / 3);
      }
 
      timeline.play().restart();
       
      TweenLite.to(window, 0.4, {
        scrollTo: {
          x: scroll + 200 * normalized
        }
      });
    }
  });
 
  // fast fix for resize window and refresh view, attention: not use in production!
  window.onresize = function(){ location.reload(); }
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论