<div id="slideshow-container" class="slideshow-container">
<div class="slides-styler-wrapper">
<div id="slides-container" class="slides-container">
<div class="slide">
<div class="image-container layer1">
<div class="image image1" style="background-image: url(https://raw.githubusercontent.com/RaduBratan/CodePen-TweenMax-slider-assets/master/CUUB%20PNK.png);"></div>
</div>
<span class="text layer2 color1">CUBE X2</span>
<div class="image-container layer3">
<div class="image image2" style="background-image: url(https://raw.githubusercontent.com/RaduBratan/CodePen-TweenMax-slider-assets/master/CUUB%20PNK.png);"></div>
</div>
</div>
<div class="slide">
<span class="text layer1 color2">CUBE</span>
<div class="image-container layer2">
<div class="image" style="background-image: url(https://raw.githubusercontent.com/RaduBratan/CodePen-TweenMax-slider-assets/master/CUUB%20PNK.png);"></div>
</div>
</div>
<div class="slide">
<div class="image-container layer1">
<div class="image image1" style="background-image: url(https://raw.githubusercontent.com/RaduBratan/CodePen-TweenMax-slider-assets/master/SPHEER%20PNK.png);"></div>
</div>
<span class="text layer2 color1">SPHERE X2</span>
<div class="image-container layer3">
<div class="image image2" style="background-image: url(https://raw.githubusercontent.com/RaduBratan/CodePen-TweenMax-slider-assets/master/SPHEER%20PNK.png);"></div>
</div>
</div>
<div class="slide">
<span class="text layer1 color2">SPHERE</span>
<div class="image-container layer2">
<div class="image" style="background-image: url(https://raw.githubusercontent.com/RaduBratan/CodePen-TweenMax-slider-assets/master/SPHEER%20PNK.png);"></div>
</div>
</div>
</div>
</div>
<div id="previous-arrow" class="previous-arrow"></div>
<div id="next-arrow" class="next-arrow"></div>
</div>
//if the render preview is broken (i.e. animations don't work properly or nothing moves when scrolling), reload the page
@import url("https://fonts.googleapis.com/css?family=Poppins");
$slider-width: 100vw;
$slider-height: 100vh;
* {
box-sizing: border-box;
}
body {
height: 100vh;
overflow: hidden;
font-family: "Poppins", sans-serif;
font-weight: 900;
text-align: center;
letter-spacing: 0.15em;
margin: 0;
padding: 0;
background-color: #fff;
user-select: none;
}
.slideshow-container {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
transition: all 0.6s ease;
width: 100%;
height: 100%;
cursor: pointer;
visibility: hidden;
.slides-styler-wrapper {
overflow: hidden;
position: relative;
width: $slider-width;
height: $slider-height;
z-index: 1;
vertical-align: middle;
z-index: 95;
.slides-container {
overflow: hidden;
display: flex;
position: relative;
top: 0;
left: -$slider-width;
width: 1000vw;
z-index: 97;
&.shifting {
transition: left 0.2s ease-in-out;
}
.slide {
width: $slider-width;
height: $slider-height;
cursor: pointer;
transition: all 0.6s;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 98;
.image-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
transform: translate(0%, 0%);
overflow: hidden;
.image {
width: 40vmax;
height: 40vmax;
position: absolute;
background-position: center;
background-size: 90%;
background-repeat: no-repeat;
filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.1));
&.image1 {
width: 15vmax;
height: 15vmax;
transform: translate(80%, 40%);
filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.1));
}
&.image2 {
width: 10vmax;
height: 10vmax;
transform: translate(-150%, -50%) rotate(-45deg);
filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.1));
}
}
}
.layer1 {
z-index: 101;
}
.layer2 {
z-index: 100;
}
.layer3 {
z-index: 99;
}
.text {
font-size: 10vmax;
position: absolute;
transform: translate(0%, 0%);
}
.color1 {
color: #000;
}
.color2 {
color: #fff;
}
}
}
}
.previous-arrow {
transform: translate(-40vw, 0%) rotate(90deg);
transition: background 0.5s;
position: absolute;
width: 4.5vmax;
height: 4.5vmax;
cursor: pointer;
z-index: 101;
opacity: 0.8;
}
.next-arrow {
position: absolute;
transform: translate(40vw, 0%) rotate(-90deg);
transition: background 0.5s;
width: 4.5vmax;
height: 4.5vmax;
cursor: pointer;
z-index: 101;
opacity: 0.8;
}
&.animation-reveal {
pointer-events: none;
.text {
animation: reveal-text 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.image {
animation: reveal-image 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.image1 {
animation: reveal-image1 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.image2 {
animation: reveal-image2 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.previous-arrow {
animation: reveal-arrow 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.next-arrow {
animation: reveal-arrow 1s cubic-bezier(0.77, 0, 0.175, 1);
}
}
&.animation-previous {
pointer-events: none;
.text {
animation: previous-text 0.6s 0.085s;
}
.image {
animation: previous-image 0.6s 0.085s;
}
.image1 {
animation: previous-image1 0.6s 0.085s;
}
.image2 {
animation: previous-image2 0.6s 0.085s;
}
.previous-arrow {
animation: previous-left-arrow 0.6s;
}
.next-arrow {
animation: previous-right-arrow 0.6s;
}
}
&.animation-next {
pointer-events: none;
.text {
animation: next-text 0.6s 0.085s;
}
.image {
animation: next-image 0.6s 0.085s;
}
.image1 {
animation: next-image1 0.6s 0.085s;
}
.image2 {
animation: next-image2 0.6s 0.085s;
}
.previous-arrow {
animation: next-left-arrow 0.6s;
}
.next-arrow {
animation: next-right-arrow 0.6s;
}
}
}
@keyframes reveal-text {
0% {
opacity: 0;
transform: translate(0, 100%);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
@keyframes reveal-image {
0% {
opacity: 0;
transform: translate(0, -100%);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
@keyframes reveal-image1 {
0% {
opacity: 0;
transform: translate(80%, -60%);
}
100% {
opacity: 1;
transform: translate(80%, 40%);
}
}
@keyframes reveal-image2 {
0% {
opacity: 0;
transform: translate(-150%, -150%) rotate(-45deg);
}
100% {
opacity: 1;
transform: translate(-150%, -50%) rotate(-45deg);
}
}
@keyframes reveal-arrow {
0% {
opacity: 0;
}
100% {
opacity: 0.8;
}
}
@keyframes previous-text {
35% {
transform: translate(-3%, 0%);
}
to {
transform: translate(0%, 0%);
}
}
@keyframes previous-image {
25%,
30% {
transform: translate(-6%, 0%);
}
to {
transform: translate(0%, 0%);
}
}
@keyframes previous-image1 {
45%,
50% {
transform: translate(60%, 40%);
}
to {
transform: translate(80%, 40%);
}
}
@keyframes previous-image2 {
25%,
30% {
transform: translate(-180%, -50%) rotate(-45deg);
}
to {
transform: translate(-150%, -50%) rotate(-45deg);
}
}
@keyframes previous-left-arrow {
50% {
transform: translateX(calc(-40vw - 3px)) rotate(90deg);
}
}
@keyframes previous-right-arrow {
50% {
transform: translateX(calc(40vw - 3px)) rotate(-90deg);
}
}
@keyframes next-text {
35% {
transform: translate(3%, 0%);
}
to {
transform: translate(0%, 0%);
}
}
@keyframes next-image {
25%,
30% {
transform: translate(6%, 0%);
}
to {
transform: translate(0%, 0%);
}
}
@keyframes next-image1 {
45%,
50% {
transform: translate(100%, 40%);
}
to {
transform: translate(80%, 40%);
}
}
@keyframes next-image2 {
25%,
30% {
transform: translate(-120%, -50%) rotate(-45deg);
}
to {
transform: translate(-150%, -50%) rotate(-45deg);
}
}
@keyframes next-left-arrow {
50% {
transform: translateX(calc(-40vw + 3px)) rotate(90deg);
}
}
@keyframes next-right-arrow {
50% {
transform: translateX(calc(40vw + 3px)) rotate(-90deg);
}
}
View Compiled
var slideshow_container = document.getElementById("slideshow-container"),
slides_container = document.getElementById("slides-container"),
previous_arrow = document.getElementById("previous-arrow"),
next_arrow = document.getElementById("next-arrow");
$(document).ready(function () {
slideshow_container.classList.add("animation-reveal");
$(".text").css("opacity", "0");
$(".image").css("opacity", "0");
$(".image1").css("opacity", "0");
$(".image2").css("opacity", "0");
$(".previous-arrow").css("opacity", "0");
$(".next-arrow").css("opacity", "0");
$(".slideshow-container").css("visibility", "visible");
setTimeout(() => {
slideshow_container.classList.remove("animation-reveal");
$(".text").css("opacity", "1");
$(".image").css("opacity", "1");
$(".image1").css("opacity", "1");
$(".image2").css("opacity", "1");
$(".previous-arrow").css("opacity", "0.8");
$(".next-arrow").css("opacity", "0.8");
}, 1000);
});
const bg_color_options = ["#88D3CE", "#FF85A1", "#88D3CE", "#FF85A1"];
//const text_color_options = ["#000", "#fff", "#000", "#fff"];
const arrow_color_options = [
"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23000'%3E%3C/polygon%3E%3C/svg%3E",
"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23fff'%3E%3C/polygon%3E%3C/svg%3E",
"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23000'%3E%3C/polygon%3E%3C/svg%3E",
"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23fff'%3E%3C/polygon%3E%3C/svg%3E"
];
var k = 0;
function slide(
slideshow_container,
slides_container,
previous_arrow,
next_arrow
) {
var posX1 = 0,
posX2 = 0,
posInitial,
posFinal,
threshold = 100,
slides = slides_container.getElementsByClassName("slide"),
slidesLength = slides.length,
slideSize = slides_container.getElementsByClassName("slide")[0].offsetWidth,
firstSlide = slides[0],
lastSlide = slides[slidesLength - 1],
cloneFirst = firstSlide.cloneNode(true),
cloneLast = lastSlide.cloneNode(true),
index = 0,
allowShift = true;
slides_container.appendChild(cloneFirst);
slides_container.insertBefore(cloneLast, firstSlide);
slideshow_container.classList.add("loaded");
slides_container.onmousedown = dragStart;
slides_container.addEventListener("touchstart", dragStart);
slides_container.addEventListener("touchend", dragEnd);
slides_container.addEventListener("touchmove", dragAction);
slideshow_container.style.background = bg_color_options[k];
$(".previous-arrow").css(
"background-image",
'url("' + arrow_color_options[k] + '")'
);
$(".next-arrow").css(
"background-image",
'url("' + arrow_color_options[k] + '")'
);
//$(".text").css("color", text_color_options[k]);
previous_arrow.addEventListener("click", function () {
shiftSlide(-1);
mouse.moved = false;
slideshow_container.classList.add("animation-next");
setTimeout(() => {
slideshow_container.classList.remove("animation-next");
}, 650);
if (k === 0) {
k = bg_color_options.length;
}
k = k - 1;
slideshow_container.style.background = bg_color_options[k];
$(".previous-arrow").css(
"background-image",
'url("' + arrow_color_options[k] + '")'
);
$(".next-arrow").css(
"background-image",
'url("' + arrow_color_options[k] + '")'
);
//$(".text").css("color", text_color_options[k]);
});
next_arrow.addEventListener("click", function () {
shiftSlide(1);
mouse.moved = false;
slideshow_container.classList.add("animation-previous");
setTimeout(() => {
slideshow_container.classList.remove("animation-previous");
}, 650);
k = k + 1;
k = k % bg_color_options.length;
slideshow_container.style.background = bg_color_options[k];
$(".previous-arrow").css(
"background-image",
'url("' + arrow_color_options[k] + '")'
);
$(".next-arrow").css(
"background-image",
'url("' + arrow_color_options[k] + '")'
);
//$(".text").css("color", text_color_options[k]);
});
slides_container.addEventListener("transitionend", checkIndex);
function dragStart(e) {
e = e || window.event;
e.preventDefault();
posInitial = slides_container.offsetLeft;
if (e.type == "touchstart") {
posX1 = e.touches[0].clientX;
} else {
posX1 = e.clientX;
document.onmouseup = dragEnd;
document.onmousemove = dragAction;
}
}
function dragAction(e) {
e = e || window.event;
if (e.type == "touchmove") {
posX2 = posX1 - e.touches[0].clientX;
posX1 = e.touches[0].clientX;
} else {
posX2 = posX1 - e.clientX;
posX1 = e.clientX;
}
slides_container.style.left = slides_container.offsetLeft - posX2 + "px";
}
function dragEnd(e) {
posFinal = slides_container.offsetLeft;
if (posFinal - posInitial < -threshold) {
shiftSlide(1, "drag");
slideshow_container.classList.add("animation-previous");
setTimeout(() => {
slideshow_container.classList.remove("animation-previous");
}, 650);
k = k + 1;
k = k % bg_color_options.length;
slideshow_container.style.background = bg_color_options[k];
$(".previous-arrow").css(
"background-image",
'url("' + arrow_color_options[k] + '")'
);
$(".next-arrow").css(
"background-image",
'url("' + arrow_color_options[k] + '")'
);
//$(".text").css("color", text_color_options[k]);
} else if (posFinal - posInitial > threshold) {
shiftSlide(-1, "drag");
slideshow_container.classList.add("animation-next");
setTimeout(() => {
slideshow_container.classList.remove("animation-next");
}, 650);
if (k === 0) {
k = bg_color_options.length;
}
k = k - 1;
slideshow_container.style.background = bg_color_options[k];
$(".previous-arrow").css(
"background-image",
'url("' + arrow_color_options[k] + '")'
);
$(".next-arrow").css(
"background-image",
'url("' + arrow_color_options[k] + '")'
);
//$(".text").css("color", text_color_options[k]);
} else {
slides_container.style.left = posInitial + "px";
}
document.onmouseup = null;
document.onmousemove = null;
}
function shiftSlide(direction, action) {
slides_container.classList.add("shifting");
if (allowShift) {
if (!action) {
posInitial = slides_container.offsetLeft;
}
if (direction == 1) {
slides_container.style.left = posInitial - slideSize + "px";
index++;
} else if (direction == -1) {
slides_container.style.left = posInitial + slideSize + "px";
index--;
}
}
allowShift = false;
}
function checkIndex() {
slides_container.classList.remove("shifting");
if (index == -1) {
slides_container.style.left = -(slidesLength * slideSize) + "px";
index = slidesLength - 1;
}
if (index == slidesLength) {
slides_container.style.left = -(1 * slideSize) + "px";
index = 0;
}
allowShift = true;
}
}
slide(slideshow_container, slides_container, previous_arrow, next_arrow);
//---___---___---___---___---___---___---___---___---//
var slideshow_parameters = $(".slideshow-container")[0].getBoundingClientRect();
var mouse = { x: 0, y: 0, moved: false };
$(".slideshow-container").mousemove(function (e) {
mouse.moved = true;
mouse.x = e.clientX - slideshow_parameters.left;
mouse.y = e.clientY - slideshow_parameters.top;
});
$(".slideshow-container").mouseleave(function (e) {
mouse.moved = false;
mouse.x = e.clientX - slideshow_parameters.left;
mouse.y = e.clientY - slideshow_parameters.top;
});
TweenLite.ticker.addEventListener("tick", function () {
if (mouse.moved) {
parallaxIt(".image-container", 25);
parallaxIt(".text", -65);
} else if (!mouse.moved) {
parallaxIt(".image-container", 0);
parallaxIt(".text", 0);
}
});
function parallaxIt(target, movement) {
TweenMax.to(target, 0.7, {
x:
((mouse.x - slideshow_parameters.width / 2) /
slideshow_parameters.width /
2) *
movement,
y:
((mouse.y - slideshow_parameters.height / 2) /
slideshow_parameters.height /
2) *
movement
});
}
$(window).on("resize scroll", function () {
slideshow_parameters = $(".slideshow-container")[0].getBoundingClientRect();
});
This Pen doesn't use any external CSS resources.