EffectHub.com: your best source for gaming

Recommendation

More Effects...

// Using jQuery because I'm lazy
var lights = {
 // Set up event listeners for keyboard keys
 init: function(){
 $(document).keypress(function(e){
 var ch = String.fromCharCode(e.charCode),
 el = $('#item--'+ch);
 lights.blink(el);
 // Flash randomly when user hits enter
 if (e.which === 13) {
 lights.random();
 }
 });
 $('body').focus();
 },
 // Turn a single bulb on and off
 blink: function(el){
 var bulb = el.find('.bulb');
 bulb.addClass('lit');
 setTimeout(function(){
 bulb.removeClass('lit');
 },600);
 },
 // Flash lights randomly
 random: function(){
 (function(count){
 if (count < 36) {
 var caller = arguments.callee;
 window.setTimeout(function() {
 var rand = Math.floor(Math.random() * 26) + 1;
 var el = $('.item').eq(rand);
 var el2 = $('.item').eq(rand*2);
 lights.blink(el);
 lights.blink(el2);
 $('html').toggleClass('flicker');
 caller(count + 1);
 }, Math.floor(Math.random() * 100));
 }
 })(0)
 }
}

$(function(){
  lights.init();
})

CSS

.lights {
  left: 0;
  max-height: 90%;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 9;
}

.row {
  border-image-repeat: stretch;
  border-image-slice: 100 0 0 0;
  border-image-width: 10;
  list-style: none;
  margin: 2em -3em;
  padding: 0;
}

