LinksbaseデザイナーのYukino

Yukino

スクロールしても背景が固定されているとなんだかワクワクしますね!実はこれ、簡単にできちゃうんです。

マスターすれば、静的で物足りなかったページが、動きのあるおしゃれなページに生まれ変わりますよ!

それでは早速やってみましょう〜!

 

用意するもの

  • HTMLエディタ
  • 背景用の画像3枚

スクロールしたくなるデモ

百聞は一見に如かず!

実際どんな風になるのかお見せします。

なんだか楽しくてずっと上下にスクロールしたくなりませんか?

See the Pen
background-attachment
by Yukino Watanabe (@yukino0on)
on CodePen.

マーケティング的 背景固定のメリット

カーテンが上がっていく感じ。
と表現する人もいますね!

文字は通常通り動いていくのに、背景が固まっています。

これをマーケティング的に見ると、伝えたいことに集中させられる
というのがメリットじゃないかなと思います。

文字をあえて少なくすることで、「なになに?次は?」というワクワクを掻き立てられます。
つまり、スクロールしてどんどんのめりこませて行くLP(ランディングページ)でも有効な手法ではないでしょうか。

「リバウンド繰り返していませんか?」

「実はそれ、あなたは悪くないんです。」

「XXなら、痩せたあと体重をキープできる!」

みたいな感じですね。

 

デモでも一応そんな風に書いてみました。

99%の人が自分のヒジを舐められない。
でもそれを知った90%の人が試しに舐めようとする。

らしいですよ。

すごく前のビデオですが、アメリカにいた時に面白い子どもの本があって、そこに書いてありました。

よかったらみて見てください。

にしても画質悪い。
当時は綺麗だと思っていたけど。たった5年でここまで進化するんですね・・。

 

 

HTML/CSSコーディング

ではやり方です!

HTMLとCSSそれぞれ見ていきます。

シンプルなHTMLでOK

今回は、箱が3つのHTMLにしました。

それぞれの箱に言葉が入っています。

これ以上説明のしようがない・・というくらい簡単な構造です。笑

クラスは、固定させたい背景を持つdiv要素に.fixedをつけています。
それぞれのdivの背景を別々の画像にしたいので、それぞれに.bg1, .bg2, .bg3というクラスをつけます。

background-attachmentで背景を固定できる

続いてCSSです。

先ほどのクラスに対して、それぞれ違う背景をbackground-imageで指定します。
ここまでは一緒ですね!

はい、ここが魔法です!笑

固定させたい背景のdivに.fixedクラスをつけたので、この子たちに

background-attachment: fixed;

というCSSを使ってあげます。

たったこれだけ。

あとは、見栄えをよくするために

  • 背景をいっぱいに表示させる
  • 高さを指定
  • 文字を真ん中に

というような感じで整えてあります。

ぜひ使ってみてくださいね!

スマホ(iOS)では表示されない・・!!

さて、このとっても簡単に背景を固定させるbackground-attachmentというCSS。

残念なお知らせです。このCSSはiOSが未対応です。

スクロールの効果がより期待できるのはスマホなんですが、iOSではいつもと変わらず背景が動いていってしまいます。

ただ。

ご安心ください。

ちゃんと裏ワザがあります。

擬似クラスというのを使うのですが、これはまた別の記事で解説したいと思います。

LinksbaseデザイナーのYukino

Yukino

いかがでしたか?簡単でしょ!?背景固定のCSSで、デザインの幅を広げてみてくださいね。

おしゃれサイト制作ならLinksbase

Linksbase(リンクスベイス)は、ワードプレスをベースに、高いデザインスキルを駆使したホームページをご提供しています!

女性ならではのおしゃれなサイトデザインながら、芸術のおしゃれだけでなく、マーケティング観点を加味したご提案いたします。

モットーは、企業やサービスを【ブランディング】し、お客様に「選ばれる」ためのホームページ制作。

ブランディングとは、「〇〇といえばここ」という意識をお客様に根付かせること。「価格競争知らず」「リピート客がたくさん」「社員が長く働いてくれる」そんなビジネス、始めませんか?

Linksbase 相談するボタン

今すぐ相談!