WordPress

マウスオーバーで背景画像(background-image)を自動スクロールする CSS

広告:ページ内にてアフィリエイト広告を利用しています。

背景画像を自動でスクロールする

一定のエリアの中でバックグラウンドに指定したイメージを、マウスオーバーで自動でスクロールさせる方法です。

CSS を使って想像以上に簡単に実現でき、かつ、なかなか面白い演出です。

■ マウスオーバーでイメージがスクロールします

作成方法を紹介します。

おすすめ副業

\ココナラ成功パターンを詳しく見たい方は こちら をクリックしてください/

PR

イメージがスクロールするオシャレな例

■ 横幅を広げて、窓から覗くような雰囲気で

■ 横にスクロールするパターン

イメージがスクロールする仕組み

四角い領域(矩形)の中でバックグラウンドイメージをスクロールさせています。

スクロールする具体的イメージ
  • <div> タグで矩形の領域を定義する
  • バックグラウンドイメージで、縦に(または横に)長い画像を指定する
  • CSS でマウスオーバー時にスクロールアニメーションさせる

作成方法

■ サンプル1:縦にスクロールするパターン

WordPress の「カスタムHTMLブロック」を用いて、次のコードを埋め込みます。

<div class="myBaseImage">
    <div class="myChildImageScroll" style="background-image: url('https://xxxxxx.com/iamge.jpg')"></div>
</div>

<style>
.myChildImageScroll {
    position: absolute;
    width: 400px;
    height: 300px;
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 3s ease-out;
    overflow: hidden;
}

.myChildImageScroll:hover {
    background-position: center 100%;
}

.myBaseImage {
    position: relative;
    width : 400px;
    height : 300px;
    padding : 0;
    border : 1px solid;
}
</style>
  • <div> タグで、横幅400pc、縦幅300px の矩形を作成
  • background-image プロパティで画像を指定
  • position プロパティで div タグと画像を親子関係にして画像の位置を親の div に合わせる
  • background-position: center 0; 指定で、初期表示時のイメージの縦位置を一番上にする
  • background-position: center 100%; 指定で、マウスオーバー時の最終の縦位置を一番下(100%)にする
  • transition: all 3s ease-out; にて、アニメーション(3秒、終点に近いほどゆっくりになる)を指定

画像の URL を取得する方法

画像の URL は、WordPress の管理画面から「メディア」→「ライブラリ」で取得できます。

URL を取得したいイメージの詳細を表示して、ファイルの URL をコピーします。

完成です。プレビューで動作を確認してください。

■ サンプル2:横にスクロールするパターン

WordPress の「カスタムHTMLブロック」を用いて、次のコードを埋め込みます。

<div class="myBaseImage">
     <div class="myChildImageScroll" style="background-image: url('https://xxxxxx.com/image.jpg')"></div>
</div>

<style>
.myChildImageScroll {
    position: absolute;
    width: 400px;
    height: 400px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 2s ease-out;
    overflow: hidden;
    border-radius : 50%;
}

.myChildImageScroll:hover {
    background-position: 100% 0;
}

.myBaseImage {
    position: relative;
    width : 400px;
    height : 400px;
    padding : 0;
    border : 10px solid;
    border-radius : 50%;
}
</style>
  • <div> タグで、横幅400pc、縦幅400px の矩形を作成
  • background-image プロパティで画像を指定
  • position プロパティで div タグと画像を親子関係にして画像の位置を親の div に合わせる
  • border-radius : 50%; で円形にする(イメージのほうも円形を指定する)
  • background-position: 0 0; 指定で、初期表示時のイメージの横位置を一番左にする
  • background-position: 100% 0; 指定で、マウスオーバー時の最終の横位置を一番右(100%)にする
  • transition: all 3s ease-out; にて、アニメーション(3秒、終点に近いほどゆっくりになる)を指定

完成です。プレビューで動作を確認してください。

WordPress もっと!お役立ちテクニック

WordPress のお役立ちテクニックはこちら

まとめ:マウスオーバーで背景画像を自動スクロールする CSS

一定のエリアの中でバックグラウンドに指定したイメージを、マウスオーバーで自動でスクロールさせる方法です。

CSS を使って想像以上に簡単に実現でき、かつ、なかなか面白い演出となります。

ポイント

  • <div> タグで矩形の領域を定義する
  • バックグラウンドイメージで、縦に(または横に)長い画像を指定する
  • CSS でマウスオーバー時にスクロールアニメーションさせる

いままで、「どうやって作っているんだろう?」と不思議だった世の中のオシャレなページの作り方の一端が見えてきた気がしますね。

40代・50代「会社員におすすめ」の在宅でできる副業5選

40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)

40代、50代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では40代、50代におすすめの副業5選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選(初心者でもできる)

20代、30代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。20代、30代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い(または少ない)主婦におすすめの副業ができれば安心ですね。記事では、20代、30代専業主婦におすすめの副業3選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介!

【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介!快適な移住先も紹介します

都会は住みにくい!地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす!おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る

この副業
アフィリエイトスクール
ノートパソコン
もっと WordPress のノウハウを知りたいときは

WordPress の情報、テクニック一覧はこちらをクリック!

クリックアイコン

WordPress のおすすめテーマ

あなたのブログを強力にアピールし、読者を惹きつける、

魅力的なウェブサイトを手軽に作りたいですか?

そんな方に オススメのテーマが「AFFINGER」 です。

「AFFINGER」テーマを使えば、SEOに強く、集客力がアップし、

上級者でも満足できる、魅力的なウェブサイトが作れます。

ブログアフィリエイトを本気で戦うなら、「AFFINGER」の威力を体感してください。

\ WordPress のおすすめテーマ「アフィンガー」を詳しく見る /

AFFINGER の紹介(メリット・デメリットを紹介)

PR
―― 今日のおみくじ ――

第 37 番

”末吉"


今日のメッセージ

人生ガチャの如し。でも、自分の努力で結果を変えることができるガチャなんです。
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記