dedede こんな感じに、ブロックや写真を境にして文字色を変えているページを最近よく見るので、実装方法を書いてみました。
cssだけでやろうとすると、中々保守が大変そうだったのでjQueryのコード数行を使って実装してみたいと思います。手順としては
- (html)同じ文字ブロック要素を2つ用意
- 片方の文字ブロックは写真（または背景要素のブロック）の上に配置
- ２の方の文字設定を、overflow:hiddenに設定
- jQueryで2つの文字ブロックの位置を同じにする。
ファイル構成はこんな感じです。
TitleColorChange
css
styye.css
js
script.js
img
top.png
index.html
非常にシンプルな構成ですね。
index.htmlのコード
それではhtmlから他のファイルを読み込んでいますが、最低限のものしか書いてません。
container要素に注目してください。title_white と title_blackの二つを使っていますね。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title Color Change</title>
<!-- jquery & iScroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<!-- original -->
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>
</head>
<body>
<div class="container">
<h2 class="title_black title">境目で文字の色が変わります。</h2>
<div class="container__img-wrapper">
<h2 class="title_white title">境目で文字の色が変わります。</h2>
<img src="./img/top.png" alt="">
</div>
</div>
</body>
</html>style.cssのコード
cssも至ってシンプル。blackは位置指定してますが、写真の上に来るように適当にずらしているだけです。
注目して欲しいのは、title_whiteの親要素の.container__img-wrapperにoverflow:hodden;をつけている点です。これによって、title_whiteがコンテナーの外に出た時に勝手に消えます。
.container {
display: flex;
}
.container__img-wrapper {
overflow: hidden;/*これで文字が写真外から出た時に消えるようにする。 */
}
.title_white {
position: relative;
color: #fff;
}
.title_black {
z-index:-1;/*重ね合わせの優先順位を最下位にする。*/
position: relative;
left: 10%;
top: 100px;
white-space: nowrap;
}
script.jsのコード
こちらは全てjQueryで書いています。単純に片方の座標を取得して、もう片方に代入するというコードです。
mvhにtitle_blackの座標を代入し、whiteに代入しているだけです笑
2つ同じコードがあるのは、横スクロールした時に文字の位置が変わるため、動的にtitleの位置を動かすためです。
$(function () {
//読み込み時。
var mvh = $('.title_black').offset();
$('.title_white').offset({
top: mvh.top,
left: mvh.left
});
})
///titleのいち変更_横スクロール時
$(window).resize(function() {
var mvh = $('.title_black').offset();
$('.title_white').offset({
top: mvh.top,
left: mvh.left
});
})まとめ・補足
cssだけで文字位置を調整することも可能なんですが、jqueryの方が個人的に良いと思います。
実は僕も最初はcssだけでやっていたのですが、windowsのChromで見た時に何故かズレていたりしました＾＾;
本実装方法では座標を一致させているのでまず、デバイスや環境によってずれることはありません。
ぜひjQueryで実装してみてください^^
