水平滚动展示图片jQuery特效

PetitQ 布局框架 2019-3-07 1.68K 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 特效

已有 420 人购买

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

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

布局框架

水平滚动展示图片jQuery特效

使用方法

HTML 结构

初始化插件

水平滚动展示图片 jQuery 特效

相关文章

纯CSS3页面顶部滚动视觉差特效

炫酷CSS3登录界面jQuery特效

创意分割线404页面模板

发表回复取消回复

热销模板

布局框架

使用方法

HTML 结构

初始化插件

水平滚动展示图片 jQuery 特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复