EgyBAJ

egybaj.markdown

EgyBAJ

A Pen by Stefan Baumgartner on CodePen.

License.

index.html

<audio id="sound" src="http://www.tp-strudengau.at/nana.mp3"></audio>

<audio src="http://www.tp-strudengau.at/bb.mp3" id="bomb"></audio>

<img id="batman" src="https://d13yacurqjgara.cloudfront.net/users/502620/screenshots/2037285/batman_run.gif">

<img id="pow" src="http://24.media.tumblr.com/5308be6d5dd4c505c05d2b47289c0670/tumblr_mjj2sgWlTM1rhelkjo1_500.gif" alt="" />

<h1 id="winner">Stefan Baumgartner</h1>

<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">

script.js

var running = false;

$('body').on('click', (e) => {
  if(running) return;
  running = true;
  $('body').removeClass('end');
  $('#pow').removeClass('hidden');
  $('#winner').removeClass('in');
  $('#sound')[0].currentTime = 0;
  $('#bomb')[0].currentTime = 0;
  $('#sound')[0].play();
  $('#bomb')[0].pause();
  $('body').addClass('start');
  setTimeout(end, 11000);
});

const end = () => {
  $('body').addClass('end');
  $('body').removeClass('start');
  $('#sound')[0].pause();
  $('#bomb')[0].play();
  setTimeout(removeBomb, 1000);
}

const removeBomb = () => {
  $('#pow').addClass('hidden');
  const idx = parseInt(Math.random() * uniques.length);
  $('#winner').text(uniques[idx]);
  $('#winner').addClass('in');
  running = false;
}

const members = ["Peter Schmidbauer", "Samuel Gratzl", "Christoph Kopf", "Werner Kurschl", "Elena Tineghe", "Christian Erwin Siber", "Stefan Starke", "Florian Dorfbauer", "Stefan Röbl", "Georg Ritt", "Alexa Erdei", "Stefan Fattinger", "Lukas Holzer", "Christoph Schmid", "Stefan Baumgartner", "Tasha Leyn", "Arno Huetter", "Mario Kromoser", "Roland Hackl", "Christoph Pfennich", "Roman Hutterer", "Michael Weingartner", "Katharina Liedl", "Michael Troger", "Markus Wagner", "Christopher Warmbold", "Stefan Neumüller", "Andreas Lobmaier", "Franz Schickermüller", "Peter Feichtinger", "Reinhard Friesenecker", "Alex Mallinger", "Thomas Schorn", "Armin Ruech", "Kerstin Breiteneder", "Andrea Lentner", "Janusz Antkowiak", "Christoph Stenglein", "Stefan Schraml", "Markus Hiesmair", "Michael Gehmayr", "Jürgen Ratzenböck", "Hari Woodman", "Lara Aigmüller", "Raphael Endstrasser", "Mike Lettner", "Andi Neuhauser", "Samuel Moser", "Paul Lanzerstorfer", "Martin Weber", "Christoph Neumüller", "Gerold Gonzales", "Markus Jäger", "Daniel Krenmayr", "Katrin Strasser", "Michael Wiesinger", "Markus Weninger", "Verena Haunschmid", "Jakob Doppler", "Thomas Wegerer", "Eva Zöserl", "Gerald Aistleitner", "Werner Hackl", "Elisabeth Rosemann", "Alexander Rosemann", "Christian Derwein", "Thomas Feichtinger", "Michael Stögner", "Christoph Wimberger", "Roxana Chelemen", "Reinhard Buchinger", "Matthias Holzinger", "Thomas Einwaller", "Christopher Frodo Gruber", "Philipp Moser", "Jürgen Etzlstorfer", "Phil Reither", "Dominik Hurnaus", "Stefan Baumgartner", "Dominik Hurnaus", "Alexander Rosemann", "Elisabeth Rosemann", "Hannes Sachsenhofer", "Michael Troger", "Mathias Aichinger", "Sebastian Gierlinger",  "Florian Steiner", "David Muhr", "Thomas Achleitner", "Thomas Fischl", "Werner Kurschl", "Patrick Steiner", "Georg Ringer", "Bettina Steger", "Thomas Einwaller", "Cornelia Eder", "Anna Völkl", "Dominik Hierner", "Christoph Wimberger", "Florian Hörschläger", "Philip Lonsing", "Endre Szasz-Revai", "Kerstin Breiteneder", "Wolfgang Traunmüller", "Phil Reither", "Paul Lanzerstorfer", "Markus Klein"];

const uniques = Array.from(new Set(members));
console.log(uniques);
console.log(uniques.length);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

body {
  background-color: #f7f7f8;
  position: relative;
  min-height: 100vh;
  margin: 0;
}

.hidden {
  display: none !important;
}

#batman {
  width: 50%;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-200%, -50%);
  transition: none;
}

.start #batman {
  transform: translate(-50%, -50%);
  transition: transform 6s ease;
}

#pow {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  display: none;
  transform: translate(-50%, -50%);
}

.end #pow {
  display: block;
}

h1 {
  font-family: 'Bangers';
  font-size: 60px;
  font-weight: normal;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  margin: 0;
}

h1.in {
  transition: opacity 2s ease;
  opacity: 1;
}