ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」 – bl6.jp
jQuery fatNavはミニマルテイストなフルスクリーンのナビゲーションメニューを実装することができます。デモではメニューアイコンをクリックするとオーバーレイでアニメーション付きのメニューが表示されます。フワッとさりげない感じで表示されるのがとてもお洒落ですね。 以下はjQuery fatNavのデモになります。シンプルでスッキリしたデザインが特徴的です。 デモ メニューはフェードでズームイン、ズームアウトのアニメーションで表示されます。自然な一連の動作がとてもいい感じです。 使い方もシンプルなところが嬉しいですね。こんな感じでマークアップすることができます。 <div class="fat-nav"> <div class="fat-nav__wrapper"> <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a>
[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid
.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量（800bytes）プラグインを紹介します。 デモページ 単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="covervid.min.js"></script> </body> Step 2: HTML 動画を背景として表示する親要素、もしくはラッパーを配置します。 <div class="
![[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid](https://cdn-ak-scissors.b.st-hatena.com/image/square/9110ae5aaacb7e18964553e948fdad1f627eb39c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111003.png)
レスポンシブなフルスクリーンでスクロールするページが作れる「brock scroll」:phpspot開発日誌
Block Scroll レスポンシブなフルスクリーンでスクロールするページが作れる「brock scroll」。 divでくくればスライドのようにページ送りができる流行りのあのUIを実現するためのjQueryプラグイン。 スマホでも動くみたいです 関連エントリ 画像をフルスクリーンに拡大できるギャラリー作成jQueryプラグイン「fullsizable」 動画をフルスクリーン背景にすることができるjQueryプラグイン「Vide」 フルスクリーンでかつスクロールする迫力あるギャラリー実装が可能になる「Intense Images」 入力の心理負荷が低そうなフルスクリーンフォーム実装デモ「Fullscreen Form Interface」
【jQuery】要素を全画面表示してからスクロール｜合同会社チームサンタ
jQueryはもうweb制作にはなくてはならないものになりましたね。 web上にも情報がたくさん載っているので、グーグル先生に聞けば大抵のことはすぐに分かります。 そのなかで個人的に結構使うんだけど、あまり紹介している記事とかないよなと思ったものをご紹介出来ればと思います。 チームサンタの三浦です。 フルスクリーンからのスクロール デモページ ちょっと上手く動きの説明が出来ないのでまずはデモページで確認して下さい。 背景画像などを画面サイズいっぱいに広げてから、セクションを切り替えてスクロールさせたい！もちろんリサイズしても大丈夫！ ってこと結構あると思うのですけど、意外に情報が少ないと感じたので、紹介出来ればと思い、今回の記事を書かせてもらいます。 HTML <body> <section id="s01"> <h1>全画面表示させたいセクション</h1> </section> <sec
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
