[Codrops] Tilt Hover Effect

今回は久しぶりに

Codropsで見つけたソースを使ってサイトを使ってみたので、

次回似たような依頼があった時に、サクッと使えるための備忘録です。

[toc]

ソースコードの解読

 

HTMLから読み解く骨組み

Webページのヘッダー位置周辺には、Sponcer | JupiterさんのソースとGitHub (73行目)

85からページのタイトル(Tilt Hover Effects)が6行で記述。

その中にナビメニューがあり

その下部に、メイン写真の配置というちょっと複雑な構造です。

一番上のセクションだけ、スポンサーとタイトルが含まれています。

セクションのクラスは、8個に分かれていて、それぞれ2個ずつ

同じエフェクトで違う写真が配置されている構造です。

(フッターに、他のサイトの紹介)

Tilt Hover Effect

メインとなるコード


<section class="content content--c1"></section> <section class="content content--c2"></section> <section class="content content--c3"></section> <section class="content content--c4"></section> <section class="content content--c5"></section> <section class="content content--c6"></section> <section class="content content--c7"></section> <section class="content content--c8"></section>

Section部分に画像2枚を配置するためのソースがあります。

下記

 <a href="#" class="tilter tilter--1">
    <figure class="tilter__figure">
        <img class="tilter__image" src="img/photo3.jpg" alt="img01" />
        <div class="tilter__deco tilter__deco--shine"><div></div></div>
        <figcaption class="tilter__caption">
            <h3 class="tilter__title">Tanya Bondesta</h3>
            <p class="tilter__description">Toronto</p>
        </figcaption>
        <svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
            <path d="M20.5,20.5h260v375h-260V20.5z" />
        </svg>
    </figure>
</a>

<a>タグで開始閉じタグまでの13行。

上記のソースの中で、CSSで変更した部分は、tilter–1 だけなので

他の部分は理解しなくてもOKでしたが、画像とエフェクトの相性を考えて、ソースコードを書くことが必要になってきます。

CSSでエフェクトを変更

 

demo.cssとcomponent.css

component.cssに、tilterのエフェクトがそれぞれ記述されています。

今回は3箇所 tilter1と2と5を使用。

 

まず tilter 1〜8全てまとめた一括指定

tilter 画像のサイズと余白、位置を指定

.tilter {
    display: block;
    position: relative;
    width: 220px;
    height: 315px;
    margin: 0.3em 0.5em;
    color: #fff;
    flex: none;
    perspective: 1000px;
}

.tilter * {
    pointer-events: none;
}

マウスホバーの指定
.tilter:hover, .tilter:focus { color: #fff; outline: none; } 画像の表面を薄く覆うためのエフェクトの設定 .tilter__deco--overlay { background-image: カラー設定のスクリプト );
} .tilter__deco--shine div { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background-image: カラー設定のスクリプト 透明度);
} .tilter__deco--lines { fill: none; stroke: #fff; stroke-width: 1.5px; } .tilter__caption { position: absolute; bottom: 0; width: 100%; padding: 4em; } .tilter__title { margin: 0; font-weight: normal; font-size: 1.5em; font-family: 'Abril Fatface', serif; line-height: 1; } .tilter__description { margin: 1em 0 0 0; font-size: 0.85em; letter-spacing: 0.15em; }

tilter 画像のデザイン 1、2、5


.tilter--1 .tilter__figure::before {
box-shadow: 0 30px 20px rgba(0,0,0,0.5);
}
.tilter--2, .tilter--2:hover, .tilter--2:focus { color: #895b8a; } .tilter--2 .tilter__deco--overlay { background-image: カラー設定のスクリプト  ;
opacity: 0.3; } .tilter--2 .tilter__deco--lines { stroke: #895b8a; stroke-width: 4px; } .tilter--5 .tilter__deco--lines path { stroke-dasharray: 1270; stroke-dashoffset: 1270; transition: stroke-dashoffset 0.7s; } .tilter--5:hover .tilter__deco--lines path { stroke-dashoffset: 0; } .tilter--5 .tilter__figure::before { box-shadow: none; }

(*レスポンシブ設定はtilter4だけ)

骨組みのdemo.cssは、ほとんどいじりません。

component.cssにある .tilter–x (数字)にそれぞれエフェクトの記述があるので、そちらを変更して行きます。

Sample Demo 1

上のサンプルページもすでに変えましたが、これをもっとシンプルに無彩色風のデザインにしたい場合。

とにかくシンプルに、タイトルと写真の意味を考えて掲載します。

ソースの編集はいつものようにDevelperツールを使って、悩まず簡単に!

CSS編集箇所

 

・tilter caption 画像4枚

・tilter 2 のoverlayの色味 →



.tilter { display: block; position: relative; width: 220px; height: 315px; margin: 0.3em 0.5em; color: #fff; flex: none; perspective: 1000px; } .tilter * { pointer-events: none; }
.tilter__deco--overlay { background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%); } .tilter__deco--shine div { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%); } .tilter__deco--lines { fill: none;
   strok 削除 stroke-width: 1.5px; } .tilter__caption { position: absolute; bottom: 0; width: 100%; background-color: #000; opacity: 0.9; padding: 1.0em; } .tilter__title { margin: 0; font-weight: normal; font-size: 1.5em; font-family: 'Abril Fatface', serif; line-height: 1; } .tilter__description { margin: 1em 0 0 0; font-size: 0.85em; letter-spacing: 0.15em; } .tilter--1 .tilter__figure::before { box-shadow: 0 30px 20px rgba(0,0,0,0.5); } .tilter--2, .tilter--2:hover, .tilter--2:focus { 色削除 } .tilter--2 .tilter__deco--overlay { background-image: linear-gradient(45deg, rgba(10, 239, 40, 0.6), rgba(4, 22, 169, 0.6)); opacity: 0.3; } .tilter--2 .tilter__deco--lines { background-color: #000; opacity: 0.3; } ※5は変更なし .tilter--5 .tilter__deco--lines path { stroke-dasharray: 1270; stroke-dashoffset: 1270; transition: stroke-dashoffset 0.7s; } .tilter--5:hover .tilter__deco--lines path { stroke-dashoffset: 0; } .tilter--5 .tilter__figure::before { box-shadow: none; }
Chrome Developerツールで開発
Liked Liked
No Comments