<div class="blog-slider">  <div class="blog-slider__wrp swiper-wrapper">    <div class="blog-slider__item swiper-slide">      <div class="blog-slider__img">                <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1535759872/kuldar-kalvik-799168-unsplash.webp" alt="">      </div>      <div class="blog-slider__content">        <span class="blog-slider__code">26 December 2019</span>        <div class="blog-slider__title">Lorem Ipsum Dolor</div>        <div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi? </div>        <a href="#" class="blog-slider__button">READ MORE</a>      </div>    </div>    <div class="blog-slider__item swiper-slide">      <div class="blog-slider__img">        <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1535759871/jason-leung-798979-unsplash.webp" alt="">      </div>      <div class="blog-slider__content">        <span class="blog-slider__code">26 December 2019</span>        <div class="blog-slider__title">Lorem Ipsum Dolor2</div>        <div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>        <a href="#" class="blog-slider__button">READ MORE</a>      </div>    </div>        <div class="blog-slider__item swiper-slide">      <div class="blog-slider__img">        <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1535759871/alessandro-capuzzi-799180-unsplash.webp" alt="">      </div>      <div class="blog-slider__content">        <span class="blog-slider__code">26 December 2019</span>        <div class="blog-slider__title">Lorem Ipsum Dolor</div>        <div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>        <a href="#" class="blog-slider__button">READ MORE</a>      </div>    </div>      </div>  <div class="blog-slider__pagination"></div> </div>

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800'); * { box-sizing: border-box; }
body { background-color: #FFE53B; background-image: linear-gradient(147deg, #FFE53B 0%, #fd3838 74%); min-height: 100vh; font-family: 'Fira Sans', sans-serif; display: flex; }
.blog-slider { width: 95%; position: relative; max-width: 800px; margin: auto; background: #fff; box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2); padding: 25px; border-radius: 25px; height: 400px; transition: all .3s; @media screen and (max-width: 992px) { max-width: 680px; height: 400px; } @media screen and (max-width: 768px) { min-height: 500px; height: auto; margin: 180px auto; } @media screen and (max-height: 500px) and (min-width: 992px) { height: 350px; } &__item { display: flex; align-items: center; @media screen and (max-width: 768px) { flex-direction: column; } &.swiper-slide-active { .blog-slider__img { img { opacity: 1; transition-delay: .3s; } } .blog-slider__content { > * { opacity: 1; transform: none; @for $i from 0 to 15 { &:nth-child(#{$i + 1}) { transition-delay: $i * 0.1 + 0.3s; } } } } } } &__img { // width: 40%; width: 300px; flex-shrink: 0; height: 300px; background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%); box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2); border-radius: 20px; transform: translateX(-80px); overflow: hidden; &:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%); border-radius: 20px; opacity: 0.8; } img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; border-radius: 20px; transition: all .3s; } @media screen and (max-width: 992px) { // width: 45%; } @media screen and (max-width: 768px) { transform: translateY(-50%); width: 90%; } @media screen and (max-width: 576px) { width: 95%; } @media screen and (max-height: 500px) and (min-width: 992px) { height: 270px; } } &__content { // width: 60%; padding-right: 25px; @media screen and (max-width: 992px) { // width: 55%; } @media screen and (max-width: 768px) { margin-top: -80px; text-align: center; padding: 0 30px; } @media screen and (max-width: 576px) { padding: 0 } > * { opacity: 0; transform: translateY(25px); transition: all .4s; } } &__code { color: #7b7992; margin-bottom: 15px; display: block; font-weight: 500; } &__title { font-size: 24px; font-weight: 700; color: #0d0925; margin-bottom: 20px; } &__text { color: #4e4a67; margin-bottom: 30px; line-height: 1.5em; } &__button { display: inline-flex; background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%); padding: 15px 35px; border-radius: 50px; color: #fff; box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4); text-decoration: none; font-weight: 500; justify-content: center; text-align: center; letter-spacing: 1px; @media screen and (max-width: 576px) { width: 100%; } } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%; } &__pagination { position: absolute; z-index: 21; right: 20px; width: 11px!important; text-align: center; left: auto!important; top: 50%; bottom: auto!important; transform: translateY(-50%); @media screen and (max-width: 768px) { transform: translateX(-50%); left: 50%!important; top: 205px; width: 100%!important; display: flex; justify-content: center; align-items: center; } &.swiper-pagination-bullets .swiper-pagination-bullet { margin: 8px 0; @media screen and (max-width: 768px) { margin: 0 5px; } } .swiper-pagination-bullet { width: 11px; height: 11px; display: block; border-radius: 10px; background: #062744; opacity: 0.2; transition: all .3s; &-active { opacity: 1; background: #fd3838; height: 30px; box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3); @media screen and (max-width: 768px) { height: 11px; width: 30px; } }
} } }

