株式会社LIG TEL : 03-6240-1253 111-0056 東京都台東区小島2-20-11 LIGビル 1F受付
CSS3・JS・jQueryなど、フロントエンドでアニメーションを実装する方法 | LIG LIBRARY | 株式会社LIG
株式会社LIG TEL : 03-6240-1253 111-0056 東京都台東区小島2-20-11 LIGビル 1F受付
[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)
複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」:phpspot開発日誌
Gridmanager Demos 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」。 次のようにカラムごとにツールを付与して、コンテンツを追加したり消したり、移動できたり、幅を調整したりとかなり高度な事が誰でも簡単にできるUIが実現可能です。 jQueryプラグインの形で誰でも簡単に実現できるところがすごい。複雑なレイアウトのサイトであっても見たまま編集ができるというのはよさそうですね。 ライブプレビューも可能 レスポンシブにも対応 関連エントリ 軽量でシンプルデザインなWYSIWYGエディタ実装ができる「Trumbowyg」 Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 軽量でシンプルなHTMLのWYSIWYGエディタ「SCEditor」 オンラインで使えるWYSIWYGなCSS3コードジェネレーター「Enj
div、table、ulリスト等にソート、ページネーション、フィルタ機能を追加できる「jPList」:phpspot開発日誌
Overview | jPList - jQuery Data Grid Controls div、table、ulリスト等にソート、ページネーション、フィルタ機能を追加できる「jPList」。 div、table、ulなどで列挙されたデータに、次のようなインタフェースを追加して、便利にしてくれるというもの。 既存のHTMLにソートやフィルタなどの機能拡張したい場合に使えそうです。 関連エントリ アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」 リストやテーブル、DIV等の要素を好みにJSでソートできるjQueryプラグイン「SortedList」 テーブルに検索、ソート、ページ分け機能をつけて便利にしてくれる「Dable」
要素の切り替えを美しく表現するプラグイン・エフェクト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種類ほど用意され
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」:phpspot開発日誌
jQuery Custombox :: dixso.net CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 モーダルダイアログ自体のデザインは至って普通なんですが、出てくる際のエフェクトが豊富で一見の価値ありです エフェクト以外にも、イベントハンドラの設定やカスタマイズ項目が豊富で使いやすそうです 関連エントリ シンプル＆軽量なモーダルダイアログ実装jQueryプラグイン「portBox」 フラットで美しいデザインのモーダルダイアログ実装ライブラリ「vex」 フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ 何でも埋め込めてカッコいいモーダルダイアログ実装用jQueryプラグイン「Pop Easy」 フラットでカッコいいモーダルダイアログ実装デモ
HTML5 × CSS3 × jQueryを真面目に勉強 – #18 画像ファイルからカラーパレットを作ってみる (前編) | DevelopersIO
HTML5 × CSS3 × jQueryを真面目に勉強 – #18 画像ファイルからカラーパレットを作ってみる (前編) そんな訳で、HTML5 の Canvas を駆使して一枚の画像ファイルから色情報を取得する方法を学んでみました。まだ学習の途中ではありますが、画像ファイルからカラーパレットを生成するところまでは出来るようになったので、当ブログで紹介するとします。 と、思ったのですが、このシリーズにしては結構難易度の高い内容なので、いきなりその方法を紹介する前に、ここでは基本的なピクセルの操作や色情報の扱いなど、前段階としての小規模なサンプルを紹介していきたいと思います。 Step.1 カラーピッカーを作る 見出しだけを読むとしょっぱなから大それた印象を受けますが、マウスカーソル位置にあるピクセル情報を取得・解析して、そこから色に関する情報を画面側に表示するといった単純なものです。 1
HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
jQuery / CSS3 TIPS｜BLACKFLAG
BLACKFLAGで紹介しているjQueryとCSS3を使って実装するスライドショーやカルーセル等、Webサイト上でのUI系スクリプトのTIPSをまとめたページになります。 ※一覧は随時更新します。 Comments (6) html/css/jquery などのtipsが多彩のサイト | webサイト作成に関する自分メモ | 2013.02.25 19:11 […] jQuery/CSS3 TIPS jQuery/CSS3 TIPS […] きのぴ | 2015.12.04 14:01 はじめまして、 パララックスデザインのソースについて探しておりました。 勉強も兼ねてですが、簡単なLPサイトで使用させていただこうと考えております。 こういったサイトがあるとすごく助かり、また勉強にもなります。 ブックマークさせていただき、ちょくちょく拝見させていただければと思います。 ありがとうございま
読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧 | gihyo.jp
読んで覚える、触って体験！JavaScript＆CSS3～gihyo.jp×jsdo.it presents 記事一覧
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails3、Twitter Bootstrap、Bootswatch を使ったレスポンシブなエロサイトをリリースしました