BaxqQBV

baxqqbv.markdown

BaxqQBV

A Pen by Bilgehan Zeki ÖZAYTAÇ on CodePen.

License.

index.html

<div id="hovedblokk"><div id="championselect"><div class="delblokk"><div id="player1" class="spillerblokk notselected"><div class="flashbox flash1"></div><div class="navnblokk">Player1</div></div><div id="player2" class="spillerblokk notselected"><div class="flashbox flash1"></div></div><div id="player3" class="spillerblokk notselected"><div class="flashbox flash1"></div></div><div id="player4" class="spillerblokk"><div class="flashbox flash1"></div></div><div id="player5" class="spillerblokk"><div class="flashbox flash1"></div></div></div><div class="delblokk"><div id="player6" class="spillerblokk"><div class="flashbox flash1"></div></div><div id="player7" class="spillerblokk"><div class="flashbox flash1"></div></div><div id="player8" class="spillerblokk"><div class="flashbox flash1"></div></div><div id="player9" class="spillerblokk"><div class="flashbox flash1"></div></div><div id="player10" class="spillerblokk"><div class="flashbox flash1"></div></div></div></div><div id="logoer"><div class="delblokk2"><img src="https://img.gfx.no/1474/1474505/gamer-logo.400x55.png"><img src="https://img.gfx.no/1474/1474505/gamer-logo.400x55.png"></div><div class="delblokk2"><img src="https://img.gfx.no/1474/1474505/gamer-logo.400x55.png"><img src="https://img.gfx.no/1474/1474505/gamer-logo.400x55.png"></div></div><div id="laglogoer"><div class="delblokk2"><img src="https://bx3ek.no/dist/img/logo/logo_white_text.png"></div><div class="delblokk2"><img src="https://bx3ek.no/dist/img/logo/logo_white_text.png"></div></div><div id="hovedflash" class="flash1"></div></div>

script.js

update(1,"Aatrox");
update(2,"Twitch");
update(3,"Annie");
update(4,"Anivia");
update(5,"Tryndamere");
update(6,"Trundle");
update(7,"Zyra");
update(8,"Ziggs");
update(9,"Draven");
update(10,"Fiora");

function update(player,champion){
  var d = document.getElementById("player" + player);
  d.style.backgroundImage="url('http://ddragon.leagueoflegends.com/cdn/6.24.1/img/champion/" + champion + ".png')";
  var f = document.getElementById("player" + player).getElementsByClassName("flashbox")[0];
  f.classList.toggle("flash1");
  f.classList.toggle("flash2");
  
}

var tabs = ["championselect","logoer", "laglogoer"];

changescene("championselect");

function changescene(scene){
  
  for(var s = 0; s < tabs.length; s++){
    
    if (s == tabs.indexOf(scene)){
      
      var d = document.getElementById(tabs[s]);
      d.style.opacity='1';
      
    }

    else {
      
      var d = document.getElementById(tabs[s]);
      d.style.opacity='0';
      
    }
    
  }
  
}

function hidechampions(){
  var d = document.getElementById("championselect");
  d.classList.add("fadeoff2s");
  
}

function showchampions(){
  var d = document.getElementById("championselect");
  d.classList.add("fadeon2s");
  
}

champions = ["Varus","Anivia","Annie","Ahri", "Tryndamere", "Trundle", "Aatrox"];

setInterval(function () {    
        for (i = 1; i <= 10; i++){
          
            if (document.getElementById("player" + i).classList.contains("notselected") == true){
              setTimeout(function(){
                update(i, champions[Math.floor((Math.random()*champions.length))]);
              }, 1000);
              
          }
        }       
}, 3000)

style.sass

*
  animation-fill-mode: forwards

body
  background: black

#hovedblokk
  height: 64px
  width: 1024px
  position: absolute
  top: 0px
  left: 0px

#hovedflash
  width: 100%
  height: 100%
  position: absolute
  top: 0
  left: 0
  background-color: white
  opacity: 0
  
.notselected
  -webkit-filter: grayscale(100%)
  opacity: 0.5
  
.red
  background-color: red

#laglogoer, #logoer, #championselect
  width: 100%
  height: 100%
  position: absolute
  top: 0
  opacity: 0
  transition-duration: 2s
  
.delblokk
  height: 100%
  width: 50%
  display: inline-block

.delblokk2
  height: 100%
  width: 50%
  display: inline-flex
  flex-direction: row
  align-items: stretch
  justify-content: space-around

.delblokk2 *
  object-fit: contain
  width: 40%

.spillerblokk
  height: 100%
  width: 20%
  display: inline-block
  background-size: cover
  background-repeat: no-repeat
  position: relative
  background-position: center

.navnblokk
  height: 20%
  width: 100%
  background-color: rgba(0,0,0,0.5)
  position: absolute
  bottom: 0
  color: white
  text-align: center
  opacity: 1

.flashbox
  height: 100%
  width: 100%
  background-color: white
  opacity: 0
  -webkit-animation-duration: 0.5s

.fadeoff2s
  -webkit-animation-name: fadeoff
  -webkit-animation-duration: 2s

.fadeon2s
  -webkit-animation-name: fadeon
  -webkit-animation-duration: 2s

.flash1
  -webkit-animation-name: flash1
  
.flash2
  -webkit-animation-name: flash2

@-webkit-keyframes flash1
  0%
    opacity: 1
  100%
    opacity: 0

@-webkit-keyframes flash2
  0%
    opacity: 1
  100%
    opacity: 0

@-webkit-keyframes fadeoff
  0%
    opacity: 1
  100%
    opacity: 0

@-webkit-keyframes fadeon
  0%
    opacity: 0
  100%
    opacity: 1