w3.css

아이콘 애니메이션

아이콘을 사용하여 애니메이션 효과를 만드는 방법을 알아보자.

배터리 충전

1단계) HTML 추가

<div id="charging" class="fa"></div>

2단계) Font Awesome 아이콘 라이브러리 포함

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

3단계) ​​JavaScript 추가

<script>
function chargebattery() {
  var a;
  a = document.getElementById("charging");
  a.innerHTML = "";
  setTimeout(function () {
    a.innerHTML = "";
  }, 1000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 2000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 3000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>

이 예에서는 배터리가 충전되는 듯한 인상을 주지만, 실제로는 다섯 개의 다른 아이콘이 표시되어 있다.

chargebattery() 아이콘을 모두 바꾸고 표시하는 함수가 호출 된다.

이 기능은 배터리가 비어 있는 아이콘을 표시하면서 시작한다.

1초 후에 아이콘이 새 아이콘으로 바뀐다.

“배터리가 완전히 충전될 때까지” 아이콘은 1초마다 새로운 아이콘으로 바뀐다.

이 과정은 5초마다 반복되므로 배터리가 충전되는 것처럼 보인다.

더 많은 애니메이션 아이콘

모래시계

<div id="div1" class="fa"></div>

<script>
function hourglass() {
  var a;
  a = document.getElementById("div1");
  a.innerHTML = "";
  setTimeout(function () {
      a.innerHTML = "";
    }, 1000);
  setTimeout(function () {
      a.innerHTML = "";
    }, 2000);
}
hourglass();
setInterval(hourglass, 3000);
</script>

체인

<div id="div1" class="fa"></div>

<script>
function brakechain() {
  var a;
  a = document.getElementById("div1");
  a.innerHTML = "";
  setTimeout(function () {
      a.innerHTML = "";
    }, 1000);
}
brakechain();
setInterval(brakechain, 2000);
</script>

별

<div id="div1" class="fa"></div>

<script>
function ratestar() {
  var a;
  a = document.getElementById("div1");
  a.innerHTML = "";
  setTimeout(function () {
      a.innerHTML = "";
    }, 1000);
  setTimeout(function () {
      a.innerHTML = "";
    }, 2000);
}
ratestar();
setInterval(ratestar, 3000);
</script>

폴더

<div id="div1" class="fa"></div>

<script>
function openfolder() {
  var a;
  a = document.getElementById("div1");
  a.innerHTML = "";
  setTimeout(function () {
      a.innerHTML = "";
    }, 1000);
}
openfolder();
setInterval(openfolder, 2000);
</script>

표정

<div id="div1" class="fa"></div>

<script>
function smile() {
  var a;
  a = document.getElementById("div1");
  a.innerHTML = "";
  setTimeout(function () {
      a.innerHTML = "";
    }, 1000);
  setTimeout(function () {
      a.innerHTML = "";
    }, 2000);
  setTimeout(function () {
      a.innerHTML = "";
    }, 3000);
}
smile();
setInterval(smile, 4000);
</script>

손

<div id="div1" class="fa"></div>

<script>
function hand() {
  var a;
  a = document.getElementById("div1");
  a.innerHTML = "";
  setTimeout(function () {
      a.innerHTML = "";
    }, 500);
  setTimeout(function () {
      a.innerHTML = "";
    }, 1000);
  setTimeout(function () {
      a.innerHTML = "";
    }, 1500);
}
hand();
setInterval(hand, 2000);
</script>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기