In this article, we will explain in detail how to use the jQuery plugin jInvertScroll.js to scroll three wide images horizontally with a parallax effect. The parallax effect is a technique where content moves at different speeds when scrolling, creating a sense of depth. We will explain it step-by-step in an easy-to-understand manner, so please give it a try.
Necessary Files and Preparation
First, prepare the necessary files. Download and add the following files to your project.
- jQuery Library
- jInvertScroll.js
Include these files in your HTML.
CSS Settings
Set up the CSS. Specify the styles (.scroll) for each image to scroll at different speeds with the parallax effect.
<style>
body{
font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
padding: 0;
margin: 0;
overflow-x: hidden;
}
h1{
font-size:18px;
line-height:1.6em;
text-align:center;
font-weight:normal;
padding:10px 0;
}
.scroll
{
position: fixed;
bottom: 0;
left: 0;
}
.horizon
{
z-index: 1;
width: 3000px;
}
.middle
{
z-index: 500;
width: 4000px;
}
.front
{
z-index: 1000;
width: 6000px;
}
</style>
HTML Description
In the HTML file, place three horizontally long images in the parallax horizontal scroll area (class=”scroll”). Each image has a different class and is used to achieve the parallax effect.
<h1>Scroll vertically with the mouse to display three images scrolling horizontally with a parallax effect.</h1>
<div class="horizon scroll"><img src="horizon.png" alt="" /></div>
<div class="middle scroll"><img src="middle.png" alt="" /></div>
<div class="front scroll"><img src="front.png" alt="" /></div>
JavaScript Settings
In JavaScript, use jInvertScroll.js to set up the parallax effect. Configure each image to move at different speeds when scrolling.
Include the jquery-1.8.1.min.js and jquery.jInvertScroll.js files. Use $.jInvertScroll([‘.scroll’],{options}) to set the height and scrolling actions for the parallax horizontal scroll area.
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="jquery.jInvertScroll.js"></script>
<script type="text/javascript">
(function($) {
$.jInvertScroll(['.scroll'],
{
height: 6000,
onScroll: function(percent) {
console.log(percent);
}
});
}(jQuery));
</script>
Demo Page for Horizontal Scrolling with Parallax Effect Using jquery.jInvertScroll.js
By configuring this, when you scroll in the browser, the three images will scroll horizontally with a parallax effect. Be sure to check out the demo page to experience the effect.
Demo page for horizontal scrolling with parallax effect using jquery.jInvertScroll.js
Content separated into layers will be displayed with a time lag during browser scrolling.
Source: jInvertScroll – A lightweight jQuery horizontal Parallax scrolling plugin
jInvertScroll – A lightweight jQuery horizontal Parallax scrolling plugin
Conclusion
In this article, we introduced how to use jQuery’s jInvertScroll.js plugin to implement horizontal scrolling with a parallax effect. Using the parallax effect can add visual depth and motion to your website. It’s easy to implement even for beginners, so give it a try.
* Please use this at your own risk.
Do not reuse the Google Analytics tag within the demo page tag.
