Your Hero Title Here

HerosEnd - The jQuery responsive hero image plugin

HerosEnd
is a jQuery plugin that combines a parallax effect with a blur, grayscale or sepia effect for your hero image by scrolling down bringing an ending scenario like in a movie. After all, the Hero graphic disappears and ends when we scroll away from it hence the name HerosEnd:)

How to Install

1. Add the path to the CSS file in your head of document
2. Add the path to the plugin/plugin settings in the bottom of your HTML document
3. Add/Structure the HTML as demonstrated below.
4. Add the plugin function call/settings at the bottom of your HTML doc

Configure Settings

• Scroll Direction
• Scroll Speed
• FX - Gray Amount
• FX - Blur Amount/Blur Limit
• FX - Sepia Amount
• Breakpoint- mobile Setting
• Container Height - preset

Features

• Parallax Effect: Scrolls Up, Down, Left or Right
• Visual Effects: Blur, Sepia and Grayscale
• Auto-mobile responsive with mobile width setting: Will remove the effects for mobile and scale the container to match the images width.
• Includes fontscaling for Hero Title
• "Breakpoint" setting, turns off the effects for mobile if below a specific resolutions width

Tips

• When using the blur filter you may get a wash-in effect on the left and rgiht side edges of the background color. A quick fix is to put a "background-color" style in the same class with your "background-image" tag with a background color that blends best with your graphic.

CSS

<link href='css/HerosEnd.css' rel="stylesheet" type="text/css">

HTML Code

<!-- HerosEnd -->
<div class="hero-wrapper">
   <img src="images/hero.jpg" class="hero-image" alt="My Hero Title" />
  <div class="hero-title"><h1>Your Hero Title Here</h1></div>
</div>
<!-- HerosEnd -->

Plugin Code

<script src='js/HerosEnd.min.js'>  </script>

<script> 

// For Blur FX
$('.hero-image').HerosEnd({
	scrolldirection: 'down',
	scrollspeed: '3',
	bluramount: '1',
	blurlimit: '20',
	breakpoint: '768',
	containerheight: 700,
	fontscalesize: '3',
	fontscalemin: '20'
});


// For GrayScale FX
$('.hero-image-2').HerosEnd({
	scrolldirection: 'down',
	scrollspeed: '3',
    grayamount: '100',
	breakpoint: '768',
	containerheight: 700,
	fontscalesize: '3',
	fontscalemin: '20'
});


// For Sepia FX
$('.hero-image-3').HerosEnd({
	scrolldirection: 'down',
	scrollspeed: '3',
    sepiaamount: '100'
	breakpoint: '768',
	containerheight: 700,
	fontscalesize: '3',
	fontscalemin: '20'
});

</script>

Ease of Installation
Medium to Advanced Web Designers & Developers

File Size:
Minified @ 3KB, version 0.3

Author:
Mark Hawkins

Versions:
ver 0.2 - 11/5/2015
ver 0.3 - 4/18/2016

Download: HerosEnd.zip