GYGgaJ

gyggaj.markdown

GYGgaJ

A Pen by Ismael Paiva on CodePen.

License.

index.html

<div id="color-overlay"><h1 id="text-bg">RAVE</h1></div>

script.js

// Generates a random color in hexadecimal (ie. #62b9cc)
function generateRandomColor() {
  return '#'+Math.floor(Math.random()*16777215).toString(16);
}

// Changes the color of the background using STYLE
function changeBackgroundColor() {
  var colorBg =   document.getElementById("color-overlay")
  colorBg.style.backgroundColor = generateRandomColor();
}

function changeBackgroundText() {
  var textBg = document.getElementById("text-bg")
  if (textBg.innerHTML == "RAVE") {
    textBg.innerHTML = "OR"   
  } else if (textBg.innerHTML == "OR") {
    textBg.innerHTML = "DIE" 
  } else if (textBg.innerHTML == "DIE") {
    textBg.innerHTML = "RAVE" 
  };
}

function changeBackground() {
  changeBackgroundColor();
  changeBackgroundText();
}

// Run this function every 300ms
setInterval(changeBackground, 300);

style.css

body {
    padding: 0px;
    margin: 0px;
    background-image: url("https://static.pexels.com/photos/2143/lights-party-dancing-music.jpg");
    width: 100%;
    height: 100vh;
    background-size: cover;
}

#color-overlay {
  width: 100%;
  height: 100vh;
  opacity: 0.8;
  text-align: center;
  color: #fff;
}

#text-bg {
  line-height: 100vh;
  font-size: 80px;
  margin: 0px;
  font-family: Verdana;
}