こんにちわ。最近自作Webサービスの開発を企ててるけどアイディアが全く浮かばないanです。
最近オシャレなサイトでは背景画像を固定してdivやsectionタグ内でスクロールさせる方法をよく目にします。
一見どうなってんだ？と思いますが、ソースを見れば簡単でした。備忘録として残します。
Sponsored Link - Powered by Google.
【Parallax】背景画像を固定してdivやsectionタグ内でスクロールさせる方法
タイトル見ても「何言ってんだこいつ。」ってなってる方いますよね。だって説明しづらいんですもんｗデモサイトみてください！パララックスと言うらしい。
ま、百聞は一見に如かず。以下みたいなオシャレな表示の実装方法です。
※一部スマホ・ブラウザ等の環境によっては正しく動作しない可能性があります。
- 表示
111222
333
444
最近よく目にするんですよ。これを横幅いっぱいに表示したWEBサイトを。
- コード
|
1 2 3 4 5 |
.example { background-image: url('https://test.jpg');/*背景画像*/ background-attachment: fixed;/*画面からの相対位置（背景固定）*/ background-size: cover;/*背景サイズ*/ } |
|
1 2 3 4 5 6 |
<div class="example"> <p>111</p> <p>222</p> <p>333</p> <p>444</p> </div> |
これだけ！とっても簡単です。
ちなみに”Div”は”Section”タグでも問題ないです。
でもこれだけじゃ物足りない！文字も入れたい。
画像の上に文字もいれてオシャレにしたい！
- 表示
Apple
文字を入れるだけでグッとオシャレになりました！
- コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.example2 { background-image: url('https://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;/*要素内余白*/ } |
|
1 2 3 |
<div class="example2"> <p>Apple</p> </div> |
まとめ
特にまとめることもないんですが。
こんな感じでオシャレになるんですね～Positionなんかはあやふやだったので再確認できてよかったです。
どっかでまたこの技使ってみよう！！
Sponsored Link - Powered by Google.
