Basic Parallax Scrolling Effect


#1

Hi guys,

I used a tutorial the link is http://javascriptkit.com/dhtmltutors/parallaxscrolling/index.shtml but this code is not working. This is my code:

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
	<script src="scrollover.js"></script>
	<link rel="stylesheet" type="text/css" href="scrollover.css"/>
<title>scrollover</title>
</head>

<body>
	<body>
<div id="bubbles1"></div>
<div id="bubbles2"></div>
<div id="fish"></div>
</body>
</body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

body{
 height: 2000px;
 background: navy url(img/deepsea.jpg) top center no-repeat fixed;
 background-size: cover;

 







}
#bubbles1, #bubbles2 {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: -1;
	background: url(img/bubbles1.png) 5% 50% no-repeat;	
}

#bubbles2 {
	background: url(img/bubbles3.png) 95% 90% no-repeat;
}

#fish{
 left: -100%;
 background: url(img/fish.png) right 90% no-repeat;
}

JAVASCRIPT

<script>
// Create cross browser requestAnimationFrame method:
window.requestAnimationFrame = window.requestAnimationFrame; 

 || window.mozRequestAnimationFrame;
 || window.webkitRequestAnimationFrame;
 || window.msRequestAnimationFrame;
 || function(f){setTimeout(f, 1000/60)}
 
var bubbles1 = document.getElementById('bubbles1');
var bubbles2 = document.getElementById('bubbles2');
var fish = document.getElementById ('fish');

var scrollheight = document.body.scrollHeight; //height of entire document
var windowheight = window.innerHeight; //height of browser window
 
function parallaxbubbles(){
 var scrolltop = window.pageYOffset; // get number of pixels document has scrolled vertically 
 var scrollamount = (scrolltop / (scrollheight-windowheight)) *100 //get  scroll amount in %
 bubble1.style.top = -scrolltop * .2 + 'px' // move bubble1 at 20% of scroll rate
 bubble2.style.top = -scrolltop * .5 + 'px' // move bubble2 at 50% of scroll rate
 fish.style.left = -100 + '%' // set position of fish in percentage 
}
 
window.addEventListener('scroll', function(){ // on page scroll
 requestAnimationFrame(parallaxbubbles) // call parallaxbubbles() on next available screen paint
}, false)

window.addEventListener ('resize', function() { //on window resize
	var scrolltop = window.pageYOffset; //get no of pixels document has scrolled vertically
	var scrollamount = (scrolltop / (scrollheight-windowheight)) *100; //get amoung scrolled in %
	fish.style.left= -100 + scrollamount + '%'; // set position of fish in percentage starts at -100%
	
}, false)
 
</script>

ANY HELP WOULD BE GREAT! THANK YOU


#2

Welcome to the forums, @isobelaattrill.

When you post code on the forums, you need to format it so it will display correctly.

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don't have that character.


#3

Check your script as it doesn't look the same as the one you were supposed to copy (unless you corrupted it when you posted in here of course).

// Create cross browser requestAnimationFrame method:
window.requestAnimationFrame = window.requestAnimationFrame
 || window.mozRequestAnimationFrame
 || window.webkitRequestAnimationFrame
 || window.msRequestAnimationFrame
 || function(f){setTimeout(f, 1000/60)}
 
var bubble1 = document.getElementById('bubbles1')
var bubble2 = document.getElementById('bubbles2')
var fish = document.getElementById('fish')
 
var scrollheight = document.body.scrollHeight // height of entire document
var windowheight = window.innerHeight // height of browser window
 
function parallaxbubbles(){
 var scrolltop = window.pageYOffset // get number of pixels document has scrolled vertically 
 var scrollamount = (scrolltop / (scrollheight-windowheight)) * 100 // get amount scrolled (in %)
 bubble1.style.top = -scrolltop * .2 + 'px' // move bubble1 at 20% of scroll rate
 bubble2.style.top = -scrolltop * .5 + 'px' // move bubble2 at 50% of scroll rate
 fish.style.left = -100 + scrollamount + '%' // set position of fish in percentage (starts at -100%)
}
 
