Skip to content

Instantly share code, notes, and snippets.

@rvaliev

rvaliev/One page scroll navigation with css transforms.markdown

Created June 16, 2015 12:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rvaliev/395d1900d3da7e400c7b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rvaliev/395d1900d3da7e400c7b to your computer and use it in GitHub Desktop.
Download ZIP
One page scroll navigation with css transforms
Raw
index.html
<div class="wrapper active-page1">
<div class="page page1">
<h2>First page</h2>
</div>
<div class="page page2">
<h2>Second page</h2>
</div>
<div class="page page3">
<h2>Third page</h2>
</div>
<div class="page page4">
<h2>Fourth page</h2>
<p class="check-out">Check out my other <a href="http://codepen.io/suez/public/" target="_blank">pens</a></p>
</div>
</div>
<div class="nav-panel">
<div class="scroll-btn up"></div>
<div class="scroll-btn down"></div>
<nav>
<ul>
<li data-target="1" class="nav-btn nav-page1 active"></li>
<li data-target="2" class="nav-btn nav-page2"></li>
<li data-target="3" class="nav-btn nav-page3"></li>
<li data-target="4" class="nav-btn nav-page4"></li>
</ul>
</nav>
</div>
Raw
One page scroll navigation with css transforms.markdown
Raw
script.js
'use strict';
$(document).ready(function() {
var $wrap = $(".wrapper"),
pages = $(".page").length,
scrolling = false,
currentPage = 1,
$navPanel = $(".nav-panel"),
$scrollBtn = $(".scroll-btn"),
$navBtn = $(".nav-btn");
/*****************************
***** NAVIGATE FUNCTIONS *****
*****************************/
function manageClasses() {
$wrap.removeClass(function (index, css) {
return (css.match (/(^|\s)active-page\S+/g) || []).join(' ');
});
$wrap.addClass("active-page" + currentPage);
$navBtn.removeClass("active");
$(".nav-btn.nav-page" + currentPage).addClass("active");
$navPanel.addClass("invisible");
scrolling = true;
setTimeout(function() {
$navPanel.removeClass("invisible");
scrolling = false;
}, 1000);
}
function navigateUp() {
if (currentPage > 1) {
currentPage--;
if (Modernizr.csstransforms) {
manageClasses();
} else {
$wrap.animate({"top": "-" + ( (currentPage - 1) * 100) + "%"}, 1000);
}
}
}
function navigateDown() {
if (currentPage < pages) {
currentPage++;
if (Modernizr.csstransforms) {
manageClasses();
} else {
$wrap.animate({"top": "-" + ( (currentPage - 1) * 100) + "%"}, 1000);
}
}
}
/*********************
***** MOUSEWHEEL *****
*********************/
$(document).on("mousewheel DOMMouseScroll", function(e) {
if (!scrolling) {
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
}
});
/**************************
***** RIGHT NAVIGATION ****
**************************/
/* NAV UP/DOWN BTN PAGE NAVIGATION */
$(document).on("click", ".scroll-btn", function() {
if ($(this).hasClass("up")) {
navigateUp();
} else {
navigateDown();
}
});
/* NAV CIRCLE DIRECT PAGE BTN */
$(document).on("click", ".nav-btn:not(.active)", function() {
if (!scrolling) {
var target = $(this).attr("data-target");
if (Modernizr.csstransforms) {
$wrap.removeClass(function (index, css) {
return (css.match (/(^|\s)active-page\S+/g) || []).join(' ');
});
$wrap.addClass("active-page" + target);
$navBtn.removeClass("active");
$(this).addClass("active");
$navPanel.addClass("invisible");
currentPage = target;
scrolling = true;
setTimeout(function() {
$navPanel.removeClass("invisible");
scrolling = false;
}, 1000);
} else {
$wrap.animate({"top": "-" + ( (target - 1) * 100) + "%"}, 1000);
}
}
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
@import "bourbon";
$lgtBlue: #43bed6;
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.inner {
content: "";
position: absolute;
top: 50%;
left: 50%;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
@media (max-width: 767px) {
& {
font-size: 70%;
}
}
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 1.5s;
perspective: 3000;
transform-style: preserve-3d;
.page {
position: relative;
width: 100%;
height: 100%;
transform: rotateX(180deg) scale(0.3);
backface-visibility: hidden;
transition: transform 1s ease-in-out;
will-change: transform;
h2 {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-transform: uppercase;
font-size: 3em;
}
&.page1 {
@include linear-gradient(10deg, #66a6b8 20%, #5471B9 80%);
}
&.page2 {
@include linear-gradient(45deg, #f29c54 0%, #DB4367 100%);
}
&.page3 {
@include linear-gradient(135deg, #23af56 0%, #67A79A 100%);
}
&.page4 {
@include linear-gradient(160deg, #412F2F 15%, #6B2686 85%);
}
}
@for $i from 1 through 10 {
&.active-page#{$i} {
transform: translateY(-($i - 1)*100%);
.page.page#{$i} {
transform: scale(1);
}
}
}
}
.nav-panel {
position: fixed;
top: 50%;
right: 2%;
transform: translateY(-50%);
z-index: 1000;
transition: opacity 0.5s, transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);
will-change: transform, opacity;
&.invisible {
opacity: 0;
transform: translateY(-50%) scale(0.5);
}
ul {
list-style-type: none;
.nav-btn {
position: relative;
overflow: hidden;
width: 1em;
height: 1em;
margin-bottom: 0.5em;
border: 0.12em solid #fff;
border-radius: 50%;
cursor: pointer;
transition: border-color, transform 0.3s;
will-change: border-color, transform;
&:after {
@extend .inner;
width: 100%;
height: 100%;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%) scale(0.3);
background-color: #fff;
opacity: 0;
transition: transform, opacity 0.3s;
will-change: transform, opacity;
}
&.active:after, &:hover:after {
transform: translateX(-50%) translateY(-50%) scale(0.7);
opacity: 1;
}
&:hover {
border-color: yellow;
transform: scale(1.2);
}
&:hover:after {
background-color: yellow;
}
}
}
.scroll-btn {
position: absolute;
left: 0;
width: 1em;
height: 1em;
border: 0.2em solid #fff;
border-left: none;
border-bottom: none;
cursor: pointer;
transform-origin: 50% 50%;
transition: border-color 0.3s;
&.up {
top: -1.6em;
transform: rotate(-45deg);
}
&.down {
bottom: -1.2em;
transform: rotate(135deg);
}
&:hover {
border-color: yellow;
}
}
}
.check-out {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
font-size: 2rem;
color: #fff;
a {
color: rgba(255,170,170,1);
text-decoration: none;
padding-bottom: 0.3rem;
border-bottom: 0.2rem solid;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment