布局框架

创意水平拖拽式轮播图幻灯片jQuery特效

也想出现在这里?联系我们
面包多

创意水平拖拽式轮播图幻灯片jQuery特效-创客云
这是一款 js 动感水平拖拽式轮播图特效。该轮播图特效通过拖拽方式切换图片,拖拽过程中图片有弹性缩放效果,非常炫酷。
使用方法
在 HTML 文件中引入

  1. <link rel="stylesheet" href="./css/style.css">
  2. <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>
  3. <script src='js/imagesloaded.pkgd.min.js'></script>
  4. <script  src="./js/script.js"></script>
也想出现在这里?联系我们
创客主机

HTML 结构

  1. <figure class="logo logo--top js-trigger">
  2.   <img src="img/logo.svg">
  3. </figure>
  4.  
  5. <a href="#" target="_blank" class="resize" rel="noopener noreferrer">
  6.   <div class="resize__inner">
  7.     <figure class="logo logo--resize">
  8.       <img src="img/logo.svg">
  9.     </figure>
  10.     <p>Please view in <span>full page</span> mode</p>
  11.   </div>
  12. </a>
  13.  
  14. <a href="#" target="_blank" class="hi" rel="noopener noreferrer">
  15.   Hi
  16. </a>
  17.  
  18. <a href="#" target="_blank" rel="nofollow noopener noreferrer" class="menu-btn js-menu-btn">
  19.   <div class="menu-btn__circles">
  20.     <span class="menu-btn__circle menu-btn__circle--top js-menu-btn__circle--top"></span>
  21.     <span class="menu-btn__circle menu-btn__circle--bottom js-menu-btn__circle--bottom"></span>
  22.   </div>
  23.   <div class="menu-btn__text">See shot</div>
  24. </a>
  25.  
  26. <div class="scroll" data-scroll>
  27.  
  28.   <nav class="filter">
  29.     <ul class="filter__list">
  30.       <li class="filter__item">
  31.         <a href="#" class="filter__link is-active js-trigger">
  32.           <div class="filter__link-mask" area-hidden><span>Interiors</span></div>
  33.           Interiors
  34.         </a>   
  35.       </li>
  36.       <li class="filter__item">
  37.         <a href="#" class="filter__link js-trigger">
  38.           <div class="filter__link-mask" area-hidden><span>Residential</span></div>
  39.           Residential
  40.         </a>   
  41.       </li>
  42.       <li class="filter__item">
  43.         <a href="#" class="filter__link js-trigger">
  44.           <div class="filter__link-mask" area-hidden><span>Commercial</span></div>
  45.           Commercial
  46.         </a>   
  47.       </li>
  48.        <li class="filter__item">
  49.         <a href="#" class="filter__link js-trigger">
  50.           <div class="filter__link-mask" area-hidden><span>Installation</span></div>
  51.           Installation
  52.          </a>   
  53.       </li>
  54.     </ul>
  55.   </nav>
  56.  
  57.   <div class="scroll-content" data-scroll-content>
  58.  
  59.     <article class="slide slide--1 js-slide">
  60.       <div class="slide__inner">
  61.         <div class="slide__img js-transition-img">
  62.           <figure class="js-transition-img__inner">
  63.             <img src="img/project-one.png" draggable="false">
  64.           </figure>
  65.         </div>
  66.       </div>
  67.     </article>
  68.  
  69.     <article class="slide slide--2 js-slide">
  70.       <div class="slide__inner">
  71.         <div class="slide__img js-transition-img">
  72.           <figure class="js-transition-img__inner">
  73.             <img src="img/project-two.png" draggable="false">
  74.           </figure>
  75.         </div>
  76.       </div>
  77.     </article>
  78.  
  79.     <article class="slide slide--3 js-slide">
  80.       <div class="slide__inner">
  81.         <div class="slide__img">
  82.           <figure>
  83.             <img src="img/project-three.png" draggable="false">
  84.           </figure>
  85.         </div>
  86.       </div>
  87.     </article>
  88.  
  89.     <article class="slide slide--1 js-slide">
  90.       <div class="slide__inner">
  91.         <div class="slide__img">
  92.           <figure>
  93.             <img src="img/project-one.png" draggable="false">
  94.           </figure>
  95.         </div>
  96.       </div>
  97.     </article>
  98.  
  99.     <article class="slide slide--2 js-slide">
  100.       <div class="slide__inner">
  101.         <div class="slide__img">
  102.           <figure>
  103.             <img src="img/project-two.png" draggable="false">
  104.           </figure>
  105.         </div>
  106.       </div>
  107.     </article>
  108.  
  109.     <article class="slide slide--3 js-slide">
  110.       <div class="slide__inner">
  111.         <div class="slide__img">
  112.           <figure>
  113.             <img src="img/project-three.png" draggable="false">
  114.           </figure>
  115.         </div>
  116.       </div>
  117.     </article>
  118.  
  119.   </div>  
  120.  
  121.   <div class="scroll-content scroll-content--last" data-scroll-content>
  122.  
  123.     <article class="slide slide--1 js-slide">
  124.       <div class="slide__inner">
  125.         <div class="slide__sub-title"><span>Project</span></div>
  126.         <h1 class="slide__title"><div class="js-transition-title">Oak Refuge</div></h1>
  127.         <div class="slide__img slide__img--proxy"></div>
  128.         <div class="slide__project">Corpus Studio</div>
  129.       </div>
  130.     </article>
  131.  
  132.     <article class="slide slide--2 js-slide">
  133.       <div class="slide__inner">
  134.         <div class="slide__sub-title"><span>Project</span></div>
  135.         <h1 class="slide__title"><div class="js-transition-title">Teton Residence</div></h1>
  136.         <div class="slide__img slide__img--proxy"></div>
  137.         <div class="slide__project">Ro Rocket Design</div>
  138.       </div>
  139.     </article>
  140.  
  141.     <article class="slide slide--3 js-slide">
  142.       <div class="slide__inner">
  143.         <div class="slide__sub-title"><span>Project</span></div>
  144.         <h1 class="slide__title">Oak Refuge</h1>
  145.         <div class="slide__img slide__img--proxy"></div>
  146.         <div class="slide__project">Corpus Studio</div>
  147.       </div>
  148.     </article>
  149.  
  150.     <article class="slide slide--1 js-slide">
  151.       <div class="slide__inner">
  152.         <div class="slide__sub-title"><span>Project</span></div>
  153.         <h1 class="slide__title">Teton Residence</h1>
  154.         <div class="slide__img slide__img--proxy"></div>
  155.         <div class="slide__project">Ro Rocket Design</div>
  156.       </div>
  157.     </article>
  158.  
  159.     <article class="slide slide--2 js-slide">
  160.       <div class="slide__inner">
  161.         <div class="slide__sub-title"><span>Project</span></div>
  162.         <h1 class="slide__title">Oak Refuge</h1>
  163.         <div class="slide__img slide__img--proxy"></div>
  164.         <div class="slide__project">Corpus Studio</div>
  165.       </div>
  166.     </article>
  167.  
  168.     <article class="slide slide--3 js-slide">
  169.       <div class="slide__inner">
  170.         <div class="slide__sub-title"><span>Project</span></div>
  171.         <h1 class="slide__title">Teton Residence</h1>
  172.         <div class="slide__img slide__img--proxy"></div>
  173.         <div class="slide__project">Ro Rocket Design</div>
  174.       </div>
  175.     </article>
  176.  
  177.   </div>
  178.  
  179.   <div class="scrollbar" data-scrollbar>
  180.     <div class="scrollbar__handle js-scrollbar__handle"></div>
  181.   </div>
  182.  
  183. </div>
  184.  
  185. <div class="mask js-mask">
  186.   <div class="mask__slice js-mask__slice"></div>
  187.   <div class="mask__slice js-mask__slice"></div>
  188.   <div class="mask__slice js-mask__slice"></div>
  189.   <div class="mask__inner">
  190.     <figure class="logo logo--mask">
  191.       <img class="js-logo" src="img/logo.svg">
  192.     </figure>
  193.     <div class="mask-line js-mask-line">
  194.       <div class="mask-line__inner js-mask-line"></div>
  195.     </div>
  196.   </div>
  197. </div>

Codepen 网址:https://codepen.io/ReGGae/pen/QZxdVX

也想出现在这里?联系我们
创客主机
服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

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

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

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

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