Last active
August 9, 2018 16:49
-
-
Save WaffleGnome/6148095 to your computer and use it in GitHub Desktop.
Little RocketA CodePen by Waffle. Little Rocket - I got bored so i decided to play around with some animationIf you enjoy please dont forget to give it a heart or leave a comment ^_^
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>lil Rocket</title> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> | |
| <script type="text/javascript" src="http://bit.ly/17qZhs8"></script> | |
| </head> | |
| <body> | |
| <img src="https://i0.wp.com/freepngimages.com/wp-content/uploads/2016/11/super-moon.png?fit=624%2C624" id= "Moon"/> | |
| <img src="http://www.freeiconspng.com/uploads/rocket-ship-png-9.png" id = "Ship"/> | |
| <h1> Made By Waffle</h1> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // this is for the twinkling stars | |
| bonsai.run(document.body, { | |
| height: 660, | |
| width: 900, | |
| code: function() { | |
| function draw() { | |
| var color = bonsai.color('white'); | |
| var circle = new Circle( | |
| 0, | |
| 0, | |
| Math.random() * 2 + 5 | |
| ).attr({ | |
| opacity: 0, | |
| fillColor: color, | |
| zindex: -100, | |
| x: Math.random() * 900, | |
| y: Math.random() * 600 | |
| }).addTo(stage); | |
| var k = new KeyframeAnimation('1s', { | |
| '50%': { | |
| scaleX: .5, | |
| scaleY: .5, | |
| opacity: .8 | |
| }, | |
| '100%': { | |
| scaleX: 1, | |
| scaleY: 1, | |
| opacity: 0 | |
| } | |
| }); | |
| k.on('end', function(){ | |
| circle.destroy(); | |
| draw(); | |
| }); | |
| circle.animate(k); | |
| } | |
| for (var i = 0; i < 6; ++i) { | |
| setTimeout(function(){ | |
| draw(); | |
| }, i * 650); | |
| } | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html{ | |
| background-color:#130422; | |
| } | |
| h1{ | |
| color:white; | |
| opacity:0.02; | |
| position:absolute; | |
| } | |
| h1:hover{ | |
| color:white; | |
| opacity:0.9; | |
| position:absolute; | |
| } | |
| #Moon{ | |
| /*animation*/ | |
| -webkit-animation:Hover 2s infinite linear alternate; | |
| -moz-animation:Hover 2s infinite linear alternate; | |
| -ms-animation:Hover 2s infinite linear alternate; | |
| -o-animation:Hover 2s infinite linear alternate; | |
| animation:Hover 2s infinite linear alternate; | |
| height:35em; | |
| margin-left:5em; | |
| margin-top:5em; | |
| position:absolute; | |
| } | |
| @keyframes Hover{ | |
| 0% {top:-15px;} | |
| 100% {top:15px;} | |
| } | |
| @-webkit-keyframes Hover /* Safari and Chrome */{ | |
| 0% {top:-15px;} | |
| 100% {top:15px;} | |
| } | |
| #Ship{ | |
| /*animation*/ | |
| -webkit-animation:Fly 9s infinite ease; | |
| -moz-animation:Fly 9s infinite ease; | |
| -ms-animation:Fly 9s infinite ease; | |
| -o-animation:Fly 9s infinite ease; | |
| animation:Fly 9s infinite ease; | |
| position:absolute; | |
| height:90px; | |
| margin-top:20em; | |
| margin-left:20em; | |
| } | |
| @keyframes Fly{ | |
| 0% {left:-20em;} | |
| 50% {left:29em;transform: rotate(0deg);z-index:100;} | |
| 75% {transform: rotate(180deg);height:60px;z-index:-100;} | |
| 100% {left:-20em;} | |
| } | |
| @-webkit-keyframes Fly /* Safari and Chrome */{ | |
| 0% {left:-20em;} | |
| 50% {left:29em;-webkit-transform: rotate(0deg);z-index:100;} | |
| 75% {-webkit-transform: rotate(180deg);height:60px;z-index:-100;} | |
| 100% {left:-20em;} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment