水平滚动展示图片jQuery特效

PetitQ 布局框架 2019-3-07 1.66K 0 0

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

使用方法

在页面中引入下面的文件。

也想出现在这里？联系我们吧

<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 结构如下。

<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 元素加载完毕之后，通过下面的方法来初始化该特效。

$('.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(); }

Github 网址：https://github.com/COIDEAwebsite/horizontal-scrolling-with-animated-images

水平滚动展示图片 jQuery 特效

已有 415 人购买

永久更新：
演示数据：
提取码：qmxu

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

布局框架

水平滚动展示图片jQuery特效

使用方法

HTML 结构

初始化插件

水平滚动展示图片 jQuery 特效

相关文章

蓝色商务风格404错误页面

magnet 拖拽拖动排序jQuery插件

jQuery和CSS3 3D旋转项目展示模板

发表回复取消回复

热销模板

布局框架

使用方法

HTML 结构

初始化插件

水平滚动展示图片 jQuery 特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复