bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptフラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」JavaScript2014.06.9フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」jCornerというjQueryプラグインを使ってみました。フラットデザインに合わせて、紙をペラッとめくったようなエフェクトを簡単に実装することができます。使い方もシンプルだし、わざわざ画像を用いることもないのでとても手軽です。フラットデザインにしてみたけど、何か物足りないと思っている方は使ってみてはいかがでしょうか。実際に使ってみると、こんな感じで簡単に紙をめくった様なエフェクトを実装できます。使い方は、まずhead内にjQuery本体とプラグインファイルを読み込みます。src="jCorner.js"></script>続いてHTMLで以下を記述します。id="paper"></div>予めCSSで背景などを指定しておきます。僕が試した例だと以下のような感じです。blue;}あとはjCornerを呼び出してあげればOKです。オプションでsizeやbackgroundを指定することもできます。});});というわけで、ちょっとしたアクセントに紙をめくったようなエフェクトを実装したい時に活用してみてはいかがでしょうか。関連記事JavaScriptレスポンシブに対応したモーダルウィンドウのようなアラート実装「jquery.alert」jquery.alertはレスポンシブに対応したモーダルウィンドウ風の...JavaScriptシンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラグイン「Tooltipster...シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラ...JavaScriptレスポンシブやタッチ対応などさまざまな機能を搭載したギャラリー実装「lightgallery.js」...lightgallery.jsは、さまざまな機能を搭載したlightb...JavaScript手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」simpleParallaxは、手軽にパララックス効果を画像に実装する...JavaScriptフルページでコンテンツごとにスクロールする「fullPage.js」fullPage.jsはフルページでコンテンツごとにスクロールするレス...JavaScript垂直・水平の動きに対応したパララックス効果を実装できる「paroller.js」paroller.jsは垂直・水平方向の動きに対応したパララックス効果...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。先日もこの症状が生じてし...2020.02.15ハンドル付きのノートPC用インナーバッグ「エレコム...エレコムから出し入れしやすいハンドル付きのノートPC用インナーバッグが登場しまし...2020.02.14白銀の千秋公園スタバをあとにして朝の散歩をするために千秋公園へと向かった。今シーズンはいままで...2020.02.13日常の休日。スタバで温かいドリップを久しぶりの秋田のスタバ。いっても元旦以来だから約1カ月ぶりか。