布局框架

网格和列表布局切换jQuery特效

面包多

网格和列表布局切换jQuery特效-创客云
这是一款 jQuery 和 CSS3 网格和列表布局切换动画特效。该特效实现从网格布局到列表布局的切换动画效果,效果非常炫酷。

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
  2. <script src="js/jquery.min.js" type="text/javascript"></script>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.0/plugins/ScrollToPlugin.min.js"></script>
  5. <script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
  6. <script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
  7. <script src="assets/js/demo.js"></script>

HTML 结构

页面布局的 HTML 结构如下。

  1. <div class="loader">
  2.   <div class="lds-ripple">
  3.     <div></div>
  4.     <div></div>
  5.   </div>
  6. </div>
  7.  
  8. <aside class="sidebar">
  9.   <div class="logo">
  10.     <a href="http://www.22vd.com/">+</a>
  11.   </div>
  12. </aside>
  13.  
  14.  
  15. <header>
  16.   <div class="header-inner"> 
  17.     <h1>Data Sources</h1>
  18.   </div>
  19. </header>
  20.  
  21. <section class="grid-holder">
  22.   <div class="grid-list-layout">
  23.     <div class="grid-list-holder">
  24.       <span class="grid-layout active">
  25.       <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  26.   viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
  27.       <g>
  28.         <g>
  29.           <path d="M176.792,0H59.208C26.561,0,0,26.561,0,59.208v117.584C0,209.439,26.561,236,59.208,236h117.584
  30.             C209.439,236,236,209.439,236,176.792V59.208C236,26.561,209.439,0,176.792,0z M196,176.792c0,10.591-8.617,19.208-19.208,19.208
  31.             H59.208C48.617,196,40,187.383,40,176.792V59.208C40,48.617,48.617,40,59.208,40h117.584C187.383,40,196,48.617,196,59.208
  32.             V176.792z"/>
  33.         </g>
  34.       </g>
  35.       <g>
  36.         <g>
  37.           <path d="M452,0H336c-33.084,0-60,26.916-60,60v116c0,33.084,26.916,60,60,60h116c33.084,0,60-26.916,60-60V60
  38.             C512,26.916,485.084,0,452,0z M472,176c0,11.028-8.972,20-20,20H336c-11.028,0-20-8.972-20-20V60c0-11.028,8.972-20,20-20h116
  39.             c11.028,0,20,8.972,20,20V176z"/>
  40.         </g>
  41.       </g>
  42.       <g>
  43.         <g>
  44.           <path d="M176.792,276H59.208C26.561,276,0,302.561,0,335.208v117.584C0,485.439,26.561,512,59.208,512h117.584
  45.             C209.439,512,236,485.439,236,452.792V335.208C236,302.561,209.439,276,176.792,276z M196,452.792
  46.             c0,10.591-8.617,19.208-19.208,19.208H59.208C48.617,472,40,463.383,40,452.792V335.208C40,324.617,48.617,316,59.208,316h117.584
  47.             c10.591,0,19.208,8.617,19.208,19.208V452.792z"/>
  48.         </g>
  49.       </g>
  50.       <g>
  51.         <g>
  52.           <path d="M452,276H336c-33.084,0-60,26.916-60,60v116c0,33.084,26.916,60,60,60h116c33.084,0,60-26.916,60-60V336
  53.             C512,302.916,485.084,276,452,276z M472,452c0,11.028-8.972,20-20,20H336c-11.028,0-20-8.972-20-20V336c0-11.028,8.972-20,20-20
  54.             h116c11.028,0,20,8.972,20,20V452z"/>
  55.         </g>
  56.       </g>
  57.       <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g>
  58.       </svg>
  59.     </span>
  60.       <span class="list-layout">
  61.       <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  62.   viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
  63. <g>
  64.   <g>
  65.     <path d="M100.923,0C64.276,0,34.462,29.814,34.462,66.462s29.814,66.462,66.462,66.462c36.647,0,66.462-29.814,66.462-66.462
  66.       S137.57,0,100.923,0z M100.923,103.385C80.563,103.385,64,86.821,64,66.462s16.563-36.923,36.923-36.923
  67.       c20.36,0,36.923,16.563,36.923,36.923S121.283,103.385,100.923,103.385z"/>
  68.   </g>
  69. </g>
  70. <g>
  71.   <g>
  72.     <path d="M462.769,22.154h-256c-8.157,0-14.769,6.613-14.769,14.769V96c0,8.157,6.613,14.769,14.769,14.769h256
  73.       c8.157,0,14.769-6.613,14.769-14.769V36.923C477.538,28.767,470.926,22.154,462.769,22.154z M448,81.231H221.538V51.692H448
  74.       V81.231z"/>
  75.   </g>
  76. </g>
  77. <g>
  78.   <g>
  79.     <path d="M100.923,189.538c-36.647,0-66.462,29.814-66.462,66.462s29.814,66.462,66.462,66.462
  80.       c36.647,0,66.462-29.814,66.462-66.462S137.57,189.538,100.923,189.538z M100.923,292.923C80.563,292.923,64,276.36,64,256
  81.       s16.563-36.923,36.923-36.923c20.36,0,36.923,16.563,36.923,36.923S121.283,292.923,100.923,292.923z"/>
  82.   </g>
  83. </g>
  84. <g>
  85.   <g>
  86.     <path d="M462.769,211.692h-256c-8.157,0-14.769,6.613-14.769,14.769v59.077c0,8.157,6.613,14.769,14.769,14.769h256
  87.       c8.157,0,14.769-6.613,14.769-14.769v-59.077C477.538,218.305,470.926,211.692,462.769,211.692z M448,270.769H221.538v-29.538H448
  88.       V270.769z"/>
  89.   </g>
  90. </g>
  91. <g>
  92.   <g>
  93.     <path d="M100.923,379.077c-36.647,0-66.462,29.814-66.462,66.462S64.276,512,100.923,512c36.647,0,66.462-29.814,66.462-66.462
  94.       S137.57,379.077,100.923,379.077z M100.923,482.462c-20.36,0-36.923-16.563-36.923-36.923c0-20.36,16.563-36.923,36.923-36.923
  95.       c20.36,0,36.923,16.563,36.923,36.923C137.846,465.898,121.283,482.462,100.923,482.462z"/>
  96.   </g>
  97. </g>
  98. <g>
  99.   <g>
  100.     <path d="M462.769,401.231h-256c-8.157,0-14.769,6.613-14.769,14.769v59.077c0,8.157,6.613,14.769,14.769,14.769h256
  101.       c8.157,0,14.769-6.613,14.769-14.769V416C477.538,407.843,470.926,401.231,462.769,401.231z M448,460.308H221.538v-29.538H448
  102.       V460.308z"/>
  103.   </g>
  104. </g>
  105. <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g> <g></g>
  106.       </svg>
  107.     </span>
  108.     </div>
  109.   </div>
  110.  
  111.   <div class="grid masonry">
  112.     <div class="masonry__item">
  113.       <figure>
  114.         <figcaption class="content">
  115.           <h2>Cycling 2019</h2>
  116.           <p class="date"><span>Updated</span> MARCH 16, 2019</p>
  117.           <ul class="tags">
  118.             <li><a href="#!">VARIABLE</a></li>
  119.             <li><a href="#!">PROPERTY</a></li>
  120.             <li><a href="#!">SPEED</a></li>
  121.             <li><a href="#!">LOREM</a></li>
  122.             <li><a href="#!">IPSUM</a></li>
  123.             <li><a href="#!">SIT</a></li>
  124.             <li><a href="#!" class="more" data-click-state="1">+</a></li>
  125.           </ul>
  126.         </figcaption>
  127.       </figure>
  128.     </div>
  129.  
  130.     <div class="masonry__item">
  131.       <figure>
  132.         <figcaption class="content">
  133.           <h2>Secret Dataset</h2>
  134.           <p class="date"><span>Updated</span> MARCH 14, 2019</p>
  135.           <ul class="tags">
  136.             <li><a href="#!">VARIABLE</a></li>
  137.             <li><a href="#!">PROPERTY</a></li>
  138.             <li><a href="#!">SPEED</a></li>
  139.             <li><a href="#!">LOREM</a></li>
  140.             <li><a href="#!">IPSUM</a></li>
  141.             <li><a href="#!">SIT</a></li>
  142.             <li><a href="#!" class="more" data-click-state="1">+</a></li>
  143.           </ul>
  144.         </figcaption>
  145.       </figure>
  146.     </div>
  147.  
  148.   ......
  149.  
  150.   </div>
  151. </section>

Github 网址:https://github.com/COIDEAwebsite/creative-view-mode-switch-animation

(0)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

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

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

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