ランディングページで効果的な動きを演出する jQueryエフェクト７つ＋１｜MarTechLab（マーテックラボ）
ランディングページに「ちょっとした動き」をつけたほうがいいんじゃないか・・・そう思ったことはありませんか。 まずは下記の事例をご覧ください。 これは弊社ランディングページ「最強LPO」で、「成功事例紹介」に動きをつけた箇所をヒートマップ解析ツール「クリックテール」で観測したものです。ご覧のとおり、動きがある箇所はそうでない箇所よりも明らかに注目度が高くなっていることがお分かりになるかと思います。 このように、JavaScriptで動きをつけることで伝えたい情報の注目度を高めて確実に伝える、あるいは雑多な情報を整理してスッキリと表現することができるため、構成作成の段階で一度は検討したいところです。 今回は、弊社のランディングページで採用している「ちょっとした動き」のうち、他のランディングページでも頻繁に使用されているものを７つ取り上げ、それを制御している jQueryとそのカスタマイズ方法を
ページ内ナビをコンテンツの位置によってカレント表示させる
パララックスをつかったサイトなど、縦長のページが昔に比べれば多くなった感じがしますがその際に、ページ内用のナビを設置する場合があると思います。スクロールした時そのコンテンツのエリアに来たら、ナビをカレント表示させるjsを調べて作ってみました。 参考にしたサイト 作ってみたと言いつつ、大部分が参考サイト通りなので先にご紹介いたします。 jQueryで長いページの区切り（セクション）ごとに背景を変化させる | webOpixel jQueryを使った長い縦スクロールページの現在地による制御 | 2GRAVITY カレント表示でaタグはそのまま とりあえずカレント表示されればOKのタイプ。カレントの箇所もクリックできます。 サンプルページ HTMLの抜粋は以下 <ul id="nav"> <li><a href="#section01">menu<a></li> <li><a href="#se
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
skrollr - parallax scrolling for the masses
+++ ikeda ayako.com +++
