图片/图形

带视觉差的页面平滑滚动特效

面包多

带视觉差的页面平滑滚动特效-创客云
这是 js 带视觉差的页面平滑滚动特效。该特效中,在页面向下滚动的时候,页面中的图片相对于视口带有一些视觉差特效。

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" type="text/css" href="css/base.css" />
  2. <script src="js/imagesloaded.pkgd.min.js"></script>
  3. <script src="js/demo.js"></script>

HTML 结构

  1. <main>
  2.   <div data-scroll>
  3.     <div class="frame">
  4.       <div class="frame__title-wrap">
  5.         <h1 class="frame__title">Smooth scrolling and inner image animation</h1>
  6.       </div>
  7.     </div>
  8.     <div class="content">
  9.       <div class="item">
  10.         <div class="item__img-wrap"><div class="item__img item__img--t1"></div></div>
  11.         <div class="item__caption">
  12.           <h2 class="item__caption-title">Central view</h2>
  13.           <p class="item__caption-copy">Great turbulent clouds emerged into consciousness citizens.</p>
  14.         </div>
  15.       </div>
  16.       <div class="item">
  17.         <div class="item__img-wrap"><div class="item__img item__img--t2"></div></div>
  18.         <div class="item__caption">
  19.           <h2 class="item__caption-title">Lost in time</h2>
  20.           <p class="item__caption-copy">Brain is the seed of intelligence the sky calls to us a very small stage.</p>
  21.         </div>
  22.       </div>
  23.       <div class="item">
  24.         <div class="item__img-wrap"><div class="item__img item__img--t3"></div></div>
  25.         <div class="item__caption">
  26.           <h2 class="item__caption-title">Ready to land</h2>
  27.           <p class="item__caption-copy">Cosmos encyclopaedia galactica a billion trillion culture cosmic ocean.</p>
  28.         </div>
  29.       </div>
  30.       <div class="item">
  31.         <div class="item__img-wrap"><div class="item__img item__img--t1"></div></div>
  32.         <div class="item__caption">
  33.           <h2 class="item__caption-title">All equal</h2>
  34.           <p class="item__caption-copy">Network of wormholes dream of the mind's eye finite but unbounded concept.</p>
  35.         </div>
  36.       </div>
  37.       <div class="item">
  38.         <div class="item__img-wrap"><div class="item__img item__img--t2"></div></div>
  39.         <div class="item__caption">
  40.           <h2 class="item__caption-title">Connections</h2>
  41.           <p class="item__caption-copy">Two ghostly white figures in coveralls and helmets are softly dancing vastness.</p>
  42.         </div>
  43.       </div>
  44.       <div class="item">
  45.         <div class="item__img-wrap"><div class="item__img item__img--t3"></div></div>
  46.         <div class="item__caption">
  47.           <h2 class="item__caption-title">The state of divergence</h2>
  48.           <p class="item__caption-copy">Vastness is bearable only through love invent the universe vanquish.</p>
  49.         </div>
  50.       </div>
  51.       <div class="item">
  52.         <div class="item__img-wrap"><div class="item__img item__img--t1"></div></div>
  53.         <div class="item__caption">
  54.           <h2 class="item__caption-title">Open perspective</h2>
  55.           <p class="item__caption-copy">The only home we've ever known concept of the number one.</p>
  56.         </div>
  57.       </div>
  58.       <div class="item">
  59.         <div class="item__img-wrap"><div class="item__img item__img--t3"></div></div>
  60.         <div class="item__caption">
  61.           <h2 class="item__caption-title">Discovery of shapes</h2>
  62.           <p class="item__caption-copy">Decipherment explorations tesseract as a patch of light.</p>
  63.         </div>
  64.       </div>
  65.       <div class="item">
  66.         <div class="item__img-wrap"><div class="item__img item__img--t2"></div></div>
  67.         <div class="item__caption">
  68.           <h2 class="item__caption-title">The Observer</h2>
  69.           <p class="item__caption-copy">Astonishment muse about dispassionate extraterrestrial observer.</p>
  70.         </div>
  71.       </div>
  72.     </div>
  73.   </div>
  74. </main>
(0)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

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

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