My Hero Title

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

Features

Tips

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

Tags

jquery plugin hero image, hero image plugin, jquery responsive hero image plugin, responsive hero plugin, jquery mobile responsive hero plugin, jquery mobile hero plugin