laxicon

A jQuery Plugin

Very simple parallax plugin with background image overlay options.

Usage

Demo

This will add very basic parallax function to background images. Set up the section with HTML/CSS (height, padding, whatever), this plugin won't do that for you. The image path goes inside the plugin options when you call it. Otherwise the plugin will load up this image from unsplash: https://download.unsplash.com/photo-1434145175661-472d90344c15

HTML & CSS

<section class="parallax">
    <h1 class="awesome-title">Compelling</h1>
</section>

.parallax {
    padding: 280px 0;
    text-align: center;
}

Include Scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/laxicon.js"></script>

Call Function with Just Image Path

Function should be called in window load and resize functions for best performance with orientation switchable devices.

$('.parallax').laxicon({
    bgImgPath: 'images/stock-ferris-wheel.jpg'
});

Call Function with Speed and Gradient Overlay With Alpha Percentage

$('.parallax').laxicon({
    speed: 0.40,
    bgImgPath: 'images/stock-bus.jpg',
    overlay: true,
    overlayType: 'shade',
    overlayPercent: 60
});

Call Function with Speed and Pattern Overlay

$('.parallax').laxicon({
    speed: 0.15,
    bgImgPath: 'images/stock-lighthouse.jpg',
    overlay: true,
    overlayType: 'pattern',
    overlayPatternPath: 'images/screening.png'
});

Set overlay to true for a tint, shade, or pattern overlay. Option overlayType can have a value of 'tint', 'shade', or 'pattern' to add a white transparent, black transparent, or repeating pattern image overlay to the background image. Tints and shades use a CSS linear gradient with alpha set by the overlayPercent setting.

Other CSS options are bgXPos for placement of the background image on the x-axis (default is 'center'), bgSize (default is 'cover'), and bgRepeat (default is 'no-repeat'). If using the pattern overlay option, there is no need to set it to repeat - it will repeat automatically.

License

Licensed under the terms of the MIT license.

Notes

Built by Jeannie Stevenson using oxford commas, enthusiasm, and brains.