jQuery Plugin To Create Image Overlay Scrolling Effect - semiscroll.js

semiscroll.js is a jQuery plugin used to create an overlay with background images that will prevent body from scrolling when the overlay is active. A little similar to the parallax scrolling effect.

How to use it:

1. Add jQuery JavaScript library and the jQuery semiscroll plugin's JS & CSS to your webpages.

<link rel="stylesheet" href="css/semiscroll.css">
<script src="//code.jquery.com/.min.js"></script>
<script src="js/semiscroll.js"></script>

2. Add your background and foreground images to the overlay.

<div class="gallery-overlay">
  <div class="gallery-overlay-background" style=" background-image: url(bg.png);"></div>
  <div class="gallery-overlay-foreground" style=" background-image: url(fg.png);"></div>
</div>

3. Just call the function on the top element and done. The plugin will stick the foreground image to the top until you reach the bottom of the background image on vertical page scrolling.

$(".gallery-overlay").semiscroll();

---

This awesome jQuery plugin is developed by gerguno. For more Advanced Usages, please check the demo page or visit the official website.