CSSでマウスオーバーで文字がスライドして入れ替える方法

CSSでマウスオーバーで文字がスライドして入れ替える方法
このエントリーをはてなブックマークに追加
PR

CSSのline-heightとネガティブマージンを使って手軽に文字を入れ替える方法です
さらにtransitionを使ってアニメーション化します

HTML コード

<div>
    <p>TEXT 001<br>TEXT 002</p>
</div>

 

CSS コード

div {
    width: 300px;
    height: 300px;
    text-align: center;
    background: green;
    overflow: hidden;
}
p {
    line-height: 300px;
    -webkit-transition: margin 1s;
    -moz-transition: margin 1s;
    -ms-transition: margin 1s;
    -o-transition: margin 1s;
    transition: margin 1s;
    margin: 0;
    font-size: 50px;
    color: #fff;
    font-weight: bolder;
}

p:hover {
    margin-top:-300px;
}

 

demo

DEMO 表示

 

解説

line-heightをdivと同じ高さにすることで、文字を上下での中央表示にすることができます、一行だけのテキストで上下の中央寄せをするときに使えるテクニックです

これで2行でdivの2倍の高さになります
Pタグ内でbrを使って2行にしています

2行になったことで、Pの高さはdivの2倍の600pxになり、divから2行目がはみ出ます
このはみ出した部分をdivにoverflow:hiddenを付けることで見えなくしますが存在します

次にmarginを使ってhoverに動作をつけます
まずはPタグのmarginの初期値を0にします、hoverされた時に1行分上にずらすためにmarginで1行分の-300pxをmargin-top:-300pxをhoverに付けます

あとは動作をアニメーション化
pタグにtransitionを付けてhoverによるmarginの変動をアニメーション化させてやれば完了です

この例では下から上に文字がやってくるものですが、pタグのmargin-topを-300pxにして、hoverの方を0にすれば、上から下に文字が入って来ます

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)