I thought making my parallax CSS only would make things less laggy, but seems not. If you wanna check out the code and tell me if there's something done poorly, I'd be thankful.
the html:
<div class="parallax">
<div id="up">
<div class="spacer"></div>
<div id="intro">
<h1>A studio made up of </h1>
<h2 class="future-animate"> 1</h2>
<div class="animate"></div>
<h1> person,</h1>
</div>
<div class="spacer"></div>
</div>
the css:
.parallax {
/* The image used */
background: url('bgintro.jpg');
/*sizing height */
height: 799px;
width: 100%;
/* Creating the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
float: left;
display: inline-block;
z-index: -1;
}
@media only screen and (max-device-width:1024px) {
.parallax{
background-attachment: scroll;
}
}
and the fiddle:
https://jsfiddle.net/ovyhttgw/
Thanks in advance.
