Skip to content

Instantly share code, notes, and snippets.

@amyvanwetten

amyvanwetten/dabblet.css

Created December 17, 2012 13:44
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amyvanwetten/4318371 to your computer and use it in GitHub Desktop.
Save amyvanwetten/4318371 to your computer and use it in GitHub Desktop.
Download ZIP
Parallax Scrolling Tutorial
Raw
dabblet.css
/**
* Parallax Scrolling Tutorial
* For NetTuts+
*
* Author: Mohiuddin Parekh
* http://www.mohi.me
* @mohiuddinparekh
*/
body{
margin:0;
padding:0;
}
#home {
background: url(http://farm7.staticflickr.com/6211/6378315767_c5cbdec4b3_b.jpg) 50% no-repeat fixed;
background-size: 100%;
height: 1000px;
margin: 0 auto;
width: 100%;
position: relative;
overflow:hidden;
}
#about {
background: url(http://www.psdgraphics.com/file/watercolor-paper-texture.jpg) 50% 0 no-repeat fixed;
background-size: 100%;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
/* Introduction */
#home article { background: url("../images/intro.png") no-repeat scroll center top transparent;
height: 458px;
position: absolute;
text-indent: -9999px;
top: 291px;
width: 100%; }
#about article { background: url("../images/parallax.png") no-repeat scroll center top transparent;
height: 458px;
position: absolute;
text-indent: -9999px;
top: 291px;
width: 100%; }
Raw
dabblet.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Parallax Scrolling Tutorial</title>
<meta name="description" content="How to create a parallax scrolling effect using jQuery, HTML5 and CSS3">
<meta name="author" content="Mohiuddin Parekh, Nettuts+">
<!-- CSS Code -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<!-- JS Code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- Section #1 -->
<section id="home" data-speed="10" data-type="background">
<article>I am Absolute Positioned</article>
</section>
<!-- Section #2 -->
<section id="about" data-speed="4" data-type="background">
<article>Simple Parallax Scroll</article>
</section>
</body>
</html>
Raw
dabblet.js
// alert('Hello world!');
$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
/*
* Create HTML5 elements for IE's sake
*/
document.createElement("article");
document.createElement("section");
Raw
settings.json
{"view":"split","fontsize":"140","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment