Javascript is mostly used for animations in webpages be it a simple event handling or some complicated scrolling effects. Lets have a look at some examples.
<a href="#" onmouseOver="changeImage()" onmouseOut="restoreImage()"><img src="image1.jpg" name="mybutton" ></a>
A variable newImage is created which holds an image as its value. newImage.src defines the image path. Another variable defaultImage is created which holds another image as its value. defaultImage.src defines the path of the second image.
On mouse over, the function changeImage() is triggered which replaces the original image from the HTML element named mybutton. On mouseout another function restoreImage() is triggered, which again places the previous image on the button.
<script>
newImage = new Image; newImage.src = "image1.jpg";
defaultImage = new Image; defaultImage.src = "image2.jpg";
function changeImage(){
document.mybutton.src = newImage.src;
}
function restoreImage(){
document.mybutton.src = defaultImage.src;
}
</script>
Parallax scrolling is one of the most used but overseen web design techniques in css. It makes the background content and foreground content scroll in different speed and creates a scrolling effect that is soothing to your eyes. Read this tutorial from css to know more about css parallax. Here' we'll see, how we can manipulate css using javascript with some cool examples.
First of all, lets add the basic HTML markups along with the page title.
<html> <head> <title>My Javascript Parallax</title> </head> <body> </body> </html>
Let's add some contents then. Since, it's a dummy content, we'll use lorem ipsum dummy text paragraph a couple of times and for that we'll use Javascript for loop. This will produce 20 paragraphs of dummy texts which would make the page scrollable.
<div>
<script>
for (var i = 1; i <= 20; i++) {
document.write("<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit -- add long texts here.</p>")
}
</script>
</div>
Lets add a background image in the page then. Here we're using a small one named pattern.jpg. The image position is fixed and the z-index is negative to make sure that its placed below the content.
<div id="mypattern"></div>
<style>
#pattern{
position: fixed;
background: url(pattern.jpg);
width: 200px;
height: 200px;
z-index: -1;
}
</style>
Now, what is needed is a javascript code that checks the window scroll and triggers a function which calculates the window scrollamount and changes the positioning value of the container holding background image.
<script>
window.addEventListener("scroll",parallax);
</script>
window.addEventListener() will watch the event scroll and then initializes the function parallax() if the event is triggered.
<script>
function parallax(){
var content = document.getElementById('mypattern');
var offset = window.pageYOffset;
if(offset > 5){
content.style.top = -(offset / 5) +'px';
}
}
</script>
The function parallax() holds two variables. The first variable content holds the HTML element where the parallax effect is going to be added while the second one offset holds the pageYOffset value which the scroll amount of the page.
Once the srollamount exceeds 5, it adds the css property top with a negative value of (offset / 5)px which makes the scrolling slower than the actual page scroll speed and in the opposite direction.
<html>
<head>
<title>My Javascript Parallax</title>
</head>
<body>
<script>
function parallax(){
var content = document.getElementById('mypattern');
var offset = window.pageYOffset;
if(offset > 5){
content.style.top = -(offset / 5) +'px';
}
}
window.addEventListener("scroll",parallax,false);
</script>
<div class="pattern" id="mypattern"></div>
<div class="content">
<script>
for (var i = 1; i <= 20; i++) {
document.write("<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>")
}
</script>
</div>
<style>
.pattern{
position: fixed;
background: url(pattern.jpg);
width: 200px;
height: 200px;
z-index: -1;
}
</style>
</body>
</html>
In this way, you can add multiple parallax on your page moving them in any direction you want and create an animation effect with javascript.
Leave a comment