Erreur32 ha revisionato questo gist 6 months ago. Vai alla revisione
Nessuna modifica
Erreur32 ha revisionato questo gist 8 years ago. Vai alla revisione
5 files changed, 81 insertions
index.html(file creato)
| @@ -0,0 +1,4 @@ | |||
| 1 | + | <h1 class="alpha "> | |
| 2 | + | Echo'system' | |
| 3 | + | </h1> | |
| 4 | + | <img class="mars" src="https://www.nasa.gov/sites/default/files/thumbnails/image/christmas2015fullmoon.jpg" alt="" /> | |
moon.markdown(file creato)
| @@ -0,0 +1,7 @@ | |||
| 1 | + | Moon | |
| 2 | + | ----- | |
| 3 | + | ||
| 4 | + | ||
| 5 | + | A [Pen](https://codepen.io/Erreur32/pen/xjXBVR) by [Erreur32](https://codepen.io/Erreur32) on [CodePen](https://codepen.io). | |
| 6 | + | ||
| 7 | + | [License](https://codepen.io/Erreur32/pen/xjXBVR/license). | |
script.js(file creato)
| @@ -0,0 +1,5 @@ | |||
| 1 | + | $(document).ready(function() { | |
| 2 | + | setTimeout(function() { | |
| 3 | + | $('.alpha').addClass('in'); | |
| 4 | + | },1000) | |
| 5 | + | }) | |
scripts(file creato)
| @@ -0,0 +1 @@ | |||
| 1 | + | <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
style.scss(file creato)
| @@ -0,0 +1,64 @@ | |||
| 1 | + | @font-face { | |
| 2 | + | font-family: 'agency'; | |
| 3 | + | src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.eot'); /* IE9 Compat Modes */ | |
| 4 | + | src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ | |
| 5 | + | url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.woff') format('woff'), /* Modern Browsers */ | |
| 6 | + | url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.ttf') format('truetype'), /* Safari, Android, iOS */ | |
| 7 | + | url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.svg#7adfd2e465e5a5494cfebbc2416928d9') format('svg'); /* Legacy iOS */ | |
| 8 | + | ||
| 9 | + | font-style: normal; | |
| 10 | + | font-weight: 400; | |
| 11 | + | } | |
| 12 | + | ||
| 13 | + | ||
| 14 | + | html { | |
| 15 | + | font-size: 20px | |
| 16 | + | } | |
| 17 | + | body { | |
| 18 | + | height: 100vh; | |
| 19 | + | overflow: hidden; | |
| 20 | + | background-color: #000; | |
| 21 | + | } | |
| 22 | + | .alpha { | |
| 23 | + | position: absolute; | |
| 24 | + | top: 50%; | |
| 25 | + | left: 50%; | |
| 26 | + | font-family: 'agency'; | |
| 27 | + | text-transform: uppercase; | |
| 28 | + | color: #fff; | |
| 29 | + | font-weight: 100; | |
| 30 | + | font-size: 5em; | |
| 31 | + | transform-origin: center center; | |
| 32 | + | transform: translate3d(-50%,-50%,0)scale(1.4); | |
| 33 | + | opacity: 0; | |
| 34 | + | transition: opacity 4s ease-out, transform 4s ease-out, letter-spacing 4s ease-out, -webkit-filter 3s ease-out, filter 3s ease-out; | |
| 35 | + | filter: blur(20px); | |
| 36 | + | -webkit-filter: blur(20px); | |
| 37 | + | white-space: nowrap; | |
| 38 | + | &.in { | |
| 39 | + | transform: translate3d(-50%,-50%,0)scale(1); | |
| 40 | + | letter-spacing: 0.1em; | |
| 41 | + | opacity: 1; | |
| 42 | + | filter: blur(0px); | |
| 43 | + | -webkit-filter: blur(0px); | |
| 44 | + | } | |
| 45 | + | } | |
| 46 | + | ||
| 47 | + | .mars { | |
| 48 | + | width: 75%; | |
| 49 | + | display: block; | |
| 50 | + | position: absolute; | |
| 51 | + | z-index: -1; | |
| 52 | + | top: 50%; | |
| 53 | + | left: 50%; | |
| 54 | + | transform: translate(-50%, 0); | |
| 55 | + | animation: mars 360s infinite linear; | |
| 56 | + | } | |
| 57 | + | @keyframes mars { | |
| 58 | + | 0% { | |
| 59 | + | transform: translate(-50%, 0)rotate(0deg); | |
| 60 | + | } | |
| 61 | + | 100% { | |
| 62 | + | transform: translate(-50%, 0)rotate(360deg); | |
| 63 | + | } | |
| 64 | + | } | |