[Codrops] Tilt Hover Effect（サクッと使うための備忘録となります）

2020-05-102023-04-20

今回は久しぶりに

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

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

Download

Tilt Hover Effects

ソースコードの解読

HTMLから読み解く骨組み

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

85からページのタイトル（Tilt Hover Effects）が６行で記述。

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

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

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

セクションのクラスは、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部分に画像２枚を配置するためのソースがあります。

下記

 <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>タグで開始閉じタグまでの１３行。

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

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

CSSでエフェクトを変更

demo.cssとcomponent.css

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

今回は３箇所 tilter１と２と５を使用。

まず tilter １〜８全てまとめた一括指定

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 画像のデザイン１、２、５


.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;
}


（＊レスポンシブ設定はtilter４だけ）

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

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

Sample Demo 1

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

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

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

CSS編集箇所

・tilter caption 画像４枚

・tilter ２の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;
}

※５は変更なし

.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;
}