비전공자 개발일기

Glitchy Loading Indicator 본문

Javascript

Glitchy Loading Indicator

HiroDaegu 2023. 2. 26. 01:32
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glitchy Loading Indicator</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='//cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script>
</head>
<body>
    <div class="word">LOADING...</div>
    <div class="overlay"></div>   
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400);

html,
body {
  height: 100%;
}

body {
  background: radial-gradient(#222922, #000500);
  font-family: 'Source Code Pro', monospace;
  font-weight: 400;
  overflow: hidden;
  padding: 30px 0 0 30px;
  text-align: center;
}

.word {
  bottom: 0;
  color: #fff;
  font-size: 2.5em;
  height: 2.5em;
  left: 0;
  line-height: 2.5em;
  margin: auto;
  right: 0;
  position: absolute;
  text-shadow: 0 0 10px rgba(50, 255, 50, 0.5), 0 0 5px rgba(100, 255, 100, 0.5);
  top: 0
}

.word span {
  display: inline-block;
  transform: translateX(100%) scale(0.9);
  transition: transform 500ms;
}

.word .done {
  color: #6f6;
  transform: translateX(0) scale(1);
}

.overlay {
  background-image: linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);
  background-size: 1000px 2px;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
function Ticker(elem) {
  elem.lettering();
  this.done = false;
  this.cycleCount = 5;
  this.cycleCurrent = 0;
  this.chars =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()-_=+{}|[]\\;':\"<>?,./`~".split(
      ""
    );
  this.charsCount = this.chars.length;
  this.letters = elem.find("span");
  this.letterCount = this.letters.length;
  this.letterCurrent = 0;

  this.letters.each(function () {
    var $this = $(this);
    $this.attr("data-orig", $this.text());
    $this.text("-");
  });
}

Ticker.prototype.getChar = function () {
  return this.chars[Math.floor(Math.random() * this.charsCount)];
};

Ticker.prototype.reset = function () {
  this.done = false;
  this.cycleCurrent = 0;
  this.letterCurrent = 0;
  this.letters.each(function () {
    var $this = $(this);
    $this.text($this.attr("data-orig"));
    $this.removeClass("done");
  });
  this.loop();
};

Ticker.prototype.loop = function () {
  var self = this;

  this.letters.each(function (index, elem) {
    var $elem = $(elem);
    if (index >= self.letterCurrent) {
      if ($elem.text() !== " ") {
        $elem.text(self.getChar());
        $elem.css("opacity", Math.random());
      }
    }
  });

  if (this.cycleCurrent < this.cycleCount) {
    this.cycleCurrent++;
  } else if (this.letterCurrent < this.letterCount) {
    var currLetter = this.letters.eq(this.letterCurrent);
    this.cycleCurrent = 0;
    currLetter
      .text(currLetter.attr("data-orig"))
      .css("opacity", 1)
      .addClass("done");
    this.letterCurrent++;
  } else {
    this.done = true;
  }

  if (!this.done) {
    requestAnimationFrame(function () {
      self.loop();
    });
  } else {
    setTimeout(function () {
      self.reset();
    }, 750);
  }
};

$words = $(".word");

$words.each(function () {
  var $this = $(this),
    ticker = new Ticker($this).reset();
  $this.data("ticker", ticker);
});
728x90
LIST

'Javascript' 카테고리의 다른 글

To Do List  (0) 2023.02.25
Counter APP  (0) 2023.02.17
Music Player Widget  (0) 2023.02.03
Nested Border Radius  (0) 2023.01.21
Budget App  (0) 2023.01.18
'Javascript' Related Articles more