Q&A
yambejpさん、
例示のサイトは特殊でもなさそうなんですね！
いつか再現できるほどのスキルを身に着けるべくがんばります。
アドバイス、ありがとうございました＾＾
###前提・実現したいこと
以下のサイトで、JavaScriptの動作がとてもステキだと思いました。
スクロールすると、グローバルメニューがふわっと大きくなったり、左から画像がでてきたりします。
こういったステキなサイトを見ると、どうやってJavaScript部分が書かれているのか見たいと思ってしまいます。
（どんな技術が必要なのかを知って、今後何を勉強したら、こんなサイトを作れるのかが知りたいのです！）
【リクルート次世代教育研究院】
https://ring.education/
###知りたいこと
Chromeなどのデバッガツールで、どの箇所を見たら、どんなコードで動いているのかが見えるのでしょうか？
HTMLで書かれている内容を見るだけなら、コードとの該当箇所が見れるのですが、JSとなるといまいちわかりません（＞＜）
何かidやclassに紐付けられて、JSコードで書かれているのだろうなと思うのですが、何をフックにして発動し、どんな動きをするように書かれているのかが、デバッガツール上で確認できるようになりたいと思いました。
アドバイス頂ける方がいらっしゃいましたら、ご教示頂ければ幸いです。
###補足情報
わたしのJS知識は、ドットインストールで勉強しはじめたところくらいの知識です。
基礎をふくむ５つの講座を見、手は動かしていますが、まだ身についてはいない程度のレベルです。
これからもがんばっていきたいと思っていますので、
ぜひよろしくお願いいたしますm(_ _)m
回答3件
0
ベストアンサー
デバッガツール上で確認できるようになりたいと思いました。
「確認」は出来ますが、そこに書いてあるコードを理解することはかなり面倒です。
【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/
【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01
ほかの回答者さんもおっしゃるように、jQueryとそのプラグインの使い方を学習されると様々な｢動き｣を操れるようになります。
また、本屋で何冊か本を買って読むと今後の理解が進むと思います。とりあえず最初はわからないことのほうが多いと思いますが、そのうち腑に落ちることも多いはずなのでお勧めします。
【JavaScript 第6版 : David Flanagan, 村上 列 : 本 : Amazon.co.jp】
http://www.amazon.co.jp/dp/4873115736
【絶対に読んでおきたい、JavaScriptのおすすめ書籍7冊 - Qiita】
http://qiita.com/axross/items/1fc342c04aa88d48c713
【JavaScript本格入門 ～モダンスタイルによる基礎からAjax・ｊQueryまで : 山田 祥寛 : 本 : Amazon.co.jp】
http://www.amazon.co.jp/dp/4774144665
投稿2016/12/07 04:41
総合スコア69407
0
開発環境から追いかければわからないことはないでしょうけど
きっとトレースするだけでいやになるでしょうから現実的ではないと思います
またソースをそのまま流用したらパクリなので別の問題にもなりかねないですし
例示のサイトも拝見しましたがさほど特殊なエフェクトでもなさそうなので
jQueryおよび拡張ライブラリの特性を学習してご自身で書かれたほうがよろしいかと
何かつまれば具体的なソースを提示してここで質問すれば適切な対応策も得られるでしょう
投稿2016/12/07 03:23
総合スコア114810
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/07 05:29