一定のエリアの中でバックグラウンドに指定したイメージを、マウスオーバーで自動でスクロールさせる方法です。
CSS を使って想像以上に簡単に実現でき、かつ、なかなか面白い演出です。
■ マウスオーバーでイメージがスクロールします
作成方法を紹介します。
目次
イメージがスクロールするオシャレな例
■ 横幅を広げて、窓から覗くような雰囲気で
■ 横にスクロールするパターン
イメージがスクロールする仕組み
四角い領域（矩形）の中でバックグラウンドイメージをスクロールさせています。
- <div> タグで矩形の領域を定義する
- バックグラウンドイメージで、縦に（または横に）長い画像を指定する
- CSS でマウスオーバー時にスクロールアニメーションさせる
作成方法
■ サンプル１：縦にスクロールするパターン
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 をコピーします。
完成です。プレビューで動作を確認してください。
■ サンプル２：横にスクロールするパターン
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秒、終点に近いほどゆっくりになる）を指定
完成です。プレビューで動作を確認してください。
まとめ
一定のエリアの中でバックグラウンドに指定したイメージを、マウスオーバーで自動でスクロールさせる方法です。
CSS を使って想像以上に簡単に実現でき、かつ、なかなか面白い演出となります。
- <div> タグで矩形の領域を定義する
- バックグラウンドイメージで、縦に（または横に）長い画像を指定する
- CSS でマウスオーバー時にスクロールアニメーションさせる
いままで、「どうやって作っているんだろう？」と不思議だった世の中のオシャレなページの作り方の一端が見えてきた気がしますね。
WordPress のおすすめテーマ
- SEO に強く【集客力強化】が望める
- かっこいい（かわいい）ホームページを作りやすい
- 初心者でも使えて、上級者になっても満足できる
本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」！
WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。
-
-
AFFINGER（アフィンガー）テーマは「ここ」がすごい！【WordPress 初心者必見！】
AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ（読者）を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。
続きを見る
WordPress の情報、テクニック一覧はこちらをクリック！
