JSFiddle - React, Tailwind, and code Playground
by envira
HTML
<div class="topwrap1">
<div class="plane"></div><div class="plane2"></div></div>
<div id="headerwrap">
<h2>Css3 Parallax Plane Animation by Envira Phani of MySkins Studio <a href="http://myskins.org" title="click to Go to MySkins" target="_blank">Link</a></h2>
</div>
CSS
.logo {
background: 0;
margin-top: 23px;
margin-left: 0;
width: 100px;
height: 100px;
float: left;
}
#headerwrap {
color: #E04006;
text-shadow:1px 1px 1px #343434;
background: #2E3639;
padding: 0;
margin:0;
margin-top:-30px;
font-family:tahoma, arial, sans-serif;
height: 70px;
text-align:center;
line-height:70px
}
#headerwrap a{
color: #FFF;
}
.plane {
background: url(http://i.imgur.com/Wfy62jo.png)center center no-repeat;
padding: 0;
z-index: 99;
height: 145px;
-moz-animation: bgscroll2 3000s infinite linear;
-ms-animation: bgscroll2 3000s infinite linear;
-o-animation: bgscroll2 3000s infinite linear;
-webkit-animation: bgscroll2 3000s infinite linear;
}
.plane2 {
background: url(http://i.imgur.com/wkcwToa.png)center center no-repeat;
padding: 0;
z-index: -99;
height: 145px;
margin-top: -80px;
-moz-animation: bgscroll2 3500s infinite linear;
-ms-animation: bgscroll2 3500s infinite linear;
-o-animation: bgscroll2 3500s infinite linear;
-webkit-animation: bgscroll2 3500s infinite linear;
}
.topwrap1 {
color: #777;
background: #FFF url(http://i.imgur.com/xNhLRsL.png) top center repeat-x;
padding: 0;
margin:0;
height: 500px;
border-bottom: 0 solid #333;
margin: auto auto;
vertical-align: middle;
box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset,0 0 5px rgba(0, 0, 0, 0.5);
}
.topwrap1 {
-moz-animation: bgscroll 25s infinite linear;
-ms-animation: bgscroll 25s infinite linear;
-o-animation: bgscroll 25s infinite linear;
-webkit-animation: bgscroll 25s infinite linear;
}
/* BEGIN ANIMATIONS */
@-webkit-keyframes bgscroll {
from {background-position: 0 0;}
to {background-position: -9999px 0;}
}
@-moz-keyframes bgscroll {
from {background-position: 0 0;}
to {background-position: -9999px 0;}
}
@-ms-keyframes bgscroll {
from {background-position: 0 0;}
to {background-position: -9999px 0;}
}
@-o-keyframes bgscroll {
from {background-position: 0 0;}
to {background-position: -9999px 0;}
}
@keyframes bgscroll {
from {background-position: 0 0;}
to...