【Swell】スクロールしても背景画像の固定の簡単設定

背景画像固定編アイキャッチ
ポンデ
今回は、私がSwellを選んだ理由ともいえる機能を実装していきます!!

見ていただけましたか?
公式サイトかっこいいですよね!動画動いていたり、背景画像がスクロールしても固定していたり!

そこで!!

このかっこいいエフェクトである、背景画像がスクロールしても固定されたままの部分を再現していきます!!

この公式サイトはSwellを使って作っていると、運営者さんも言っているのでトライしてみましょう。(下図:公式サイトより)

今回は、公式ページの背景画像の固定を再現します。

\\目次から飛べるよ//

背景画像選び

背景画像は「pixabay」というサイトをから入手しました。

Pixabay: 2.200万点以上の高品質なフリー画像素材

ダウンロードして様々な用途に使える、フリーで高品質な画像・動画素材。商用利用でき、クレジット表記も不要です。

pixabayは商用利用可かつ無料の画像、動画も多くおススメです。

サイトにも書いてある通り2200万点ものフリー素材を扱っており、高画質であるので無料なのがよく分からないほどです(笑)

今度「pixabay」に関するブログも作りますので、詳細はそちらで説明します。

背景画像の固定方法

早速、背景画像の固定を実装していきます。(超簡単です)

まずは、自分の作りたいページ(私の場合、固定ページ)を開きます。

ブロックにカーソルを持っていき、「1. +ボタン」→「2. フルワイド」を選びます。

フルワイド部分にカーソルを持っていき、クリック。

さらに、「4. 点点点マーク」→「5. 追加設定の表示」→「6. 背景画像の設定/メディア選択」から好きな背景画像をアップロードします。

背景画像を選ぶと、「背景効果」を選ぶ部分が出てくるので「Fixed Background」を有効化します。

完成!!!

最後に各個人で固定された背景内にブロックを追加すれば、背景画像固定のかっこいいエフェクトを演出できます!

まとめ

完成したのがこれです!!!!

完成画像

これは画像で、エフェクトを確認できないのでこのブログのホーム画面を確認ください。

今回も初心者の私でも簡単に作成できました。
ぜひ試してくださいね!(^^)!

よかったらシェアしてね!

コメント

コメントする

\\目次から飛べるよ//
閉じる