Web Interaction Patterns

A collection of common web interaction patterns implemented in JavaScript.

Web制作でよく使われる動きを理解と検証を目的にまとめています。

Tab Menu

タブをクリックすると各該当のコンテンツが表示されます。

タブをクリックするとコンテンツが下から上にフェードインして表示されます。
GSAPを使用してアニメーションを実装しています。
タブ切替時にコンテンツ部分の文章量の違いによるガタツキを防止するため、親要素にgridを指定して要素を重ねて配置し、切替の際はvisibility: hidden;とopacity:0;を設定して文章量が増えた場合を考慮しています。

行く川のながれは絶えずして、しかも本の水にあらず。よどみに浮ぶうたかたは、かつ消えかつ結びて久しくとゞまることなし。世の中にある人とすみかと、またかくの如し。玉しきの都の中にむねをならべいらかをあらそへる、たかきいやしき人のすまひは、代々を經て盡きせぬものなれど、これをまことかと尋ぬれば、昔ありし家はまれなり。或はこぞ破れ（やけイ）てことしは造り、あるは大家ほろびて小家となる。住む人もこれにおなじ。（青空文庫より）

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）

Accordion

質問事項をクリックすると回答部分が開閉します。

コンテンツの高さを自動取得し、高さに応じたアニメーションを実行しています。
連打防止策としてアニメーション実行中はクリックイベントを無効化しています。
GSAPを使用してアニメーションを実装しています。

FAQページを作成する目的は何ですか？

こちらに回答が入ります。親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。（青空文庫より）

良いFAQの作り方のコツはありますか？

こちらに回答が入ります。親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）

Hamburger Menu

ヘッダー右にある「MENU」ボタンをクリックするとナビゲーションメニューがモーダルで表示されます。

「CLOSE」ボタンをクリックまたはEscapeキーを押すとナビゲーションメニューが閉じます。
ナビゲーションメニュー表示中は背景のスクロールを無効化し、スクロール位置を保持します。
各メニューをクリックするとスムーススクロールで該当のセクションに移動します。
モーダル表示時に起こるスクロールバー切り替えによるレイアウトシフト(ガタつき)をscrollbar-gutter: stable; で対策しています。

Sticky Header

ScrollTriggerを使用し、スクロール連動で画面上部にヘッダーを固定表示します。

画面上端がKVよりも下に到達したらヘッダーを固定表示し、KVよりも上に戻ると位置に戻します。
GSAPを使用してアニメーションを実装しています。

Sticky CTA Button

ScrollTriggerを使用し、スクロール連動で画面右下にCTAボタンを表示します。

画面上端がheaderの下端に達したらCTAボタン(View Code)を表示します。
画面下端がSticky CTA Buttonセクションの下端に達したらCTAボタンを非表示します。
SPサイズ(767px以下)ではCTAボタン非表示になります。

View Code

It is only with the heart that one can see rightly. What is essential is invisible to the eye.
All grown-ups were once children, but only few of them remember it.
Flowers are weak creatures. They are naive. They reassure themselves as best they can. They believe that their thorns are terrible weapons.
Growing up is not the problem, forgetting is.
If you love a flower that lives on a star, it is sweet to look at the sky at night. All the stars are a-bloom with flowers.
Nothing in the universe can be the same.
One day, I watched the sun setting forty-four times. You know, when one is so terribly sad, one loves sunsets.
Words are the source of misunderstandings.
To forget a friend is sad. And if I forget him, I may become like the grown-ups who are no longer interested in anything but figures.
It doesn’t matter that you are not here in person as long as you are here in my heart.
Happiness doesn’t lie in the objects we gather around us. To find it, all we need to do is open our eyes.
Sometimes, there is no harm in putting off a piece of work until another day.
I have always loved the desert. One sits down on a desert sand dune, sees nothing, hears nothing. Yet through the silence something throbs, and gleams.
All men have stars, but they are not the same things for different people. For some, who are travelers, the stars are guides. For others they are no more than little lights in the sky.
The fact is that I did not know how to understand anything! I ought to have judged by deeds and not by words.