[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js
最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモ デモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。 アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。 デモページ：Demo 3 In: bounceIn, Out: bounceOut a
![[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f7120768ce8f7380b64d8daf3a7d52402809916/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030405.png)
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
[CSS]レスポンシブ対応、スクリプト無し、完成度も非常に高いタブコンテンツを実装するテクニック
スクリプトは一切使用せず、デスクトップ時はタブコンテンツ、スマフォ・タブレット時はタブをスケールダウンに変更してコンテンツを表示するスタイルシートのテクニックを紹介します。 単にレスポンシブ対応のタブというだけでなく、コンテンツの切替やタブのホバーエフェクトなど、非常に完成度の高いタブコンテンツに仕上がっています。 スケールダウンの仕組み 実装はこんな感じになります。 HTML まずは上部のコントローラー、このラジオボタンで各タブの動きを制御します。 デザインを変更して利用したり、タブのみにしたい場合は非表示にするのも有りですね。 <!-- TAB CONTROLLERS --> <input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked> <input id="panel-2-c
要素の切り替えを美しく表現するプラグイン・エフェクト5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素の切り替えや表示を美しく表現するCSSスタイル・JSプラグインやエフェクトを5つご紹介します。 要素の切り替えや表示を美しく表現するプラグイン・エフェクト5選 fullPage.js https://alvarotrigo.com/fullPage/ フルスクリーン表示のページを切り替えるプラグイン。 DEMOのシンプルな切り替えの他にも、ヘッダーを固定した場合や、動画を背景に表示する場合など様々な用途のオプションが用意されており、とても使い勝手が良さそうです。 Section Separators https://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/ 主にCSSとCSS3で装飾した要素ごとの区切り線がまとめられています。 約25種類ほど用意され
これは凶悪……コーディングのヤバいバグ＆仕様 Best5 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。 今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。 なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。 第5位 IE9.jsを入れると、IE7で謎の隙間が発生しまくる IE9.jsを採用したサイトをIE7,8で見ると、 <class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/> こんなものが追記されていたりします。 こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがな
次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3アニメーションをブラウザ上で簡単に作成・編集できる『bounce.js』 | 100SHIKI