jquery.bgpin
under construnction (remeber those gifs?)
A jQuery plugin for pinnig backgrounds
This plugin allows for full screen background images to stay fixed and fade in and out as you scroll through sections on a page. Adds a nice touch to a page such as a blog post or informational page where plain ol moving backgorunds just won't cut it.
Usage
-
Include jQuery and plugin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="js/jquery.bgpin.js"></script>
-
Include HTML code:
<div class="bgpin-group"><!-- the parent container --> <div class="bgpin-single your-bgpin-single-first-background"><!-- add as many as you like --> <div class="bgpin-single-content"> <!-- your content here, style as you like --> </div><!-- /.bgpin-single-content --> </div><!-- /.bgpin-single --> another added like above (need at least two for the effect to work) <div class="bgpin-single your-bgpin-single-second-background">... </div><!-- /.bgpin-group -->
-
Include CSS:
.bgpin-group { min-height: 100%; position: relative; width: 100%; } .bgpin-single{ background-size: cover; height: 100vh; position: relative; width: 100%; } add your background images .your-bgpin-single-first-background { background-image: url('path-to-your-image'); } .your-bgpin-single-second-background { background-image: url('path-to-your-image'); }
-
Call the plugin:
$('.bgpin-group').bgpin()