タグ「オフキャンバス」

タグオフキャンバス

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 5 / 5件)

CSSの最新テクニック！シンプルなHTMLとCSSで、オフキャンバスのメニューをポップアップで実装

2022/10/25 49 users CSS 実装 HTML ドロワーポップアップ

この実装は、完全に想定外の発想でした！スマホでよく見かけるドロワー、オフキャンバスのメニューをポップアップで実装するCSSの最新テクニックを紹介します。オフキャンバスも確かにポップアップと同様にページ上に浮かぶように表示されますが、ポップアップで実装できるようになるとは思いませんでした。JavaScript... 続きを読む

[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js | コリス

2015/05/26 129 users コリス Step スクリプト変形アニメーション単体

オフキャンバスメニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。「zoomOut」「rubberBank」のアニメーション例 iconate.jsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシートを外部ファイルとし... 続きを読む

Bootstrapでかっこいい縦長ページを作りたい人にオススメ！完成形から制作用のファイルまで全部揃ったテンプレート -Forkio | コリス

2015/03/16 117 users BOOTS コリス Bootstrap スクロール固定ヘッダ

固定ヘッダ、オフキャンバス、スクロールと連動したちょっとしたアニメーション、コンテンツスライダーなど、最近よく見かけるトレンドを巧みに取り入れたレスポンシブ対応の縦長ページを実装するテンプレートを紹介します。 Boots...記事の続きを読む続きを読む

Bootstrapをカスタマイズ！ページをスマホで表示した際に横からナビゲーションをスライドさせる -Bootstrap Offcanvas | コリス

2015/03/06 187 users コリス head Bootstrap Step CSS

Bootstrapで実装したページをスマホなどの幅が狭いスクリーンで表示した際に、横からオフキャンバスのナビゲーションをアニメーションでスライド表示させるJSとCSSのパックを紹介します。 Off Canvas -Bootstrap Bootstrap Offcanvasの使い方 Step 1: 外部ファイル当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <l... 続きを読む

[CSS]かっこいいアイデアが盛り込まれた横からスライドするナビゲーション | コリス

2014/01/14 152 users アニメーションgif 切替アニメーションスライドデモ

スクリプト無しで、コンテンツをスライドさせ、横からアニメーションで表示されるナビゲーションを実装するスタイルシートを紹介します。このオフキャンバスのスタイルも少しずつ確実に進化してますね。 Off Canvas Menu with Animated デモの動きをアニメーションgifにしてみました。デモのアニメーションスライドの切替にはチェックボックスを使われており、ナビゲーションが表示される... 続きを読む

(1 - 5 / 5件)