premiseScroll Demo Site

begin scrolling... I'll walk you through some examples of what this plugin can do.

see It In gitHub

Using premiseScroll

call premiseScroll on any element just like you would any other jQuery plugin.

					
// Notice the onScroll callback
$('.emement_class').premiseScroll({
	onScroll: function() {
		$(this).addClass('animated');
	}
});
					
				

the code above will add the class animated to any elements with a class element_class when these come into view - becomes visible in the browser or device window.

options

let's take a look at the defaults first:

					
$.fn.premiseScroll.defaults = {
    
    inView: true, 
    offset: 0,    
    offsetIn: '', 
    offsetOut: '',

    onScroll: function( node ) { return true; },
};
					
				

public Methods

to give you all the control you need to create or stop animations, check out these handy public methods and some examples on how to use them.

actual Examples

here are some animations that you can see happening life and see the snippet of code that powers them right below.

hopefully these will get your mind going on other things you can do with premiseScroll.

parallax Background

code:

						
var example1 = function() {
	var a = $('.parallax-container').premiseScroll({
		offsetIn: 0,
		onScroll: function() {
			$(this).css('background-position', '50% -' + a.totalScrolled() * 0.35 + 'px');
			// adjust the speed in which the parallax animation happens by changing the '0.35'
		}
	});
};
example1();
						
					

change Opacity Of An Element Per Pixel Scrolled

the opacity of the element below changes as you scroll.

code:


var example2 = function() {
	var a = $('.opacity-animation').premiseScroll({
		offset: 100,
		onScroll: function() {
			$(this).css('opacity', a.totalScrolled() * 0.0035);
		}
	});
};
example2();
					

add Infinte Scroll

add infinite scroll functionality or simply load an AJAX request when the user scrolls to a certain point.

place the following element <div class="get-ajax-on-scroll"></div> in your DOM where you want the ajax request to fire as the user scrolls. i.e. bottom of the page (right before the footer).

code:


var example3 = function() {
	var a = $('.get-ajax-on-scroll').premiseScroll({
		onScroll: function() {
			var $this = $(this);
			// load loading icon
			$this.html('<div class="premise-align-center"><i class="fa fa-spinner fa-spin"></i></div>');

			// make the ajax request. Here is my example, which loads the content above.
			$.ajax({
				url: '/ajax-example.php',
				type: 'GET',
			}).done(function(r){
				// replace the loading icon with actual content when done
				$this.html(r);
				// add the popup animation once the protfolio loads.
				$this.find('.project').each(function(i,v){
					fadeInEachProject(i,v);
				});
			});

			a.stopScroll();
		}
	});
};
// animate each portfolio item after loading it.
function fadeInEachProject(i,v) {
	var delay = ( i + 1 ) * 500;
	setTimeout(function(){
		$(v).addClass('animated');
	}, delay);
}
example3();