Web筋トレも使っているサーバー!ロリポップを使ってみない?

【初心者向け】プロのLP(コーディング)を解説★CSS3とjsを解析〜第3回

Sponser Link

こんにちは。ほむほむです。

たまたまWEB上で見かけたLPを解説・解析しながら、
プロのテクニックをご紹介しています。
今回は3回目になります。

【初心者向け】プロのLPのコーディングを保存してじっくり勉強する方法 【初心者向け】プロのLP(コーディング)を解説★jsアニメーションを解析〜第2回

 

今回は前回の続きで、

JavaScriptやCSS3の解説をしていきたいと思います。

ほむほむ

今回もたまたま見つけた下記のLPの分析をしていきます。

https://lp.botanistofficial.com/lp/bota-bodysoap-01/

ほむほむ

とても綺麗なLPですよね。。。

Sponser Link

③メインビジュアルのふんわり出てくるテクニック

メインビジュアルのふんわり出てくる動きを分析

①ボケてます。②だんだんハッキリとしてきました。③右上に黄色いステッカーがだんだん表示されます。④右上に黄色いステッカーが表示されました。⑤左下にベージュのステッカーがだんだん表示されました。

3つに分けて解説していきます。

①写真がふんわり出てくる、②黄色いスッテカー、③ベージュのステッカー

①写真がふんわり出てくる

写真がふんわり出てくるHTML

写真がふんわり出てくるCSS

背景画像で画像を入れています。
もちろん、画像はボケていません。
animation: blur 1s; はblurという名前のアニメーションを1秒動かします。という意味です。

@keyframes blur blurは先ほどのアニメーションの名前です。

0%〜100%で1秒間の最初と最後を表します。

filter: blur(5px); でぼかしています。

filter: blur(0px);はクリアな画像です。

リロードされて、1秒間かけてふんわり画像が出てきます。

②黄色いスッテカー

黄色いスッテカーのHTML

 

黄色いスッテカーのJavaScriptプラグイン

jQuery不要のスクロールアクション系JavaScriptプラグインAOSを使っています。

まずは、cssとjsを読み込みます。

次にアニメーションさせたい要素にclassを追加します。

アニメーションの遅延設定、0.4秒。

黄色いスッテカーのCSS

position: relative;でinnerを基準として

position: absolute;で場所を指定しています。

③ベージュのステッカー

ベージュのスッテカーのHTML

ベージュのスッテカーのJavaScript

黄色いステッカー同様、avaScriptプラグインAOSを使っています。

アニメーションの遅延設定、0.8秒。

黄色いステッカーが表示された後に、

ベージュのステッカーが時間差で現れます。

このちょっとしたことがグッと洗練された印象になります。

ベージュのスッテカーのCSS

黄色いステッカーと同様にposition: relative;でinnerを基準として

position: absolute;で場所を指定しています。

Sponser Link

⑤AOS(JavaScriptプラグイン)のアニメーション色々

https://michalsnik.github.io/aos/

sectionにfade-upを付けている場合

sectionのみにfade-upが付けられています。

sectionの内側のframeクラスにfade-upを付けている場合

①sectionの内側のframeにfade-up。白いカードが上に上がるような効果

②画像。アニメーションなし。

③テキスト。fade-up。

④テキスト。fade-up。

⑤画像。⑥テキスト。⑤⑥の外側のdivにfade-up。

⑦画像。fade-up。

 

全体にfade-upでありつつ、さらに要素にfade-up、

アニメーションがないもの、外側のdivにfade-upがあるもの。

少しずつ違うので、単調になりすぎず、

弾むような動きになってるのではと思います。

sectionにfade-upを付ける場合は、
中の要素にはfade-upをつけず、
sectionにアニメーションをつけない場合は、
画像やテキストにfade-upやfade-inがついていました。

色々なアニメーションの動き

See the Pen
LP AOS
by studio-0 (@studio-0)
on CodePen.

BOXか文字にアニメーションがついています。

Sponser Link

まとめ

今回はanimationのfilter:bulrとAOS(JavaScriptプラグイン)について
解説してきました。
適度で適切なアニメーションを
付けるのはセンスが必要で難しいですね。
これは色々なものをみて、
経験で培われて行くと思います。

次回もjs、css3の解説の続きをしていきます!

次回がLP『BOTANIST』の最終回です!

ここまでお付き合いくださりありがとうございました〜!

【初心者向け】プロのLP(コーディング)を解説★CSS3とjsを解析〜第4回
Sponser Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA