スマホサイトに特化したアコーディオンメニューを作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです٩( ᐛ )و 秋に近づいて涼しくなってきましたね、皆様夏はいかがお過ごしでしたか？ はやちは夏のコミケに思わず三日間連続で参加してしまい、腕がこんがり焼けてしまいました( ˇωˇ )<健康的 そんなことはどうでもいいですね٩( ᐛ )و 今回はアコーディオンメニューを、もうちょいスマホに特化させた作りにしてみました！ ご紹介します！ アコーディオンメニューの準備をしよう まず、HTMLとSCSSの準備をします。 HTML headerとアコーディオンさせるナビゲーションは別々に置きます( ˇωˇ ) <header id="js-accordion" class="header"> <div class="header__heading"> <h1 class="logo">accordion menu</h1> <span class="menu-button">
素晴らしい！HTML+CSS+jQueryで絵本のようにページをめくっていけるぜひ参考にしたいコード | 9ineBB
絵本をクリックしていくと、ページが次々にめくっていけるようになっています。また、逆方向にもめくることが可能です。さらに画面幅に合わせて大きさも変わるリキッドデザインです。 とにかく、ページのめくれ具合 ページのめくれた後のちょっとした動きがとても良く出来ていてクオリティーが高いです こうった形のギミックをWEBサイトに導入するときにはぜひ参考にしたいコードです – CODE – HTML <div class="book bound"> <div class="pages"> <div class="page"> <h1>Boyhood</h1> <h2>by Jason Hibbs</h2> </div> <div class="page"><!--endpaper--></div> <div class="page"><!--endpaper--></div> <div class="
CSS と jQuery で作るスクロールにあわせて回転するロゴ
Tumblr のスタッフ Blog を見てたら、ロゴ （正確にはロゴの周囲の部分） がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。 結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transform プロパティに都度突っ込んでいくっていう感じ。ソースコード自体は数行で実装できます。 まずは実際に動作するサンプルを下記に。 スクロールにあわせて CSS で回転するロゴのサンプル 画面をスクロールすると、ロゴが回転すると思います。わかりやすいようにロゴはスクロールに対して位置固定しています。ロゴの内容は個人的趣味によるものですので深い意味はありません... わかる人にはわかると思う。 なお、サンプルは transform プロパティを使用し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
