<div class="scene">
<div class="img-cont left cont-1" data-helper="0" data-blocks="1"></div>
<div class="img-cont right cont-1" data-helper="0" data-blocks="1"></div>
<div class="content cont-1">
<h2 class="title">Page 1 Content</h2>
<p class="content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, soluta, incidunt. Recusandae veritatis quam quos quaerat molestiae rem officiis blanditiis, nulla sed, corporis, sunt eveniet earum sapiente officia possimus eligendi.</p>
<span class="close">+</span>
</div>
<div class="img-cont left cont-2" data-helper="-1" data-blocks="2"></div>
<div class="img-cont right cont-2" data-helper="1" data-blocks="2"></div>
<div class="content cont-2">
<h2 class="title">Page 2 Content</h2>
<p class="content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, soluta, incidunt. Recusandae veritatis quam quos quaerat molestiae rem officiis blanditiis, nulla sed, corporis, sunt eveniet earum sapiente officia possimus eligendi.</p>
<span class="close">+</span>
</div>
<div class="img-cont left cont-3" data-helper="-2" data-blocks="3"></div>
<div class="img-cont right cont-3" data-helper="2" data-blocks="3"></div>
<div class="content cont-3">
<h2 class="title">Page 3 Content</h2>
<p class="content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, soluta, incidunt. Recusandae veritatis quam quos quaerat molestiae rem officiis blanditiis, nulla sed, corporis, sunt eveniet earum sapiente officia possimus eligendi.</p>
<span class="close">+</span>
</div>
<div class="img-cont left cont-4" data-helper="-3" data-blocks="4"></div>
<div class="img-cont right cont-4" data-helper="3" data-blocks="4"></div>
<div class="content cont-4">
<h2 class="title">Page 4 Content</h2>
<p class="content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, soluta, incidunt. Recusandae veritatis quam quos quaerat molestiae rem officiis blanditiis, nulla sed, corporis, sunt eveniet earum sapiente officia possimus eligendi.</p>
<span class="close">+</span>
</div>
<!-- end of content -->
<h1 class="heading">SCROLL</h1>
<p class="scroll-down">scroll down</p>
<p class="click-blocks">click blocks</p>
<div class="pagination">
<ul class="page-names">
<li class="active" data-page="1">Page 1</li>
<li data-page="2">Page 2</li>
<li data-page="3">Page 3</li>
<li data-page="4">Page 4</li>
</ul>
<ul class="page-dots">
<li class="active" data-page="1">•</li>
<li data-page="2">•</li>
<li data-page="3">•</li>
<li data-page="4">•</li>
</ul>
</div>
</div>
<p class="check-out">Check out my other <a href="https://codepen.io/suez/public/" target="_blank">pens</a></p>
@import "compass/css3";
@font-face {
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PT_Sans-Web-Bold.ttf);
font-family: ptsans-bold;
}
@font-face {
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFSquareSansPro-Regular.otf);
font-family: pfs-regular;
}
@font-face {
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFSquareSansPro-Medium.otf);
font-family: pfs-medium;
}
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
-webkit-font-smoothing: antialiased;
}
.scene {
height: 100%;
&.active {
.heading,
.scroll-down,
.click-blocks,
.pagination {
opacity: 0;
z-index: -100;
}
.heading {
transform: translateX(-50%) translateY(-50%) scale(0.5);
}
.scroll-down {
transform: rotate(-90deg) scale(0.5);
}
.click-blocks {
transform: rotate(-90deg) scale(0.5);
}
.pagination {
transform: translateX(-50%) translateY(-50%) scale(0.5);
}
.img-cont.active {
margin-top: -10vh !important; // god forgive me
width: 50vw;
height: 100vh;
transition: margin 0.3s, width 0.3s, height 0.3s;
z-index: 500;
&.left {
margin-left: -50vw;
}
&.right {
margin-left: 0;
}
}
}
}
.heading {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 100;
font-size: 5vw;
font-family: ptsans-bold;
color: #ce2312;
opacity: 0.7;
transition: opacity 0.3s, transform 0.3s;
will-change: opacity, transform;
}
.scroll-down {
position: absolute;
bottom: 13%;
left: 50%;
transform-origin: 0% 50%;
transform: rotate(-90deg);
font-family: pfs-regular;
font-size: 1.3vmax;
transition: opacity 0.3s, transform 0.3s;
will-change: opacity, transform;
z-index: 100;
}
.click-blocks {
position: absolute;
top: 23%;
left: 50%;
transform-origin: 0% 50%;
transform: rotate(-90deg);
font-family: pfs-regular;
font-size: 1.3vmax;
transition: opacity 0.3s, transform 0.3s, color 0.3s;
will-change: opacity, transform;
z-index: 100;
}
.pagination {
position: absolute;
left: 50%;
top: 95%;
transform: translateX(-50%) translateY(-50%);
transition: opacity 0.3s, transform 0.3s;
will-change: opacity, transform;
z-index: 100;
.page-names {
text-align: center;
margin-bottom: 1vh;
font-size: 1.2vw;
li {
display: none;
will-change: opacity;
font-family: ptsans-bold;
&.active {
display: block;
}
}
}
.page-dots {
text-align: center;
li {
margin: 0.3vw;
float: left;
cursor: pointer;
color: #cfcfcf;
&.active {
color: #020202;
}
}
}
}
.img-cont {
height: 80vh;
width: 35vw;
position: absolute;
top: 10vh;
left: 50%;
background-size: cover;
transition: margin 1s cubic-bezier(0.99,0.1,0.35,1.2);
will-change: margin;
z-index: 10;
&.closing {
transition: margin 0.3s, width 0.3s, height 0.3s;
}
&:not(.active) {
cursor: pointer;
&:hover ~ .click-blocks {
color: #ce2312;
}
}
&.left {
margin-left: calc(-35vw - 50px);
}
&.right {
margin-left: 50px;
}
&.cont-1 {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/2side-pagi-1.jpg') 50% 50% no-repeat fixed;
}
&.cont-2 {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/2side-pagi-2.jpg') 50% 50% no-repeat fixed;
}
&.cont-3 {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/2side-pagi-3.jpg') 50% 50% no-repeat fixed;
}
&.cont-4 {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/2side-pagi-4.jpg') 50% 50% no-repeat fixed;
}
@for $i from 2 through 10 {
&.cont-#{$i} {
&.left {
margin-top: -100vh * ($i - 1);
}
&.right {
margin-top: 100vh * ($i - 1);
}
}
}
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background: rgba(0,0,0, 0.5);
padding: 2rem;
overflow-x: hidden;
overflow-y: auto;
color: #f9bdbb;
z-index: 2000;
&.visible {
opacity: 1;
.title {
transform: translateX(0);
}
.content-text {
transform: scale(1);
opacity: 1;
}
.close {
transform: rotate(45deg);
}
}
.title {
font-size: 4rem;
text-transform: uppercase;
font-family: pfs-medium;
transition: transform 0.5s 0.1s;
transform: translateX(-115%);
}
.content-text {
font-family: pfs-medium;
font-size: 2rem;
transition: transform 0.5s 0.2s, opacity 0.3s 0.2s;
transform-origin: 50% 80%;
transform: scale(0.3);
opacity: 0;
}
.close {
position: absolute;
top: -0.5rem;
right: 1rem;
font-family: metropolis, sans-serif;
font-size: 4rem;
color: #fff;
transform: rotate(45deg) translateY(-5rem);
cursor: pointer;
transition: transform 0.5s 0.3s cubic-bezier(0.45, 0.25, 0.7, 1.8), color 0.3s;
&:hover {
color: #FF524C;
}
}
}
.check-out {
position: absolute;
z-index: 1;
bottom: 1rem;
right: 1rem;
font-family: pfs-regular;
}
View Compiled
$(document).ready(function() {
var scrolling = false,
curPage = 1,
pages = $(".img-cont").length / 2,
$left = $(".img-cont.left"),
$right = $(".img-cont.right");
function doMargins(paramPage) {
scrolling = true;
var _page = paramPage || curPage;
$left.each(function() {
var marginMult = parseInt($(this).attr("data-helper"), 10) + _page - 1;
$(this).attr("style", "margin-top: "+ marginMult * 100 +"vh");
});
$right.each(function() {
var marginMult = parseInt($(this).attr("data-helper"), 10) - _page + 1;
$(this).attr("style", "margin-top: "+ marginMult * 100 +"vh");
});
setTimeout(function() {
scrolling = false;
}, 1000);
}
function navigateUp() {
if (curPage > 1) {
curPage--;
pagination(curPage);
doMargins();
}
}
function navigateDown() {
if (curPage < pages) {
curPage++;
pagination(curPage);
doMargins();
}
}
function pagination(page) {
$(".page-dots li").removeClass("active");
$(".page-dots li[data-page="+ page +"]").addClass("active");
$(".page-names li").removeClass("active");
$(".page-names li[data-page="+page+"]").addClass("active");
curPage = page;
}
$(document).on("click", ".page-dots li", function() {
if (!scrolling) {
var page = parseInt($(this).attr("data-page"), 10);
pagination(page);
doMargins(page);
}
});
function openContent() {
var number = $(this).attr("data-blocks");
$(".scene").addClass("active");
setTimeout(function() {
$(".img-cont.cont-"+number).addClass("active");
$(document).off("click", ".img-cont", openContent);
$(document).unbind("keydown mousewheel DOMMouseScroll");
setTimeout(function() {
$(".content.cont-"+number).show();
$(".content.cont-"+number).css("top");
$(".content.cont-"+number).addClass("visible");
}, 300);
}, 300);
}
function initHandlers() {
$(document).on("mousewheel DOMMouseScroll", function(e) {
if (!scrolling) {
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
}
});
$(document).on("keydown", function(e) {
if (!scrolling) {
if (e.which === 38) {
navigateUp();
} else if (e.which === 40) {
navigateDown();
}
}
});
$(document).on("click", ".img-cont:not(.active)", openContent);
}
initHandlers();
$(document).on("click", ".close", function() {
scrolling = true;
var $content = $(this).parent();
$content.removeClass("visible");
setTimeout(function() {
$content.hide();
$content.css('top');
$(".img-cont").removeClass("active").addClass("closing");
setTimeout(function() {
$(".scene").removeClass("active");
initHandlers();
setTimeout(function() {
$(".img-cont").removeClass("closing");
scrolling = false;
}, 300);
}, 300);
}, 800);
});
});
This Pen doesn't use any external CSS resources.