.row1 {
  border-image-source: url(http://svgur.com/i/Ar.svg);
}
.lights .row1 {
  -webkit-animation: row1 10s ease-in-out infinite alternate;
          animation: row1 10s ease-in-out infinite alternate;
}

.row2 {
  border-image-source: url(http://svgur.com/i/Ag.svg);
}
.lights .row2 {
  -webkit-animation: row2 11s ease-in-out infinite alternate;
          animation: row2 11s ease-in-out infinite alternate;
}

.row3 {
  border-image-source: url(http://svgur.com/i/B2.svg);
}
.lights .row3 {
  -webkit-animation: row3 9s ease-in-out infinite alternate;
          animation: row3 9s ease-in-out infinite alternate;
}

@-webkit-keyframes row1 {
  0% {
    -webkit-transform: skewX(2deg) rotate(-4deg);
            transform: skewX(2deg) rotate(-4deg);
  }
  100% {
    -webkit-transform: skewX(-2deg) rotate(-5deg);
            transform: skewX(-2deg) rotate(-5deg);
  }
}

@keyframes row1 {
  0% {
    -webkit-transform: skewX(2deg) rotate(-4deg);
            transform: skewX(2deg) rotate(-4deg);
  }
  100% {
    -webkit-transform: skewX(-2deg) rotate(-5deg);
            transform: skewX(-2deg) rotate(-5deg);
  }
}
@-webkit-keyframes row2 {
  0% {
    -webkit-transform: skewX(3deg) rotate(-1deg);
            transform: skewX(3deg) rotate(-1deg);
  }
  100% {
    -webkit-transform: skewX(6deg) rotate(0deg);
            transform: skewX(6deg) rotate(0deg);
  }
}
@keyframes row2 {
  0% {
    -webkit-transform: skewX(3deg) rotate(-1deg);
            transform: skewX(3deg) rotate(-1deg);
  }
  100% {
    -webkit-transform: skewX(6deg) rotate(0deg);
            transform: skewX(6deg) rotate(0deg);
  }
}
@-webkit-keyframes row3 {
  0% {
    -webkit-transform: skewX(0) rotate(-3deg);
            transform: skewX(0) rotate(-3deg);
  }
  100% {
    -webkit-transform: skewX(-4deg) rotate(-4deg);
            transform: skewX(-4deg) rotate(-4deg);
  }
}
@keyframes row3 {
  0% {
    -webkit-transform: skewX(0) rotate(-3deg);
            transform: skewX(0) rotate(-3deg);
  }
  100% {
    -webkit-transform: skewX(-4deg) rotate(-4deg);
            transform: skewX(-4deg) rotate(-4deg);
  }
}
.item {
  display: inline-block;
  margin: 1em .5em 0;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}

.letter {
  display: block;
  font-size: 4em;
}

.bulb {
  background-color: currentColor;
  border-radius: 50%;
  display: block;
  -webkit-filter: drop-shadow(0.3em 0.3em rgba(0, 0, 0, 0.1));
          filter: drop-shadow(0.3em 0.3em rgba(0, 0, 0, 0.1));
  height: 1em;
  margin: -.2em auto -1em;
  opacity: .7;
  position: relative;
  width: .4em;
  z-index: 9;
}
.flicker .bulb {
  background-color: #556;
}
.bulb.lit {
  background: -webkit-radial-gradient(#ffffff, #aaaaaa), currentColor;
  background: radial-gradient(#ffffff, #aaaaaa), currentColor;
  background-blend-mode: screen;
  box-shadow: 0 .5em .5em currentColor, 0 .5em 1em currentColor, 0 .5em 1.5em currentColor, 0 .5em 3em 2em currentColor;
  opacity: 1;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
}
.bulb:before {
  background-color: #111;
  background: -webkit-linear-gradient(left, #000, #222, #000);
  background: linear-gradient(to right, #000, #222, #000);
  content: '';
  display: block;
  height: .4em;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: -.3em;
  width: .3em;
}
.bulb:after {
  background-color: #fff;
  content: '';
  display: block;
  height: .3em;
  left: .1em;
  position: relative;
  top: .2em;
  width: .05em;
}

.item:nth-child(1) .bulb {
  -webkit-transform: rotate(28deg);
          transform: rotate(28deg);
}
.item:nth-child(1) .letter {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.item:nth-child(2) .bulb {
  -webkit-transform: rotate(-9deg);
          transform: rotate(-9deg);
}
.item:nth-child(2) .letter {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.item:nth-child(3) .bulb {
  -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
}
.item:nth-child(3) .letter {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.item:nth-child(4) .bulb {
  -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
}
.item:nth-child(4) .letter {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.item:nth-child(5) .bulb {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.item:nth-child(5) .letter {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.item:nth-child(6) .bulb {
  -webkit-transform: rotate(14deg);
          transform: rotate(14deg);
}
.item:nth-child(6) .letter {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.item:nth-child(7) .bulb {
  -webkit-transform: rotate(-11deg);
          transform: rotate(-11deg);
}
.item:nth-child(7) .letter {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.item:nth-child(8) .bulb {
  -webkit-transform: rotate(9deg);
          transform: rotate(9deg);
}
.item:nth-child(8) .letter {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.item:nth-child(9) .bulb {
  -webkit-transform: rotate(-16deg);
          transform: rotate(-16deg);
}
.item:nth-child(9) .letter {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.item:nth-child(10) .bulb {
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
}
.item:nth-child(10) .letter {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.item:nth-child(11) .bulb {
  -webkit-transform: rotate(-17deg);
          transform: rotate(-17deg);
}
.item:nth-child(11) .letter {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.item:nth-child(12) .bulb {
  -webkit-transform: rotate(19deg);
          transform: rotate(19deg);
}
.item:nth-child(12) .letter {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.item:nth-child(13) .bulb {
  -webkit-transform: rotate(-27deg);
          transform: rotate(-27deg);
}
.item:nth-child(13) .letter {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.item:nth-child(14) .bulb {
  -webkit-transform: rotate(-6deg);
          transform: rotate(-6deg);
}
.item:nth-child(14) .letter {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.item:nth-child(15) .bulb {
  -webkit-transform: rotate(-7deg);
          transform: rotate(-7deg);
}
.item:nth-child(15) .letter {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.item:nth-child(16) .bulb {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.item:nth-child(16) .letter {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.item:nth-child(17) .bulb {
  -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
}
.item:nth-child(17) .letter {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.item:nth-child(18) .bulb {
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
}
.item:nth-child(18) .letter {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.item:nth-child(19) .bulb {
  -webkit-transform: rotate(-27deg);
          transform: rotate(-27deg);
}
.item:nth-child(19) .letter {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.item:nth-child(20) .bulb {
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
}
.item:nth-child(20) .letter {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.item:nth-child(21) .bulb {
  -webkit-transform: rotate(16deg);
          transform: rotate(16deg);
}
.item:nth-child(21) .letter {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.item:nth-child(22) .bulb {
  -webkit-transform: rotate(28deg);
          transform: rotate(28deg);
}
.item:nth-child(22) .letter {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.item:nth-child(23) .bulb {
  -webkit-transform: rotate(28deg);
          transform: rotate(28deg);
}
.item:nth-child(23) .letter {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.item:nth-child(24) .bulb {
  -webkit-transform: rotate(23deg);
          transform: rotate(23deg);
}
.item:nth-child(24) .letter {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.item:nth-child(25) .bulb {
  -webkit-transform: rotate(-26deg);
          transform: rotate(-26deg);
}
.item:nth-child(25) .letter {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.item:nth-child(26) .bulb {
  -webkit-transform: rotate(29deg);
          transform: rotate(29deg);
}
.item:nth-child(26) .letter {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

#item--a .bulb {
  color: #ffe;
}

#item--b .bulb {
  color: #64f;
}

#item--c .bulb {
  color: #d19;
}

#item--d .bulb {
  color: #6fd;
}

#item--e .bulb {
  color: #0be;
}

#item--f .bulb {
  color: #fd7;
}

#item--g .bulb {
  color: #d19;
}

#item--h .bulb {
  color: #0be;
}

#item--i {
  right: 1.7em;
}
#item--i .bulb {
  color: #6fd;
}

#item--j .bulb {
  color: #e02;
}

#item--k .bulb {
  color: #0be;
}

#item--l .bulb {
  color: #6fd;
}

#item--m .bulb {
  color: #fd7;
}

#item--n .bulb {
  color: #d19;
}

#item--o .bulb {
  color: #e02;
}

#item--p .bulb {
  color: #6fd;
}

#item--q {
  left: 2em;
}
#item--q .bulb {
  color: #d19;
}

#item--r .bulb {
  color: #6fd;
}

#item--s .bulb {
  color: #ffe;
}

#item--t {
  right: 1em;
}
#item--t .bulb {
  color: #fd7;
}

#item--u .bulb {
  color: #64f;
}

#item--v .bulb {
  color: #e02;
}

#item--w .bulb {
  color: #0be;
}

#item--x .bulb {
  color: #fd7;
}

#item--y .bulb {
  color: #e02;
}

#item--z {
  left: 1em;
}
#item--z .bulb {
  color: #d19;
}

.foreground {
  color: #ffe;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  position: relative;
  top: -10vw;
  -webkit-transform: scale(3);
          transform: scale(3);
  z-index: 999;
}
.foreground .row {
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
}
.foreground .row1 {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.foreground .row2 {
  top: .5em;
  -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
}
.foreground .row3 {
  display: none;
}
.foreground .bulb {
  background-color: #aa9;
  margin: -.4em 1em 0;
  opacity: 1;
}

.hint {
  -webkit-animation: fade 10s ease 1;
          animation: fade 10s ease 1;
  bottom: 1em;
  color: #fff;
  font-family: Georgia, serif;
  left: 0;
  margin: auto;
  opacity: 0;
  right: 0;
  position: absolute;
  z-index: 9;
}

@-webkit-keyframes fade {
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade {
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.dado {
  background: -webkit-linear-gradient(#3C2713, #513F29 15%, #b96 25%, #44321C 35%, #5C4531 45%, #261205 60%, #4E3B26 90%, #261205);
  background: linear-gradient(#3C2713, #513F29 15%, #b96 25%, #44321C 35%, #5C4531 45%, #261205 60%, #4E3B26 90%, #261205);
  bottom: 6%;
  position: absolute;
  top: 90%;
  -webkit-transform: rotate(-0.1deg);
          transform: rotate(-0.1deg);
  width: 100%;
}

.panelling {
  background: -webkit-linear-gradient(left, #331F06, #4A3517 1%, #452F15 2%, #4D361F 3%, #4F391E 65%, #4A3517 99%, #331F06) center;
  background: linear-gradient(left, #331F06, #4A3517 1%, #452F15 2%, #4D361F 3%, #4F391E 65%, #4A3517 99%, #331F06) center;
  background-size: 97px;
  bottom: 0;
  position: absolute;
  top: 94%;
  width: 100%;
}

.lamp {
  background: -webkit-linear-gradient(150deg, orange 33%, teal);
  background: linear-gradient(300deg, orange 33%, teal);
  opacity: .1;
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.vignette {
  -webkit-animation: swell 10s ease-in-out infinite alternate;
          animation: swell 10s ease-in-out infinite alternate;
  background: url(https://dl.dropboxusercontent.com/u/5942079/noise.png), -webkit-radial-gradient(rgba(17, 0, 0, 0), #110000);
  background: url(https://dl.dropboxusercontent.com/u/5942079/noise.png), radial-gradient(rgba(17, 0, 0, 0), #110000);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.flicker .vignette {
  background: #100;
}

@-webkit-keyframes swell {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

@keyframes swell {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
html {
  background-blend-mode: multiply;
  background-color: #ba6;
  background-image: url(https://dl.dropboxusercontent.com/s/jyzol1bxl6jrnhi/greyfloral.png);
  background-repeat: repeat;
  font-family: 'Finger Paint', cursive;
  font-size: 20px;
  height: 100%;
  overflow: hidden;
  text-align: center;
}
html.flicker {
  background-color: rgba(17, 0, 0, 0.8);
}
@media only screen and (max-width: 1000px) {
  html {
    font-size: 2vw;
  }
}

HTML

<main class="lights">
 <ul class="row row1">
 <li id="item--a" class="item">a</li>
 <li id="item--b" class="item">b</li>
 <li id="item--c" class="item">c</li>
 <li id="item--d" class="item">d</li>
 <li id="item--e" class="item">e</li>
 <li id="item--f" class="item">f</li>
 <li id="item--g" class="item">g</li>
 <li id="item--h" class="item">h</li>
 </ul>
 <ul class="row row2">
 <li id="item--i" class="item">i</li>
 <li id="item--j" class="item">j</li>
 <li id="item--k" class="item">k</li>
 <li id="item--l" class="item">l</li>
 <li id="item--m" class="item">m</li>
 <li id="item--n" class="item">n</li>
 <li id="item--o" class="item">o</li>
 <li id="item--p" class="item">p</li>
 <li id="item--q" class="item">q</li>
 </ul>
 <ul class="row row3">
 <li id="item--r" class="item">r</li>
 <li id="item--s" class="item">s</li>
 <li id="item--t" class="item">t</li>
 <li id="item--u" class="item">u</li>
 <li id="item--v" class="item">v</li>
 <li id="item--w" class="item">w</li>
 <li id="item--x" class="item">x</li>
 <li id="item--y" class="item">y</li>
 <li id="item--z" class="item">z</li>
 </ul>
</main>
<div class="foreground">
 <ul class="row row1">
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 </ul>
 <ul class="row row2">
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 </ul>
 <ul class="row row3">
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 </ul>
</div>
<div class="dado"></div>
<div class="panelling"></div>
<div class="lamp"></div>
<div class="vignette"></div>
Type something...

Recommendation

Join Effecthub.com