带CSS混合模式的JS视觉差轮播图特效

带CSS混合模式的JS视觉差轮播图特效

这是一款带CSS混合模式的JS视觉差轮播图特效。该特效使用CSS mix-blend-mode将文字和图片背景进行混合,并在点击时带有炫酷的视觉差特效。

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

1
2
3
4
5
6
7
<link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.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="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
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
<main id="coidea" class="coidea-fullpage">
  <section class="wrapper" id="section-1">
    <div class="bg">
      <div class="el">
        <div class="bcg" style="background-image: url(assets/img/img-1.jpeg)"></div>
        <div class="content">
          <span>Earth</span>
          <div class="description">
            <p>Lorem ipsum dolor sit amet, ...</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="wrapper" id="section-2">
    <div class="bg">
      <div class="el">
        <div class="bcg" style="background-image: url(assets/img/img-2.jpeg)"></div>
        <div class="content">
          <span>Water</span>
          <div class="description">
            <p>Lorem ipsum dolor sit amet, ...</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="wrapper" id="section-3">
    <div class="bg">
      <div class="el">
        <div class="bcg" style="background-image: url(assets/img/img-3.jpeg)"></div>
        <div class="content">
          <span>Fire</span>
          <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="wrapper" id="section-4">
    <div class="bg">
      <div class="el">
        <div class="bcg" style="background-image: url(assets/img/img-4.jpeg)"></div>
        <div class="content">
          <span>Air</span>
          <div class="description">
            <p>Lorem ipsum dolor sit amet...</p>
          </div>
        </div>
      </div>
    </div>
  </section>
   
</main>
<footer class="active-footer">
  <nav class="anchor-nav" role="navigation">
    <a href="#section-1" class="active" id="anchor1"></a>
    <a href="#section-2" id="anchor2"></a>
    <a href="#section-3" id="anchor3"></a>
    <a href="#section-4" id="anchor4"></a>
  </nav>
</footer>
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论