<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="https://alikinvv.github.io/svg-mask-slider/img/2.jpg"></image>
<div class="slider__info">
<p class="slider__title text">
<span class="text__first">
<span class="text__word">News</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">BBC News provides trusted World and UK news as well <br> as local and regional perspectives. </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 bbc.com<img class="arrow" src="https://alikinvv.github.io/svg-mask-slider/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="https://alikinvv.github.io/svg-mask-slider/img/1.jpg"></image>
<div class="slider__info">
<p class="slider__title text">
<span class="text__first">
<span class="text__word">Search</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">Search the world's information, including webpages, images, videos and more. <br> Google has many special features.</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 google.com<img class="arrow" src="https://alikinvv.github.io/svg-mask-slider/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="https://alikinvv.github.io/svg-mask-slider/img/3.jpg"></image>
<div class="slider__info">
<p class="slider__title text">
<span class="text__first">
<span class="text__word">BBC</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">BBC News provides trusted World and UK news as well <br> as local and regional perspectives. </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 bbc.com<img class="arrow" src="https://alikinvv.github.io/svg-mask-slider/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> <!-- .slider-wrapper -->
<!-- github -->
<a href="https://github.com/alikinvv/svg-mask-slider" target="_blank" class="github-corner" style="position:absolute;top:0;right:0;z-index:9999" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
html, body {
height: 100%;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #37474F;
min-height: 800px;
}
.container-fluid {
max-width: 1400px;
}
.header {
padding: 30px 65px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 113px;
z-index: 10;
mix-blend-mode: exclusion;
filter: invert(65%);
&__logo {
width: 50px;
img {
width: 100%;
}
}
&__menu {
position: absolute;
top: 30px;
right: 65px;
width: 50px;
cursor: pointer;
}
}
.icon {
display: inline-block;
width: 2em;
height: 2em;
font-size: 30px;
}
.slider-wrapper {
position: relative;
width: 90%;
max-width: 1024px;
margin: 2em auto;
/* hide horizontal scrollbar on IE11 */
overflow-x: hidden;
padding: 30px 65px;
}
.slider {
& > li {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
/* hide vertical scrollbar on IE11 */
overflow: hidden;
&.visible {
position: relative;
z-index: 2;
opacity: 1;
.text span.text__word {opacity: 0;}
}
&.is-animating {
z-index: 3;
opacity: 1;
}
}
&__info {
margin-left: 65px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
color: #fff;
}
&__title {
font-weight: 700;
font-size: 36px;
margin-bottom: 7px;
overflow: hidden;
span {
display: block;
}
}
&__desc {
font-size: 10px;
overflow: hidden;
span {
display: block;
}
}
&__site {
display: block;
font-weight: bold;
font-size: 13px;
}
&__visit {
display: block;
margin-right: 32px;
}
&__link {
padding-right: 32px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 32px;
color: #fff;
text-align: right;
font-size: 10px;
overflow: hidden;
a {
color: #fff;
overflow: hidden;
display: block;
&:hover, &:focus {
text-decoration: none;
}
}
.arrow {
position: relative;
right: 0;
}
}
image {
pointer-events: none;
transform-origin: 50% 50%;
}
}
.slider .svg-wrapper {
/* using padding Hack to fix bug on IE - svg height not properly calculated */
height: 0;
padding-bottom: 57.15%;
}
.slider-wrapper {
width: 100%;
height: calc(100% + 9px);
padding: 0;
margin: -9px 0 0;
max-width: 100%;
overflow: hidden;
ul {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
// transition-property: all;
// transition-duration: 500ms;
// transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
//transition-property: all;
//transition-duration: 1000ms;
//transition-timing-function: cubic-bezier(.25,0,.25,1);
&.animate {
top: 100px;
right: 120px;
left: 120px;
bottom: 100px;
}
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
/* --------------------------------
Slider navigation
-------------------------------- */
.slider-navigation li {
position: absolute;
z-index: 3;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 10px;
height: 48px;
width: 48px;
}
.slider-navigation li a {
display: block;
height: 100%;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
}
.no-touch .slider-navigation li a:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.slider-navigation li:last-of-type {
left: 10px;
right: auto;
}
.slider-navigation li:last-of-type a {
background-position: -48px 0;
}
/* --------------------------------
Slider dots/controls
-------------------------------- */
.slider-controls {
position: absolute;
bottom: 20px;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 3;
text-align: center;
width: 90%;
mix-blend-mode: exclusion;
-webkit-filter: invert(65%);
filter: invert(65%);
}
.slider-controls::after {
clear: both;
content: "";
display: table;
}
.slider-controls li {
display: inline-block;
margin-right: 10px;
}
.slider-controls li:last-of-type {
margin-right: 0;
}
.slider-controls li.selected a {
background-color: #ffffff;
}
.slider-controls a {
display: block;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
color: transparent;
height: 10px;
width: 10px;
border-radius: 50%;
border: 2px solid #ffffff;
}
.no-touch .slider-controls a:hover {
background-color: #ffffff;
}
.text__first, .text__second{
position: relative;
}
.text__word{
opacity: 0;
}
.text__first-bg, .text__second-bg{
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 100;
transform-origin: left;
transform: scaleX(0);
}
.text__first-bg{
background-color: #5fbff9;
}
.text__second-bg{
background-color: #f06543;
}
View Compiled
jQuery(document).ready(function(){
var time = 100;
var timetext = 1400;
var trigger = false;
var tl = new TimelineLite({delay: 1}),
firstBg = document.querySelectorAll('.text__first-bg'),
secBg = document.querySelectorAll('.text__second-bg'),
word = document.querySelectorAll('.text__word');
tl
.to(firstBg, 0.2, {scaleX:1})
.to(secBg, 0.2, {scaleX:1})
.to(word, 0.1, {opacity:1}, "-=0.1")
.to(firstBg, 0.2, {scaleX:0})
.to(secBg, 0.2, {scaleX:0});
trigger = true;
var tl2 = new TimelineLite({delay: 1});
tl2
.to($('.text__word'), 0.1, {opacity: 0})
.to($('.slider image'), 0.2, {scale: 1},'-=0.1')
.to($('.slider'), 0.9, {ease: Circ.easeOut, top: 100, left: 120, right: 120, bottom: 100},'-=0.2')
.to($('.slider'), 0.75, {ease: Elastic.easeOut.config(4, 1.5), top: -5, left: -5, right: -5, bottom: -5}, )
//.to($('.slider image'), 2, {ease: Power4.easeOut,scale: 1}, '-=1')
.pause();
var duration = 500,
epsilon = (time / 60 / duration) / 4,
firstCustomMinaAnimation = bezier(.42,.03,.77,.63, epsilon),
secondCustomMinaAnimation = bezier(.27,.5,.6,.99, epsilon),
animating = false;
//initialize the slider
$('.slider-wrapper').each(function(){
initSlider($(this));
});
function initSlider(sliderWrapper) {
//cache jQuery objects
var slider = sliderWrapper.find('.slider'),
sliderNav = sliderWrapper.find('.slider-navigation'),
sliderControls = sliderWrapper.find('.slider-controls').find('li');
//store path 'd' attribute values
var pathArray = [];
pathArray[0] = slider.data('step1');
pathArray[1] = slider.data('step4');
pathArray[2] = slider.data('step2');
pathArray[3] = slider.data('step5');
pathArray[4] = slider.data('step3');
pathArray[5] = slider.data('step6');
//update visible slide when user clicks next/prev arrows
// sliderNav.on('click', '.next-slide', function(event){
// event.preventDefault();
// setTimeout(function() {
// nextSlide(slider, sliderControls, pathArray);
// },time);
// });
// sliderNav.on('click', '.prev-slide', function(event){
// event.preventDefault();
// setTimeout(function() {
// prevSlide(slider, sliderControls, pathArray);
// },time);
// });
//detect swipe event on mobile - update visible slide
slider.on('swipeleft', function(event){
if(trigger) {
trigger = false;
setTimeout(function() {
prevSlide(slider, sliderControls, pathArray);
},time);
tl2.restart();
setTimeout(function() {
tl.restart()
trigger = true;
},timetext);
}
});
slider.on('swiperight', function(event){
if(trigger) {
trigger = false;
setTimeout(function() {
nextSlide(slider, sliderControls, pathArray);
},time);
tl2.restart();
setTimeout(function() {
tl.restart()
trigger = true;
},timetext);
}
});
//update visible slide when user clicks .slider-controls buttons
sliderControls.on('click', function(event){
event.preventDefault();
var selectedItem = $(this);
if(!selectedItem.hasClass('selected') && trigger ) {
trigger = false;
setTimeout(function() {
// if it's not already selected
var selectedSlidePosition = selectedItem.index(),
selectedSlide = slider.children('li').eq(selectedSlidePosition),
visibleSlide = retrieveVisibleSlide(slider),
visibleSlidePosition = visibleSlide.index(),
direction = '';
direction = ( visibleSlidePosition < selectedSlidePosition) ? 'next': 'prev';
updateSlide(visibleSlide, selectedSlide, direction, sliderControls, pathArray);
},time);
tl2.restart();
setTimeout(function() {
tl.restart()
trigger = true;
},timetext);
}
});
//keyboard slider navigation
$(document).keyup(function(event){
if(event.which=='37' && elementInViewport(slider.get(0)) && trigger ) {
trigger = false;
setTimeout(function() {
prevSlide(slider, sliderControls, pathArray);
},time);
tl2.restart();
setTimeout(function() {
tl.restart()
trigger = true;
},timetext);
} else if( event.which=='39' && elementInViewport(slider.get(0)) && trigger ) {
trigger = false;
setTimeout(function() {
nextSlide(slider, sliderControls, pathArray);
},time);
tl2.restart();
setTimeout(function() {
tl.restart()
trigger = true;
},timetext);
}
});
}
function retrieveVisibleSlide(slider, sliderControls, pathArray) {
return slider.find('.visible');
}
function nextSlide(slider, sliderControls, pathArray ) {
var visibleSlide = retrieveVisibleSlide(slider),
nextSlide = ( visibleSlide.next('li').length > 0 ) ? visibleSlide.next('li') : slider.find('li').eq(0);
updateSlide(visibleSlide, nextSlide, 'next', sliderControls, pathArray);
}
function prevSlide(slider, sliderControls, pathArray ) {
var visibleSlide = retrieveVisibleSlide(slider),
prevSlide = ( visibleSlide.prev('li').length > 0 ) ? visibleSlide.prev('li') : slider.find('li').last();
updateSlide(visibleSlide, prevSlide, 'prev', sliderControls, pathArray);
}
function updateSlide(oldSlide, newSlide, direction, controls, paths) {
if(!animating) {
//don't animate if already animating
animating = true;
var clipPathId = newSlide.find('path').attr('id'),
clipPath = Snap('#'+clipPathId);
if( direction == 'next' ) {
var path1 = paths[0],
path2 = paths[2],
path3 = paths[4];
} else {
var path1 = paths[1],
path2 = paths[3],
path3 = paths[5];
}
updateNavSlide(newSlide, controls);
newSlide.addClass('is-animating');
clipPath.attr('d', path1).animate({'d': path2}, duration, firstCustomMinaAnimation, function(){
clipPath.animate({'d': path3}, duration, secondCustomMinaAnimation, function(){
oldSlide.removeClass('visible');
newSlide.addClass('visible').removeClass('is-animating');
animating = false;
});
});
}
}
function updateNavSlide(actualSlide, controls) {
var position = actualSlide.index();
controls.removeClass('selected').eq(position).addClass('selected');
}
function bezier(x1, y1, x2, y2, epsilon){
//https://github.com/arian/cubic-bezier
var curveX = function(t){
var v = 1 - t;
return 3 * v * v * t * x1 + 3 * v * t * t * x2 + t * t * t;
};
var curveY = function(t){
var v = 1 - t;
return 3 * v * v * t * y1 + 3 * v * t * t * y2 + t * t * t;
};
var derivativeCurveX = function(t){
var v = 1 - t;
return 3 * (2 * (t - 1) * t + v * v) * x1 + 3 * (- t * t * t + 2 * v * t) * x2;
};
return function(t){
var x = t, t0, t1, t2, x2, d2, i;
// First try a few iterations of Newton's method -- normally very fast.
for (t2 = x, i = 0; i < 8; i++){
x2 = curveX(t2) - x;
if (Math.abs(x2) < epsilon) return curveY(t2);
d2 = derivativeCurveX(t2);
if (Math.abs(d2) < 1e-6) break;
t2 = t2 - x2 / d2;
}
t0 = 0, t1 = 1, t2 = x;
if (t2 < t0) return curveY(t0);
if (t2 > t1) return curveY(t1);
// Fallback to the bisection method for reliability.
while (t0 < t1){
x2 = curveX(t2);
if (Math.abs(x2 - x) < epsilon) return curveY(t2);
if (x > x2) t0 = t2;
else t1 = t2;
t2 = (t1 - t0) * .5 + t0;
}
// Failure
return curveY(t2);
};
};
function elementInViewport(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
});
