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