Currently designing a homepage and from some initial tests users are experiencing lag.I'm using some Javascript to create a parallel effect as well as an animated click to explore loop. Not sure if this is the cause of the problem or if there are any alternative ways to achieve the same effect that wouldn't be so intensive?If anyone could look through and see if anything pops out to them, it would be much appreciated!window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(f) {    setTimeout(f, 1000 / 60)}var mountain1 = document.getElementById('headertop')var mountain2 = document.getElementById('headerbehind')var mountain3 = document.getElementById('headerbehindbehind')var mountain4 = document.getElementById('headerbg')var logo = document.getElementById('logo')var lightbox = document.getElementById('lightbox1')var bottomedge = document.getElementById('bottomedge')var subway = document.getElementById('subwaymap')var footerbgmtn = document.getElementById('footerbgmtn')var footerfrg = document.getElementById('footerfrg')var scrollheight = document.body.scrollHeight // height of entire documentvar windowheight = window.innerHeight // height of browser windowfunction parallaxbubbles() {    var scrollamount = (scrolltop / (scrollheight - windowheight)) * 100 // get amount scrolled (in %)    var scrolltop = window.pageYOffset // get number of pixels document has scrolled vertically     mountain2.style.top = -scrolltop * .5 + 'px' // move bubble2 at 50% of scroll rate    mountain3.style.top = -scrolltop * .4 + 'px' // move bubble2 at 50% of scroll rate    mountain4.style.top = -scrolltop * .5 + 'px' // move bubble2 at 50% of scroll rate    logo.style.top = scrolltop * .05 + 'px' // move bubble2 at 50% of scroll rate}window.addEventListener('scroll', function() { // on page scroll    requestAnimationFrame(parallaxbubbles) // call parallaxbubbles() on next available screen paint}, false)function loop() {    $('#bouncer').animate({        'top': '10'    }, {        duration: 1200,        complete: function() {            $('#bouncer').animate({                top: 0            }, {                duration: 1200,                complete: loop            });        }    });    $('<div/>').text('').appendTo($('.results'));}loop();$(function() {    $(#bouncer).on(click, function() {        $(body).animate({            scrollTop: window.scrollY + 750        }, 1800);        return false;    });});    function myhref(web) {        window.location.href = web;    }    function myhref2(web) {        window.location.href = web;    }    function myhref3(web) {        window.location.href = web;    }$(function() {    var $body = $(document);    $body.bind('scroll', function() {        // Disable the horizontal scroll.        if ($body.scrollLeft() !== 0) {            $body.scrollLeft(0);        }    });}); body {    overflow-x: hidden;}#content {    top: -100px;    position: relative;    height: 3700px;    background-color: #ededed;    color: red;    z-index: 20;    display: flex;    justify-content: center;}#bouncer {    position: absolute;    height: 120px;    width: 100%;    margin-top: 600px;    max-width: 700px;    left: 50%;    z-index: 13;    transform: translate(-50%);    background: url(http://i.imgur.com/0k6YoMq.png) no-repeat;    background-position: center top;     background-size: 120px;        -webkit-transition: background .1s;}#bouncer:hover {        -webkit-transition: background .1s;    background-size: 127px;}#headertop {    position: absolute;    height: 1000px;    width: 1923px;    left: 0;  margin-left: -560px;    z-index: 12;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/Header-Top-min.png) no-repeat ;    background-position: center top;     background-size: 1923px;    pointer-events:none;}#headerbehind {    position: fixed;    height: 1200px;    width: 100%;    top: 0;    left: 0;    z-index: 9;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/Headerbehindtop-min.png) no-repeat;    background-position: center top;     background-size: 1920px;}#headerbehindbehind{    position: fixed;    height: 1200px;;    width: 100%;    margin-top: 150px;    top: 0;    left: 0;    z-index: 7;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/Headerbehindbehind-min.png) no-repeat;    background-position: center top;     background-size: 1920px;}#headerbg {    position: fixed;    height: 800px;    width: 100%;    margin-top: 1%;    top: 0;    left: 0;    z-index: 6;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/clouds_bird-min.png) no-repeat;    background-position: center top;     background-size: 1200px;}#logo {    position: absolute;    height: 300px;    width: 100%;    margin-top: 100px;    left: 0;    z-index: 2;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/Logo-min.png) no-repeat;    background-position: center top;     background-size: 200px;}#bottomedge {    position: absolute;    height: 1200px;    width: 1923px;    margin-top: 1260px;    left: 0;  margin-left: -560px;    z-index: 12;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/bottomedge-min.png) no-repeat;    background-position: center top;     background-size: 1923px;    overflow: hidden;}    #lightbox1 {    position: absolute;    height: 1200px;    width: 1920px;    margin-top: 750px;    left: 50%;    z-index: 9;    -webkit-filter: grayscale(100%);    -webkit-transition: .5s ease-in-out;    -moz-filter: grayscale(100%);    -moz-transition: .5s ease-in-out;    -o-filter: grayscale(100%);    -o-transition: .5s ease-in-out;    transform: translate(-50%);    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/bgshadow2-min.png) no-repeat;    background-position: center top -50px;     background-size: 1930px;    -webkit-transition: background .1s;    }    #lightboxfeatured:hover ~ #lightbox1  {    -webkit-filter: grayscale(0%);    -webkit-transition: .2s ease-in-out;    -moz-filter: grayscale(0%);    -moz-transition: .2s ease-in-out;    -o-filter: grayscale(0%);    -o-transition: .2s ease-in-out;    background-size: 1920px;}#lightboxfeatured {    position: absolute;    height: 1000px;    width: 900px;    max-width: 900px;    margin-top: 950px;    left: 55%;  transform: translate(-50%);    z-index: 10;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/mugtext-min.png) no-repeat;    background-position: center 0;     background-size: 900px;    -webkit-transition: background .2s;    }#lightboxfeatured:hover {    -webkit-transition: background .2s;    background-size: 870px;}#textbox {    position: absolute;    height: 100px;    width: 100%;    max-width: 700px;    margin-top: 1450px;    left: 50%;    z-index: 21;    transform: translate(-50%);    background: url(http://i.imgur.com/Ydtl3JP.png) no-repeat;    background-position: center top;     background-size: 400px;}#vid {    position: relative;    z-index: 13;    margin-top: 1600px;    height: 15%;    }#subwaymap {    opacity: 1;    position: absolute;    height: 900px;    width: 1920px;      margin-top: 1535px;    left: 50%;    z-index: 12;    transform: translate(-50%);    background: url(http://i.imgur.com/9WbxHtZ.png) no-repeat;    background-position: center top;     background-size: 1080px;}#textbox2 {    position: absolute;    height: 100px;    width: 100%;    max-width: 700px;    margin-top: 2180px;    left: 50%;    z-index: 21;    transform: translate(-50%);    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/designed-for-min.png) no-repeat;    background-position: center top;     background-size: 400px;}#design {    position: absolute;    height: 500px;    width: 350px;    margin-top: 2290px;    left: 50%;    z-index: 30;    transform: translate(-50%);    background-color: red;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/design.jpg) no-repeat;    background-position: -270px top;    background-size: 770px            }#dbox {    position: absolute;-webkit-box-shadow: 0px 0px 30px -2px rgba(0,0,0,1);-moz-box-shadow: 0px 0px 30px -2px rgba(0,0,0,1);box-shadow: 0px 0px 30px -2px rgba(0,0,0,1);    height: 48px;    width: 350px;    margin-top: 2760px;    left: 50%;    z-index: 30;    transform: translate(-50%);    background: url(http://i.imgur.com/r7k5zO8.png) no-repeat;    background-position: center top;    background-size: 100%;    background-color: blue;}#savings {    position: absolute;    height: 450px;    width: 250px;    margin-top: 2360px;    left: 50%;    margin-left: 280px;    z-index: 29;    transform: translate(-50%);    background-color: red;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/savings.jpg) no-repeat;    background-position: center -10px;    background-size: 400px        }#sbox {    position: absolute;    height: 43px;    width: 250px;    margin-top: 2790px;    margin-left: 280px;    left: 50%;    z-index: 29;    transform: translate(-50%);    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/Savingsa-min.png) no-repeat;    background-position: center top;    background-size: 100%;    background-color: blue;}#environment {    position: absolute;    height: 450px;    width: 250px;    margin-top: 2360px;    left: 50%;    margin-left: -280px;    z-index: 29;    transform: translate(-50%);    background-color: red;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/env.jpg) no-repeat;    background-position: center -10px;    background-size: 470px}#ebox {    position: absolute;    height: 41px;    width: 250px;    margin-top: 2790px;    margin-left: -280px;    left: 50%;    z-index: 29;    transform: translate(-50%);    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/Environment-min.png) no-repeat;    background-position: center top;    background-size: 100%;    background-color: blue;}#design, #environment, #savings, #ebox, #sbox {        -webkit-box-shadow: 0px 0px 36px -5px rgba(0,0,0,0.68);-moz-box-shadow: 0px 0px 36px -5px rgba(0,0,0,0.99);box-shadow: 0px 0px 36px -5px rgba(0,0,0,0.99);}.savingscontroller {}.environmentcontroller {    }#design:hover ~ #dbox {    height: 135px;}#savings:hover {    background-position: center -30px;}#savings:hover ~ #sbox {    height: 109px;}#environment:hover {    background-position: center -30px;}#environment:hover ~ #ebox {    height: 137px;}#design:hover {    background-position: -270px -20px;}#footertopedge {    position: absolute;    height: 1400px;    width: 100%;    margin-top: 2160px;    left: 0;    z-index: 20;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/bottomedgefooter-min.png) no-repeat;    background-position: center top;     background-size: 1920px;    visibility: hidden;}#footeredge {    position: absolute;    height: 1200px;    width: 1920px;    margin-top: 2500px;    margin-left: -560px;    left: 0;    z-index: 20;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/subwayfg-min.png) no-repeat;    background-position: center top;     background-size: 1920px;}#footerbgmtn {    position: absolute;    height: 1100px;    width: 1920px;    margin-top: 2550px;    margin-left: -560px;    left: 0;    z-index: 12;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/subwaybg-min.png) no-repeat;    background-position: center top;     background-size: 1920px;}#footermid {    position: absolute;    height: 1100px;    width: 1920px;    margin-top: 2750px;    margin-left: -560px;    left: 0;    z-index: 12;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/train.gif) no-repeat;    background-position: center top;     background-size: 1920px;}#storefront {        position: absolute;    height: 500px;    width: 960px;    margin-top: 3200px;    background-color: aqua;    left: 50%;        transform: translate(-50%);    margin-left: 480px;    z-index: 22;    -webkit-filter: grayscale(100%);  -webkit-transition: .5s ease-in-out;  -moz-filter: grayscale(100%);   -moz-transition: .5s ease-in-out;  -o-filter: grayscale(100%);   -o-transition: .5s ease-in-out;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/helpdesk-min.png) no-repeat;    background-position: center top;     background-size: 102%;     -webkit-transition: .5s;}#helpdesk {        position: absolute;    background-color: red;    height: 500px;    width: 960px;    margin-top: 3200px;    left: 50%;    margin-left: -480px;        transform: translate(-50%);    z-index: 21;      -webkit-filter: grayscale(100%);  -webkit-transition: .5s ease-in-out;  -moz-filter: grayscale(100%);   -moz-transition: .5s ease-in-out;  -o-filter: grayscale(100%);   -o-transition: .5s ease-in-out;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/helpdesk2-min.png) no-repeat;    background-position: center top;     background-size: 102%;    -webkit-transition: .5s;}#storefronttext {        position: absolute;    height: 200px;    width: 100%;    margin-top: 3370px;    margin-left: 400px;    left: 0;    z-index: 22;    background: url(http://i.imgur.com/tkLBakd.png) no-repeat;    background-position: center top;     background-size: 400px;}#storefrontbutton {        position: absolute;    height: 70px;    width: 240px;    margin-top: 3470px;    margin-left: 400px;    left: 50%;        -webkit-transition: .1s;        transform: translate(-50%);    z-index: 23;    background: url(http://i.imgur.com/JzNCNog.png) no-repeat;    background-position: center top;     background-size: 200px;}#storefrontbutton:hover {    background-size: 210px;        -webkit-transition: .1s;}#storefrontbutton:hover ~ #storefront {  -webkit-filter: grayscale(0%);  -webkit-transition: .5s ease-in-out;  -moz-filter: grayscale(0%);  -moz-transition: .5s ease-in-out;  -o-filter: grayscale(0%);  -o-transition: .5s ease-in-out;    background-size: 100%;  }#helpdesktext {    position: absolute;    height: 200px;    width: 100%;    margin-left: -400px;    margin-top: 3400px;    left: 0;    z-index: 22;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/helpdesktext-min.png) no-repeat;    background-position: center top;     background-size: 320px;}#helpdeskbutton {        position: absolute;    height: 70px;    width: 240px;    margin-left: -400px;    margin-top: 3470px;    left: 50%;    -webkit-transition: .1s;    transform: translate(-50%);    z-index: 23;    background: url(https://googledrive.com/host/0B9z7bNw43k1dWXFvU3FZaG1DbVU/contact-button-min.png) no-repeat;    background-position: center top;     background-size: 170px;}#helpdeskbutton:hover {    background-size: 180px;    -webkit-transition: .1s;}#helpdeskbutton:hover ~ #helpdesk {  -webkit-filter: grayscale(0%);  -webkit-transition: .5s ease-in-out;  -moz-filter: grayscale(0%);  -moz-transition: .5s ease-in-out;  -o-filter: grayscale(0%);  -o-transition: .5s ease-in-out;    background-size: 100%;}<body><div id=content>    <div id=bouncer></div>    <div id=headertop></div>    <div id=headerbehind></div>    <div id=headerbehindbehind></div>    <div id=headerbg></div>    <div id=logo></div>    <div id=bottomedge></div>    <div id=lightboxfeatured onclick=myhref('http://www.heyjoecoffee.com/storefront');></div>    <div id=lightbox1></div>    <div id=textbox></div>        <div id=vid><iframe class=vidya width=800 height=450 src=https://www.youtube.com/embed/HR9Yv27Ilo0?rel=0&amp;showinfo=0 frameborder=0 allowfullscreen></iframe></div>    <div id=subwaymap></div>    <div id=textbox2></div>    <div class=designcontroller>    <div id=design></div>    <div id=dbox></div>    </div>    <div class=savingscontroller>    <div id=savings></div>    <div id=sbox></div>    </div>        <div class=environmentcontroller>    <div id=environment></div>    <div id=ebox></div>    </div>    <div id=footertopedge></div>        <div id=footerbgmtn></div>        <div id=footermid></div>        <div id=footerfrg></div>    <div id=footeredge></div>                    <div id=storefrontbutton onclick=myhref2('http://www.heyjoecoffee.com/storefront');></div>    <div id=storefront></div>        <div id=storefronttext></div>    <div id=helpdeskbutton onclick=myhref3('https://heyjoecoffee.freshdesk.com/support/home');></div>         <div id=helpdesk></div>        <div id=helpdesktext></div>    </div>  </body>
Coffee webpage with laggy animation
javascript;performance;html;css;animation