Pretty Cool SVG Mask Image Slider With jQuery
| File Size: | 16.9 MB |
|---|---|
| Views Total: | 4210 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A pretty cool, touch-enabled image slider that smoothly transitions between images and text using SVG clipping and masking technology.
Dependencies:
- jQuery
- Bootstrap
- jQuery Mobile
- snap.svg
- TweenMax.js
How to use it:
1. Load the necessary JavaScript and CSS files in your html document.
<!-- Stylesheet --> <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> <script src="js/main.js"></script>
2. The primary HTML structure for the SVG mask slider.
<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>
This awesome jQuery plugin is developed by alikinvv. For more Advanced Usages, please check the demo page or visit the official website.