window.addEventListener('scroll', function(){ // on page scroll
 requestAnimationFrame(parallaxbubbles) // call parallaxbubbles() on next available screen paint
}, false)
 
window.addEventListener('resize', function(){ // on window resize
 var scrolltop = window.pageYOffset // get number of pixels document has scrolled vertically
 var scrollamount = (scrolltop / (scrollheight-windowheight)) * 100 // get amount scrolled (in %)
 fish.style.left = -100 + scrollamount + '%' // set position of fish in percentage (starts at -100%)
}, false)

You have semi colons all over the place which are not in the original. (You also have two opening and closing body tag in your html).

However you would be better making a full demo on codepen so we can see the whole code you are using.

You should be using something like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
body {
	height: 2000px;
	background: navy url(img/deepsea.jpg) top center no-repeat fixed;
	background-size: cover;
}
#bubbles1, #bubbles2 {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: -1;
	background: url(img/bubbles1.png) 5% 50% no-repeat;
}
#bubbles2 {
	background: url(img/bubbles3.png) 95% 90% no-repeat;
}
#fish {
	left: -100%;
	background: url(img/fish.png) right 90% no-repeat;
}
</style>
</head>

<body>
<div id="bubbles1"></div>
<div id="bubbles2"></div>
<div id="fish"></div>
<script>

// Create cross browser requestAnimationFrame method:
window.requestAnimationFrame = window.requestAnimationFrame
 || window.mozRequestAnimationFrame
 || window.webkitRequestAnimationFrame
 || window.msRequestAnimationFrame
 || function(f){setTimeout(f, 1000/60)}
 
var bubble1 = document.getElementById('bubbles1')
var bubble2 = document.getElementById('bubbles2')
var fish = document.getElementById('fish')
 
var scrollheight = document.body.scrollHeight // height of entire document
var windowheight = window.innerHeight // height of browser window
 
function parallaxbubbles(){
 var scrolltop = window.pageYOffset // get number of pixels document has scrolled vertically 
 var scrollamount = (scrolltop / (scrollheight-windowheight)) * 100 // get amount scrolled (in %)
 bubble1.style.top = -scrolltop * .2 + 'px' // move bubble1 at 20% of scroll rate
 bubble2.style.top = -scrolltop * .5 + 'px' // move bubble2 at 50% of scroll rate
 fish.style.left = -100 + scrollamount + '%' // set position of fish in percentage (starts at -100%)
}
 
window.addEventListener('scroll', function(){ // on page scroll
 requestAnimationFrame(parallaxbubbles) // call parallaxbubbles() on next available screen paint
}, false)
 
window.addEventListener('resize', function(){ // on window resize
 var scrolltop = window.pageYOffset // get number of pixels document has scrolled vertically
 var scrollamount = (scrolltop / (scrollheight-windowheight)) * 100 // get amount scrolled (in %)
 fish.style.left = -100 + scrollamount + '%' // set position of fish in percentage (starts at -100%)
}, false)
 
</script>
</body>
</html>

If using an external script make sure you don't include the script tags as script tags are html not js. Also put the link to the external js file just before the closing body tag at the end of the html.

e.g.

<body>
<div id="bubbles1"></div>
<div id="bubbles2"></div>
<div id="fish"></div>
<script src="scrollover.js"></script>
</body>
</html>

#4

Thank you so much PaulOB! Works like a dream, sorry i'm new to Javascript!


#5

Hi there isobelaattrill,

check out the attachment to see an example that uses very simple javascript. :winky:

isobelaapplil.zip (289.8 KB)

coothead


#6

Hi there isobelaattrill,

check out this new attachment which prevents the
poor fish from the indignity of swimming backwards. :eyebrows:

isobelaapplil-v2.zip (291.4 KB)

coothead


closed #7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.