【JavaScript】図形を回転＆左右スライドを実装

このブログを読むとできるようになること

・Webサイト上の図形を回転させることができる
・Webサイト上の図形をスライドさせることができる

完成イメージはこちら（ボタンを押してね）

See the Pen Untitled by 白石彩乃 (@-Ayano) on CodePen.

開発環境

Codepen

Let's　start !

四角形（静止画）を作成する

See the Pen Untitled by 白石彩乃 (@-Ayano) on CodePen.

色を変えたい場合は、CSSのbackground-colorに好きなカラーコードを入力😄

この状態ではまだ何も動かない

動きの終了を設定する

See the Pen Untitled by 白石彩乃 (@-Ayano) on CodePen.

classにactiveを追加してCSSで右端を指定！

図形に命を吹き込むJSを指定

See the Pen Untitled by 白石彩乃 (@-Ayano) on CodePen.

回転をつける

See the Pen Untitled by 白石彩乃 (@-Ayano) on CodePen.

document.querySelector(`#blueni_test`).animate(
  [
    { transform: 'rotate(0deg)' },
    { transform: 'rotate(360deg)' }
  ],
  {
    duration: 4000,
    easing: 'linear',
    iterations: Infinity
  }
);

を追加しました

durationというのは、回転するスピードを示すので、遅くしたければ、数字を大きくしてあげれば良い

完成イメージはduration: 1000

今回はduration: 4000

なので、かなりスピードが異なることが分かりますよね！