Animations

BttrLazyLoading propose a large choice of CSS animations from Animate.

HTML

<img id="yourImg" class="bttrlazyloading"
    data-bttrlazyloading-animation="flipInX"
    data-bttrlazyloading-xs-src="img/800x300.jpg"
    data-bttrlazyloading-xs-width="800"
    data-bttrlazyloading-xs-height="300"
    data-bttrlazyloading-sm-src="img/380x380.jpg"
    data-bttrlazyloading-sm-width="380"
    data-bttrlazyloading-sm-height="380"
    data-bttrlazyloading-md-src="img/350x350.jpg"
    data-bttrlazyloading-md-width="350"
    data-bttrlazyloading-md-height="350"
    data-bttrlazyloading-lg-src="img/300x300.jpg"
    data-bttrlazyloading-lg-width="300"
    data-bttrlazyloading-lg-height="300"
/>

JavaScript

$('#yourImg').bttrlazyloading();
OR

HTML

<img id="yourImg" class="bttrlazyloading" />

JavaScript

$('#yourImg').bttrlazyloading({
	animation: 'flipInX' // Select among the CSS animations below
	xs: {
		src: 'http://placekitten.com/800/300',
		width: 800,
		height: 300
	},
	sm: {
		src: 'http://placekitten.com/380/380',
		width: 380,
		height: 380
	},
	md: {
		src: 'http://placekitten.com/350/350',
		width: 350,
		height: 350
	},
	lg: {
		src: 'http://placekitten.com/300/300',
		width: 300,
		height: 300
	}
});

flipInX

flipInY

fadeIn

fadeInUp

fadeInDown

fadeInLeft

fadeInRight

fadeInUpBig

fadeInDownBig

fadeInLeftBig

fadeInRightBig

bounceIn

bounceInDown

bounceInUp

bounceInLeft

bounceInRight

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

lightSpeedIn

rollIn