テキストが入れ替わる | 動くWebデザインアイディア帳

テキストナビゲーション
-テキストが入れ替わる-

デモページを見る

See the Pen 5-3-9 テキストが入れ替わる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

PCのみ確認できます。「Result」内のテキストにカーソルをあわせて動きを確かめてね！

動きを実現する仕組み

CSS を使い、絶対配置で中央寄せにした上下のテキストの下部分をoverflow:hidden; で隠す。
hoverをしたらtransform を使ってY方向にテキストを移動させて出現させる。

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-3-9.css">
</head>

body内のテキストナビゲーションを表示させたい場所に以下のHTMLを記載します。

<ul class="gnavi">
<li class="current"><a href="#"><span>Home</span><span>ホーム</span></a></li><!--現在地にはcurrentクラスを付ける-->
<li><a href="#"><span>About</span><span>私たちについて</span></a></li>
<li><a href="#"><span>Service</span><span>サービス</span></a></li>
<li><a href="#"><span>Contact</span><span>お問い合わせ</span></a></li>
</ul>

自作のCSS内の書き方

/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:0 0 50px 0;
    list-style: none;
}

.gnavi li a{
    display: block;
    text-decoration: none;
    color: #333;
}

.gnavi li{
    margin-bottom:20px;
}

/*==================================================
　5-3-9 テキストが入れ替わる
===================================*/


.gnavi li a{
    /*テキストの基点とするためrelativeを指定*/
	position: relative;
    /*はみ出る要素を隠す*/
	overflow: hidden;
	padding:10px 60px;
}

.gnavi li span{
    /*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 50%;
	top:0;
    /*アニメーションの指定*/
	transition: all .5s;
	transform: translate(-50%, 0);/*X方向に-50% ※中央寄せにするため*/
  /*ブロック要素にして透過なし、テキスト折り返しなし*/  
	display: block;
	opacity:1;
	white-space: nowrap;
}

/*差し替わるテキストの設定*/
.gnavi li span:nth-child(2){
	opacity:0;/*透過0に*/
    transform: translate(-50%,100%);/*X方向に-50% Y方向に100%*/
}

/*hoverするとテキストが入れ替わる設定*/
.gnavi li:hover span:nth-child(1){
	opacity:0;/*透過0に*/
    transform: translate(-50%,-100%);/*X方向に-50% Y方向に-100%*/
}

.gnavi li:hover span:nth-child(2){
	opacity:1;/*不透明に*/
	transform: translate(-50%, 0);/*X方向に-50% Y方向に0*/
}