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

Tweet

238

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

解説

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にすれば、上から下に文字が入って来ます

Tweet

短縮URL:

2014年01月20日 WEB制作系 CSS