グローバルナビを上部に固定してスクロールする小さくする2つのポイント | MK2-BLOG～西宮のWEBデザイナー日記
最近スマホ対応を標準で行っているMK2-STYLEです。レスポンシブ、スマホ対応は当たり前の時代になってきました。 そこで最近よく見かけるグローバルナビが上に固定されて、スクロールすると少し小さくなる方法を備忘録としてメモ。 コンテンツが長くなると、ナビゲーションを見るためにいちいち上に戻らないといけないのは面倒です。 なので、ナビゲーションは常に上部分に固定されている方が便利ですよね。 HTML記述方法 ＜head＞＜/head＞内にjQueryとjavascriptを記述 <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script type="text/javascript"> jQuery(function($) { var nav = $('.navi'), offset = nav.off
海外のウェブサイトでよくみる「要素が画面内に入ったらふわっとフェードインするあれ」の実装方法 | imasashi.net
最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するにこういうやつです。 以下、これのつくりかたを紹介します。 基本的な考え方 アニメーションはCSS3のtransitionで制御する アニメーションの開始トリガーをjsで制御する という感じで、CSS3とjsのあわせ技で頑張ります。 具体的なマークアップ コーディング方法です。 HTML <div> <section class="fadein"> <h2>情報設計</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section> <section class="fadein"> <h2>サイトマップ</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
Redirecting
