A jQuery plugin for full screen backgrounds that stick and fade.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
LICENSE
README.md

README.md

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.