【コピペOK】横から流れてくる見出しデザイン
ランディングページなどでよく見かける横から流れてくる見出しのデザイン。
一度使ってみたいと思っていたので、実際にサイトで使えそうなものを載せていきます。
文字だけ流れてくる見出し
基本のデザイン
文字が流れてくる
最初にspanタグを「margin-left: -100%」でテキストをh2タグの外に出し、jsでcssを「margin-left: 0」と書き換えて左からスライドさせてくる方法です。
h2タグに「overflow: hidden」を設定することでh2タグから飛び出した要素は見えないようになる仕組みを利用しています。
スライドする動きが出せるようにspanタグに「transition: 0.4s」を設定することを忘れないようにしましょう。
文字以外の付属要素も流れてくる見出し
最初に下線、遅れてテキストが流れてくる
擬似要素である:beforeで下線を表現します。span同様、「left: -100%」でh2タグの外へ追い出し、クラスが付属されるとともに「left: 0」として左からスライドさせてくるようにします。
このとき、見出しになるテキストよりも先に下線をスライドさせてくる必要がありますので、spanタグに「transition-delay: 0.4s」を設定し、.slide_onのクラスが付属させてからの動きを遅らせるようにします。
ボックスと一緒にスライドする見出し
擬似要素である:beforeでボックスを表現します。今回はボックスが表示された後、右側にスライドしていく形になるため、「left:-100%」で左側に追い出し、クラスが付属された際に「left:100%」と設定することで左から右へとスライドするボックスが出来上がります。spanの中身については上記のテキストが流れてくる仕組みと同じです。
今回は簡単に実装できそうな見出しのみをご紹介しました。
更にjsを上手く活用することで複雑な動きの見出しも実装することが出来ます。
ぜひ参考にしてみてください。
株式会社ジェイオンラインはWebに特化したWebサイト制作・システム開発会社です。
Webに関するご相談からサイト見積まで、お気軽にお問い合わせください。
ジェイオンラインではスタッフを随時募集しております。
採用情報ページよりお気軽にお問い合わせください。
この記事を書いた人
- J-online編集部。
英会話事業やページ制作に関するお得な情報を毎日配信中！
最新の投稿
PHP2022年1月28日【PHPビルドイン関数】文字列を扱う関数- css2021年1月12日【コピペOK】横から流れてくる見出しデザイン
ジェイオンラインの日常2021年1月7日あけましておめでとうございます
ジェイオンラインの日常2020年12月2日一ヶ月会社を休んで副業に専念した話
