画面外から横にスライドして画面内に入ってくるヤツ

2020年11月17日CSS

はじめに

画面外からスライドしてくるヤツを作ってみます。

できた

See the Pen
RwRvOJW by AtsushiNakata (@nakata999)
on CodePen.

解説

親要素の"overflow-x"に"hidden"を指定します。そうするとはみ出した部分は表示されなくなります。で、悩んだところはココ↓。

.about {
  (略)
  left: 100%;
  (略)
}
.show {
  transform: translateX(-100%);
}

“left"に指定してる100%と"translateX"で指定してる(-)100%って意味がちがうんですね。"left"の方は親要素の幅に対する割合で、"translateX"の方は自分自身の幅に対する割合になってるようです。

cssで位置調整するのムズかしいですよね。というワケで今回は以上です。ありがとうございました。

おしゃれ度

★☆☆☆☆