Created
August 27, 2014 07:36
-
-
Save asilbalaban/c8925b04f419f63fb233 to your computer and use it in GitHub Desktop.
simple parallax boilerplate
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Parallax</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <style> | |
| div.space { | |
| min-height: 1000px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="space"></div> | |
| <div class="parallax visible-lg visible-md" style="margin-top: 40px; background-image: url('http://placehold.it/1920x1080');"></div> | |
| <div class="space"></div> | |
| <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script src="simple-parallax.js"></script> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| $('.parallax').parallax({ | |
| speed : 0.2 | |
| }); |
This file contains hidden or 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
| /** | |
| * Author: Heather Corey | |
| * jQuery Simple Parallax Plugin | |
| * | |
| */ | |
| (function($) { | |
| $.fn.parallax = function(options) { | |
| var windowHeight = $(window).height(); | |
| // Establish default settings | |
| var settings = $.extend({ | |
| speed : 0.15 | |
| }, options); | |
| // Iterate over each object in collection | |
| return this.each( function() { | |
| // Save a reference to the element | |
| var $this = $(this); | |
| // Set up Scroll Handler | |
| $(document).scroll(function(){ | |
| var scrollTop = $(window).scrollTop(); | |
| var offset = $this.offset().top -450; | |
| var height = $this.outerHeight(); | |
| // Check if above or below viewport | |
| if (offset + height <= scrollTop || offset >= scrollTop + windowHeight) { | |
| return; | |
| } | |
| var yBgPosition = Math.round((offset - scrollTop) * settings.speed); | |
| // Apply the Y Background Position to Set the Parallax Effect | |
| $this.css('background-position', 'center ' + yBgPosition + 'px'); | |
| }); | |
| }); | |
| } | |
| }(jQuery)); |
This file contains hidden or 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
| .parallax { | |
| width: 100%; | |
| height: 400px; | |
| background-attachment: fixed; | |
| background-size: 100%; | |
| background-position: center center; | |
| background-repeat: no-repeat; | |
| -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.2); | |
| -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.2); | |
| box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.2); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment