[23:43]の時点でコンソールに以下のエラーが出てしまします。 script.js:1 Uncaught TypeError: document.querySelectorALL is not a function script.jsには以下の内容を入力している状態です。 const targetElement = document.querySelectorALL(".animationTarget"); console.log(targetElement); どこを改善したらいいかわからず詰まっている状態です。わかる方いましたら教えていただきたいです。
よくご質問いただく動画だったので、動画の概要欄にファイルをダウンロードできるサイトのURLを貼り付けておきました！
サイト内のダウンロードボタンからファイル一式をダウンロードできますので、ご活用ください！
座学後の初学者です。
とってもとっても有益な動画でした！
1人では全然できなかった
やりたかったフワッと表示がこちらの動画でできそうなので、
何度も繰り返して見て、ポートフォーリオに実装していきます！
説明もわかりやすかったです。つまづいた時に、
どこを見て確認しているのかも参考になりました。
他の動画も参考にさせていただきます。
このような動画を作成いただき、ありがとうございます！
いろいろ詰まったとても勉強になる内容でした。
ありがとうございました！
色々つまづきましたが、出来ましたー😭感動です😭ありがとうございます！！
ちょうど実装したい内容で、非常に参考になりました。ありがとうございます！
動画を見ながらハンズオンで実例に応用することで、理解を深めることができました。
RUclipsで色々なプログラミング動画を見ていますが、最もわかりやすいと思います。今後ともよろしくおねがいします！
参考にしていただけたようでよかったです！
今後も分かりやすい動画を作っていければと思います、こちらこそよろしくお願い致します。
これはすごい！初学者すぎて何時間かけたってぐらい時間かかったけど最後動いた時気持ち良すぎる！ありがとうございます！
フロントエンドエンジニアを目指して勉強中です。やっと自分が見たかった動画に出会えました！
全部見て勉強します！！
そう言っていただけると嬉しいです♪
動画はたくさんあって大変だと思いますが、頑張ってくださいね！
とても参考になりました。
すごいわかりやすい説明で大変勉強になります！
ありがとうございます
今まで見た動画の復習もできる内容なので理解度が高められてうれしいです。
わかりやすい説明と感じてもらえてよかったです！
今後ともよろしくお願い致します。
まだまだCSSの勉強途中ですが、独学のモチベーションが落ちていたところこちらの動画に出会いました。
サイト制作の流れがわかり、何よりもフワッと動くサイトが出来上がっていくのがとても楽しかったです⭐︎
理解できていない箇所も確認できて、勉強になりました。
ありがとうございます。
他の動画でも勉強させていただきます^ ^
サイトに動きが出てくるととても楽しいですよね♪
私はwebのアニメーションが一番好きでこの業界にいます。
まだ少ないですが、他にもいくつかアニメーションに関する動画があるので、是非見てみてください(^ ^)
いつもお世話になっております。このフワッと感を求めていました！ありがとうございます！
求めていたフワッと感ということでよかったです！
今後ともよろしくお願いします。
とても勉強なります、ドンピシャ知りたかった内容です。ありがとうございます。
リクエストにお応えできたようでよかったです！
とても勉強になります！！
勉強になります！ありがとうございます！
いつも動画拝見しております！
スマホサイズになった場合にjs(スクロールアニメーション)を無効にする方法はございますか？
ネットで調べて試したのですが、うまくいかなく困ってます😥
いつもありがとうございます！
スクロールアニメーションの発火をむしろif文でスマホサイズの画面以上の時に限定すればできます。
参考になりました、ありがとうございます！
この動画通りに実装してみましたが、iOSのChromeのみtransition-delayが効かず、逆に先に画像が出てきてしまいます。また、h2タグとpタグに指定しているtransition-durationもiOSのChromeのみスムーズに作動せず、カクカク動く感じです。どのような原因が考えられますでしょうか。
iOSやchromeアプリのバージョンは最新でしょうか？
それから、iOSのSafariやFirefoxでは起こらないということですね？
@@webFrontEndChannel
返信ありがとうございます。iOS、Chromeアプリはいずれも最新バージョンで、端末はiPhone11です。iOSのSafari、Firefoxでは正常に作動しております。
なるほど、そうなるとちょっと分からないですね。
ul.contents>li.animationTarget*4>img[src="img/img$.jpg"]+contentsText>h2{Dummy Title}+p{ここに文章が入ります。ここに文章が入ります。}
初心者質問ですいません。6：30あたりでタブキーを押して展開したところがありますが、タブキーを押してもスペースが空くだけになってしまいます。どうすればいいでしょうか。
例えば、ul.contentsの時点でTabキーを押して展開されますか？
されなければ、お使いのエディターにEmmetが入っていないか、設定が間違っている可能性があります。
ちなみにお使いのエディターはなんでしょうか？
@@webFrontEndChannel すいません！※の所が日本語入力になってたみたいです！お手数お掛けしました！
動画ありがとうございます。
もしご回答可能でしたら質問があるのですが、
ページが表示されたときにすでに画面内に存在する最初のliはスクロールしないと出てこないのが少し違和感がありました。
すでに画面内にあるものについてスクロールせずにふわっと出てくるようにするためには、別途それ用の関数を用意するイメージでしょうか？
そうですね、最初から見えてしまってる要素に関しては別の処理が必要になるかと思います。
20:39 ここら辺で躓きます😢
コードは正しいはずなのに打ち込んでも画像だけしか移動しません、、
あと、Dummy Titleと文章が画像の下に来てしまっててどう直せばいいのかわからないです💦
ご指定お願いします🙏
コードが正しいのに、移動しないとなるとちょっと詳しくPC自体の開発環境などを見てみないと分からないですね💦
もう１つの方もコードを見てみないとちょっと分からないです💦
どうしても解決したい場合は、個別の講義もおこなっておりますので、ご検討いただければと思います。
よろしくお願い致します。
@@webFrontEndChannel お忙しい中返信して下さってありがとうございます‼️もう一度見直してみます🙇♀️
度々本当に申し訳ないです😔 17:52 18:57 39:29 ができないです、特に最後のアニメーションをつけるところのコード打ち込んだ途端にタイトル以外消えてしまいます、自分初心者なので本当にどこが間違っているのかわかりませんでした😢コード載せますので差し支えなければお助け下さい、！
@charset "utf-8";
body{
font-family: serif;
background-color: #333;
color: #fff;
}
{
box-sizing: border-box;
}
header {
padding: 50px;
}
header h1 {
font-size: 70px;
font-weight: bold;
margin-bottom: 60px;
white-space: nowrap;
}
main {
max-width: 1000px;
width: 100%;
margin: 50px auto;
}
.contents li {
position: relative;
opacity:0;
transtion: 1s;
}
.contents li.show {
opacity: 1.0;
}
.contents li:not(:first-of-type) {
margin-top: 200px;
}
.contents li:nth-of-type(odd) .contentsText {
right: 0;
}
.contents li:nth-of-type(even) .contentsText {
align-items: flex-start;
}
.contents li:nth-of-type(even) img {
margin-left: auto;
}
.contensText {
display: flex;
flex-direction: column;
align-items: flex-end;
position: absolute;
top: 40px;
}
.contents h2 {
font-size: 50px;
font-weight: bold;
white-space: nowrap;
background-color: rgba(20,20,20, .8);
padding: 10px 20px;
line-height: 1.4;
letter-spacing: .05em;
border-radius: 5px;
}
.contents p {
line-height: 1.6;
background-color: #555;
font-size: 14px;
max-width: 340px;
padding: 15px;
margin-top: 30px;
border-radius: 5px;
}
.contents img {
width: 65%;
display: block;
border-radius: 5px;
}
Java のコードはこちら
const targetElement = document.querySelectorAll(".animationTarget");
console.log("画面の高さ",window.innerHeight)
document.addEventListener("scroll",function() {
for (let i = 0; i < targetElement.length; i++) {
const getElementDistance = targetElement[i].
getBoundingClientRect().top +targetElement[i].clientHeight +
.6
if (window.innerHeight > getElementDistance) {
targetElement[i].classList.add("show");
}
}
})
コード拝見しましたが、色々と修正箇所がありちょっと直すのが大変だったのと、他の方からも質問をよくいただく動画だったので、動画の概要欄にファイルをダウンロードできるようにしたURLを設置しました！
サイトへの無料登録が必要ですが、参考にしてみてください。
17:58の奇数番目contentsTextを右に寄せられないです!何回も見直してるんですが原因がわからないです。
検証で、対象の要素にどのようにCSSが適用されてるか見てみてください。
もしnth-of-typeがうまく適用されていない場合は、一旦擬似クラスを取った状態なら指定できるのかなどを見てみましょう。
それでもうまく適用できない場合は、さらにセレクタをシンプルにして適用されるかを見ていきましょう。
そうやってセレクタをどんどんシンプルにして、どのように適用されるかを見ていくことでどこに原因があるのかを知ることができます。
初学者です。とてもいい動画でした。ありがとうございました。登録させていただきました。ひとつだけ、、、48:00頃で、mainにするとか、優先順位とか、どうしてそこが問題だと分かったのかとかもう少し詳しい説明いただけたら嬉しいです。
ご視聴いただきありがとうございます！
まず、どうしてそこが問題かとわかったかというと、動画内でも言っている通り検証ツールを見たときに指定したCSSが適用されていなかったからです。
原因として、今回は別のCSSの上書きがされていたので簡単にいうと上書きされないように優先度をあげました。
CSSのセレクタの優先度に関してはこちらの動画で説明していますので、よろしければ見てみてください！
ruclips.net/video/QG4IKTBXvEY/видео.html
@@webFrontEndChannel わざわざご返答ありがとうございます。
transform: noneに訂正線がある→・・・→・・・→優先順位が原因だ！
この「・・・」の部分に何を考えたのか分かるようになるのは難しいです。
ちなみにCSSのshowのところを入れ替えてみたらできました。が、、あまりしないほうがいいのな、、、
いつも勉強になる動画ありがとうございます！
そこで質問なのですが、僕の中ではIntersectionObserverが難しくて、scrollイベントでええやん！ってなってるんですけど...
実際開発する時はどちらを使いますか？
お答えいただけると幸いです。
一般的に実装する際はまだまだscrollイベントが使われているように思います。
ただ、これを使うとコールバック関数が大量に生成され、不必要に動作がもっさりしてしまいますので、intersectionObserver apiを呼び出した方がメリットが多い様に感じます。
しかし、スクロールイベントでも実装によってはサクサク動かすこともできますので、一概にどちらが良いとも言えない気がします。それからapiの方はieが非対応なので、ポリフィルの読み込みが必要です。
現時点ではどちらも理解しておいて最適な方を使うのがベストではないでしょうか？
@@webFrontEndChannel
そうなんですね！！
どちらも理解できるように頑張ります...！
ご丁寧に答えてくださりありがとうございます。
コメント失礼します。
8:00あたりなんですけどalt属性付けていないのに何故画像表示されるんですか？
私の場合、alt属性を書いてないと画像が表示されません。
逆に付けてないと表示されないといったことを聞いたことがないので、分からないですね…
いつもありがとうございます。
質問させていただきます。この動画を見て、自分でコーディングしたHTML・CSSにjavascriptを実装してみたんですが、スクロール時に一瞬だけクラスがつきそのあとすぐ消えてしまいます。なので、
opacity: 0;→opacity: 1;→opacity: 0 ;
という動きになります。
どんな問題が考えられるでしょうか？
クラスをつけた瞬間にクラス消す処理をおこなっているように感じますので、js の書き方かもしれないですね。
@@webFrontEndChannel jsを見直したら、問題点が分かり解決できました！ありがとうございました！
コメント失礼します
JSはどのやつをインストールしていますか？
今回はプラグインなどを使わない実装方法を説明してるので、自作のjs以外は読み込んでいないですね。
この通りに入力しても、何も表示されない状態が続いてしまいます。javascriptとは同期されています。
consoleにエラーは出ていませんか？
それから、クラスなどはスクロール時に付与しますか？
同じようにコードをうち、スクロールしたときにパッとでないのですが、なにが問題なのでしょうか、
ちょっと詳しくコードやエラーを拝見しないとわからないですね。。。
動画いつも拝見しています。
今回jsが絡んでから思うように動かず、、可能でしたらご教授頂きたく、。
consolelogは検証で表示されるのですが、NodeListが表示されません。他の、要素を動かすコードも反映されていないようで全く要素が動かない状態です。エディタはDWを使っています。何か違いがあるのでしょうか。
HTMLのheadにこれを
jsにはこのコードを入れています。（動画の通りに）
const targetElement = document.querySelectorAll(".animationTarget")
document.addEventListener("scroll", function () {
for (let i = 0; i < targetElement.length; i++) {
const getElementDistance = targetElement[i].getBoundingClientRect().top + targetElement[i].clientHeight * 0.6
if (window.innertHeight > getElementDistance) {
targetElement[i].classList.add("show");
}
}
});
いつもありがとうございます。
要素がうまく取得できないようでしたら、deferで問題ないとは思うのですが、
document. addEventListener('DOMContentLoaded', () => {
// ここに全てのコードを入れる
})
という形で書いてみてください。deferと同じ意味になります。
Fullpage.jsを使っていた場合は表示されないですか？showが付かなくて四苦八苦しています。
そうですね、プラグインとか使ってたら競合するので、プラグインのコールバックとかを調べてそれに応じた書き方にしないといけないと思います。
@@webFrontEndChannel 固定された画面で１ページ２ページと変わるjquery入れてるのですが 距離を測るコンソールログの数値が変動しないのでそもそもこの動画の書き方ではできないってことなんですねTT
そうですね、なのでコールバックを上手く使う感じです
@@webFrontEndChannel コールバック、、、TT
ありがとうございます。調べて頑張ります！
[23:43]の時点でコンソールに以下のエラーが出てしまします。
script.js:1 Uncaught TypeError: document.querySelectorALL is not a function
script.jsには以下の内容を入力している状態です。
const targetElement = document.querySelectorALL(".animationTarget");
console.log(targetElement);
どこを改善したらいいかわからず詰まっている状態です。わかる方いましたら教えていただきたいです。
querySelectorAllのALLが全部大文字になっていませんか？
@@webFrontEndChannel 気付きませんでした！ありがとうございます！
動画かなり役に立っております。ありがとうございます。
質問なのですが、
.contents li:nth-of-type(odd) .contentsText {
right: 0;
}
⬆️ここでは、right:0 で右合わせにできるのに、
.contents li:nth-of-type(even) img {
margin-left: auto;
}
⬆️なぜこっちは、right: 0; ではなく margin-left: auto でないと効かないのでしょうか？
rightなどの位置の指定はposition: absoluteなどを指定している時に使うことができます。
逆にabsoluteなどを指定して要素が浮いていると周りとの距離が関係なくなる為、marginの指定が効かなくなります。
一方浮いていない要素（posiiton: absoluteやfixedなどをしていない要素）で、marginが左右どちらかに発生している場合は、marginの片方をautoにすることによって、その反対側に要素自身が移動します。
詳しくは、positionについての解説動画
ruclips.net/video/Oks81_qyHUw/видео.html
もしくは、要素の位置を揃えることについての解説動画
ruclips.net/video/GwxaQ0sfy60/видео.html
などを見ると理解が深まるかもしれません。
すみません、解決しました。
div（.contentsText）だけ、absolute（right: 0;）で位置調整したのは、imgの上に重ねるためですね。
試しに、imgに対しても、absoluteかけて（right: 0;）で位置調整してみたら、画像が重なってしまいました。
absoluteするってことは、floatみたいに浮いて指定場所に配置されるイメージですかね、、
imgのblock要素は浮かせないで残しておかないと、4つのliが全部（浮いて同じ所に絶対配置されて）重なっちゃいますね。
だからliを4つ下に連ねるためにimgには絶対配置を使わないんですかね。
とりあえず、こんな結論に達しましたが、、、
これからも、いろいろなWebページの作成動画をたくさんあげていただけると嬉しいです。感謝🙇♂️
解決して良かったです！
そうですね、absoluteとかを使うときは重ねることが多いです。浮く感じですね。
今回のように色々CSSなどをいじってみると発見があるかもしれないですね。
今後も頑張ってアップロードしていくので、楽しみにしててください♪
これがパララックスって言うものですか？？、、、
いえ、パララックスはこちらですね！
ruclips.net/video/mN1q1viOIro/видео.html
@@webFrontEndChannel わざわざURLまで、ありがとうございます！！！！！