A Pen by Nikolay Talanov on CodePen.
Created
November 8, 2015 10:57
-
-
Save anonymous/f9b0a1457bdb6dab3126 to your computer and use it in GitHub Desktop.
Skewed One Page Scroll
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="skw-pages"> | |
<div class="skw-page skw-page-1 active"> | |
<div class="skw-page__half skw-page__half--left"> | |
<div class="skw-page__skewed"> | |
<div class="skw-page__content"></div> | |
</div> | |
</div> | |
<div class="skw-page__half skw-page__half--right"> | |
<div class="skw-page__skewed"> | |
<div class="skw-page__content"> | |
<h2 class="skw-page__heading">Skewed One Page Scroll</h2> | |
<p class="skw-page__description">Just scroll down</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="skw-page skw-page-2"> | |
<div class="skw-page__half skw-page__half--left"> | |
<div class="skw-page__skewed"> | |
<div class="skw-page__content"> | |
<h2 class="skw-page__heading">Page 2</h2> | |
<p class="skw-page__description">Nothing to do here, continue scrolling.</p> | |
</div> | |
</div> | |
</div> | |
<div class="skw-page__half skw-page__half--right"> | |
<div class="skw-page__skewed"> | |
<div class="skw-page__content"></div> | |
</div> | |
</div> | |
</div> | |
<div class="skw-page skw-page-3"> | |
<div class="skw-page__half skw-page__half--left"> | |
<div class="skw-page__skewed"> | |
<div class="skw-page__content"></div> | |
</div> | |
</div> | |
<div class="skw-page__half skw-page__half--right"> | |
<div class="skw-page__skewed"> | |
<div class="skw-page__content"> | |
<h2 class="skw-page__heading">Page 3</h2> | |
<p class="skw-page__description">The end is near, I promise!</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="skw-page skw-page-4"> | |
<div class="skw-page__half skw-page__half--left"> | |
<div class="skw-page__skewed"> | |
<div class="skw-page__content"> | |
<h2 class="skw-page__heading">Page 4</h2> | |
<p class="skw-page__description">Ok, ok, just one more scroll!</p> | |
</div> | |
</div> | |
</div> | |
<div class="skw-page__half skw-page__half--right"> | |
<div class="skw-page__skewed"> | |
<div class="skw-page__content"></div> | |
</div> | |
</div> | |
</div> | |
<div class="skw-page skw-page-5"> | |
<div class="skw-page__half skw-page__half--left"> | |
<div class="skw-page__skewed"> | |
<div class="skw-page__content"></div> | |
</div> | |
</div> | |
<div class="skw-page__half skw-page__half--right"> | |
<div class="skw-page__skewed"> | |
<div class="skw-page__content"> | |
<h2 class="skw-page__heading">Epic finale</h2> | |
<p class="skw-page__description"> | |
Feel free to check | |
<a class="skw-page__link" href="http://codepen.io/suez/pens/public/" target="_blank">my other pens</a> and follow me on | |
<a class="skw-page__link" href="https://twitter.com/NikolayTalanov" target="_blank">Twitter</a> | |
</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
var curPage = 1; | |
var numOfPages = $(".skw-page").length; | |
var animTime = 1000; | |
var scrolling = false; | |
var pgPrefix = ".skw-page-"; | |
function pagination() { | |
scrolling = true; | |
$(pgPrefix + curPage).removeClass("inactive").addClass("active"); | |
$(pgPrefix + (curPage - 1)).addClass("inactive"); | |
$(pgPrefix + (curPage + 1)).removeClass("active"); | |
setTimeout(function() { | |
scrolling = false; | |
}, animTime); | |
}; | |
function navigateUp() { | |
if (curPage === 1) return; | |
curPage--; | |
pagination(); | |
}; | |
function navigateDown() { | |
if (curPage === numOfPages) return; | |
curPage++; | |
pagination(); | |
}; | |
$(document).on("mousewheel DOMMouseScroll", function(e) { | |
if (scrolling) return; | |
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) { | |
navigateUp(); | |
} else { | |
navigateDown(); | |
} | |
}); | |
$(document).on("keydown", function(e) { | |
if (scrolling) return; | |
if (e.which === 38) { | |
navigateUp(); | |
} else if (e.which === 40) { | |
navigateDown(); | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*, *:before, *:after { | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
} | |
$openSans: 'Open Sans', Helvetica, Arial, sans-serif; | |
body { | |
background: #15181A; | |
font-family: $openSans; | |
} | |
.skw-pages { | |
overflow: hidden; | |
position: relative; | |
height: 100vh; | |
} | |
$skewDeg: 18deg; | |
$magicVH: 32.4vh; // this number is magic and depends on skew angle | |
$scrollTime: 1s; | |
.skw-page { | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
&__half { | |
position: absolute; | |
top: 0; | |
width: 50%; | |
height: 100vh; | |
transition: transform $scrollTime; | |
&--left { | |
left: 0; | |
transform: translate3d(-$magicVH, 100%, 0); | |
} | |
&--right { | |
left: 50%; | |
transform: translate3d($magicVH, -100%, 0); | |
} | |
.skw-page.active & { | |
transform: translate3d(0,0,0); | |
} | |
} | |
&__skewed { | |
overflow: hidden; | |
position: absolute; | |
top: 0; | |
width: 140%; | |
height: 100%; | |
transform: skewX($skewDeg * -1); | |
background: #000; | |
.skw-page__half--left & { | |
left: -40%; | |
} | |
.skw-page__half--right & { | |
right: -40%; | |
} | |
} | |
&__content { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
flex-flow: column wrap; | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
padding: 0 30%; | |
color: #fff; | |
transform: skewX($skewDeg); | |
transition: transform $scrollTime, opacity $scrollTime; | |
background-size: cover; | |
.skw-page__half--left & { | |
padding-left: 30%; | |
padding-right: 30%; | |
transform-origin: 100% 0; | |
} | |
.skw-page__half--right & { | |
padding-left: 30%; | |
padding-right: 30%; | |
transform-origin: 0 100%; | |
} | |
.skw-page.inactive & { | |
opacity: 0.5; | |
transform: skewX($skewDeg) scale(0.95); | |
} | |
} | |
&__heading { | |
margin-bottom: 15px; | |
text-transform: uppercase; | |
font-size: 25px; | |
text-align: center; | |
} | |
&__description { | |
font-size: 18px; | |
text-align: center; | |
} | |
&__link { | |
color: #FFA0A0; | |
} | |
&-1 { | |
.skw-page__half--left .skw-page__content { | |
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/mousover-img-1.jpg'); | |
} | |
.skw-page__half--right .skw-page__content { | |
background: lighten(#1C1C1C, 5%); | |
} | |
} | |
&-2 { | |
.skw-page__half--left .skw-page__content { | |
background: lighten(#1C1C1C, 5%); | |
} | |
.skw-page__half--right .skw-page__content { | |
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/slider-2.jpg'); | |
} | |
} | |
&-3 { | |
.skw-page__half--left .skw-page__content { | |
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/mousover-img-2.jpg'); | |
} | |
.skw-page__half--right .skw-page__content { | |
background: lighten(#1C1C1C, 5%); | |
} | |
} | |
&-4 { | |
.skw-page__half--left .skw-page__content { | |
background: lighten(#1C1C1C, 5%); | |
} | |
.skw-page__half--right .skw-page__content { | |
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-3.jpg'); | |
} | |
} | |
&-5 { | |
.skw-page__half--left .skw-page__content { | |
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/img-test.jpg'); | |
} | |
.skw-page__half--right .skw-page__content { | |
background: lighten(#1C1C1C, 5%); | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment