1
0

(1冊ですべて身につく)扉が開くようなアニメーションに挑戦

Posted at

お疲れ様です。

今日も「1冊ですべて身につくJavaScript入門講座」を使って勉強しました。
タイトルにあります通り、今日もアニメーションです。今回はコラムにあった内容で、コードは見ず、自分で考えたり調べてやってみました:computer:

See the Pen Untitled by mtzkmy (@mtzkmy) on CodePen.

開くアニメーションのところまでは30分でコードを書けたのですが、なかなか動かなくてanimateの書き方を調べなおしたりし、約1時間で完成しました!

この記事を書きながら参考書のコードを見ましたが、全然違う感じでした…
自分のコードでは position: fixed; で画面の固定をしていますが、参考書では transform-origin というプロパティが使われていました。
また知らないプロパティを発見しましたので、 position:fixed との違いも含めておさえておこうと思います。

ただ同じようなアニメーションでもコードは様々とよく聞きますが、その通りだなと感じました!
私が知っているのは初歩の初歩でしょうが、それを使うだけでも作れるものだなーと思いました:relaxed:

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0