LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.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;
}
JS
$(document).ready(function() {
	const $cont = $('.cont');
	const $slider = $('.slider');
	const $nav = $('.nav');
	const winW = $(window).width();
	const animSpd = 750; // Change also in CSS
	const distOfLetGo = winW * 0.2;
	let curSlide = 1;
	let animation = false;
	let diff = 0;
	
	// Generating slides
	let arrCities = ['Amsterdam', 'Rome', 'New—York', 'Singapore', 'Prague']; // Change number of slides in CSS also
	let numOfCities = arrCities.length;
	let arrCitiesDivided = [];

	arrCities.map((city) => {
		let length = city.length;
		let letters = Math.floor(length / 4);
		let exp = new RegExp(".{1," + letters + "}", "g");
		
		arrCitiesDivided.push(city.match(exp));
	});
	
	let generateSlide = function(city) {
		let frag1 = $(document.createDocumentFragment());
		let frag2 = $(document.createDocumentFragment());
		const numSlide = arrCities.indexOf(arrCities[city]) + 1;
		const firstLetter = arrCitiesDivided[city][0].charAt(0);

		const $slide =
					$(`
`); const letter = $(`
${firstLetter}
`); for (let i = 0, length = arrCitiesDivided[city].length; i < length; i++) { const text = $(`
${arrCitiesDivided[city][i]}
`); frag1.append(text); } const navSlide = $(``); 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 (let i = 0, length = numOfCities; i < length; i++) { generateSlide(i); } $('.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; let target = +$(this).attr('data-target'); let startX = e.pageX || e.originalEvent.touches[0].pageX; $slider.removeClass('animation'); $(document).on('mousemove touchmove', function(e) { let 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() { let target = +$(this).attr('data-target'); bullets(target); curSlide = target; pagination(1); }); $(document).on('click', '.side-nav', function() { let 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; let delta = e.originalEvent.wheelDelta; if (delta > 0 || e.originalEvent.detail < 0) navigateLeft(); if (delta < 0 || e.originalEvent.detail > 0) navigateRight(); }); });

Description

Doesn't work in IE.
Term
Mon, 11/27/2017 - 21:29

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv