<div class="con">
<div class="con__slide con__slide--1">
<div class="con__slide-top con__slide--1-top active-slide-left-top">
<div class='con__slide-top-inner con__slide--1-top-inner'>
<div class='con__slide-top-inner-text con__slide--1-top-inner-text active-slide1-top-text'>
<h1 class='con__slide-h con__slide--1-top-h'>some nice slider<br> here wow</h1>
</div>
</div>
</div>
<!-- slide--1 top end -->
<div class="con__slide-bot con__slide--1-bot active-slide-left-bot">
<div class='con__slide-bot-text con__slide--1-bot-text active-slide1-bot-text'>
<h1 class='con__slide-h con__slide--1-bot-h'>some nice slider<br> here wow</h1>
</div>
</div>
<!-- slide--1 bot end -->
<div class="con__slide-content con__slide--1-content active-slide-left-content">
<svg class='con__slide--1-content-logo' version="1" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 600.000000 600.000000"><path d="M280.5 13.6c-19 1.9-25.9 2.9-38.5 5.4-73.3 14.6-139.2 59.2-181.4 122.8-24.5 36.8-40.2 79.8-45.8 125.2-1.6 13.5-1.6 51.5 0 65 5.6 45.4 21.3 88.4 45.8 125.2 47.1 70.9 121.3 116.5 206.4 127 5.8.7 20.4 1.3 32.5 1.3 12.1 0 26.7-.6 32.5-1.3 115.7-14.2 209.7-93.7 242.6-205.1 3.8-12.9 7.7-31.8 9.6-47.1 1.6-13.5 1.6-51.4 0-65-5.6-45.4-21.3-88.4-45.8-125.2-46.2-69.6-118.6-115-201.5-126.3-10.9-1.5-48.1-2.7-56.4-1.9zm39 47.4c63.6 5.9 120.7 35.1 161.2 82.4 33.4 39.1 52.5 84.4 57.3 136.1 4.2 45.6-6.5 95.6-29 135.7-29.5 52.4-75.8 91.3-131.5 110.5-72.2 24.8-149.5 14.4-213.1-28.8-30.3-20.6-55.7-48.5-74.4-81.7-22.5-40.1-33.2-90.1-29-135.7 6.2-67.1 37.6-125.6 90-167.5 46.5-37.4 109.5-56.4 168.5-51z"/><path d="M295 123.3c-1.9.7-40.7 26.1-86.2 56.5-64.5 43-83.1 55.9-84.5 58.4-1.7 3.1-1.8 7.5-1.8 61.3 0 53.9.1 58.2 1.8 61.3 1.4 2.5 20.1 15.5 85.5 59.1 49.2 32.8 85.1 56 87 56.4 1.9.4 4.9.1 7-.6 2-.7 40.9-26.1 86.4-56.5 64.5-43 83.1-55.9 84.5-58.4 1.7-3.1 1.8-7.5 1.8-61.3 0-53.9-.1-58.2-1.8-61.3-1.4-2.5-20.1-15.5-85.8-59.2-46.1-30.8-84.5-56-85.2-56-.6 0-2.1-.2-3.2-.5s-3.6.1-5.5.8zm-11 78.9l-.1 35.3-32.8 21.8-32.9 21.9-26.6-17.8-26.6-17.7 58.7-39.3c32.4-21.6 59.1-39.3 59.6-39.3.4-.1.7 15.8.7 35.1zm91 4.1l59 39.4-26.6 17.7-26.6 17.8-32.9-21.9-32.8-21.8-.1-35.3c0-19.3.2-35.2.5-35.2s27.1 17.7 59.5 39.3zm-49.2 74.8c14.1 9.4 26 17.5 26.5 17.8 1 1-52.1 36.4-53.6 35.8-3.2-1.4-52.1-34.8-51.8-35.5.5-.9 51.3-35 52.4-35.1.4-.1 12.3 7.6 26.5 17zm-135.2 18.5s-8.5 5.8-18.8 12.8L153 325.1V274l18.9 12.7c10.4 7.1 18.8 12.8 18.7 12.9zm255.4-.1V325l-18.8-12.7-18.8-12.8 18.5-12.7c10.3-6.9 18.7-12.7 18.9-12.7.1-.1.2 11.4.2 25.4zm-194.8 40.2l32.7 21.8.1 35.2c0 19.4-.2 35.3-.5 35.3s-27.1-17.7-59.5-39.3l-59-39.4 26.2-17.6c14.5-9.6 26.5-17.6 26.8-17.6.3-.1 15.2 9.7 33.2 21.6zm156.3-4l26.5 17.6-59 39.4c-32.4 21.6-59.2 39.3-59.5 39.3-.3 0-.5-15.9-.5-35.3l.1-35.2 32.7-21.7c18-12 32.8-21.8 33-21.8.1 0 12.1 7.9 26.7 17.7z"/></svg>
</div>
<!-- slide--1 content end -->
</div>
<!-- slide--1 end -->
<!-- slide 2 -->
<div class="con__slide con__slide--right con__slide--2">
<div class="con__slide-top con__slide--right-top con__slide--2-top active-slide-right-top">
<div class='con__slide-top-inner con__slide--right-top-inner con__slide--2-top-inner'>
<div class='con__slide-top-inner-text con__slide--right-top-inner-text con__slide--2-top-inner-text active-slide2-top-text'>
<h1 class='con__slide-h con__slide--right-top-h con__slide--2-top-h'>another slide<br> such wow</h1>
</div>
</div>
</div>
<!-- slide--2 top end -->
<div class="con__slide-bot con__slide--right-bot con__slide--2-bot active-slide-right-bot">
<div class='con__slide-bot-text con__slide--right-bot-text con__slide--2-bot-text active-slide2-bot-text'>
<h1 class='con__slide-h con__slide--right-bot-h con__slide--2-bot-h'>another slide<br> such wow</h1>
</div>
</div>
<!-- slide--2 bot end -->
<div class="con__slide-content con__slide--right-content con__slide--2-content active-slide-right-content">
<img class='con__slide--right-content-image con__slide--2-content-image' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/doge_snow.png" alt="" />
</div>
<!-- slide--2 content end -->
</div>
<!-- slide--2 end -->
<div class="con__slide con__slide--3">
<div class="con__slide-top con__slide--3-top active-slide-left-top">
<div class='con__slide-top-inner con__slide--3-top-inner'>
<div class='con__slide-top-inner-text con__slide--3-top-inner-text active-slide3-top-text'>
<h1 class='con__slide-h con__slide--3-top-h'>half collored<br> text so nice</h1>
</div>
</div>
</div>
<!-- slide--3 top end -->
<div class="con__slide-bot con__slide--3-bot active-slide-left-bot">
<div class='con__slide-bot-text con__slide--3-bot-text active-slide3-bot-text'>
<h1 class='con__slide-h con__slide--3-bot-h'>half collored<br> text so nice</h1>
</div>
</div>
<!-- slide--3 bot end -->
<div class="con__slide-content con__slide--3-content active-slide-left-content">
<img class='con__slide--right-content-image con__slide--3-content-image' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/butterfly_(1).png" alt="" />
</div>
<!-- slide--3 content end -->
</div>
<!-- slide--3 end -->
<div class="con__slide con__slide--right con__slide--4">
<div class="con__slide-top con__slide--right-top con__slide--4-top active-slide-right-top">
<div class='con__slide-top-inner con__slide--right-top-inner con__slide--4-top-inner'>
<div class='con__slide-top-inner-text con__slide--right-top-inner-text con__slide--4-top-inner-text active-slide4-top-text'>
<h1 class='con__slide-h con__slide--right-top-h con__slide--4-top-h'><a class='con__slide--4-top-h-link' href="https://codepen.io/mrspok407/" target="_blank">checkout my<br> other pens</a></h1>
</div>
</div>
</div>
<!-- slide--4 top end -->
<div class="con__slide-bot con__slide--right-bot con__slide--4-bot active-slide-right-bot">
<div class='con__slide-bot-text con__slide--right-bot-text con__slide--4-bot-text active-slide4-bot-text'>
<h1 class='con__slide-h con__slide--right-bot-h con__slide--4-bot-h'><a class='con__slide--4-bot-h-link' href="https://codepen.io/mrspok407/" target="_blank">checkout my<br> other pens</a></h1>
</div>
</div>
<!-- slide--4 bot end -->
<div class="con__slide-content con__slide--right-content con__slide--4-content active-slide-right-content">
<a href="https://twitter.com/mrspok407" target="_blank"><img class='con__slide--right-content-image con__slide--4-content-image' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/twi_(1).png" alt="" /></a>
</div>
<!-- slide--4 content end -->
</div>
<!-- slide--4 end -->
<div class="con__nav">
<div data-target='up' class='con__nav-scroll con__nav-scroll--goup'></div>
<div data-target='down' class='con__nav-scroll con__nav-scroll--godown'></div>
<ul class='con__nav-list'>
<li data-target="1" class='con__nav-item con__nav-item--1 nav-active'></li>
<li data-target="2" class='con__nav-item con__nav-item--2'></li>
<li data-target="3" class='con__nav-item con__nav-item--3'></li>
<li data-target="4" class='con__nav-item con__nav-item--4'></li>
</ul>
</div>
<!-- nav end -->
</div>html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
@mixin mediaMaxH($height) {
@media screen and (max-height: $height) {
@content;
}
}
@mixin mediaMaxW($width) {
@media screen and (max-width: $width) {
@content;
}
}
$bgImage: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/image.jpg') center center no-repeat;
$showDelay: 350ms;
$textShowDelay: $showDelay + 1000ms;
$topSpeed: 650ms;
$bot-TextSpeed: 1000ms;
$contSpeed: 1400ms;
$skewColor: rgba(0, 0, 0, .4);
$slide1TopTextClr: #c43838;
$slide2TopTextClr: #2d48e2;
$slide3TopTextClr: #e0bb28;
$slide4TopTextClr: #3ee84f;
$slideBotTextClr: #fff;
body {
font-family: 'Roboto', sans-serif;
}
.con {
position: relative;
height: 100vh;
background: $bgImage;
background-size: cover;
overflow: hidden;
//////////// Slide General /////////////
&__slide {
position: absolute;
width: 100%;
height: 100%;
left: 0;
&-h {
display: inline-block;
text-align: center;
text-transform: uppercase;
font: {
size: 60px;
}
}
&-top,
&-bot {
position: absolute;
background: $skewColor;
}
&-top {
top: -200px;
left: -835px;
height: 1235px;
width: 550px;
transform: rotate(25deg);
transition: transform $topSpeed $bot-TextSpeed;
&-inner {
position: fixed;
top: -59px;
right: -175px;
width: 100%;
height: 500px;
transform: rotate(20deg);
overflow: hidden;
&-text {
position: absolute;
right: 21px;
top: 649px;
transform: rotate(-45deg);
transition: transform $bot-TextSpeed;
}
}
}
&-bot {
top: -50px;
left: -884px;
width: 700px;
height: 1700px;
transform: rotate(-45deg);
overflow: hidden;
transition: transform $bot-TextSpeed $bot-TextSpeed + 100ms;
&-text {
position: absolute;
right: -440px;
top: 430px;
transform: rotate(45deg);
transition: transform $bot-TextSpeed;
}
}
}
/////////////// Slide 1 //////////////
&__slide--1 {
&-top {
&-h {
text-shadow: 0 0 1px $slide1TopTextClr;
color: $slide1TopTextClr;
}
}
&-bot {
&-h {
text-shadow: 0 0 1px $slideBotTextClr;
color: $slideBotTextClr;
}
}
&-content {
position: absolute;
right: 300px;
top: 50%;
transform: translateY(-55%);
opacity: 0;
transition: transform $bot-TextSpeed, opacity $bot-TextSpeed;
@include mediaMaxW(1350px) {
right: 15%;
}
@include mediaMaxW(1160px) {
right: 5%;
}
&-logo {
fill: #e5e5e5;
@include mediaMaxH(730px) {
width: 300px;
}
@include mediaMaxW(1350px) {
width: 300px;
}
}
}
}
/////////// Slide Right /////////////
&__slide--right {
&-top {
left: initial;
right: -195px;
right: -780px;
transform: rotate(-25deg);
transition: transform $topSpeed $bot-TextSpeed;
&-inner {
top: -31px;
left: -249px;
transform: rotate(-20deg);
overflow: overflow;
&-text {
right: 10px;
top: 620px;
transform: rotate(45deg);
animation: initial;
transition: transform $bot-TextSpeed 0s;
}
}
&-h {
width: 450px;
text-shadow: 0 0 1px $slide2TopTextClr;
color: $slide2TopTextClr;
}
}
&-bot {
left: initial;
right: -84px;
right: -884px;
transform: rotate(45deg);
animation: initial;
overflow: hidden;
transition: transform $bot-TextSpeed $bot-TextSpeed + 100;
&-text {
left: -560px;
top: 150px;
transform: rotate(-45deg);
animation: initial;
transition: transform $bot-TextSpeed 0s;
//transition-delay: 0s;
}
&-h {
text-shadow: 0 0 1px $slideBotTextClr;
color: $slideBotTextClr;
}
}
&-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-95%, -45%);
opacity: 0;
transition: transform $contSpeed 0s, opacity $contSpeed 0s, z-index 0s 2.2s;
z-index: -9999;
&-image {
@include mediaMaxH(730px) {
width: 80%;
}
@include mediaMaxW(1366px) {
width: 80%;
}
}
}
}
////////////// Slide 3 ////////////////
&__slide--3 {
&-top {
&-h {
text-shadow: 0 0 1px $slide3TopTextClr;
color: $slide3TopTextClr;
}
}
&-bot {
&-h {
text-shadow: 0 0 1px $slideBotTextClr;
color: $slideBotTextClr;
}
}
&-content {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-45%);
opacity: 0;
transition: transform $contSpeed 0s, opacity $contSpeed 0s, z-index 0s 2.2s;
@include mediaMaxW(1366px) {
left: 60%;
}
&-image {
width: 500px;
@include mediaMaxH(730px) {
width: 400px;
}
@include mediaMaxW(1366px) {
width: 400px;
}
}
}
}
////////////// Slide 4 ////////////////
&__slide--4 {
&-top {
&-h {
&-link {
position: relative;
text-decoration: none;
text-shadow: 0 0 1px $slide4TopTextClr;
color: $slide4TopTextClr;
}
}
}
&-bot {
&-h {
&-link {
text-decoration: none;
text-shadow: 0 0 1px $slideBotTextClr;
color: $slideBotTextClr;
z-index: 20;
}
}
}
}
//////////////// Nav Sidebar //////////////
&__nav {
position: fixed;
// top: 50%;
// right: 2%;
bottom: 3%;
left: 50%;
transform: translateX(-50%);
&-list {
list-style-type: none;
}
&-item {
display: inline-block;
position: relative;
margin-left: 8px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #e5e5e5;
cursor: pointer;
&:after {
content: ' ';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0, 0);
width: 75%;
height: 75%;
border-radius: 50%;
background: #e5e5e5;
transition: 300ms;
opacity: 0;
overflow: hidden;
}
&:hover:after {
transform: translate(-50%, -50%) scale(1, 1);
opacity: 1;
}
}
&-item--1 {
margin-left: 0;
}
&-scroll {
position: absolute;
top: 1px;
transform: rotate(-45deg);
width: 17px;
height: 17px;
border: 2px solid #e5e5e5;
border-right: transparent;
border-bottom: transparent;
cursor: pointer;
transition: 300ms;
&:hover {
transform: rotate(-45deg) scale(1.2, 1.2);
}
&--goup {
left: -20px;
}
&--godown {
transform: rotate(-225deg);
right: -20px;
&:hover {
transform: rotate(-225deg) scale(1.2, 1.2);
}
}
}
}
}
.nav-active {
&:after {
transform: translate(-50%, -50%) scale(1, 1);
opacity: 1;
}
}
.active {
//////////// Slides Left /////////////
.active-slide-left-top {
transform: translate(640px, 0) rotate(25deg);
transition: transform $topSpeed cubic-bezier(0, 0, 0.21, 1.02);
}
.active-slide-left-bot {
transform: translateX(800px) rotate(-45deg);
transition: transform $bot-TextSpeed $showDelay;
}
.active-slide-left-content {
transform: translateY(-50%);
opacity: 1;
transition: transform $bot-TextSpeed $textShowDelay, opacity $bot-TextSpeed $textShowDelay;
}
///////////// Slides Right /////////////
.active-slide-right-top {
transform: translateX(-585px) rotate(-25deg);
transition: transform $topSpeed;
}
.active-slide-right-bot {
transform: translateX(-800px) rotate(45deg);
transition-delay: $showDelay;
}
.active-slide-right-content {
transform: translate(-95%, -50%);
opacity: 1;
z-index: 10;
transition: transform $contSpeed $textShowDelay, opacity $contSpeed $textShowDelay, z-index 0s 1s;
}
/////////// Slide 1 ////////////
.active-slide1-top-text {
transform: translate(75px, -282px) rotate(-45deg);
transition: transform $bot-TextSpeed $textShowDelay;
}
.active-slide1-bot-text {
transform: translate(-117px, 31px) rotate(45deg);
transition: transform $bot-TextSpeed $textShowDelay;
}
////////////// Slide 2 /////////////
.active-slide2-top-text {
transform: translate(-43px, -219px) rotate(45deg);
transition-delay: $textShowDelay;
}
.active-slide2-bot-text {
transform: translate(127px, -116px) rotate(-45deg);
transition-delay: $textShowDelay;
}
////////////// Slide 3 /////////////
.active-slide3-top-text {
transform: translate(54px, -241px) rotate(-45deg);
transition: transform $bot-TextSpeed $textShowDelay;
}
.active-slide3-bot-text {
transform: translate(-190px, 43px) rotate(45deg);
transition: transform $bot-TextSpeed $textShowDelay;
}
////////////// Slide 4 /////////////
.active-slide4-top-text {
transform: translate(-55px, -231px) rotate(45deg);
transition: transform $bot-TextSpeed $textShowDelay;
}
.active-slide4-bot-text {
transform: translate(127px, -116px) rotate(-45deg);
transition: transform $bot-TextSpeed $textShowDelay;
}
}
$(document).ready(function() {
var $slides = $('.con__slide').length,
topAnimSpd = 650,
textAnimSpd = 1000,
nextSlideSpd = topAnimSpd + textAnimSpd,
animating = true,
animTime = 4000,
curSlide = 1,
nextSlide, scrolledUp;
setTimeout(function() {
animating = false;
}, 2300);
function navigateUp() {
if (curSlide > 1) {
scrolledUp = true;
pagination(curSlide);
curSlide--;
}
}
function navigateDown() {
if (curSlide < $slides) {
scrolledUp = false;
pagination(curSlide);
curSlide++;
console.log(curSlide);
}
}
$(window).on('load', function() {
$('.con__slide--1').addClass('active');
});
function pagination(slide, target) {
animating = true;
// Check if pagination was triggered by scroll/keys/arrows or direct click. If scroll/keys/arrows then check if scrolling was up or down.
if (target === undefined) {
nextSlide = scrolledUp ? slide - 1 : slide + 1;
} else {
nextSlide = target;
}
////////// Slides //////////
$('.con__slide--' + slide).removeClass('active');
setTimeout(function() {
$('.con__slide--' + nextSlide).addClass('active');
}, nextSlideSpd);
////////// Nav //////////
$('.con__nav-item--' + slide).removeClass('nav-active');
$('.con__nav-item--' + nextSlide).addClass('nav-active');
setTimeout(function() {
animating = false;
}, animTime);
}
// Mouse wheel trigger
$(document).on('mousewheel DOMMouseScroll', function(e) {
var delta = e.originalEvent.wheelDelta;
if (animating) return;
// Mouse Up
if (delta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
});
// Direct trigger
$(document).on("click", ".con__nav-item:not(.nav-active)", function() {
// Essential to convert target to a number with +, so curSlide would be a number
var target = +$(this).attr('data-target');
if (animating) return;
pagination(curSlide, target);
curSlide = target;
});
// Arrow trigger
$(document).on('click', '.con__nav-scroll', function() {
var target = $(this).attr('data-target');
if (animating) return;
if (target === 'up') {
navigateUp();
} else {
navigateDown();
}
});
// Key trigger
$(document).on("keydown", function(e) {
if (animating) return;
if (e.which === 38) {
navigateUp();
} else if (e.which === 40) {
navigateDown();
}
});
var topLink = $(".con__slide--4-top-h-link"),
botLink = $(".con__slide--4-bot-h-link");
$(".con__slide--4-top-h-link, .con__slide--4-bot-h-link").on({
mouseenter: function() {
topLink.css('text-decoration', 'underline');
botLink.css('text-decoration', 'underline');
},
mouseleave: function() {
topLink.css('text-decoration', 'none');
botLink.css('text-decoration', 'none');
}
});
});
External CSS
This Pen doesn't use any external CSS resources.