var swiper = new Swiper('.blog-slider', {      spaceBetween: 30,      effect: 'fade',      loop: true,      mousewheel: {        invert: false,      },      // autoHeight: true,      pagination: {        el: '.blog-slider__pagination',        clickable: true,      }    });

<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>

$bgClr: rgba(#0b0f27, .83); $txtClr: #fff; $animSpd: 750 * 1ms; // Change also in JS
$numOfSlides: 5; // Add new city in the array in JS and a new image below
$bgPics: ( url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--1-min-min.jpg') center center no-repeat, url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--2-min-min.jpg') center center no-repeat, url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--3-min-min.jpg') center center no-repeat, url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg') center center no-repeat, url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg') center center no-repeat );
@mixin mediaMaxW($width) { @media screen and (max-width: $width) { @content; } }
.cont { position: relative; height: 100vh; overflow: hidden; }
.slider { position: relative; height: 100%; transform: translate3d(0, 0, 0); will-change: transform; cursor: all-scroll; user-select: none;
&.animation { transition: transform $animSpd ease-in-out;
.slide__darkbg { transition: transform $animSpd ease-in-out; } .slide__text { transition: transform $animSpd ease-in-out; } .slide__letter { transition: transform $animSpd ease-in-out; } } }
.slide { position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden;
@for $i from 1 through $numOfSlides { &--#{$i} { left: 100% * ($i - 1); } }
&__darkbg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform: translate3d(0, 0, 0); will-change: transform; z-index: 10; }
&__text-wrapper { position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; z-index: 15; }
&__letter { position: absolute; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; transform: translate3d(0, 0, 0); -webkit-text-fill-color: transparent !important; -webkit-background-clip: text !important; font: { size: 50vw;; weight: 800; } color: #000; z-index: 2; will-change: transform; user-select: none; }
&__text { font: { size: 8vw; weight: 800; } text-transform: uppercase; transform: translate3d(0, 0, 0); letter-spacing: 12px; color: $txtClr; will-change: transform; user-select: none; } &__text:nth-child(odd) { z-index: 2; } &__text:nth-child(even) { z-index: 1; } @each $item in $bgPics { $i: index($bgPics, $item); &--#{$i} { &__darkbg { left: -50% * ($i - 1); background: $item; background-size: cover; background-position: 0px center, 0px center; transform: translate3d(0, 0, 0); will-change: transform; &:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: $bgClr; } } &__letter { background: $item; background-position: 0px center, 0px center; background-size: cover; } } } }
.nav { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); list-style-type: none; z-index: 10;
&__slide { position: relative; display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; margin-left: 10px; cursor: pointer; @include mediaMaxW(400px) { width: 22px; height: 22px; } &:hover:after { transform: translate(-50%, -50%) scale(1,1); opacity: 1; } &:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0,0); width: 75%; height: 75%; border-radius: 50%; background-color: #fff; opacity: 0; transition: 300ms; } &--1 { margin-left: 0; } } }
.nav-active { &:after { 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; transition: 300ms;
&:hover { opacity: .1; }
&--right { right: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(238, 215, 255) 100%); } &--left { left: 0; background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgb(238, 215, 255) 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; }

$(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 autoScrollVar = true; 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 = $(`<div data-target="${numSlide}" class="slide slide--${numSlide}"> <div class="slide__darkbg slide--${numSlide}__darkbg"></div> <div class="slide__text-wrapper slide--${numSlide}__text-wrapper"></div> </div>`);
const letter = $(`<div class="slide__letter slide--${numSlide}__letter"> ${firstLetter} </div>`);
for (let i = 0, length = arrCitiesDivided[city].length; i < length; i++) { const text = $(`<div class="slide__text slide__text--${i + 1}"> ${arrCitiesDivided[city][i]} </div>`); frag1.append(text); }
const 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 (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 (!autoScrollVar) return; 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(); }); });

<body class="loading">

[COLOR=#553982]<!-- add karla font -->[/COLOR]
[COLOR=#553982]<header> <div class="inner"> <div class="logo"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123024/wwf-logo.png"></div> <div class="burger"></div> <nav> <a class="active" href="#">Species</a> <a href="#">About Us</a> <a href="#">Our Work</a> <a href="#">Get Involved</a> </nav> <a href="#" class="donate-link">Donate</a> </div> </header>[/COLOR]
[COLOR=#553982]<main> <div id="slider">[/COLOR]
[COLOR=#553982]<div class="slider-inner"> <div id="slider-content"> <div class="meta">Species</div> <h2 id="slide-title">Amur <br>Leopard</h2> <span data-slide-title="0">Amur <br>Leopard</span> <span data-slide-title="1">Asiatic <br>Lion</span> <span data-slide-title="2">Siberian <br>Tiger</span> <span data-slide-title="3">Brown <br>Bear</span> <div class="meta">Status</div> <div id="slide-status">Critically Endangered</div> <span data-slide-status="0">Critically Endangered</span> <span data-slide-status="1">Endangered</span> <span data-slide-status="2">Endangered</span> <span data-slide-status="3">Least Concern</span> </div> </div>[/COLOR]
[COLOR=#553982]<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123024/leopard2.jpg" /> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123024/lion2.jpg" /> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123024/tiger2.jpg" /> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123024/bear2.jpg" />[/COLOR]
[COLOR=#553982]<div id="pagination"> <button class="active" data-slide="0"></button> <button data-slide="1"></button> <button data-slide="2"></button> <button data-slide="3"></button> </div>[/COLOR]
[COLOR=#553982]</div> </main> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-40525870-5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-40525870-5'); </script>[/COLOR]
[COLOR=#553982]</body>[/COLOR]

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} *, *::after, *::before { box-sizing: border-box; }

[COLOR=#553982]::selection { background-color: grey; color: white; }[/COLOR]
[COLOR=#553982]::-moz-selection { background-color: grey; color: white; }[/COLOR]
[COLOR=#553982]@import url("https://use.typekit.net/euz1eqv.css");[/COLOR]
[COLOR=#553982]html { background: #fff; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }[/COLOR]
[COLOR=#553982]body { background-color: #23272A; overflow: hidden; }[/COLOR]
[COLOR=#553982]header { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 115px; z-index: 10; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/123024/menutexture.png); background-position: center top; background-size: auto 200px; background-repeat: repeat-x;[/COLOR]
[COLOR=#553982].inner { max-width: 1060px; margin: 0 auto; display: flex; height: 70px; align-items: center; justify-content: center; position: relative; }[/COLOR]
[COLOR=#553982].logo { display: block; width: 76px; height: 90px; position: absolute; top: 0; left: 0; background-color: white; text-align: center;[/COLOR]
[COLOR=#553982]img { width: 45px; margin-top: 10px; } }[/COLOR]
[COLOR=#553982]nav { display: none;[/COLOR]
[COLOR=#553982]a { font-family: 'Arial', serif; font-size: 12px; color: #8c8c8e; text-transform: uppercase; letter-spacing: 3px; text-decoration: none; margin: 0 18px;[/COLOR]
[COLOR=#553982]&.active, &:hover { color: white; } }[/COLOR]
[COLOR=#553982]@media screen and (min-width: 800px) { display: block; } }[/COLOR]
[COLOR=#553982].burger { display: block; position: relative; top: -6px; padding-left: 30px;[/COLOR]
[COLOR=#553982]&:before { content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 2px; background: white; box-shadow: 0 12px 0 0 white, 0 6px 0 0 white; }[/COLOR]
[COLOR=#553982]@media screen and (min-width: 800px) { display: none; } }[/COLOR]
[COLOR=#553982].donate-link { width: 72px; text-align: center; position: absolute; right: 10px; top: 27px; font-family: 'Arial', sans-serif; font-size: 12px; color: white; text-transform: uppercase; letter-spacing: 3px; text-decoration: none; padding-bottom: 6px; border-bottom: 2px solid rgba(255, 255, 255, 0.3); } }[/COLOR]
[COLOR=#553982]main { position: relative; width: 100%; height: 100vh; }[/COLOR]
[COLOR=#553982]#slider { width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; position: relative;[/COLOR]
[COLOR=#553982]canvas { width: 150%; height: 150%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }[/COLOR]
[COLOR=#553982]img { width: 100%; max-width: 100%; position: relative; z-index: 0; } }[/COLOR]
[COLOR=#553982].slider-inner { position: relative; display: flex; align-items: center; width: 100%; max-width: 1060px; height: 100%; margin: 0 auto; z-index: 5; }[/COLOR]
[COLOR=#553982]#slider-content { padding: 0 10px;[/COLOR]
[COLOR=#553982]h2 { font-family: 'acta-display', serif; font-weight: 400; font-size: 30px; letter-spacing: -1px; color: white; line-height: 30px; margin: 20px 0 60px;[/COLOR]
[COLOR=#553982]@media screen and (min-width: 800px) { font-size: 110px; line-height: 100px; } }[/COLOR]
[COLOR=#553982]span { display: none; }[/COLOR]
[COLOR=#553982].meta { display: inline-block; font-family: 'Arial', sans-serif; font-size: 11px; letter-spacing: 5px; color: #88888a; text-transform: uppercase; position: relative;[/COLOR]
[COLOR=#553982]@media screen and (min-width: 800px) { font-size: 13px; }[/COLOR]
[COLOR=#553982]&:after { content: ''; display: block; position: absolute; top: 5px; right: -55px; width: 45px; height: 2px; background-color: #393d40; } }[/COLOR]
[COLOR=#553982]#slide-status { margin-top: 10px; font-family: 'acta-display', serif; font-weight: 400; font-size: 18px; color: white;[/COLOR]
[COLOR=#553982]@media screen and (min-width: 800px) { font-size: 34px; } } }[/COLOR]
[COLOR=#553982]#pagination { position: absolute; top: 50%; transform: translateY(-50%); right: 30px; z-index: 6;[/COLOR]
[COLOR=#553982]button { display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; width: 16px; height: 16px; background-color: #FFFFFF; border-radius: 100%; padding: 0; margin: 30px 0; cursor: pointer; position: relative; opacity: 0.2; transition: opacity 0.2s ease-in-out; outline: none;[/COLOR]
[COLOR=#553982]&:hover { opacity: 0.5; }[/COLOR]
[COLOR=#553982]&.active { opacity: 1;[/COLOR]
[COLOR=#553982]&:before { width: 300%; height: 300%; opacity: 1; } }[/COLOR]
[COLOR=#553982]&:before { content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 100%; border: 1px solid rgba(255, 255, 255, 0.2); opacity: 0; transition: opacity 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out; } } }[/COLOR]
[COLOR=#553982]/* Page Loader */ .loading {[/COLOR]
[COLOR=#553982]&:before { content: ''; position: fixed; z-index: 100000; top: 0; left: 0; width: 100%; height: 100%; background: black; }[/COLOR]
[COLOR=#553982]&:after { content: ''; position: fixed; z-index: 100000; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; pointer-events: none; border-radius: 50%; opacity: 0.4; background: white; animation: loaderAnim 0.7s linear infinite alternate forwards; } }[/COLOR]
[COLOR=#553982]@keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5,0.5,1); } }[/COLOR]

const displacementSlider = function(opts) { let vertex = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } `; let fragment = ` varying vec2 vUv; uniform sampler2D currentImage; uniform sampler2D nextImage; uniform float dispFactor; void main() { vec2 uv = vUv; vec4 _currentImage; vec4 _nextImage; float intensity = 0.3; vec4 orig1 = texture2D(currentImage, uv); vec4 orig2 = texture2D(nextImage, uv); _currentImage = texture2D(currentImage, vec2(uv.x, uv.y + dispFactor * (orig2 * intensity))); _nextImage = texture2D(nextImage, vec2(uv.x, uv.y + (1.0 - dispFactor) * (orig1 * intensity))); vec4 finalTexture = mix(_currentImage, _nextImage, dispFactor); gl_FragColor = finalTexture; } `; let images = opts.images, image, sliderImages = [];; let canvasWidth = images[0].clientWidth; let canvasHeight = images[0].clientHeight; let parent = opts.parent; let renderWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); let renderHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); let renderW, renderH; if( renderWidth > canvasWidth ) { renderW = renderWidth; } else { renderW = canvasWidth; } renderH = canvasHeight; let renderer = new THREE.WebGLRenderer({ antialias: false, }); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setClearColor( 0x23272A, 1.0 ); renderer.setSize( renderW, renderH ); parent.appendChild( renderer.domElement ); let loader = new THREE.TextureLoader(); loader.crossOrigin = "anonymous"; images.forEach( ( img ) => { image = loader.load( img.getAttribute( 'src' ) + '?v=' + Date.now() ); image.magFilter = image.minFilter = THREE.LinearFilter; image.anisotropy = renderer.capabilities.getMaxAnisotropy(); sliderImages.push( image ); }); let scene = new THREE.Scene(); scene.background = new THREE.Color( 0x23272A ); let camera = new THREE.OrthographicCamera( renderWidth / -2, renderWidth / 2, renderHeight / 2, renderHeight / -2, 1, 1000 ); camera.position.z = 1; let mat = new THREE.ShaderMaterial({ uniforms: { dispFactor: { type: "f", value: 0.0 }, currentImage: { type: "t", value: sliderImages[0] }, nextImage: { type: "t", value: sliderImages[1] }, }, vertexShader: vertex, fragmentShader: fragment, transparent: true, opacity: 1.0 }); let geometry = new THREE.PlaneBufferGeometry( parent.offsetWidth, parent.offsetHeight, 1 ); let object = new THREE.Mesh(geometry, mat); object.position.set(0, 0, 0); scene.add(object); let addEvents = function(){ let pagButtons = Array.from(document.getElementById('pagination').querySelectorAll('button')); let isAnimating = false; pagButtons.forEach( (el) => { el.addEventListener('click', function() { if( !isAnimating ) { isAnimating = true; document.getElementById('pagination').querySelectorAll('.active')[0].className = ''; this.className = 'active'; let slideId = parseInt( this.dataset.slide, 10 ); mat.uniforms.nextImage.value = sliderImages[slideId]; mat.uniforms.nextImage.needsUpdate = true; TweenLite.to( mat.uniforms.dispFactor, 1, { value: 1, ease: 'Expo.easeInOut', onComplete: function () { mat.uniforms.currentImage.value = sliderImages[slideId]; mat.uniforms.currentImage.needsUpdate = true; mat.uniforms.dispFactor.value = 0.0; isAnimating = false; } }); let slideTitleEl = document.getElementById('slide-title'); let slideStatusEl = document.getElementById('slide-status'); let nextSlideTitle = document.querySelectorAll(`[data-slide-title="${slideId}"]`)[0].innerHTML; let nextSlideStatus = document.querySelectorAll(`[data-slide-status="${slideId}"]`)[0].innerHTML; TweenLite.fromTo( slideTitleEl, 0.5, { autoAlpha: 1, y: 0 }, { autoAlpha: 0, y: 20, ease: 'Expo.easeIn', onComplete: function () { slideTitleEl.innerHTML = nextSlideTitle; TweenLite.to( slideTitleEl, 0.5, { autoAlpha: 1, y: 0, }) } }); TweenLite.fromTo( slideStatusEl, 0.5, { autoAlpha: 1, y: 0 }, { autoAlpha: 0, y: 20, ease: 'Expo.easeIn', onComplete: function () { slideStatusEl.innerHTML = nextSlideStatus; TweenLite.to( slideStatusEl, 0.5, { autoAlpha: 1, y: 0, delay: 0.1, }) } }); } }); }); }; addEvents(); window.addEventListener( 'resize' , function(e) { renderer.setSize(renderW, renderH); }); let animate = function() { requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); };

[COLOR=#553982]imagesLoaded( document.querySelectorAll('img'), () => { document.body.classList.remove('loading'); const el = document.getElementById('slider'); const imgs = Array.from(el.querySelectorAll('img')); new displacementSlider({ parent: el, images: imgs });[/COLOR]
[COLOR=#553982]});[/COLOR]