マウスオーバーで縦スクロール

んにちは

マウスオンで何か変化するという手法は
これまで何度か紹介しましたが、
面白いものを見つけたので、また紹介します。

ではさっそく・・・

下の画像にマウスをのせてみてください。

いかがですか?

個人のサイトではあまり見かけない
面白いエフェクトじゃないでしょうか。

ヘッダーやバナーがこんな感じで動けば、
なかなかオシャレですね( ´∀`)

上は1枚絵ですが、画像を2、3枚
縦に繋げたものでもおもしろそうです。

では手順紹介。

ワードプレスのダッシュボードから
外観>>テーマの編集をクリック

151026_01

画面右下にあるスタイルの中からdesign.cssをクリック

style

design.cssのソースが表示されるので、
今回は一番下にプログラムを追加します(`・ω・´)

151031tm

このtemplateなんちゃらの下に挿入していきます。
こちらのソースをコピペしてください。

.box-fixed {
height: 300px;
overflow: hidden;
position: relative;
}
.field-wrap {
overflow: hidden;
position: absolute;
width: 100%;
}
.field-detail {
transition: all 1s;
}
.field-detail img {
width: 100%;
}
.field-detail:hover {
margin-top: -400px;
transition: all 5s;
-webkit-transition: all 5s;
}

パラメータはお好みで変えてください。
特に変えなくても大丈夫ですが、
赤字で書いた2つは画像の大きさによっては
変えたほうが見栄えがいいです。

最初の300pxは表示されている大きさです。
2つめの-400pxはスクロールされる量です。

試しに色々いじってみるとわかりやすいです(゚∀゚)ノ

さて、実際に画像を貼り付けるには、
以下のコードを貼り付けたい箇所に入れてください。

今回の私のように、
記事に貼り付けることもできますよ。

<div class="box-fixed">
<div class="field-wrap">
<div class="field-detail">
<img src="画像URL">
</div></div></div>

画像URLは好きに変更してくださいね(゚∀゚)ノ

最後までお読み頂きありがとうございました。
分からないこと、悩んでいることなど、
お気軽にお問合せください。
お問い合せはこちら

アフィリエイトを無料で学びたい方、
覚醒メールセミナーNEOを受講しませんか?
覚醒メールセミナーNEO

ブログランキングに参加中しています。
クリックして頂けるとうれしいです( ´∀`)

2 Responses to “マウスオーバーで縦スクロール”

  1. hiro より:

    こんばんはhiroです。

    今回も凄いですね^^
    画像が縦スクロールするの初めて見ました。
    タグでここまで出来るのに感動しました。

    応援ポチ完了です。
    また訪問するが楽しみです^^

    • hiroさん、こんばんは!

      私も最近知った方法ですが、
      おもしろかったので紹介してみました(゚∀゚)ノ

      新しいサイトでも作ったときには
      使ってみようかなと考えています( ´∀`)ノ

      応援ありがとうございます!
      私も伺いますね!

コメントを残す

サブコンテンツ

プロフィール

シンイチロウのアバター

名前:シンイチロウ
覚醒メールセミナーNEO講師
年齢:30代
性別:男性
職業:会社員
詳しいプロフィールはこちら

メール相談受付中

お問い合わせはこちらから
いつでもご相談ください

月別アーカイブ



このページの先頭へ