布局框架

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

面包多

带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

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!