瀑布流

超酷堆叠相片转瀑布流网格布局动画效果

阿里云

这是一款效果超酷堆叠相片转瀑布流网格布局动画效果设计。该效果的灵感来源于 takeit 网站,它上面的一组堆叠相片在点击按钮或向下滚动鼠标时,会动画转换为网格瀑布流布局。该效果中的元素动画使用 dynamic.js 来制作,而瀑布流布局则使用 flexbox 来制作。

使用方法:

  1. //该堆叠相片转瀑布流网格布局动画效果的基本HTML结构如下:
  2. <div class="view">
  3.   <header class="header">
  4.     <!-- some links -->
  5.   </header>
  6.   <section class="page page--mover">
  7.     <div class="la-square-loader"><div></div></div>
  8.   </section>
  9.   <div class="title-wrap">
  10.     <h1 class="title title--main">OH<em>!</em>SNAP</h1>
  11.     <p class="title title--sub">Smart Auto-Filtering for your shots.</p>
  12.   </div>
  13.   <section class="page page--static">
  14.     <div class="page__title">
  15.       <h2 class="page__title-main">......</h2>
  16.       <p class="page__title-sub">......</p>
  17.     </div>
  18.     <ul class="grid">
  19.       <li class="grid__item">
  20.         <a class="grid__link" href="#">
  21.           <img class="grid__img" src="img/photos/1.jpg" alt="Some image" />
  22.           <h3 class="grid__item-title">Natural saturation effects</h3>
  23.         </a>
  24.       </li>
  25.       <li class="grid__item"><!-- ... --></li>
  26.       <li class="grid__item"><!-- ... --></li>
  27.       <li class="grid__item"><!-- ... --></li>
  28.     </ul>
  29.     <button class="button button--load" aria-label="Load more images">
  30.       <svg class="polaroid" width="100%" height="100%" viewBox="0 0 220 243" preserveAspectRatio="xMidYMid meet">
  31.         <rect class="polaroid__base" x="0" y="0" width="220" height="243" rx="5"></rect>
  32.         <rect class="polaroid__inner" x="16" y="20" width="189" height="149"></rect>
  33.         <g class="polaroid__loader">
  34.           <circle cx="61.5" cy="94.5" r="17.5"></circle>
  35.           <circle cx="110.5" cy="94.5" r="17.5"></circle>
  36.           <circle cx="159.5" cy="94.5" r="17.5"></circle>
  37.         </g>
  38.       </svg>
  39.       <span class="button__text">Load more</span>
  40.     </button>
  41.   </section>
  42.   <div class="device">
  43.     <div class="device__screen"></div>
  44.   </div>
  45.   <button id="showgrid" class="button button--view" aria-label="Show me more">
  46.     <svg width="100%" height="100%" viewBox="0 0 310 177" preserveAspectRatio="xMidYMid meet">
  47.       <path fill="#FFFFFF" d="M159.875,174.481L306.945,27.41c2.93-2.929,2.93-7.678,0-10.606L292.803,2.661c-1.406-1.407-3.314-2.197-5.303-2.197c-1.989,0-3.896,0.79-5.303,2.197L154.572,130.287L26.946,2.661c-1.406-1.407-3.314-2.197-5.303-2.197c-1.989,0-3.897,0.79-5.303,2.197L2.197,16.804C0.733,18.269,0,20.188,0,22.107s0.732,3.839,2.197,5.303l147.071,147.071C152.197,177.411,156.945,177.411,159.875,174.481L159.875,174.481z" />
  48.     </svg>
  49.   </button>
  50. </div>
  51. <!-- /view -->
也想出现在这里?联系我们
创客主机

原文地址:Polaroid Stack to Grid Intro Animation

超酷堆叠相片转瀑布流网格布局动画效果

已有 339 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

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