/jquery.bgpin

A jQuery plugin for full screen backgrounds that stick and fade.

Primary LanguageCSSMIT LicenseMIT

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

  1. 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>
  2. 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 -->
  3. 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');
    }
  4. Call the plugin:

    $('.bgpin-group').bgpin()

demo

View the live demo.