Q&A
すみません、表現方法についてうまく言葉にできてなかったので、追記します。
「可視領域に入ったら色を塗ってから色が移動して消えて、要素（テキストなど）を表示させる」方法を知りたいです。
メインビジュアルではなくコンテンツ部分になります。
コメントありがとうございます！
現在多くのサイトで見るようになった手法について、作り方・チュートリアルサイト・プラグインなどあるか知りたく質問させていただきました。
現在多くのサイトで以下のサイトのように「可視領域に入ったら背景の色を塗ってから背景色が移動して消えて、要素を表示させる」方法が見られるのですが、こちらはなんという表現方法なのかを知りたいです。
参考サイト
https://chackathon.com/
また、みなさんが普段どのように作られているかなども教えていただけると嬉しいです。
チュートリアルサイトやプラグインなども知っているものがありましたら、教えていただけると嬉しいです。
ご協力のほど、よろしくお願いいたします！
回答5件
0
可視領域に入ったら
色を塗ってから
色が移動して消えて、
？
要素（テキストなど）を表示させる
Re: MNZ さん
投稿2018/05/09 13:50
総合スコア18162
0
ライブラリを使わないなら、愚直にscrollイベントを拾うか、Intersection Observerを使うのがいいかもしれません。
[JavaScript] スクロールで要素が表示された状態をチェックする方法 - 零弐壱蜂
Intersection Observer が良さそうなので試してみた - Qiita
投稿2018/05/09 13:12
総合スコア36104
0
Safariはバグで動作しないけど、IntersectionObserver APIを使用する方法も。
https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API
投稿2018/05/09 13:11
総合スコア4267
すみません、表現方法についてうまく言葉にできてなかったので、追記します。
「可視領域に入ったら色を塗ってから色が移動して消えて、要素（テキストなど）を表示させる」方法を知りたいです。
メインビジュアルではなくコンテンツ部分になります。
コメントありがとうございます！
0
スクロールファイアの方が近いかな。
投稿2018/05/09 13:06
総合スコア80850
すみません、表現方法についてうまく言葉にできてなかったので、追記します。
「可視領域に入ったら色を塗ってから色が移動して消えて、要素（テキストなど）を表示させる」方法を知りたいです。
メインビジュアルではなくコンテンツ部分になります。
コメントありがとうございます！
ですから、そのままではなく仕組みを流用すればいいだけです。
全てを組んだものってそうそうありません。組み合わせるだけです。
最も難易度の高い「可視領域に入ったら要素が表示される」というところはあるので、
あとは残り部分を自力で実装すれば良いだけです。
提示したリンク先(CSSフレームワークですが）
テキストが表示されたり、画像が表示されたり「可視領域に入ったら要素が表示される」ところだけ共通であとは個々に実装されてますよね。
1個1個はCSSとJavaScriptを使えばできます。
0
パララックスの一種でしょうね。
検索するとたくさん出てくるので調べてみてください。
プラグインもあります。
投稿2018/05/09 11:47
総合スコア13749
背景塗ってテキストを表示させるのはclass名つけてcss3で操作していると思うのですが、パララックスの一種なのでしょうか？
どのように調べるとたくさん出てくるのでしょうか？
プラグインもあるとのことでしたので、可能であれば教えていただけますと幸いです。
すみません、表現方法についてうまく言葉にできてなかったので、追記します。
「可視領域に入ったら色を塗ってから色が移動して消えて、要素（テキストなど）を表示させる」方法を知りたいです。
メインビジュアルではなくコンテンツ部分になります。
すでに回答がたくさんついていていますが、どれも参考にならないのでしょうか？
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。