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>

What kind of lag? What browsers are they on? When are they experiencing this lag? etc FWIW I am unable to replicate this lag, however I'm not really sure how I'm to reproduce it. — Dan, Jan 8 '16 at 15:35
Note that reviewers are free to address any & all aspects of the code on this site. — Mathieu Guindon, Jan 8 '16 at 15:37
@DanPantry Mostly vertical scroll lag upon the initial page load. Once refreshing the problem seems to go away. Tested on Chrome, Safari, Firefox, IE — Jak, Jan 8 '16 at 15:38
@JakWilmot I'm not experiencing any lag, but my corporate proxy is blocking the pinterest plugin, which might have something to do with it. Have you tried asking your users if they experience lag when that is disabled? — Dan, Jan 8 '16 at 15:39
@DanPantry Hmm that's strange, I don't believe we have a pinterest plugin setup on the site. May be squarespace that's adding it. Are you getting a message on the webpage saying it's blocked? Or did you see it via inspect element? — Jak, Jan 8 '16 at 15:50

Dan Oberlam · Accepted Answer · 2016-01-08 17:04:32Z

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.

Nitpick: <div>s are not self-closing. I've also never seen a $snake_case convention in JavaScript variables, it's almost always camelCase. — Dan, Jan 8 '16 at 17:00
@DanPantry Oh wow, I've never known that. I have sinned many times in my web pages then... Edited — Dan Oberlam, Jan 8 '16 at 17:02
Thank you very much for taking the time to give some tips, I literally just started Html, Css, and Javascript last month so this is super helpful — Jak, Jan 11 '16 at 22:04
@Jak if it was helpful please consider accepting this answer. — Dan Oberlam, Jan 11 '16 at 22:10

Stack Exchange Network

current community

your communities

more stack exchange communities

Coffee webpage with laggy animation

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript performance html css animation or ask your own question.

Hot Network Questions

Coffee webpage with laggy animation

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript performance html css animation or ask your own question.

Related

Hot Network Questions