Coffee webpage with laggy animation

Question

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 document
var windowheight = window.innerHeight // height of browser window

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

Answer 1

Your HTML is kind of gross and hard to read. Its possible that your page is almost entirely linear, but I suspect there could be more containment. Empty tags should generally be self-closing, however as indicated in the comments that doesn't apply to div tags (my mistake) reference. However, the same link also indicates that div tags should be a last resort

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

You appear to have some bugs (or at least bad naming conventions) as well:

<div id="helpdesk"></div>
    <div id="helpdesktext"></div>
</div>

This implies to me that the helpdesktext should be inside of the helpdesk div, but it's actually after. That last closing tag also isn't immediately apparent as the closing content tag.

I ran this through an HTML linter and got this result (I've condensed it a bit). While not all of these are necessarily things you must do, its generally a good idea to at least consider doing most of these things.

No    Severity    Line    Error
1 8   line 1: 
First definition is not DOCTYPE declaration
2 4   line 1: 
<HTML> may be droped here. Don't drop it.
3 4   line 1: 
<HEAD> may be droped here. Don't drop it.
4 2   line 1: 
<BODY> before </HEAD> is omitted.
5 9   line 1: 
<TITLE> is needed in <HEAD>~</HEAD>
6 1   line 1: 
Empty between <HEAD> and </HEAD>
7 0   line 1: 
<LINK REV="MADE" HREF="mailto:～"> is not including inside <HEAD>~</HEAD>
8 0   line 1: 
The link for the navigation like <LINK REL="NEXT" HREF="～"> is not including inside <HEAD>~</HEAD> .
9 4   line 1: 
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="～"> is not including inside <HEAD>~</HEAD>
10    1   line 3: 
Empty between <DIV> and </DIV>
11-17
When <ONCLICK> is used, must specify <META HTTP-EQUIV="CONTENT-SCRIPT-TYPE" CONTENT="～"> inside <HEAD>~</HEAD> .
18    1   line 10:    
When ONCLICK attribute is used, ONKEYPRESS attribute need to be specified, too.
19    1   line 10:    
Empty between <DIV> and </DIV>
20-22 6   line 13:    
A unknown-attribute `ALLOWFULLSCREEN` is assigned in <IFRAME>
23    4   line 13:    
Specify TITLE the attribute in <IFRAME> .
24    1   line 13:    
Empty between <IFRAME> and </IFRAME>
25    1   line 14:    
Empty between <DIV> and </DIV>
26-38 3   line 33:    
When <ONCLICK> is used, must specify <META HTTP-EQUIV="CONTENT-SCRIPT-TYPE" CONTENT="～"> inside <HEAD>~</HEAD> .
39    1   line 33:    
When ONCLICK attribute is used, ONKEYPRESS attribute need to be specified, too.
40    1   line 33:    
Empty between <DIV> and </DIV>
41-43 3   line 37:    
When <ONCLICK> is used, must specify <META HTTP-EQUIV="CONTENT-SCRIPT-TYPE" CONTENT="～"> inside <HEAD>~</HEAD> .
44    1   line 37:    
When ONCLICK attribute is used, ONKEYPRESS attribute need to be specified, too.
45    1   line 37:    
Empty between <DIV> and </DIV>
46-48 2   line 43:    
here </HTML> is omitted.

Your CSS has inconsistent newlines and indentation, making it hard to read.

You're clearly using jQuery in part of your JavaScript - use it everywhere else too, there are some spots that would be much cleaner with it.

By convention, many people name jQuery selected elements as var $id_of_tag = $('#id_of_tag'); which I usually think makes it pretty clear what is going on.