読者です 読者をやめる 読者になる 読者になる

Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

Youtubeのメニューにかかっているあのエフェクトを実装する方法

HTML CSS Javascript

少なからずはこういうのを探している人がいるかもということでご紹介。Youtubeのメニューエフェクトの実装方法を解説している記事を取り上げてみる。

Simple YouTube Menu Effect(Demo)


Youtubeのメニューは以下の画像のように、ボタンを押すとボタンが横にスライドし、メニューが現れるというエフェクトをかけている。なかなかオシャレですな。


・ボタンを押す前


・ボタンを押した後


これを実現する実装方法が以下の記事で紹介されていた。英語だが丁寧にコードを解説してくれているので勉強になる。

SIMPLE YOUTUBE MENU EFFECT


時間がないという人はソースコード一式がダウンロードできる。なので必要なところだけちゃちゃっと持ってっちゃうのが良いかと。興味がある人はぜひどうぞ。

広告を非表示にする