webサイトにアニメーションを付ける

Question

JavaScriptやjQuery、webkitなどを用いてwebサイトにアニメーションを付与したいです。
例えばリンクボタンのバックグラウンドの写真をスライドショーさせたり、ホバー時に動画を流したり。
今は必要に応じて調べていますが、とても効率が悪い気がします。
まとめて勉強できる本、動画などはないでしょうか。
一応軽く調べてはみたのですがなかなか見つかりません。
例えばudemyではJavaScriptで検索しても簡単なものかアプリケーションの方へ振っているものしかなかったりして困っています。
これらを使いこなしている方はどのように勉強したのか、とても気になります。
回答よろしくお願いします。

Answer 1

いきなり何かの公式サイトで流れているような素晴らしいアニメーションを作れるようになるわけがないので、簡単なものが載っているのでしょう。
結局は基本技術の組み合わせと発想により出来上がるものなので、基礎や基本概念なしにはできませんし、オンライン学習サイトはあくまで基礎学習の場なので素晴らしいアニメーションを作るような講座はないと思います。
王道はありません。基礎学習をきちんとしていきましょう。
基礎なしに作ることだけを意識したやり方のほうが逆に非効率です。
(特に拾ったコードコピペでできた気になっているのが最も非効率です)

機能を確認したいのでしたらjQuery公式サイトのドキュメントです。公式は英語ですが日本語サイトも別に存在します。
どの言語もですがドキュメントを適切に使えるようになるのが成長のためには最も効率的です。
おおもとの「JavaScript」という観点ではMDNリファレンスも必携です。

Comments

[zynu]

回答ありがとうございます。
やはりドキュメントを読むのが一番早いのですね。
今もなるべくそれで頑張っているのですが幾分味気がなさすぎて気分転換がしたかったのです…
回答者さんはドキュメント以外に、本で勉強したりはなさらないのでしょうか？

[m.ts10806]

私の場合はドキュメントの使い方を「辞書」と位置付けているため、書籍はあまり必要としていません。
例えば国語の授業で作文を書くとなったときにテーマや文の構成などは自分で考えますよね。「こういうことを伝えたいための表現はないか」「この状況にあった慣用句や漢字はないか」で辞書や事典を引きます。それと同じと考えます。
テーマや構成はプログラミングにおいては「要件定義」や「設計」にあたる部分になります。
確かに勉強のようなインプットメインの段階と、実務のようなアウトプットメインの段階では多少は向きは違うかもしれません。
でも結局は最も正しいことが書いてあるのはドキュメントというのは分かっているため、自身が知らない機能を調べるときはドキュメントを確認します。
機能を使いたいがためにドキュメントを見るわけではなく、構成を実現するために必要だからドキュメントを確認する方針ですね。大抵は簡単なサンプルコードも載っていますので、それをもとに自分でも簡単なコードを組んで動かしてみて理解を深めます。
私の主戦上はPHPですが、いつからかPHPマニュアルが主になっていましたね。書籍も持っていないわけではないですが、正誤確認はマニュアルですし、ほとんど試験勉強の教材としての利用にとどまっています。

気分転換をしたいのでしたら、そこは考え方もかえて、「今自分が持っている技術にちょっとプラスしたら作れそうなもの」をテーマに開発に取り組んでみては？
お金をかけて作られたようなものだと(今回のように)途方にくれるばかりでしょうから、「少し調べたりすれば実装のイメージがギリギリわくくらいのレベル」のものをテーマにすると良いです。
それを繰り返せば地力は自ずと育ちます

[m.ts10806]

差し支えなければどのように解決としたのか、至ったのかコメントいただければと。
https://teratail.com/help/question-tips#questionTips4-2