Fullscreen slideshow ('-' * 20) Based on http://www.hellothierry.com/
Don't forget to click menu.
A Pen by Nikolay Talanov on CodePen.
Fullscreen slideshow ('-' * 20) Based on http://www.hellothierry.com/
Don't forget to click menu.
A Pen by Nikolay Talanov on CodePen.
<div class="scene"> | |
<div class="content"> | |
<div class="back"> | |
<div class="back__bg back__bg-1 active"></div> | |
<div class="back__bg back__bg-2"></div> | |
<div class="back__bg back__bg-3"></div> | |
<div class="back__bg back__bg-4"></div> | |
</div> | |
<div class="front"> | |
<div class="front__bg front__bg-1 active"></div> | |
<div class="front__bg front__bg-2"></div> | |
<div class="front__bg front__bg-3"></div> | |
<div class="front__bg front__bg-4"></div> | |
</div> | |
<div class="nav"> | |
<div data-page="1" class="nav__el nav__el-1"> | |
Why i'm not here? | |
<div class="nav__el-clone"> | |
<div class="nav__el nav__el-1">Why i'm not here?</div> | |
</div> | |
</div> | |
<div data-page="2" class="nav__el nav__el-2"> | |
Where am i? | |
<div class="nav__el-clone"> | |
<div class="nav__el nav__el-2">Where am i?</div> | |
</div> | |
</div> | |
<div data-page="3" class="nav__el nav__el-3"> | |
This place is cool | |
<div class="nav__el-clone"> | |
<div class="nav__el nav__el-3">This place is cool</div> | |
</div> | |
</div> | |
<div data-page="4" class="nav__el nav__el-4"> | |
Cold and beautiful | |
<div class="nav__el-clone"> | |
<div class="nav__el nav__el-4">Cold and beautiful</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="menu"> | |
<div class="menu__btn"> | |
<div class="menu__btn-inner"> | |
<span class="menu__btn-line"></span> | |
<span class="menu__btn-line"></span> | |
<span class="menu__btn-line"></span> | |
</div> | |
</div> | |
<div class="menu__block"> | |
<div class="menu__block-bg"></div> | |
<svg class="menu__block-svg"> | |
<path class="menu__block-svgPath" /> | |
</svg> | |
</div> | |
<h1 class="menu__heading">I'll try to recreate awesome slider in next demos</h1> | |
</div> | |
</div> |
$(document).ready(function() { | |
var $scene = $(".scene"), | |
$content = $(".content"), | |
$back = $(".back"), | |
$backBgs = $(".back__bg"), | |
$front = $(".front"), | |
$frontBgs = $(".front__bg"), | |
$menuBlock = $(".menu__block"), | |
$svgPath = $(".menu__block-svgPath"), | |
animating = false, | |
menuActive = false, | |
menuAnimTime = 600, | |
blockAnimTime = 1500, | |
$sliderCont = $(".menu-slider__content"), | |
curSlide = 1, | |
sliderXDiff = 0, | |
curPage = 1, | |
nextPage = 0, | |
numOfPages = $(".front__bg").length, | |
scaleTime = 500, | |
transTime = 500, | |
totalTime = scaleTime + transTime, | |
changeTimeout, | |
timeoutTime = 8000, | |
winW = $(window).width(), | |
winH = $(window).height(); | |
// init nav element timeout animation | |
$(".nav__el-1").addClass("active"); | |
//default debounce function from David Walsh blog | |
function debounce(func, wait, immediate) { | |
var timeout; | |
return function() { | |
var context = this, args = arguments; | |
var later = function() { | |
timeout = null; | |
if (!immediate) func.apply(context, args); | |
}; | |
var callNow = immediate && !timeout; | |
clearTimeout(timeout); | |
timeout = setTimeout(later, wait); | |
if (callNow) func.apply(context, args); | |
}; | |
}; | |
function changePages() { | |
$(".back__bg, .front__bg, .nav__el").removeClass("active"); | |
$(".nav__el-"+curPage).addClass("active"); | |
$back.css("transform", "translate3d(0,"+(curPage-1)*-100+"%,0)"); | |
$front.css("transform", "translate3d(0,"+(curPage-1)*100+"%,0)"); | |
createTimeout(); | |
setTimeout(function() { | |
$(".back__bg-"+curPage+", .front__bg-"+curPage).addClass("active"); | |
}, totalTime); | |
}; | |
$(document).on("click", ".nav__el:not(.active)", function() { | |
curPage = $(this).attr("data-page"); | |
changePages(); | |
}); | |
// ugly hack for animation reset when you coming back from menu section | |
function resetTimeoutAnimation() { | |
var $activeNavEl = $(".nav__el.active"), | |
$activeParts = $activeNavEl.find(".nav__el-clone, .nav__el") | |
$activeParts.addClass("instant"); | |
$activeNavEl.removeClass("active"); | |
$activeParts.css("top"); | |
$activeParts.removeClass("instant"); | |
$activeParts.css("top"); | |
$activeNavEl.addClass("active"); | |
} | |
/* creates timeOut for change of slides. | |
Call's itself from inside of changePages() function | |
*/ | |
function createTimeout() { | |
window.clearTimeout(changeTimeout); | |
resetTimeoutAnimation(); | |
changeTimeout = setTimeout(function() { | |
if (curPage >= numOfPages) { | |
curPage = 1; | |
} else { | |
curPage++; | |
} | |
changePages(); | |
}, timeoutTime); | |
}; | |
createTimeout(); | |
/* creates path D attribute strings for animation | |
initial d = fullScreen | |
mid d = Q curves with 5% padding | |
final d = centered 90% width/height block | |
*/ | |
function createD(type) { | |
var types = {"init": ["M0,0", | |
"Q"+winW/2+",0", | |
winW+",0", | |
"Q"+winW+","+winH/2, | |
winW+","+winH, | |
"Q"+winW/2+","+winH, | |
"0,"+winH, | |
"Q0,"+winH/2, | |
"0,0"], | |
"mid": ["M0,0", | |
"Q"+winW/2+","+winH*0.05, | |
winW+",0", | |
"Q"+winW*0.95+","+winH/2, | |
winW+","+winH, | |
"Q"+winW/2+","+winH*0.95, | |
"0,"+winH, | |
"Q"+winW*0.05+","+winH/2, | |
"0,0"], | |
"final": ["M"+winW*0.05+","+winH*0.05, | |
"Q"+winW/2+","+winH*0.05, | |
winW*0.95+","+winH*0.05, | |
"Q"+winW*0.95+","+winH/2, | |
winW*0.95+","+winH*0.95, | |
"Q"+winW/2+","+winH*0.95, | |
winW*0.05+","+winH*0.95, | |
"Q"+winW*0.05+","+winH/2, | |
winW*0.05+","+winH*0.05]}; | |
return types[type].join(" "); | |
} | |
// animates path d with SnapSVG | |
function animateBlock(reverse) { | |
winW = $(window).width(); | |
winH = $(window).height(); | |
var initD = createD("init"), | |
midD = createD("mid"), | |
finalD = createD("final"); | |
if (!reverse) { | |
$svgPath.attr("d", initD); | |
Snap($svgPath[0]).animate({"path": midD}, blockAnimTime/2, mina.elastic, function() { | |
Snap($svgPath[0]).animate({"path": finalD}, blockAnimTime/2, mina.elastic); | |
}); | |
} else { | |
Snap($svgPath[0]).animate({"path": midD}, blockAnimTime/2, mina.elastic, function() { | |
Snap($svgPath[0]).animate({"path": initD}, blockAnimTime/2, mina.elastic); | |
}); | |
} | |
}; | |
// resizes opened menu path d block, because i can't change viewBox with js | |
var resizeSvg = debounce(function() { | |
winW = $(window).width(); | |
winH = $(window).height(); | |
$svgPath.attr("d", createD("final")); | |
}, 50); | |
// default madness | |
$(document).on("click", ".menu__btn", function() { | |
if (animating) return; | |
animating = true; | |
setTimeout(function() { | |
animating = false; | |
}, blockAnimTime + menuAnimTime); | |
if (!menuActive) { | |
menuActive = true; | |
window.clearTimeout(changeTimeout); | |
$content.addClass("inactive"); | |
$scene.addClass("menu-visible"); | |
$(".back__bg:not(.active)").addClass("hidden"); | |
$(window).on("resize", resizeSvg); | |
setTimeout(function() { | |
$menuBlock.addClass("visible"); | |
animateBlock(); | |
}, menuAnimTime); | |
} else { | |
menuActive = false; | |
animateBlock(true); | |
setTimeout(function() { | |
$menuBlock.removeClass("visible"); | |
createTimeout(); | |
$(".back__bg").removeClass("hidden"); | |
$content.removeClass("inactive"); | |
$scene.removeClass("menu-visible"); | |
}, blockAnimTime); | |
$(window).off("resize"); | |
} | |
}); | |
}); |
@import "compass/css3"; | |
*, *:before, *:after { | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
} | |
html, body { | |
font-size: 62.5%; | |
height: 100%; | |
overflow: hidden; | |
} | |
$openSans: 'Open Sans', Helvetica, Arial, sans-serif; | |
$bg1: 'http://i.imgur.com/653n5b8.jpg'; | |
$bg2: 'http://i.imgur.com/sgd4qub.jpg'; | |
$bg3: 'http://i.imgur.com/j9u7AY4.jpg'; | |
$bg4: 'http://i.imgur.com/KruZmzA.jpg'; | |
$bg5: 'http://i.imgur.com/3pu2X8D.jpg'; | |
$elN: 4; | |
$timeoutDelay: 2s; | |
$timeoutTime: 6s; | |
.instant { | |
transition: 0 0 !important; | |
} | |
.scene { | |
position: relative; | |
height: 100%; | |
background: #fff; | |
transition: transform 0.5s; | |
will-change: transform; | |
&.menu-visible { | |
.menu__btn { | |
background: #000; | |
color: #000; | |
&:after { | |
transform: scale(1.5) !important; | |
} | |
} | |
.menu__heading { | |
opacity: 1; | |
transition: opacity 0.5s 1.7s; | |
} | |
} | |
} | |
.content { | |
position: relative; | |
height: 100%; | |
transition: transform 0.6s, opacity 0.4s 0.1s; | |
will-change: transform, opacity; | |
&.inactive { | |
opacity: 0; | |
transform: scale(0.9); | |
} | |
} | |
.back, | |
.front { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
transition: transform 0.5s 0.5s; | |
will-change: transform; | |
&__bg { | |
position: absolute; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-size: cover; | |
transition: transform 0.5s; | |
will-change: transform; | |
&-1 { | |
background-image: url(#{$bg1}); | |
} | |
&-2 { | |
background-image: url(#{$bg2}); | |
} | |
&-3 { | |
background-image: url(#{$bg3}); | |
} | |
&-4 { | |
background-image: url(#{$bg4}); | |
} | |
} | |
} | |
.back__bg { | |
&.hidden { | |
display: none; | |
} | |
&:after { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: rgba(0,0,0,0.5); | |
} | |
@for $i from 1 through $elN { | |
&-#{$i} { | |
top: ($i - 1) * 100%; | |
} | |
} | |
} | |
.front__bg { | |
transform: scale(0.8); | |
&.active { | |
transform: scale(1); | |
} | |
&:after { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: rgba(0,0,0,0.25); | |
} | |
@for $i from 0 through $elN { | |
&-#{$i} { | |
top: ($i - 1) * -100%; | |
} | |
} | |
} | |
.nav { | |
position: absolute; | |
left: 0; | |
bottom: 20%; | |
width: 100%; | |
text-align: center; | |
&__el { | |
display: inline-block; | |
position: relative; | |
font-size: 2.5rem; | |
height: 3.5rem; | |
text-transform: uppercase; | |
color: rgba(255,255,255,.5); | |
font-family: $openSans; | |
margin: 1rem 2rem; | |
padding-left: 1.5rem; | |
cursor: pointer; | |
overflow: hidden; | |
&-clone { | |
position: absolute; | |
top: 0; | |
left: 0; | |
overflow: hidden; | |
transition: transform 0.5s; | |
will-change: transform; | |
transform: translateX(-100%); | |
> div { | |
margin: 0; | |
color: #fff; | |
transition: transform 0.5s; | |
will-change: transform; | |
transform: translateX(100%); | |
} | |
} | |
&.active { | |
&:after { | |
transform: scale(1); | |
} | |
.nav__el-clone { | |
transform: scale(1); | |
transition: transform $timeoutTime $timeoutDelay; | |
.nav__el { | |
transform: scale(1); | |
transition: transform $timeoutTime $timeoutDelay; | |
} | |
} | |
} | |
&:before { | |
position: absolute; | |
top: 50%; | |
margin-top: -1rem; | |
left: -0.3rem; | |
font-size: 1.5rem; | |
transform: rotate(-90deg); | |
} | |
&:after { | |
content: ""; | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
width: 100%; | |
height: 1px; | |
background: #fff; | |
transition: transform 1.5s; | |
transform: scale(0); | |
} | |
@for $i from 1 through $elN { | |
&-#{$i}:before { | |
content: "0" + $i; | |
} | |
} | |
} | |
} | |
.menu { | |
&__btn { | |
z-index: 5; | |
position: absolute; | |
top: 5%; | |
right: 5%; | |
width: 5.2rem; | |
height: 5.2rem; | |
border: 2px solid; | |
color: #fff; | |
overflow: hidden; | |
cursor: pointer; | |
transition: background-color 0.5s; | |
&:hover { | |
&:after { | |
transform: scale(1); | |
} | |
.menu__btn-line { | |
@for $i from 1 through 3 { | |
&:nth-child(#{$i}) { | |
animation: animateMenuBtn 0.7s ($i - 1)*0.2s; | |
} | |
} | |
} | |
} | |
&:after { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
border: 0.5rem solid #fff; | |
transition: transform 0.6s; | |
will-change: transform; | |
transform: scale(1.5); | |
} | |
&-inner { | |
position: absolute; | |
top: 1.6rem; | |
left: 1.2rem; | |
width: 2.4rem; | |
height: 1.6rem; | |
overflow: hidden; | |
} | |
&-line { | |
position: absolute; | |
left: 0; | |
width: 100%; | |
height: 2px; | |
background: #fff; | |
&:nth-child(1) { | |
top: 0; | |
} | |
&:nth-child(2) { | |
top: 0.7rem; | |
} | |
&:nth-child(3) { | |
top: 1.4rem; | |
} | |
} | |
} | |
&__block { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
display: none; | |
text-align: center; | |
&.visible { | |
display: block; | |
} | |
&-bg { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-size: cover; | |
background-image: url(#{$bg5}); | |
} | |
&-svg { | |
overflow: visible; | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
&Path { | |
fill: #fff; | |
} | |
} | |
} | |
&__heading { | |
position: absolute; | |
max-width: 60rem; | |
top: 50%; | |
left: 50%; | |
transform: translateX(-50%) translateY(-50%); | |
font-size: 4rem; | |
color: #000; | |
text-transform: uppercase; | |
opacity: 0; | |
transition: opacity 0.3s; | |
text-align: center; | |
} | |
} | |
@keyframes animateMenuBtn { | |
49.9% { | |
transform: translateX(100%); | |
} | |
50% { | |
transform: translateX(-100%); | |
} | |
100% { | |
transform: translateX(0); | |
} | |
} |