タグ Demo 2
人気順 10 users 50 users 100 users 500 users 1000 usersAnimated Background Headers | Demo 2
Animated Background Headers Examples for creative website headers Demo 1 Demo 2 Demo 3 Demo 4 If you enjoyed this demo you might also like: On Scroll Header Effects Inspiration for Article Intro Effec... 続きを読む
表示するデバイスに最適な画像をクラウドから呼び出すオンラインサービス -ReSRC.it | コリス
Demo 2: Page 右上の「Change width」ボタンをクリックすると、表示サイズが変更されます。 ReSRC.itの使い方 ReSRC.itを利用するには、アカウントを作成します(無料)。 HTML 画像を配置するベーシックなHTMLは下記のようになります。 <!doctype html> <html> <head> <title>Hello Responsive Web</titl... 続きを読む
[JS]グリッドに沿ってさまざまな要素を互い違いにスライドさせるスクリプト -Grid Slide | コリス
Grid Slideのデモ Grid Slideの使い方 Grid Slideのデモ デモは2つあります。 まずは、div要素をスライドさせるシンプルなデモから。 デモページ:Demo 2 Grid Slideの使い方 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 Demo 2のバウンドのエフェクトを使用する場合は「jQuery Easing ... 続きを読む
[JS]使い勝手のよい、パネルをスクロールに追従させるスクリプト -Sticky Sidebar | コリス
Demo 2 赤枠のナビゲーションは左のカラム内の移動、黒枠のパネルは黒枠内のみ、右のバスケットはページ内全てです。 また、中央のテキスト「Remove」をクリックすると、一時的にそのパネルだけ追従をやめます。 Sticky Sidebarの使い方 オーソドックスなデモを例に実装方法を紹介します。 外部ファイル スクリプトを外部ファイルとして記述します。 <script src="jquery.m... 続きを読む
[CSS]背景画像をページの最下部に固定表示させるスタイルシート | コリス
Fixed Footer Backgrounds with CSS demo, demo 2 デモではスクロールバーの有無の2パターンがあり、スクロールをしてもブラウザのサイズを変更しても背景画像がフッタの位置に固定表示されています。 仕組みの概要は、bodyに背景色と背景画像を指定し、背景画像は「fixed bottom」にします。 コンテンツを内包するdiv(headwrap)を設置し、ページ... 続きを読む