スクロールでフワッと要素が出てくるウェブサイトの作り方 - HTML/CSS/Javascript

#HTML #CSS #Javascript #ウェブサイト #チュートリアル #tutorial
【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
↓↓↓↓↓
shincode.info/2...
＼ShinCode_Camp開校しました／
プログラミング講座＆副業・起業＆就職・転職が学べるプラットフォーム🚀
🎁月額2500円で全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁コミュニティ機能付き
🎁いつでも解約可能etc...
↓↓↓↓↓
code-s-school-...
★今回のソースコード：github.com/Shi...
今回はscrollReveal.jsを使ってスクロールアニメーションのウェブサイトを作成しました。Intersection Observer APIよりも使いやすいですね。この動画が良いと思ったらチャンネル登録よろしくお願いします。
バグや分からないことがあればコメント欄、またはDMでご質問ください。
★私のTwitter： / shin_engineer

[@トムリドル-h9x]

ちょいちょいボケようとするしんちゃんきゃわたん💗

[@ricoco57]

古い順に一つづつやってみています。かっこいいですね。興味あるものばかりでありがたいです。先は長いです。😊

[@programming_tutorial_youtube]

おお！僕の成長過程が動画順に見れるかもしれませんね笑。でも無理はしないでくださいね😁

[@林翔太-k9g]

私も古いものも、時間を見つけて、ひとつづつハンズオンさせていただいています。CSSの勉強になってとても助かってます！

[@Ihurah_Travel]

神チャンネルを見つけた…

[@saco-h1s]

素敵です！！

[@はな-n8r]

このスクロールアニメーションが難しいと感じていたので、簡単に実装できる方法がわかってとても嬉しかったです！ありがとうございます^_^

[@y-2_kg]

ためになります！ もっといろいろなライブラリの使い方教えて欲しいです！

[@grape2755]

自分用　14:46

[@testyuhei2739]

jqueryではないところがありがたい！

[@grape2755]

自分用 18:45

[@さくら桜-b7m]

大変勉強になりました！！ありがとうございます😭 このScroll Reveal Tutorialをワードプレスに読み込んで、アニメーションを実装することは可能でしょうか？

[@グッピー-g6z]

チャンネル登録させていただきました。 質問失礼します。 scrollreveal自体は動くんですが下にスクロールするとテキストがフェードインするのではなくフェードアウトした状態になってしまうんですが、どうすればいいですか？ 教えてくれると嬉しいです！😊

[@西浦彪雅-n9g]

すごい参考になります。ところで、パソコン画面の横に表示しているペンマーク？の表示の仕方を教えていただきたいです。

[@programming_tutorial_youtube]

Epicpenと呼ばれるソフトを利用させていただいておりますね。

[@たける-s8h]

web制作初学者です。 どの動画もずばぬけて分かりやすいです。 html/cssの基礎は固まりつつある中、JSに取り組み始めましたが概念の理解からつまづいております。 オブジェクトとメソッドは予め作成されたライブラリを利用してコーディングを行うのが一般的なのでしょうか？関数の仕組みから理解して自分なりに作成するとなるととても理解できそうにありません…。

[@programming_tutorial_youtube]

ご視聴ありがとうございます。 ふわっと出てくるアニメーションだったりは既存のライブラリを使用することがほとんどだと思います。細かいカスタマイズする場合は関数を作ることもありますが。いまだとChatGPTもありますので、相談してみるとより学習の効率があがると思いますよ。

[@すすす-y3z]

いつもありがたく動画で学ばせて頂いております。 後半のscroll revealについてなのですが、imgは無事指定した位置でフェードインするのに対し、h1などのテキストだけ下にズレた位置に表示されてしまいます。 ただ“distance”の60px︎ →0pxに入力し直すと元の位置に戻ります。(その代わり横からの動きはなくなります) こういった場合、どうすれば指定した位置でちゃんとフェードインさせる事が出来るのでしょうか？ 初心者ゆえ初歩的な質問で申し訳ないですが、ご教授頂けると助かります。

[@刃-p5d]

最近webを勉強し始めた者です しんさんのハンバーガーメニューの動画と一緒にscroll.jsを使ってみたらハンバーガーを開いた時に前までは背景色だけでしたが写真も一緒に出てくるのですがどうしたらいいでしょうか？(scroll.jsをコメント化すれば背景色のみ出てきます) 長文になりましたが返信お願いします🙇

[@misa3142]

拝見させてもらい、勉強になりました。 参考にさせてもらい、HP作成しても構いませんか？

[@programming_tutorial_youtube]

どうぞ！大丈夫ですよ！

[@misa3142]

@@programming_tutorial_youtube 有難うございます。感謝いたします。

[@sandongnin]

Scrollingreveal js をリンクじゃ無くてdownload できませんですか？

[@KentaroxKondo]

ハリネズミ😂 うちの会社のホームページも、ふっわふわしてたんですが、実際情報を調べたいユーザーからするとストレスだったということで全部取り除かれました😂 やりすぎ注意ですね！笑