【CSS-パララックス】背景画像を固定してdiv内でスクロールさせる

f:id:t-d-0203:20171211170008j:plain

こんにちわ。最近自作Webサービスの開発を企ててるけどアイディアが全く浮かばないanです。

最近オシャレなサイトでは背景画像を固定してdivやsectionタグ内でスクロールさせる方法をよく目にします。

一見どうなってんだ?と思いますが、ソースを見れば簡単でした。備忘録として残します。

【Parallax】背景画像を固定してdivやsectionタグ内でスクロールさせる方法

タイトル見ても「何言ってんだこいつ。」ってなってる方いますよね。だって説明しづらいんですもんwデモサイトみてください!パララックスと言うらしい。

DEMO

 ま、百聞は一見に如かず。以下みたいなオシャレな表示の実装方法です。

※一部スマホ・ブラウザ等の環境によっては正しく動作しない可能性があります。

  • 表示

111

222

333

444

最近よく目にするんですよ。これを横幅いっぱいに表示したWEBサイトを。

  • コード
.example {
background-image: url('http://test.jpg');/*背景画像*/
background-attachment: fixed;/*画面からの相対位置(背景固定)*/
background-size: cover;/*背景サイズ*/
}
<div class="example">
<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
</div>

これだけ!とっても簡単です。

ちなみに"Div"は"Section"タグでも問題ないです。

でもこれだけじゃ物足りない!文字も入れたい。

画像の上に文字もいれてオシャレにしたい!

  •  表示

Apple

文字を入れるだけでグッとオシャレになりました!

  • コード

.example2 {
background-image: url('http://test.jpg');/*背景画像*/
background-attachment: fixed;/*画面からの相対位置(背景固定)*/
background-size: cover;/*背景サイズ調整*/
height:300px;/*div高さ*/
position:relative;/*相対位置に配置するように調整*/
.example2 p {
position:absolute;/*親要素からの相対位置*/
color: rgba(255,255,255,0.6);/*文字色*/
top: 50%;/*親要素中の縦位置*/
left: 50%;/*親要素中の横位置*/
font-size:4em;/*文字サイズ*/
transform: translate(-50%,-50%);/*文字ずれ調整*/
margin:0;/*要素外余白*/
padding:0;/*要素内余白*/
}
<div class="example2">
<p>Apple</p>
</div>

まとめ

特にまとめることもないんですが。

こんな感じでオシャレになるんですね~Positionなんかはあやふやだったので再確認できてよかったです。

どっかでまたこの技使ってみよう!!