<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>
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.
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.