Skip to content

Instantly share code, notes, and snippets.

@Erreur32
Created May 6, 2018
Embed
What would you like to do?
Moon
<h1 class="alpha ">
Echo'system'
</h1>
<img class="mars" src="https://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" alt="" />
$(document).ready(function() {
setTimeout(function() {
$('.alpha').addClass('in');
},1000)
})
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@font-face {
font-family: 'agency';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.eot'); /* IE9 Compat Modes */
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.woff') format('woff'), /* Modern Browsers */
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.svg#7adfd2e465e5a5494cfebbc2416928d9') format('svg'); /* Legacy iOS */
font-style: normal;
font-weight: 400;
}
html {
font-size: 20px
}
body {
height: 100vh;
overflow: hidden;
background-color: #000;
}
.alpha {
position: absolute;
top: 50%;
left: 50%;
font-family: 'agency';
text-transform: uppercase;
color: #fff;
font-weight: 100;
font-size: 5em;
transform-origin: center center;
transform: translate3d(-50%,-50%,0)scale(1.4);
opacity: 0;
transition: opacity 4s ease-out, transform 4s ease-out, letter-spacing 4s ease-out, -webkit-filter 3s ease-out, filter 3s ease-out;
filter: blur(20px);
-webkit-filter: blur(20px);
white-space: nowrap;
&.in {
transform: translate3d(-50%,-50%,0)scale(1);
letter-spacing: 0.1em;
opacity: 1;
filter: blur(0px);
-webkit-filter: blur(0px);
}
}
.mars {
width: 75%;
display: block;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, 0);
animation: mars 360s infinite linear;
}
@keyframes mars {
0% {
transform: translate(-50%, 0)rotate(0deg);
}
100% {
transform: translate(-50%, 0)rotate(360deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment