A Pen by А

Thumbnail
This awesome code was written by LeoPoli, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright LeoPoli ©
  • HTML
  • CSS
  • JavaScript
      <h1>
    <svg role="img"><title class="title">Случайное слово!</title><text class="word" dominant-baseline="central" fill="#222" stroke="#222" stroke-linecap="round" stroke-width="1.5%" text-anchor="middle" x="50%" y="50%">Случайное слово!</text><text class="word" dominant-baseline="central" fill="white" text-anchor="middle" x="50%" y="50%">Случайное слово!</text></svg>
  </h1>
  <div class="button-row">
    <button class="js-random">Случайное слово</button>
  </div>

/*Downloaded from https://www.codeseek.co/LeoPoli/a-pen-by-andx410-zRaPxy */
      html, body, h1 {
  height: 100%;
  width: 100%;
}

body {
  transition: background-color 0.3s ease-in;
  font-family: "Open Sans", sans-serif;
  background-color: #ff002b;
  overflow: hidden;
  font-size: 12px;
}
@media (min-width: 480px) {
  body {
    font-size: 14px;
  }
}
@media (min-width: 640px) {
  body {
    font-size: 16px;
  }
}

.word {
  font-family: "Bangers", cursive;
}

svg {
  height: 100%;
  width: 100%;
  position: relative;
  top: 0;
}

svg.active {
  -webkit-animation: pop-out 1s ease-in-out 1;
          animation: pop-out 1s ease-in-out 1;
}

.word {
  font-family: "Bangers", cursive;
  letter-spacing: 0.05em;
  color: white;
  padding: 0.5em;
  font-size: 28px;
}
@media (min-width: 480px) {
  .word {
    font-size: 36px;
  }
}
@media (min-width: 640px) {
  .word {
    font-size: 48px;
  }
}
@media (min-width: 960px) {
  .word {
    font-size: 64px;
  }
}
@media (min-width: 1280px) {
  .word {
    font-size: 84px;
  }
}

p {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  background-color: #222222;
}

@keyframes pop-out {
  0% {
    -webkit-transform: scale3d(0, 0, 1);
            transform: scale3d(0, 0, 1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}
a, a:visited {
  color: inherit;
}
.button-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #222222;
  text-align: right;
  padding: 20px 40px;
  box-sizing: border-box;
  z-index: 10;
}
button {
  width: 150px;
  position: relative;
  border-radius: 25px;
  height: 40px;
  text-align: center;
  background-color: #f2f2f2;
  color: #222222;
  box-shadow: none;
  border: 0;
  outline: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .125s linear;
}
button:hover {
  color: #f2f2f2;
  border-color: #f2f2f2;
  background-color: #222222;
  transition: all .125s linear;
}
html,
body {
  margin: 0;
  padding: 0;
  position: relative;
}
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/*Downloaded from https://www.codeseek.co/LeoPoli/a-pen-by-andx410-zRaPxy */
    $(document).ready(function() {


  $(".js-random").on('click', function(){
    var $svg  = $("svg");
    $svg.removeClass('active');
    
    setTimeout(function(){
      random();
    }, 500);

      // random();    
  })

  function random(){
    var $body = $("body");
    var $svg  = $("svg");
    var $word = $(".word");
    var words = [ "Александр", "Юлия", "Артем", "Вадим", "Галя", "Илья", "Петр", "Слава", "Елена", "Владислав" ];

    $svg.addClass('active');

    var word = words[Math.floor(Math.random() * words.length)] + "!";
        $word.text(word);
        $("body").css("background-color", "hsla(" + Math.floor(Math.random() * (350)) + ", 75%, 58%, 1)");
  }
});

Comments