这是一款效果非常炫酷的jQuery和SVG遮罩轮播图特效。该轮播图特效使用SVG剪裁和遮罩技术,通过snap.svg插件制作轮播图图片过渡特效,支持移动手机,支持键盘控制和滑动控制。
使用方法
在页面中引入下面的js和CSS文件。
<!-- CSS --> <link rel="stylesheet" href="/path/to/bootstrap.min.css"> <link rel="stylesheet" href="css/slider.css"> <link rel="stylesheet" href="css/main.css"> <!-- JavaScipt --> <script src="/path/to/jquery-min.js"></script> <script src="/path/to/jquery.mobile.custom.min.js"></script> <script src="/path/to/snap.svg-min.js"></script> <script src="/path/to/bootstrap.min.js"></script> <script src="/path/to/TweenMax.min.js"></script> <script src="js/slider.js"></script>
HTML结构
该jQuery和SVG遮罩轮播图特效的HTML结构如下。
<div class="portfolio slider-wrapper"> <ul class="slider" data-step1="M1402,800h-2V0h1c0.6,0,1,0.4,1,1V800z" data-step2="M1400,800H379L771.2,0H1399c0.6,0,1,0.4,1,1V800z" data-step3="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z" data-step4="M-2,800h2V0h-1c-0.6,0-1,0.4-1,1V800z" data-step5="M0,800h1021L628.8,0L1,0C0.4,0,0,0.4,0,1L0,800z" data-step6="M0,800h1400V0L1,0C0.4,0,0,0.4,0,1L0,800z"> <li class="visible"> <div class="svg-wrapper"> <svg viewBox="0 0 1400 800"> <defs> <clipPath id="image-1"> <path id="changing-path-1" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/> </clipPath> </defs> <image height='100%' width="100%" clip-path="url(#image-1)" href="img/2.jpg"></image> <div class="slider__info"> <p class="slider__title text"> <span class="text__first"> <span class="text__word">Karbokam</span> <span class="text__first-bg" style="background-color: #3A7E94"></span> </span> </p> <p class="slider__desc text"> <span class="text__second"> <span class="text__word">Production of technical carboxymethyl cellulose <br> (CMC) and polyanionic cellulose (PAC)</span> <span class="text__second-bg" style="background-color: #E688A1"></span> </span> </p> </div> <div class="slider__link cd-slider-navigation"> <a href="#0" class="next-slide slider__site text"> <span class="text__first"> <span class="text__word">Visit karbokam.ru <img class="arrow" src="img/arrow.svg" alt=""></span> <span class="text__first-bg" style="background-color: #3A7E94"></span> </span> </a> <p class="slider__visit text"> <span class="text__second"> <span class="text__word">Official website</span> <span class="text__second-bg" style="background-color: #E688A1"></span> </span> </p> </div> </svg> </div> <!-- .svg-wrapper --> </li> <li> <div class="svg-wrapper"> <svg viewBox="0 0 1400 800"> <defs> <clipPath id="image-2"> <path id="changing-path-2" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/> </clipPath> </defs> <image height='100%' width="100%" clip-path="url(#image-2)" href="img/1.jpg"></image> <div class="slider__info"> <p class="slider__title text"> <span class="text__first"> <span class="text__word">UAZ KD</span> <span class="text__first-bg" style="background-color: #535986"></span> </span> </p> <p class="slider__desc text"> <span class="text__second"> <span class="text__word">Authorized distributor of UAZ (Ulyanovsk Automobile <br> Plant)</span> <span class="text__second-bg" style="background-color: #DABDB2"></span> </span> </p> </div> <div class="slider__link cd-slider-navigation"> <a href="#0" class="next-slide slider__site text"> <span class="text__first"> <span class="text__word">Visit uaz159.ru<img class="arrow" src="img/arrow.svg" alt=""></span> <span class="text__first-bg" style="background-color: #535986"></span> </span> </a> <p class="slider__visit text"> <span class="text__second"> <span class="text__word">Official website</span> <span class="text__second-bg" style="background-color: #DABDB2"></span> </span> </p> </div> </svg> </div> <!-- .svg-wrapper --> </li> <li> <div class="svg-wrapper"> <svg viewBox="0 0 1400 800"> <defs> <clipPath id="image-3"> <path id="changing-path-3" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/> </clipPath> </defs> <image height='100%' width="100%" clip-path="url(#image-3)" href="img/3.jpg"></image> <div class="slider__info"> <p class="slider__title text"> <span class="text__first"> <span class="text__word">Karbokam</span> <span class="text__first-bg" style="background-color: #1ABDFE"></span> </span> </p> <p class="slider__desc text"> <span class="text__second"> <span class="text__word">Production of technical carboxymethyl cellulose <br> (CMC) and polyanionic cellulose (PAC)</span> <span class="text__second-bg" style="background-color: #CB1537"></span> </span> </p> </div> <div class="slider__link cd-slider-navigation"> <a href="#0" class="next-slide slider__site text"> <span class="text__first"> <span class="text__word">Visit karbokam.ru <img class="arrow" src="img/arrow.svg" alt=""></span> <span class="text__first-bg" style="background-color: #1ABDFE"></span> </span> </a> <p class="slider__visit text"> <span class="text__second"> <span class="text__word">Official website</span> <span class="text__second-bg" style="background-color: #CB1537"></span> </span> </p> </div> </svg> </div> <!-- .svg-wrapper --> </li> </ul> <!-- .slider --> <ol class="slider-controls"> <li class="selected"><a href="#0"><em>Item 1</em></a></li> <li><a href="#0"><em>Item 2</em></a></li> <li><a href="#0"><em>Item 2</em></a></li> <!-- other list items here --> </ol> <!-- .slider-controls --> </div>
该jQuery和SVG遮罩轮播图特效的github地址为:https://github.com/alikinvv/svg-mask-slider
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!