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

Поділитися
Вставка
  • Опубліковано 19 лис 2024

КОМЕНТАРІ • 28

  • @fuu5444
    @fuu5444 4 місяці тому +2

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

  • @ricoco57
    @ricoco57 10 місяців тому +1

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

  • @林翔太-k9g
    @林翔太-k9g 3 місяці тому

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

  • @本多竜太-t9l
    @本多竜太-t9l 2 роки тому +3

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

  • @SylvainBilhaud
    @SylvainBilhaud Рік тому +2

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

  • @くそゲープレーヤー
    @くそゲープレーヤー 2 роки тому +1

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

  • @Azurite00F
    @Azurite00F 6 місяців тому +1

    すごいためになるます

  • @nagai_net
    @nagai_net 3 роки тому +2

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

    • @programming_tutorial_youtube
      @programming_tutorial_youtube  3 роки тому +1

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

  • @さくら桜-b7m
    @さくら桜-b7m 2 роки тому +1

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

  • @ゆゆ-q3p7e
    @ゆゆ-q3p7e Рік тому +1

    この動画、神で草

  • @Rustygarnet
    @Rustygarnet Рік тому +1

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

  • @Erikure
    @Erikure 2 роки тому +3

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

    • @oc9304
      @oc9304 Місяць тому

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

  • @python3343
    @python3343 3 роки тому +1

    わかりやすい!

  • @岬美由紀-m9u
    @岬美由紀-m9u Рік тому +1

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

  • @sakabeee
    @sakabeee 2 роки тому +1

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

  • @seinenboy_a.k.a_dsst
    @seinenboy_a.k.a_dsst 2 роки тому

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

  • @shonsuke3029
    @shonsuke3029 Рік тому +3

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

  • @KM-ot3dr
    @KM-ot3dr 6 місяців тому +1

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

  • @博之鈴木-e9f
    @博之鈴木-e9f 2 роки тому

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

    • @博之鈴木-e9f
      @博之鈴木-e9f 2 роки тому

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

    • @博之鈴木-e9f
      @博之鈴木-e9f 2 роки тому +1

      自己解決しました。

    • @programming_tutorial_youtube
      @programming_tutorial_youtube  2 роки тому

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

  • @tume1124
    @tume1124 2 роки тому +4

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

    • @レンジでチン太郎-l9e
      @レンジでチン太郎-l9e 2 роки тому +3

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