スクロールする度にフワッとアニメーションするウェブサイトの作り方 - HTML/CSS/Javascriptチュートリアル

#HTML #CSS #ウェブサイト #チュートリアル #tutorial
❤️ チャンネル登録： / @programming_tutorial_...
＼ShinCode_Campでプログラミングを楽しもう／
幅広いプログラミングの知識を得るための動画プラットフォーム
🎁僕が作成したUdemy講座が見放題
🎁分からない箇所は質問し放題
🎁フルスタック技術が学べる
🎁コミュニティ機能付き
🎁いつでも解約可能
↓↓↓↓↓
code-s-school-...
🌠【募集】Web開発/Web制作を頼みたい方はこちらのリンクからお問い合わせください🌠
↓↓↓↓↓
worldhacks.co.jp/
＼Webスキルが付いたらWebエンジニアに挑戦してみよう／
私が実際にWebのお仕事を頂いている会社で働いてみよう🚀
応募は下記リンクから
↓
www.wantedly.c...
✅Webエンジニア未経験でもOK
✅フルリモートだから自由な場所で働ける
✅ポテンシャル採用
✅面接で不合格でも「なぜダメだったのか」の理由がきちんと聞ける
✅会社公式HPはこちら → worldhacks.co.jp/
❤️React×TrelloチュートリアルのUdemy92%割引クーポン：shincode.info/2...
❤️Three.js入門のUdemy94%割引クーポン：
shincode.info/2...
❤️React×FirebaseでTwitterクローン構築講座Udemy94%割引クーポン：
shincode.info/2...
★今回のソースコード：github.com/Shi...
Intersection Observer APIを使ってウェブサイトにスクロールアニメーションを実装してみました。この動画が良いと思ったらチャンネル登録よろしくお願いします。
バグや分からないことがあればコメント欄、またはDMでご質問ください。
★私のTwitter： / shin_engineer

[@chi-pop-f5z]

shinさんありがとうございます。ますます楽しくなりました。😊

[@programming_tutorial_youtube]

いえいえ！ 学習がんばってくださいね！

[@ricoco57]

難しかったです。ひたすら真似をしてできましたがまた出直します。

[@fuu5444]

勉強にはなりましたが、初心者向けではないな、と感じました。もっと勉強してから帰ってこようと思います

[@くそゲープレーヤー]

ほんまにわかりやすい。誰よりもわかりやすい

[@SylvainBilhaud]

An other great, easy to understand tutorial. Great job!

[@nagai_net]

いつも中身の濃い動画ありがとうございます。

[@programming_tutorial_youtube]

コメントどうもありがとうございます！ こちらこそご視聴して頂いてうれしい限りです。ありがとうございます。 私の続けられる範囲でがんばりますね('ω')

[@林翔太-k9g]

いつも有益な動画を投稿してくださりありがとうございます。とても勉強になりました。NodeListはforEachは使えるけど、mapやfilterは使えないのですね。ScrollRevealよりも柔軟にカスタマイズしたいときに使ってみようと思いました。

[@さくら桜-b7m]

いつも勉強になります！ ありがとうございました😭

[@本多竜太-t9l]

いつもわかりやす動画ありがとうございます。可能ならばReactのよるスクロールの監視方法も知りたいです。

[@Azurite00F]

すごいためになるます

[@ゆゆ-q3p7e]

この動画、神で草

[@Rustygarnet]

先日はリプライいただきありがとうございました。 今回こちらの動画を見ながら記述していったところうまく動かず、見直しなどもしたのですがそもそもJSの知識が足りないために間違いを見つけられませんでした。 そこでもしよろしければ、例えば「for 文を使って作る〇〇」のような、初心者がJSの基本構文を学べる練習問題のような動画を作っていただけないでしょうか。 ご検討頂ければ幸いです。

[@python3343]

わかりやすい！

[@岬美由紀-m9u]

個人的な意見、一般論だけど、WEBサイトで装飾が必要なのはブランドイメージを訴える必要がある場合だよね。 導線や訴えたい点が解りにくいサイトが多すぎる。 見てるほうは良いからさっさと見せてくれって感じる事が多いので。。。 閲覧者の事を一番に考えるのが一番大事なユーザビリティですね。

[@sakabeee]

とても参考になりました！ ちなみに画面のキャプチャーはどのソフトを使ってらっしゃいますか？

[@programming_tutorial_youtube]

OBSですね！

[@Erikure]

!→雛形　div.title→div class="title"　m0→margin: 0;　と補完されると初めて知った。

[@oc9304]

2年前のコメントへの返信で申し訳ないですがdivタグを書く場合はdivすら要らず.titleだけでいけます

[@seinenboy_a.k.a_dsst]

質問させて下さい。 メディアクエリの幅ごとにrootMarginの数字を変えたいのですが それはどうやってやるのでしょうか？？

[@shonsuke3029]

2:47のような行やタブをそろえるにはどんなコマンドを入力すればいいのでしょうか？

[@programming_tutorial_youtube]

EmmetやPrettier等で検索してみてくださいませ。

[@KM-ot3dr]

IMGをイミジと言わない方がよい。 一応英語なんで、こういう省略の場合は、アイエムジーと言ってぬださいね。

[@博之鈴木-e9f]

Img-wrapの画像が出てきません　activeクラスはデベロッパーではついています。いつもすみません

[@博之鈴木-e9f]

デベロッパーツールではimg-wrapのimg画像は存在しています。 実際にはスクロールしても画像が出てきません。JSなのかCSSなのか原因が分かりません。 Gitのコードを見ても合っているようにみえます。いつもすみません。

[@博之鈴木-e9f]

自己解決しました。

[@programming_tutorial_youtube]

博之さん、コメントありがとうございます。 現在エラー解決のためのコメント返信は控えさせて頂いております。 いつもご視聴ありがとうございます。 今後とも本チャンネルをよろしくおねがいします！

[@tume1124]

jsの下記の部分にエラーが出て対処できません(泣 observer.observe(titleMessage); index.js:23 Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

[@レンジでチン太郎-l9e]

私も同じところで躓いたのですが、 おそらく let titleMessage = document.querySelector(".title"); を let titleMessage = document.querySelectorAll(".title") としていませんか？ 私はこのミスをしていました。。。