TiltHoverで画像を更に魅力的に‼スクリプトを因数分解

/ 0 Comments / , , , / , /

こんにちは。新たな台風がやってきていますが皆さんおげんきですか？

ブログばっかり更新してどうやって皆さん稼いでるのかな～って不思議に思ったことはありませんか！？

今日は、アフィリエイトだけでなくソースコードを書いて、売る方法についてもご紹介します。

ただ売るときに計算が必要ですから、先にソースの読み方についてもご紹介させてくださいね。

Tilt Hover Effectは昨年もご紹介しましたが、更に解りやすく分解してお伝えしたいと思います。

前回の記事はこちら  ⇒⇒

Hover Effect

A8.netはアフィリエイトの神

アフィリエイターなら必ずご存じのA8.net。

WordPressの利用者が増える中、新しいソースコードが理解できて、ホームページに盛り込むことができたら、サイトを売買して報酬獲得することができます。

例えば、A8 M＆Aに査定申請をすることで、10～100万で売れることもあるそうです。

査定するにはA8.netの会員登録が必要です。無料ですので、この機会にぜひご登録を！！

前回の記事にもソースコードを簡単に解説していますので、細かい内容はこちらで読むことができます。

Tilt HoverはいつものCodropsでお取り寄せ

フォルダ構成の確認

HTMLとCSS、JSで構成されています。

HTMLファイルの中にあるJavaScript .movementでトップ画像のエフェクトを書いています。

だからこれを消さないように注意してください。

{
                movement: {
                    lines : {
                        translation : {x: -5, y: 5, z: 0},
                        reverseAnimation : {duration : 1000, easing : 'easeOutExpo'}
                    },
                    caption : {
                        translation : {x: 15, y: 15, z: 0},
                        rotation : {x: 0, y: 0, z: 3},
                        reverseAnimation : {duration : 1500, easing : 'easeOutElastic', elasticity : 700}
                    },
                    overlay : {
                        translation : {x: 15, y: -15, z: 0},
                        reverseAnimation : {duration : 500,easing : 'easeOutExpo'}
                    },
                    shine : {
                        translation : {x: 50, y: 50, z: 0},
                        reverseAnimation : {duration : 500, easing : 'easeOutExpo'}
                    }
                }
            },

公式ドキュメントにさらに詳しいソースコードがありますので、一つ一つエフェクトを変える場合こちらのソースを編集する必要があります。

ダウンロードは右のボタンより可能 →

Tilt Hover Effect
サンプルページをみる
ダウンロードもできます