js动感水平拖拽式轮播图特效

作者：管理员

发布时间：2020/2/25 17:23:48

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=889

　　使用方法

　　在HTML文件中引入。

　　<linkrel="stylesheet"href="./css/style.css">

　　<scriptsrc='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>

　　<scriptsrc='js/imagesloaded.pkgd.min.js'></script>

　　<scriptsrc="./js/script.js"></script>

　　HTML结构

　　<figureclass="logologo--topjs-trigger">

　　<imgsrc="img/logo.svg">

　　</figure>

　　<ahref="#"target="_blank"class="resize">

　　<divclass="resize__inner">

　　<figureclass="logologo--resize">

　　<imgsrc="img/logo.svg">

　　</figure>

　　<p>Pleaseviewin<span>fullpage</span>mode</p>

　　</div>

　　</a>

　　<ahref="#"target="_blank"class="hi">

　　Hi

　　</a>

　　<ahref="#"target="_blank"rel="nofollow"class="menu-btnjs-menu-btn">

　　<divclass="menu-btn__circles">

　　<spanclass="menu-btn__circlemenu-btn__circle--topjs-menu-btn__circle--top"></span>

　　<spanclass="menu-btn__circlemenu-btn__circle--bottomjs-menu-btn__circle--bottom"></span>

　　</div>

　　<divclass="menu-btn__text">Seeshot</div>

　　</a>

　　<divclass="scroll"data-scroll>

　　<navclass="filter">

　　<ulclass="filter__list">

　　<liclass="filter__item">

　　<ahref="#"class="filter__linkis-activejs-trigger">

　　<divclass="filter__link-mask"area-hidden><span>Interiors</span></div>

　　Interiors

　　</a>

　　</li>

　　<liclass="filter__item">

　　<ahref="#"class="filter__linkjs-trigger">

　　<divclass="filter__link-mask"area-hidden><span>Residential</span></div>

　　Residential

　　</a>

　　</li>

　　<liclass="filter__item">

　　<ahref="#"class="filter__linkjs-trigger">

　　<divclass="filter__link-mask"area-hidden><span>Commercial</span></div>

　　Commercial

　　</a>

　　</li>

　　<liclass="filter__item">

　　<ahref="#"class="filter__linkjs-trigger">

　　<divclass="filter__link-mask"area-hidden><span>Installation</span></div>

　　Installation

　　</a>

　　</li>

　　</ul>

　　</nav>

　　<divclass="scroll-content"data-scroll-content>

　　<articleclass="slideslide--1js-slide">

　　<divclass="slide__inner">

　　<divclass="slide__imgjs-transition-img">

　　<figureclass="js-transition-img__inner">

　　<imgsrc="img/project-one.png"draggable="false">

　　</figure>

　　</div>

　　</div>

　　</article>

　　<articleclass="slideslide--2js-slide">

　　<divclass="slide__inner">

　　<divclass="slide__imgjs-transition-img">

　　<figureclass="js-transition-img__inner">

　　<imgsrc="img/project-two.png"draggable="false">

　　</figure>

　　</div>

　　</div>

　　</article>

　　<articleclass="slideslide--3js-slide">

　　<divclass="slide__inner">

　　<divclass="slide__img">

　　<figure>

　　<imgsrc="img/project-three.png"draggable="false">

　　</figure>

　　</div>

　　</div>

　　</article>

　　<articleclass="slideslide--1js-slide">

　　<divclass="slide__inner">

　　<divclass="slide__img">

　　<figure>

　　<imgsrc="img/project-one.png"draggable="false">

　　</figure>

　　</div>

　　</div>

　　</article>

　　<articleclass="slideslide--2js-slide">

　　<divclass="slide__inner">

　　<divclass="slide__img">

　　<figure>

　　<imgsrc="img/project-two.png"draggable="false">

　　</figure>

　　</div>

　　</div>

　　</article>

　　<articleclass="slideslide--3js-slide">

　　<divclass="slide__inner">

　　<divclass="slide__img">

　　<figure>

　　<imgsrc="img/project-three.png"draggable="false">

　　</figure>

　　</div>

　　</div>

　　</article>

　　</div>

　　<divclass="scroll-contentscroll-content--last"data-scroll-content>

　　<articleclass="slideslide--1js-slide">

　　<divclass="slide__inner">

　　<divclass="slide__sub-title"><span>Project</span></div>

　　<h1class="slide__title"><divclass="js-transition-title">OakRefuge</div></h1>

　　<divclass="slide__imgslide__img--proxy"></div>

　　<divclass="slide__project">CorpusStudio</div>

　　</div>

　　</article>

　　<articleclass="slideslide--2js-slide">

　　<divclass="slide__inner">

　　<divclass="slide__sub-title"><span>Project</span></div>

　　<h1class="slide__title"><divclass="js-transition-title">TetonResidence</div></h1>

　　<divclass="slide__imgslide__img--proxy"></div>

　　<divclass="slide__project">RoRocketDesign</div>

　　</div>

　　</article>

　　<articleclass="slideslide--3js-slide">

　　<divclass="slide__inner">

　　<divclass="slide__sub-title"><span>Project</span></div>

　　<h1class="slide__title">OakRefuge</h1>

　　<divclass="slide__imgslide__img--proxy"></div>

　　<divclass="slide__project">CorpusStudio</div>

　　</div>

　　</article>

　　<articleclass="slideslide--1js-slide">

　　<divclass="slide__inner">

　　<divclass="slide__sub-title"><span>Project</span></div>

　　<h1class="slide__title">TetonResidence</h1>

　　<divclass="slide__imgslide__img--proxy"></div>

　　<divclass="slide__project">RoRocketDesign</div>

　　</div>

　　</article>

　　<articleclass="slideslide--2js-slide">

　　<divclass="slide__inner">

　　<divclass="slide__sub-title"><span>Project</span></div>

　　<h1class="slide__title">OakRefuge</h1>

　　<divclass="slide__imgslide__img--proxy"></div>

　　<divclass="slide__project">CorpusStudio</div>

　　</div>

　　</article>

　　<articleclass="slideslide--3js-slide">

　　<divclass="slide__inner">

　　<divclass="slide__sub-title"><span>Project</span></div>

　　<h1class="slide__title">TetonResidence</h1>

　　<divclass="slide__imgslide__img--proxy"></div>

　　<divclass="slide__project">RoRocketDesign</div>

　　</div>

　　</article>

　　</div>

　　<divclass="scrollbar"data-scrollbar>

　　<divclass="scrollbar__handlejs-scrollbar__handle"></div>

　　</div>

　　</div>

　　<divclass="maskjs-mask">

　　<divclass="mask__slicejs-mask__slice"></div>

　　<divclass="mask__slicejs-mask__slice"></div>

　　<divclass="mask__slicejs-mask__slice"></div>

　　<divclass="mask__inner">

　　<figureclass="logologo--mask">

　　<imgclass="js-logo"src="img/logo.svg">

　　</figure>

　　<divclass="mask-linejs-mask-line">

　　<divclass="mask-line__innerjs-mask-line"></div>

　　</div>

　　</div>

　　</div>

关键字：jQuery