今回は、スクロール連動で要素を下から上にふわっとフェードインさせる機能を作ってみたいと思います。ポイントを確認スクロール連動で押さえておくポイントは以下3点です。$(window).height()あとは、画面のどのくらいの位置に入ったらフェードインさせるかも考えておくと良いと思います。一定の条件に適合した場合クラスを付与するといった一連の処理をつくることができれば完成しそうですね。スクロール値と要素の位置を比較する条件とはどのようなものでしょうか?比較条件を考えるスクロールしたときに、画面内に要素が入ってきた、ということがどのような状態であるかを絵にしてみました。【絵1】この絵の状態を、そのままif文に置き換えてみます。要素にクラスを付与する;}スクロールトップの値は1000だけど、要素の位置が1400・・・さて、どうすればこのif文は成立するでしょうか。ここでポイントとなるのが、$(window).height()の使い方ですね。次の絵の様に考えてみます。【絵2】これはどういうことかというと、画面の高さ500px分を要素の位置から引いている状態です。900pxとなります。よって、スクロールトップ値1000pxは要素の位置900px以上の状態となり、これで条件が整いました。絵1要素の位置:1400px)を要素の位置に足すと1000pxとなり、より絵1のイメージに近い条件が出来上がります。出来上がった条件を汎用的な感じのコードに書き換えてみます。}});スクロールに連動してフェードインさせるための基本的な処理はこんな感じでしょうか。実装してみる要素の表示させるタイミングについては、ユーザーの見ている画角にも寄ったりしますので、比率で設定することもあります。できれば同じクラスを使うことで、スクロール連動させたいところです。(ページリロードなんかも想定して)下から上にスクロールしたケースもカバーできれば尚良しです。この辺りを踏まえてサンプルを作ってみたのが以下になります。CodePen.フェードイン前にtransformで位置をずらしているため、その辺りも考慮させて処理を追加しています。(ちなみに、初期処理として一回強制的にfade判定処理を実行しています)まとめライブラリでも色々とありますが、ちょっとした細かいことをやろうと思うとなかなか融通が効かなかったりすることも多々ありまして。そんな時に、ちょろっと自作できると良いですよね。届いたら、まずは何をやりましょうかね〜〜〜。Saber』と『OrvusVR』あたりでしょうか。このなまりきった身体に喝を入れるために『BOXVR』あたりが丁度良さそうにも思います。便利JavaScriptfujihara2019.05.17はてブ今更ながら、親ボタンの周りに子ボタンを扇状に表示させてみるJavaScriptkouraku2019.03.20はてブバシャログ。Web制作スタッフによるブログです。「現場で使えるテクニック」をモットーに、Web制作全般についてお届けします。