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

创客云


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

使用方法

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

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

HTML结构

页面的HTML结构如下。

  1. <main id="coidea" class="coidea-fullpage">
  2.   <section class="wrapper" id="section-1">
  3.     <div class="bg">
  4.       <div class="el">
  5.         <div class="bcg" style="background-image: url(assets/img/img-1.jpeg)"></div>
  6.         <div class="content">
  7.           <span>Earth</span>
  8.           <div class="description">
  9.             <p>Lorem ipsum dolor sit amet, ...</p>
  10.           </div>
  11.         </div>
  12.       </div>
  13.     </div>
  14.   </section>
  15.   <section class="wrapper" id="section-2">
  16.     <div class="bg">
  17.       <div class="el">
  18.         <div class="bcg" style="background-image: url(assets/img/img-2.jpeg)"></div>
  19.         <div class="content">
  20.           <span>Water</span>
  21.           <div class="description">
  22.             <p>Lorem ipsum dolor sit amet, ...</p>
  23.           </div>
  24.         </div>
  25.       </div>
  26.     </div>
  27.   </section>
  28.   <section class="wrapper" id="section-3">
  29.     <div class="bg">
  30.       <div class="el">
  31.         <div class="bcg" style="background-image: url(assets/img/img-3.jpeg)"></div>
  32.         <div class="content">
  33.           <span>Fire</span>
  34.           <div class="description">
  35.             <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>
  36.           </div>
  37.         </div>
  38.       </div>
  39.     </div>
  40.   </section>
  41.   <section class="wrapper" id="section-4">
  42.     <div class="bg">
  43.       <div class="el">
  44.         <div class="bcg" style="background-image: url(assets/img/img-4.jpeg)"></div>
  45.         <div class="content">
  46.           <span>Air</span>
  47.           <div class="description">
  48.             <p>Lorem ipsum dolor sit amet...</p>
  49.           </div>
  50.         </div>
  51.       </div>
  52.     </div>
  53.   </section>
  54.  
  55. </main>
  56. <footer class="active-footer">
  57.   <nav class="anchor-nav" role="navigation">
  58.     <a href="#section-1" class="active" id="anchor1"></a>
  59.     <a href="#section-2" id="anchor2"></a>
  60.     <a href="#section-3" id="anchor3"></a>
  61.     <a href="#section-4" id="anchor4"></a>
  62.   </nav>
  63. </footer>

Github网址:https://github.com/COIDEAwebsite/css-mix-blend-mode-and-stunning-parallax-slideshow

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/46416.html
云模板

发表评论