Skip to content

Instantly share code, notes, and snippets.

@ivan-loh

ivan-loh/onepage.html

Last active August 29, 2015 13:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ivan-loh/9878307 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ivan-loh/9878307 to your computer and use it in GitHub Desktop.
Download ZIP
Hybrid One Page Screen
Raw
onepage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hybrid One Page Scroll</title>
<link type='text/css' rel='stylesheet' href='http://fonts.googleapis.com/css?family=Quicksand|Montserrat:700,400'>
<link type='text/css' rel='stylesheet' href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style type="text/css">
/** Applied to body and html **/
.onepage-transition {
margin: 0;
overflow: hidden;
-webkit-transition: opacity 400ms;
-moz-transition: opacity 400ms;
transition: opacity 400ms;
}
/** Applied to body, html and onepage **/
.onepage-height {
display: block;
position: static;
padding: 0;
width: 100%;
height: 100%;
}
/** Applied to actual onepage **/
.onepage-wrapper {
width: 100%;
height: 100%;
display: block;
position: relative;
padding: 0;
-webkit-transform-style: preserve-3d;
}
/** Appplied to page **/
.page-active {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
.page-invisible {
display: none;
}
/** Predefined Pages **/
.page1 { top: 0% }
.page2 { top: 100% }
.page3 { top: 200% }
.page4 { top: 300% }
.page5 { top: 400% }
.page6 { top: 500% }
/** Predefined Animate **/
.moveTransition {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
.moveToPage1 {
-webkit-transform: translate3d(0px, 0%, 0px);
-moz-transform: translate3d(0px, 0%, 0px);
-ms-transform: translate3d(0px, 0%, 0px);
transform: translate3d(0px, 0%, 0px);
}
.moveToPage2 {
-webkit-transform: translate3d(0px, -100%, 0px);
-moz-transform: translate3d(0px, -100%, 0px);
-ms-transform: translate3d(0px, -100%, 0px);
transform: translate3d(0px, -100%, 0px);
}
.moveToPage3 {
-webkit-transform: translate3d(0px, -200%, 0px);
-moz-transform: translate3d(0px, -200%, 0px);
-ms-transform: translate3d(0px, -200%, 0px);
transform: translate3d(0px, -200%, 0px);
}
.moveToPage4 {
-webkit-transform: translate3d(0px, -300%, 0px);
-moz-transform: translate3d(0px, -300%, 0px);
-ms-transform: translate3d(0px, -300%, 0px);
transform: translate3d(0px, -300%, 0px);
}
.moveToPage5 {
-webkit-transform: translate3d(0px, -400%, 0px);
-moz-transform: translate3d(0px, -400%, 0px);
-ms-transform: translate3d(0px, -400%, 0px);
transform: translate3d(0px, -400%, 0px);
}
.moveToPage6 {
-webkit-transform: translate3d(0px, -500%, 0px);
-moz-transform: translate3d(0px, -500%, 0px);
-ms-transform: translate3d(0px, -500%, 0px);
transform: translate3d(0px, -500%, 0px);
}
</style>
</head>
<body>
<div id="wrapper">
<div class="page">
<div class="container">
<div class="row">
<h1 style="text-align: center">ONE</h1>
<h1>Deep v wolf Austin hella, kogi food truck cliche single-origin coffee messenger bag Pinterest. Kale
chips try-hard sustainable flannel gentrify retro Austin actually, mlkshk mumblecore Echo Park +1
before they sold out twee. Mustache cornhole viral brunch kale chips. Etsy small batch ethnic
biodiesel, pork belly pug kitsch drinking vinegar yr Marfa Carles. Intelligentsia Bushwick Tonx, fap
Portland bespoke cliche Tumblr American Apparel cornhole try-hard mixtape VHS cardigan. Godard fap
skateboard stumptown gentrify, mixtape pour-over. Mlkshk Helvetica food truck, plaid Portland shabby
chic street art retro chambray Carles hashtag Cosby sweater Etsy 90's ethnic.</h1>
</div>
</div>
</div>
<div class="page">
<div class="container">
<div class="row">
<h2 style="text-align: center">TWO</h2>
<h2>Church-key keffiyeh mixtape, street art biodiesel mlkshk pork belly readymade dreamcatcher sartorial.
Ennui freegan fingerstache, squid Blue Bottle Pinterest master cleanse raw denim kogi vinyl kale
chips 8-bit Tonx Vice. Portland raw denim stumptown locavore Banksy. Bushwick try-hard tofu
dreamcatcher pop-up, Pitchfork tattooed typewriter craft beer you probably haven't heard of them.
XOXO American Apparel Thundercats, fanny pack Marfa lo-fi chia Wes Anderson raw denim freegan
drinking vinegar. Umami try-hard beard, you probably haven't heard of them biodiesel disrupt pug
PBR&B. Brunch kale chips normcore, aesthetic master cleanse hella artisan PBR sustainable lomo.</h2>
</div>
</div>
</div>
<div class="page">
<div class="container">
<div class="row">
<h3 style="text-align: center">THREE</h3>
<h3>Slow-carb tattooed synth VHS single-origin coffee mumblecore. Flexitarian irony small batch master
cleanse ugh photo booth kogi. Drinking vinegar messenger bag tofu yr +1 DIY. Paleo fixie selfies
squid Brooklyn messenger bag literally gluten-free slow-carb. Chia Godard actually, tousled artisan
letterpress DIY. Sriracha brunch Tonx McSweeney's keffiyeh next level twee, kogi Intelligentsia
XOXO. Church-key whatever XOXO 3 wolf moon, kogi American Apparel direct trade.</h3>
</div>
</div>
</div>
<div class="page lastpage">
<div class="container">
<div class="row">
<h4 style="text-align: center">FOUR</h4>
<h4>Slow-carb tattooed synth VHS single-origin coffee mumblecore. Flexitarian irony small batch master
cleanse ugh photo booth kogi. Drinking vinegar messenger bag tofu yr +1 DIY. Paleo fixie selfies
squid Brooklyn messenger bag literally gluten-free slow-carb. Chia Godard actually, tousled artisan
letterpress DIY. Sriracha brunch Tonx McSweeney's keffiyeh next level twee, kogi Intelligentsia
XOXO. Church-key whatever XOXO 3 wolf moon, kogi American Apparel direct trade.</h4>
<h4>Slow-carb tattooed synth VHS single-origin coffee mumblecore. Flexitarian irony small batch master
cleanse ugh photo booth kogi. Drinking vinegar messenger bag tofu yr +1 DIY. Paleo fixie selfies
squid Brooklyn messenger bag literally gluten-free slow-carb. Chia Godard actually, tousled artisan
letterpress DIY. Sriracha brunch Tonx McSweeney's keffiyeh next level twee, kogi Intelligentsia
XOXO. Church-key whatever XOXO 3 wolf moon, kogi American Apparel direct trade.</h4>
<h4>Slow-carb tattooed synth VHS single-origin coffee mumblecore. Flexitarian irony small batch master
cleanse ugh photo booth kogi. Drinking vinegar messenger bag tofu yr +1 DIY. Paleo fixie selfies
squid Brooklyn messenger bag literally gluten-free slow-carb. Chia Godard actually, tousled artisan
letterpress DIY. Sriracha brunch Tonx McSweeney's keffiyeh next level twee, kogi Intelligentsia
XOXO. Church-key whatever XOXO 3 wolf moon, kogi American Apparel direct trade.</h4>
<h4>Slow-carb tattooed synth VHS single-origin coffee mumblecore. Flexitarian irony small batch master
cleanse ugh photo booth kogi. Drinking vinegar messenger bag tofu yr +1 DIY. Paleo fixie selfies
squid Brooklyn messenger bag literally gluten-free slow-carb. Chia Godard actually, tousled artisan
letterpress DIY. Sriracha brunch Tonx McSweeney's keffiyeh next level twee, kogi Intelligentsia
XOXO. Church-key whatever XOXO 3 wolf moon, kogi American Apparel direct trade.</h4>
<h4>Slow-carb tattooed synth VHS single-origin coffee mumblecore. Flexitarian irony small batch master
cleanse ugh photo booth kogi. Drinking vinegar messenger bag tofu yr +1 DIY. Paleo fixie selfies
squid Brooklyn messenger bag literally gluten-free slow-carb. Chia Godard actually, tousled artisan
letterpress DIY. Sriracha brunch Tonx McSweeney's keffiyeh next level twee, kogi Intelligentsia
XOXO. Church-key whatever XOXO 3 wolf moon, kogi American Apparel direct trade.</h4>
<h4>Slow-carb tattooed synth VHS single-origin coffee mumblecore. Flexitarian irony small batch master
cleanse ugh photo booth kogi. Drinking vinegar messenger bag tofu yr +1 DIY. Paleo fixie selfies
squid Brooklyn messenger bag literally gluten-free slow-carb. Chia Godard actually, tousled artisan
letterpress DIY. Sriracha brunch Tonx McSweeney's keffiyeh next level twee, kogi Intelligentsia
XOXO. Church-key whatever XOXO 3 wolf moon, kogi American Apparel direct trade.</h4>
<h4>Slow-carb tattooed synth VHS single-origin coffee mumblecore. Flexitarian irony small batch master
cleanse ugh photo booth kogi. Drinking vinegar messenger bag tofu yr +1 DIY. Paleo fixie selfies
squid Brooklyn messenger bag literally gluten-free slow-carb. Chia Godard actually, tousled artisan
letterpress DIY. Sriracha brunch Tonx McSweeney's keffiyeh next level twee, kogi Intelligentsia
XOXO. Church-key whatever XOXO 3 wolf moon, kogi American Apparel direct trade.</h4>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
// Random Colours
(function ($) {
"use strict";
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
$('.page').each(function () {
$(this).css('background-color',getRandomColor());
});
}(window.jQuery));
// Swipe Event
(function ($) {
"use strict";
$.fn.swipeEvents = function () {
return this.each(function () {
var startX;
var startY;
var $this = $(this);
function touchmove(event) {
var touches = event.originalEvent.touches;
if (touches && touches.length) {
var deltaX = startX - touches[0].pageX;
var deltaY = startY - touches[0].pageY;
if (deltaX >= 50) { $this.trigger("swipeLeft"); }
if (deltaX <= -50) { $this.trigger("swipeRight"); }
if (deltaY >= 50) { $this.trigger("swipeUp"); }
if (deltaY <= -50) { $this.trigger("swipeDown"); }
if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
$this.unbind('touchmove', touchmove);
}
}
event.preventDefault();
}
function touchstart(event) {
var touches = event.originalEvent.touches;
if (touches && touches.length) {
startX = touches[0].pageX;
startY = touches[0].pageY;
$this.bind('touchmove', touchmove);
}
event.preventDefault();
}
$this.bind('touchstart', touchstart);
});
};
}(window.jQuery));
// Moving Around Functions
(function ($) {
"use strict";
// Setup
function enable() {
var $wrapper = $('#wrapper');
// Setup Container
$('html, body').addClass('onepage-transition');
$('body, #wrapper, html').addClass('onepage-height');
$wrapper.addClass('onepage');
// Setup Pages
var index = 0;
$('.page').each(function () {
var $this = $(this);
$this.removeClass('page-invisible');
$this.addClass('page-active');
$this.addClass('page' + (++index));
});
// Bind Mouse & Swipe Events
$(document).bind('mousewheel DOMMouseScroll', function (event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
move(event, delta);
});
$(window).swipeEvents()
.bind("swipeDown", function () { moveUp(); })
.bind("swipeUp", function () { moveDown(); });
// Unbind Scroll events if any
$(window).unbind('scroll');
}
var lastAnimation = 0;
function move(event, delta) {
var deltaOfInterest = delta;
var timeNow = new Date().getTime();
if (timeNow - lastAnimation < 1000) {
return event.preventDefault();
}
if (deltaOfInterest < 0) {
moveDown();
} else {
moveUp();
}
lastAnimation = timeNow;
}
var current = 1;
function moveUp() {
if (current === 1) return;
var $wrapper = $('#wrapper');
$wrapper.removeClass('moveTransition');
$wrapper.removeClass('moveToPage' + current);
current = current - 1;
$wrapper.addClass('moveTransition');
$wrapper.addClass('moveToPage' + current);
}
var last = $('.page').length;
function moveDown() {
var $wrapper = $('#wrapper');
$wrapper.removeClass('moveTransition');
$wrapper.removeClass('moveToPage' + current);
current = current + 1;
$wrapper.addClass('moveTransition');
$wrapper.addClass('moveToPage' + current);
if (current === last) { setTimeout(end, 600); }
}
function end() {
// Undo Wrapper
var $htmlbody = $('html, body');
$htmlbody.removeClass('onepage-transition onepage-height');
$('#wrapper').removeClass('onepage onepage-height moveTransition moveToPage' + current);
// Undo Pages
var index = 0;
$('.page').each(function () {
var $this = $(this);
$this.addClass('page-invisible');
$this.removeClass('page-active');
$this.removeClass('page' + (++index));
});
$('.lastpage').removeClass('page-invisible');
// Unbind Mouse & SwipeEvents
$(document).unbind('mousewheel DOMMouseScroll');
$(window).swipeEvents().unbind();
// Move to Top if Overscroll
$htmlbody.animate({scrollTop: 0}, 1);
// Bind Scroll Event to go back
$(window).scroll(function (event) {
if ($(window).scrollTop() > 0) {
return;
}
var timeNow = new Date().getTime();
if (timeNow - lastAnimation < 500) {
enable();
$('#wrapper').addClass('moveToPage' + current);
setTimeout(moveUp, 600);
}
lastAnimation = timeNow;
});
}
enable();
$('#wrapper').addClass('moveToPage1');
}(window.jQuery));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment