タグ オフキャンバス
人気順 10 users 50 users 100 users 500 users 1000 usersCSSの最新テクニック! シンプルなHTMLとCSSで、オフキャンバスのメニューをポップアップで実装
この実装は、完全に想定外の発想でした! スマホでよく見かけるドロワー、オフキャンバスのメニューをポップアップで実装するCSSの最新テクニックを紹介します。 オフキャンバスも確かにポップアップと同様にページ上に浮かぶように表示されますが、ポップアップで実装できるようになるとは思いませんでした。JavaScript... 続きを読む
[JS]変形アニメーションがかっこいい!アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js | コリス
オフキャンバス メニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。 実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。 「zoomOut」「rubberBank」のアニメーション例 iconate.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとし... 続きを読む
Bootstrapでかっこいい縦長ページを作りたい人にオススメ!完成形から制作用のファイルまで全部揃ったテンプレート -Forkio | コリス
固定ヘッダ、オフキャンバス、スクロールと連動したちょっとしたアニメーション、コンテンツスライダーなど、最近よく見かけるトレンドを巧みに取り入れたレスポンシブ対応の縦長ページを実装するテンプレートを紹介します。 Boots...記事の続きを読む 続きを読む
Bootstrapをカスタマイズ!ページをスマホで表示した際に横からナビゲーションをスライドさせる -Bootstrap Offcanvas | コリス
Bootstrapで実装したページをスマホなどの幅が狭いスクリーンで表示した際に、横からオフキャンバスのナビゲーションをアニメーションでスライド表示させるJSとCSSのパックを紹介します。 Off Canvas -Bootstrap Bootstrap Offcanvasの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <l... 続きを読む
[CSS]かっこいいアイデアが盛り込まれた横からスライドするナビゲーション | コリス
スクリプト無しで、コンテンツをスライドさせ、横からアニメーションで表示されるナビゲーションを実装するスタイルシートを紹介します。 このオフキャンバスのスタイルも少しずつ確実に進化してますね。 Off Canvas Menu with Animated デモの動きをアニメーションgifにしてみました。 デモのアニメーション スライドの切替にはチェックボックスを使われており、ナビゲーションが表示される... 続きを読む