Created
June 9, 2013 16:51
-
-
Save TimPietrusky/5744236 to your computer and use it in GitHub Desktop.
A CodePen by Tim Pietrusky. Crazy suns ☼ flying. - Crazy suns ☼ flying around and chasing for world domination. Wake the ghosts with a click (head-only) http://codepen.io/TimPietrusky/pen/visual-vomit
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
| <!-- | |
| Visual Vomit Visulaization Stuff | |
| Just a bunch of crazy suns flying around and chasing for world domination. | |
| 2012 by Tim Pietrusky | |
| timpietrusky.com | |
| --> | |
| <-- | |
| Click anywhere to add more freaking ghosts to the scene. | |
| --> | |
| <body title="click to add more freaking ghosts"> | |
| <div id="world"> | |
| <div class="crazy-sun"> | |
| <div class="hole"></div> | |
| <div class="area"></div> | |
| <div class="area"></div> | |
| <div class="area"></div> | |
| </div> | |
| <div class="crazy-sun"> | |
| <div class="hole"></div> | |
| <div class="area"></div> | |
| <div class="area"></div> | |
| <div class="area"></div> | |
| </div> | |
| <div class="crazy-sun"> | |
| <div class="hole"></div> | |
| <div class="area"></div> | |
| <div class="area"></div> | |
| <div class="area"></div> | |
| </div> | |
| <div class="crazy-sun"> | |
| <div class="hole"></div> | |
| <div class="area"></div> | |
| <div class="area"></div> | |
| <div class="area"></div> | |
| </div> | |
| </div> | |
| <div class="crazy-sun"> | |
| <div class="area"></div> | |
| <div class="area"></div> | |
| <div class="area"></div> | |
| <div class="area"></div> | |
| <div class="area"></div> | |
| <div class="area"></div> | |
| </div> | |
| <body> |
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
| /* | |
| * Animate 'area' | |
| */ | |
| var areas = $('.area'), | |
| _i = 0; | |
| $.each(areas, function (i, v) { | |
| if ((_i += 1) > 3) { | |
| _i = 1; | |
| } | |
| $(this).addClass('go-'+_i); | |
| }); | |
| var crazy_suns = $('.crazy-sun'), | |
| _i = 0; | |
| /* | |
| * Animate 'craze-sun' | |
| */ | |
| $.each(crazy_suns, function (i, v) { | |
| var _i = i + 1; | |
| $(this).addClass('ateam-'+_i); | |
| }); | |
| /* | |
| * Clone 'crazy-sun' for ghost effect | |
| */ | |
| setTimeout(function() { | |
| $('.crazy-sun').css('opacity', .5); | |
| $('.crazy-sun').clone().appendTo('body'); | |
| }, 15); | |
| /* | |
| * Body click event to add more clone trooper | |
| * to the battlefield. | |
| */ | |
| var max_clones = 1, | |
| count_clones = 0; | |
| $('body').click(function() { | |
| if (count_clones < max_clones) { | |
| var clone_trooper = $('.crazy-sun').clone(); | |
| $.each(clone_trooper, function(i, v) { | |
| if (i > 5) { | |
| delete clone_trooper[i]; | |
| } | |
| }); | |
| clone_trooper = clear(clone_trooper); | |
| $.each(clone_trooper, function(i, v) { | |
| $(this).css('opacity', .1); | |
| $(this).appendTo('body'); | |
| }); | |
| $('#world').rotate(66); | |
| count_clones += 1; | |
| } | |
| }); | |
| /* | |
| * Clear Arrays and Objects | |
| */ | |
| function clear(old_array) { | |
| var new_array = new Array(); | |
| $.each(old_array, function(i, v) { | |
| if (old_array[i] != undefined) { | |
| new_array[i] = old_array[i]; | |
| } | |
| }); | |
| return new_array; | |
| } |
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
| /* | |
| * Full height & width body | |
| */ | |
| html, | |
| body { | |
| border-width: 0px; | |
| height:100%; | |
| width:100%; | |
| margin:0; | |
| padding:0; | |
| text-align:center; | |
| background:#000; | |
| overflow:hidden; | |
| } | |
| body { | |
| transform:scale(1.3); | |
| } | |
| .hole { | |
| position:absolute; | |
| z-index:1337; | |
| top:20%; | |
| left:20%; | |
| width:150px; | |
| height:150px; | |
| background:#000; | |
| border-radius:75px; | |
| box-shadow:inset 0 0 50px rgba(140, 140, 140, .3); | |
| } | |
| .area { | |
| position:absolute; | |
| top:20%; | |
| left:20%; | |
| width:150px; | |
| height:150px; | |
| background:rgba(200, 0, 0, .3); | |
| box-shadow:inset 0 0 50px rgba(240, 0, 0, .6); | |
| opacity:0; | |
| } | |
| .go-1, | |
| .go-2, | |
| .go-3 { | |
| animation: rotate 2.5s infinite linear backwards; | |
| opacity:1; | |
| } | |
| .go-2 { | |
| animation-delay:-.25s; | |
| } | |
| .go-3 { | |
| animation-delay:-.5s; | |
| } | |
| @keyframes rotate { | |
| from {transform: rotate(0deg);} | |
| to {transform: rotate(360deg);} | |
| } | |
| #wtf {} | |
| .ateam-1 { | |
| animation: ateam-1 4s infinite ease-in-out forwards; | |
| } | |
| .ateam-1 .area { | |
| background:rgba(0, 200, 0, .3); | |
| box-shadow:inset 0 0 50px rgba(0, 240, 0, .6); | |
| } | |
| @keyframes ateam-1 { | |
| 0%, 100% {transform:translate(150%, 150px);} | |
| 50% {transform:translate(-80%, 450px);} | |
| 75% {transform:translate(80%, -250px);} | |
| } | |
| .ateam-2 { | |
| animation: ateam-2 9s infinite ease-in-out forwards; | |
| } | |
| .ateam-2 .area { | |
| background:rgba(0, 0, 200, .3); | |
| box-shadow:inset 0 0 50px rgba(240, 0, 240, .6); | |
| } | |
| @keyframes ateam-2 { | |
| 0%, 100% {transform:translate(-125%, 150px);} | |
| 50% {transform:translate(80%, 450px);} | |
| 75% {transform:translate(-190%, 350px);} | |
| } | |
| #asdf {} | |
| .ateam-3 { | |
| animation: ateam-3 6s infinite ease-in-out forwards; | |
| } | |
| @keyframes ateam-3 { | |
| 0%, 100% {transform:translate(75%, 0px);} | |
| 50% {transform:translate(15%, 250px);} | |
| 75% {transform:translate(-90%, 750px);} | |
| } | |
| #jkl {} | |
| .ateam-4 { | |
| animation: ateam-4 14s infinite ease-in-out forwards; | |
| } | |
| .ateam-4 .area { | |
| background:rgba(0, 200, 200, .3); | |
| box-shadow:inset 0 0 50px rgba(0, 240, 240, .6); | |
| } | |
| @keyframes ateam-4 { | |
| 0%, 100% {transform:translate(-50%, 25px);} | |
| 50% {transform:translate(80%, 450px);} | |
| 75% {transform:translate(30%, 450px);} | |
| } | |
| .ateam-5 .area { | |
| left:40%; | |
| margin:250px auto; | |
| width:350px; | |
| height:10px; | |
| opacity:.15; | |
| background:#333; | |
| box-shadow:inset 0 0 50px rgba(40, 40, 40, .6); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment