上手くアニメーションがコピーできません

Question

https://dogo-art.com/dogoloveletter/
このサイトの5つのラブレターが出てくるところをコピーしたいのですが、
どうしたら良いでしょうか？
特に左に3つで、右に2つと微妙にずれてる点
文字と画像が重なってる点
などがよくわかりません。
WEB制作初心者なのですが、よろしくお願いします。

Comments

[miyabi_pudding]

コピー、とは、模写を行いたい、ということでしょうか？
（単純にソースコードのコピーなら、デベロッパーツールや、ソースコードダウンロードすればいいだけの話になる）

[takawork]

模写をしながら、どういう原理かを学んで、自分で使えるようになりたいと思っています。

Answer 1

一気に同じものを作ろうとすると、余計にわからなくなると思うので、
まず、分解して一個一個やってみてはいかがでしょうか。

一定のスクロールの位置まできたらアニメーションを一個起こす、
それが出来るようになったら、その同じタイミング（スクロール位置）で同じ形式のアニメーションを複数個開始させる、
とステップアップさせて作ってみてください。

Answer 2

参考サイトのコードは見てないので、このサイトがどのようなコードでアニメーション実装しているかは分かりませんが、
とりあえず、javascriptの
・scrollイベント
・scrollTop
・offsetTop
・forEach
・innerHeight
・if
・四則演算
があればできるかなと思います。

文字と画像の重なりは、
cssで下記の3種類のどれかで可能と思います。
・position:absolute
・transform:translate
・margin: -○○px（ネガティブマージン）

Answer 3

HTML＋CSSは一通りわかりますか？

映画やドラマ、商品のキャンペーンサイト等は動きを使って目を引くようにするために結構技術を使った難しいことをやってることが多いものです。

さきのサイトのラブレター部分のどこまでは出来ますか？

それが説明できないようでしたらまだ早いってことですので諦めてください。