WordPress Hosting
Free Photos
WordPress Themes

Animations & Layers, just HTML and CSS

HTML
<div id="content"> <h1>Animation & Layers</h1> <div class="layer mountain one"></div> <div class="layer cloud one"><img src="http://tutoriales.anaislab.com/img/cloud1.png" alt=""></div> <div class="layer mountain two"></div> <div class="layer mountain three"></div> <div class="layer cloud two"><img src="http://tutoriales.anaislab.com/img/cloud1.png" alt=""></div> <div class="layer cloud three"><img src="http://tutoriales.anaislab.com/img/cloud1.png" alt=""></div> </div>
CSS
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:700); html,body,#content{height:100vh;overflow:hidden;} #content { background:url('http://tutoriales.anaislab.com/img/background.jpg')no-repeat 0 0; background-attachment:fixed; background-size:cover; position:relative; } #content:after { content:''; width:100%; height:100%; position:absolute; top:0; left:0; background:#61b2d8; background:-moz-linear-gradient(-45deg, #61b2d8 0%, #f9a4f2 100%); background:-webkit-linear-gradient(-45deg, #61b2d8 0%, #f9a4f2 100%); background:linear-gradient(135deg, #61b2d8 0%, #f9a4f2 100%); filter:progid: DXImageTransform.Microsoft.gradient( startColorstr='#61b2d8', endColorstr='#f9a4f2', GradientType=1); opacity:.5; z-index:100; } #content h1{ text-transform:uppercase; color:#fff; font-weight:bold; font-size:6vw; line-height:120px; top:32%; left:50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%); position:absolute; z-index:99; width:100%; text-align:center; font-family:'Josefin Sans', sans-serif; border:12px solid #fff; mix-blend-mode:overlay; width:80%; } /*Mountains*/ .layer.mountain{ width:100%; height:100%; background-size:cover!important; position:absolute; left:0; top:0; } .layer.mountain.one{background:url('http://tutoriales.anaislab.com/img/layer1.png')no-repeat left bottom;z-index:10;} .layer.mountain.two{background:url('http://tutoriales.anaislab.com/img/layer3.png')no-repeat 0 0;z-index:8;} .layer.mountain.three{background:url('http://tutoriales.anaislab.com/img/layer4.png')no-repeat 0 0;z-index:6;} /*Cloud*/ .layer.cloud img{ position:absolute; opacity:0.6; right:0; animation-name:cloud; animation-iteration-count:infinite; will-change:left; } .layer.cloud.one img{ bottom:0; z-index:9; animation-duration:120s; animation-timing-function:ease-out; } .layer.cloud.two img{ bottom:120px; z-index:7; animation-duration:60s; animation-timing-function:ease-in; } .layer.cloud.three img{ z-index:5; bottom:300px; animation-duration:120s; animation-timing-function:ease-out; } @keyframes cloud {from{right:0;}to{right:2000px;}}
JAVASCRIPT
Expand for more options Login