<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="cont">
<div class="slider"></div>
<ul class="nav"></div>
<div data-target='right' class="side-nav side-nav--right"></div>
<div data-target='left' class="side-nav side-nav--left"></div>
</div>
<script>
'use strict';
$(document).ready(function () {
var $cont = $('.cont');
var $slider = $('.slider');
var $nav = $('.nav');
var winW = $(window).width();
var animSpd = 750; // Change also in CSS
var distOfLetGo = winW * 0.2;
var curSlide = 1;
var animation = false;
var diff = 0;
// Generating slides
var arrCities = ['Amsterdam', 'Rome', 'New—York', 'Singapore', 'Prague']; // Change number of slides in CSS also
var numOfCities = arrCities.length;
var arrCitiesDivided = [];
arrCities.map(function (city) {
var length = city.length;
var letters = Math.floor(length / 4);
var exp = new RegExp(".{1," + letters + "}", "g");
arrCitiesDivided.push(city.match(exp));
});
var generateSlide = function generateSlide(city) {
var frag1 = $(document.createDocumentFragment());
var frag2 = $(document.createDocumentFragment());
var numSlide = arrCities.indexOf(arrCities[city]) + 1;
var firstLetter = arrCitiesDivided[city][0].charAt(0);
var $slide = $('<div data-target="' + numSlide + '" class="slide slide--' + numSlide + '">\n\t\t\t\t\t\t\t<div class="slide__darkbg slide--' + numSlide + '__darkbg"></div>\n\t\t\t\t\t\t\t<div class="slide__text-wrapper slide--' + numSlide + '__text-wrapper"></div>\n\t\t\t\t\t\t</div>');
var letter = $('<div class="slide__letter slide--' + numSlide + '__letter">\n\t\t\t\t\t\t\t' + firstLetter + '\n\t\t\t\t\t\t</div>');
for (var i = 0, length = arrCitiesDivided[city].length; i < length; i++) {if (window.CP.shouldStopExecution(1)){break;}
var text = $('<div class="slide__text slide__text--' + (i + 1) + '">\n\t\t\t\t\t\t\t\t' + arrCitiesDivided[city][i] + '\n\t\t\t\t\t\t\t</div>');
frag1.append(text);
}
window.CP.exitedLoop(1);
var navSlide = $('<li data-target="' + numSlide + '" class="nav__slide nav__slide--' + numSlide + '"></li>');
frag2.append(navSlide);
$nav.append(frag2);
$slide.find('.slide--' + numSlide + '__text-wrapper').append(letter).append(frag1);
$slider.append($slide);
if (arrCities[city].length <= 4) {
$('.slide--' + numSlide).find('.slide__text').css("font-size", "12vw");
}
};
for (var i = 0, length = numOfCities; i < length; i++) {if (window.CP.shouldStopExecution(2)){break;}
generateSlide(i);
}
window.CP.exitedLoop(2);
$('.nav__slide--1').addClass('nav-active');
// Navigation
function bullets(dir) {
$('.nav__slide--' + curSlide).removeClass('nav-active');
$('.nav__slide--' + dir).addClass('nav-active');
}
function timeout() {
animation = false;
}
function pagination(direction) {
animation = true;
diff = 0;
$slider.addClass('animation');
$slider.css({
'transform': 'translate3d(-' + (curSlide - direction) * 100 + '%, 0, 0)'
});
$slider.find('.slide__darkbg').css({
'transform': 'translate3d(' + (curSlide - direction) * 50 + '%, 0, 0)'
});
$slider.find('.slide__letter').css({
'transform': 'translate3d(0, 0, 0)'
});
$slider.find('.slide__text').css({
'transform': 'translate3d(0, 0, 0)'
});
}
function navigateRight() {
if (curSlide >= numOfCities) return;
pagination(0);
setTimeout(timeout, animSpd);
bullets(curSlide + 1);
curSlide++;
}
function navigateLeft() {
if (curSlide <= 1) return;
pagination(2);
setTimeout(timeout, animSpd);
bullets(curSlide - 1);
curSlide--;
}
function toDefault() {
pagination(1);
setTimeout(timeout, animSpd);
}
// Events
$(document).on('mousedown touchstart', '.slide', function (e) {
if (animation) return;
var target = +$(this).attr('data-target');
var startX = e.pageX || e.originalEvent.touches[0].pageX;
$slider.removeClass('animation');
$(document).on('mousemove touchmove', function (e) {
var x = e.pageX || e.originalEvent.touches[0].pageX;
diff = startX - x;
if (target === 1 && diff < 0 || target === numOfCities && diff > 0) return;
$slider.css({
'transform': 'translate3d(-' + ((curSlide - 1) * 100 + diff / 30) + '%, 0, 0)'
});
$slider.find('.slide__darkbg').css({
'transform': 'translate3d(' + ((curSlide - 1) * 50 + diff / 60) + '%, 0, 0)'
});
$slider.find('.slide__letter').css({
'transform': 'translate3d(' + diff / 60 + 'vw, 0, 0)'
});
$slider.find('.slide__text').css({
'transform': 'translate3d(' + diff / 15 + 'px, 0, 0)'
});
});
});
$(document).on('mouseup touchend', function (e) {
$(document).off('mousemove touchmove');
if (animation) return;
if (diff >= distOfLetGo) {
navigateRight();
} else if (diff <= -distOfLetGo) {
navigateLeft();
} else {
toDefault();
}
});
$(document).on('click', '.nav__slide:not(.nav-active)', function () {
var target = +$(this).attr('data-target');
bullets(target);
curSlide = target;
pagination(1);
});
$(document).on('click', '.side-nav', function () {
var target = $(this).attr('data-target');
if (target === 'right') navigateRight();
if (target === 'left') navigateLeft();
});
$(document).on('keydown', function (e) {
if (e.which === 39) navigateRight();
if (e.which === 37) navigateLeft();
});
$(document).on('mousewheel DOMMouseScroll', function (e) {
if (animation) return;
var delta = e.originalEvent.wheelDelta;
if (delta > 0 || e.originalEvent.detail < 0) navigateLeft();
if (delta < 0 || e.originalEvent.detail > 0) navigateRight();
});
});
</script>
.cont {
position: relative;
height: 100vh;
overflow: hidden;
}
.slider {
position: relative;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: transform;
cursor: all-scroll;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slider.animation {
-webkit-transition: -webkit-transform 750ms ease-in-out;
transition: -webkit-transform 750ms ease-in-out;
transition: transform 750ms ease-in-out;
transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
}
.slider.animation .slide__darkbg {
-webkit-transition: -webkit-transform 750ms ease-in-out;
transition: -webkit-transform 750ms ease-in-out;
transition: transform 750ms ease-in-out;
transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
}
.slider.animation .slide__text {
-webkit-transition: -webkit-transform 750ms ease-in-out;
transition: -webkit-transform 750ms ease-in-out;
transition: transform 750ms ease-in-out;
transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
}
.slider.animation .slide__letter {
-webkit-transition: -webkit-transform 750ms ease-in-out;
transition: -webkit-transform 750ms ease-in-out;
transition: transform 750ms ease-in-out;
transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
}
.slide {
position: absolute;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.slide--1 {
left: 0%;
}
.slide--2 {
left: 100%;
}
.slide--3 {
left: 200%;
}
.slide--4 {
left: 300%;
}
.slide--5 {
left: 400%;
}
.slide__darkbg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: transform;
z-index: 10;
}
.slide__text-wrapper {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
z-index: 15;
}
.slide__letter {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-text-fill-color: transparent !important;
-webkit-background-clip: text !important;
font-size: 50vw;
font-weight: 800;
color: #000;
z-index: 2;
will-change: transform;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slide__text {
font-size: 8vw;
font-weight: 800;
text-transform: uppercase;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
letter-spacing: 12px;
color: #fff;
will-change: transform;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slide__text:nth-child(odd) {
z-index: 2;
}
.slide__text:nth-child(even) {
z-index: 1;
}
.slide--1__darkbg {
left: 0%;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--1-min-min.jpg") center center no-repeat;
background-size: cover;
background-position: 0px center, 0px center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: transform;
}
.slide--1__darkbg:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(11, 15, 39, 0.83);
}
.slide--1__letter {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--1-min-min.jpg") center center no-repeat;
background-position: 0px center, 0px center;
background-size: cover;
}
.slide--2__darkbg {
left: -50%;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--2-min-min.jpg") center center no-repeat;
background-size: cover;
background-position: 0px center, 0px center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: transform;
}
.slide--2__darkbg:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(11, 15, 39, 0.83);
}
.slide--2__letter {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--2-min-min.jpg") center center no-repeat;
background-position: 0px center, 0px center;
background-size: cover;
}
.slide--3__darkbg {
left: -100%;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--3-min-min.jpg") center center no-repeat;
background-size: cover;
background-position: 0px center, 0px center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: transform;
}
.slide--3__darkbg:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(11, 15, 39, 0.83);
}
.slide--3__letter {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--3-min-min.jpg") center center no-repeat;
background-position: 0px center, 0px center;
background-size: cover;
}
.slide--4__darkbg {
left: -150%;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg") center center no-repeat;
background-size: cover;
background-position: 0px center, 0px center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: transform;
}
.slide--4__darkbg:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(11, 15, 39, 0.83);
}
.slide--4__letter {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg") center center no-repeat;
background-position: 0px center, 0px center;
background-size: cover;
}
.slide--5__darkbg {
left: -200%;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg") center center no-repeat;
background-size: cover;
background-position: 0px center, 0px center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: transform;
}
.slide--5__darkbg:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(11, 15, 39, 0.83);
}
.slide--5__letter {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg") center center no-repeat;
background-position: 0px center, 0px center;
background-size: cover;
}
.nav {
position: absolute;
bottom: 25px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
list-style-type: none;
z-index: 10;
}
.nav__slide {
position: relative;
display: inline-block;
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #fff;
margin-left: 10px;
cursor: pointer;
}
@media screen and (max-width: 400px) {
.nav__slide {
width: 22px;
height: 22px;
}
}
.nav__slide:hover:after {
-webkit-transform: translate(-50%, -50%) scale(1, 1);
transform: translate(-50%, -50%) scale(1, 1);
opacity: 1;
}
.nav__slide:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) scale(0, 0);
transform: translate(-50%, -50%) scale(0, 0);
width: 75%;
height: 75%;
border-radius: 50%;
background-color: #fff;
opacity: 0;
-webkit-transition: 300ms;
transition: 300ms;
}
.nav__slide--1 {
margin-left: 0;
}
.nav-active:after {
-webkit-transform: translate(-50%, -50%) scale(1, 1);
transform: translate(-50%, -50%) scale(1, 1);
opacity: 1;
}
.side-nav {
position: absolute;
width: 10%;
height: 100%;
top: 0;
z-index: 20;
cursor: pointer;
opacity: 0;
-webkit-transition: 300ms;
transition: 300ms;
}
.side-nav:hover {
opacity: .1;
}
.side-nav--right {
right: 0;
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
}
.side-nav--left {
left: 0;
background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
}
html {
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
background-color: #000;
overflow: hidden;
}
