日別アーカイブ: 2021年8月27日

JavaScript5(DOM操作､class)

コメントを残す

テキストアニメーションから続く

1:DOM操作(アニメーションのための文字分割)

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap" rel="stylesheet">
</head>
<body>
  <div id="container">
   <div class="animate-title inview">
    SUPER ANIMATION
   </div>
    <button onclick="document.querySelector('.animate-title').classList.toggle('inview');">Animation</button>
  </div>
<script src="main.js"></script>
</body>
</html>

mixinの記述

@mixin animation(
  $name,
  $duration: 1s,
  $timing-function: ease,
  $delay: 0s,
  $iteration-count: 1,
  $direction: normal,
  $fill-mode: forwards
) {
animation: {
  name: $name;
  duration: $duration;
  timing-function: $timing-function;
  delay: $delay;
  iteration-count: $iteration-count;
  direction: $direction;
  fill-mode: $fill-mode;
 }
}

SCSSの記述(テキストアニメーションのときに使ったのとほぼ同じ)

続きを読む →