CSSだけでwebページをスライド表示させてみる

CSSだけでwebページをスライド表示させてみる

CSSだけでwebページをバウンド表示させる方法(q-az)でバウンドさせているのが衝撃的だったので、他にもできないかとひとまずスライド表示させることを試してみました。

せっかく覚えたvhという単位を試してみたかったというのもありますが(笑)使わなきゃ定着しないですし。

スライドイメージ

webページ全体をCSSだけでスライド表示させる

参考記事にのっとって、animationとtransformを使ってみました。ただしスライド表示(今回は下からのスライド)なので値はtranlateYを使います。このときに画面の下からニョキニョキ生えてくるかんじを出すためにvhの単位を使ってみました。

やってはみたものの、正直なところもったいつけてスライドしてくるのはとても気持ち悪いです。webページ全体で使うのはとてもオススメできません

参考記事のバウンド表示と同じようにマウスhoverで使えるかなと思ったのですが、下から生えてくるという都合上気持ち悪さに拍車がかかりそうで断念しました。

せっかくなのでmixinにしてみた

誰にどんな需要があるのかサッパリですが、せっかくのなのでmixinにしてみました。

なお、ほとんど検証していないので、どんなふうに動くかはやってみないとわかりません(笑)


コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)

Back to Top