Gentallela - プログラマでも美しく管理画面を作成できるBootstrapテーマ | ソフトアンテナ
「Gentellela」はBootstrap 3を使った無料の管理画面用テンプレートです。デフォルトスタイルのBootstrap 3をベースとして多数のパワフルなjQueryプラグインやツールを組み込んだもので、美しい管理用パネルやダッシュボードを簡単に作成することができます。 テーマにはチャートや、カレンダー、フォーム検証ライブラリ、ウィザードスタイルのインターフェイス、ナビゲーションメニュー、テキストフォーム、スライダー、プログレスバー、通知メニューなどたくさんの有用なライブラリが組み込まれています。 今回はオンライン上で確認できるデモサイトを元に、どのような画面が実現できるのかスクリーンショットとともに紹介したいと思います。 ダッシュボード ▲ダッシュボードのデモでは多様なチャートが表示できることが確認できます。テーマはレスポンシブ対応で画面サイズに応じて適切に描画されます。 フォー
Homepage | GSAP
GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
![[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips](https://cdn-ak-scissors.b.st-hatena.com/image/square/2305f06c940fb5e398486ead4dbf84a83e3fa8a8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102301.png)
UIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアル
ボタンやパネル、レイアウトなど、最近はWebのユーザインターフェイスでさまざまなアニメーションが利用されています。WebページのUIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアルを紹介します。 アニメーションを魅力的に動かすテクニックを段階的に解説しているので、それぞれの効果がよく分かります。 Giving Animations Life 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Step 1: まずはシンプルに動かしてみよう Step 2: バウンドを加える Step 3: バウンドを自然な動きにする Step 4: ディズニー®の12の基本原則を取り入れる Step 5: アニメーションを誇張する Step 6: アニメーションに命を吹き込む キーフレームを簡単に設定できるスクリプト St
[JS]パネルをペロッとひっくり返すスクリプト -QuickFlip 2
divで実装した2枚のパネルを使用して、裏表にペロッとひっくり返すスクリプトをJon Raaschから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="quickFlip"> <div>表のパネル<br /> <a href="#" class="quickFlipCta">click to flip</a></div> <div>裏のパネル<br /> <a href="#" class="quickFlipCta">click to flip</a></div> </div> </textarea>
[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
第3回 トップページを彩るスライドショーのポイント | gihyo.jp
その他、speedやtimeout、pause（0：マウスオーバ時にスライドをストップしない、1：マウスオーバ時にスライドをストップする）などで細かく動きを指定することもできます。 そのほかにも指定可能なオプションはたくさんあり、「jQuery Cycle Plugin - Option Reference」で確認することができます。 スライドのコンテンツとナビゲーションを指定する 次に、bodyタグ内のXHTMLソースを見ていきます。 XHTMLソース（bodyタグ内） <div id="slider"> <div id="slideshow"> <div class="slider-item"> <div class="text_item"> <h2>Wonderful elephants<br /> living abroad.</h2> <p>フェードイン&アウトするシン
アニメーションで色が少しずつ変化するボタンを作成する三つのチュートリアル | コリス
マウスをフォーカスすると、アニメーションで色が少しずつ変化するボタンを作成するPhotoshopとHTML/CSSとJavaScriptの三つのチュートリアルをSix Revisionsから紹介します。 Create an Animated "Call to Action" Button demo チュートリアルは三部構成で、Photoshop編、HTML/CSS編、JavaScript編となっており、デモページではアニメーション有り版（JavaScript）、無し版（HTML/CSS）があります。 simple demo(アニメーション有り版） simple demo(アニメーション無し版） ボタンはCSSスプライトで実装されており、画像の作成もそれ用になっています。
Janko Jovanovic – Design Management + Coaching
For nearly 30 years, I’ve been navigating the many sides of design and product worlds: building products, leading teams, mentoring people, and shaping strategies. My work now blends Design & Product Leadership, Coaching, and Strategy & Futures to support others in making smart decisions and navigating increasing uncertainty and complexity. Coaching Strategic advising, mentoring, and coaching have
スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです。フロントエンドエンジニアのはやちです。 健康診断の結果が届き結果がオールAの超絶健康体だというのがわかって浮かれてるはやちです♪ｷﾞﾐｷﾞﾐ└( ＾ω＾ )」ｼｪｲｸ♪ 野菜を食べ続けた結果ですね、みなさんも野菜を食べましょう( ˘ω˘)☝ そんなのどうでもいいですね。 さて、今回は縦に長いコンテンツなどでよく見かけるスティッキヘッダーを作ってみました。 ご紹介します( ˘ω˘)☝ スティッキーヘッダーとは？ スクロールしてもヘッダーがついてくる技法のことです。 ページ移動がしやすいため使用されることが多いです。また、縦に長いLPのページ内リンクで使用されることもあります。 なんだかスティッキーフィンガーみたいですね( ˘ω˘)<ｱﾘｰﾃﾞｳﾞｪﾙﾁ HTMLとCSSの準備 まずは準備の方法をご紹介します( ˘ω˘)☝ HTML ヘッダーは固定に配置しておくための#header
Web制作で使えた！jQueryプラグインまとめ＋起業しました
作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面
188BET - Link Vào Nhà Cái 188Bet PC Và Mobile Chính Thức 08.2025
188BET – Link Vào Nhà Cái 188Bet PC Và Mobile Chính Thức 08.2025 188BET là nhà cái cá cược casino và thể thao trực tuyến uy tín, đẳng cấp số 1 Châu Á. Với nền tảng công nghệ tiên tiến, độ an toàn và bảo mật cao nên thu hút hàng triệu người chơi tham gia trải nghiệm thích thú. Nhà cái 188BET cung cấp nhiều thể loại game cá cược đa dạng khác nhau như live casino, game bài, xổ số, nổ hũ, thể thao điệ
[JS]テキストや背景のカラーをアニメーションで変更するスクリプト -Color Animations
テキストや背景のカラーをアニメーションで少しずつ変更するスクリプトをDesizn Techから紹介します。 Playing with jQuery Color Plugin and Color Animation demo デモでは、テキストのカラーを変更するもの、背景を変更するもの、それぞれ異なるカラーに変更するものなどがあります。 テキストのカラーを変更する場合は、下記のように指定します。 <textarea name="code" class="html" cols="60" rows="5"> $(".first a").hover(function() { $(this).animate({color: "#00eeff" }, 400); },function() { $(this).animate({color: "#FFFFFF" }, 500); }); </textar
Javascriptを使ってここまでできる！凄い動きのサイト10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。マラガの海の贈り物SEKOです。 フラッシュを使えばサイトはダイナミックな動きを実現しますが、今回はフラッシュでなくてもJavascriptで凄い動きのサイトを集めてみました。 是非参考にしてください。 Javascriptを使った、凄い動きのサイト10選！ MoMA MoMA 円が時系列で表現されております。クリックするとグリンっとまわる動きは気持ちがいいです。ただサイト自体がけっこう重いですね。。 DUB FIRE DUB FIRE マウスを右や左に動かすとサイト全体が動きます。広がりがあり、操っている感もあり、こちらも操作が気持ちいいサイトです。 Volkswogen Volkswogen メインスライドの動きが綺麗です。スクロールで車を操作する年表ページやフォトギャラリーにも楽しい動きが沢山含まれています。 Secret Study Secret Study DUB F
あのFlashサイトのUIをjQueryで作る (1/5)
「見た目に美しく、ユーザーに楽しさや心地よさを与えるUIを作りたい」 そう考えたときに参考になるのが、Flashで制作されたWebサイトです。最近では、JavaScriptによるリッチなUIを持つWebサイトも増えてきていますが、長年、さまざまなUIが実験的に生み出されてきたFlashの世界には、まだまだユニークなサイトが多くあります。 たとえば、今回紹介する「ハーズ実験デザイン研究所」のWebサイトは、フルFlashで制作された“楽しい”コーポレートサイトです。同社が手がけてきた過去の作品を、時間の経過とともにゆっくりと切り換えていく様子は、まるで1本の映像作品を見ているよう。メニューのちょっとした動きひとつをとっても、ユーザーを楽しませようという意図が感じられます。 Flashサイトのような美しくて楽しいUIを、JavaScriptでも作れないか――それが今回のテーマです。 今回のお手
[JS]jQueryのプラグイン33+1選 -2009年8月
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
[JS]既存のLightbox系スクリプトの不満を解決したスクリプト -Lightbox_me
IE6にも対応した、DOMエレメントをLightboxのエフェクトで表示するjQueryのプラグインを紹介します。 Lightbox_me - Stupidly Simple Lightboxing Lightbox_meは他のLigtbox系スクリプトのソリューションにはない特徴をもっています。 DOMエレメントをLightbox化。 ウインドウのリサイズ時はオーバーレイもリサイズ。 ドキュメントがウインドウよりサイズが小さい場合はオーバーレイのサイズを変更。 全てのブラウザで固定配置（fixed）で表示。 ウインドウがモーダルボックスより小さい場合は固定配置（fixed）が自動的に絶対配置（absolute）に切り替え。これによりユーザーはスクロールが可能に。 そして、軽量でシンプル、という素晴らしい特徴も備えています。 対応ブラウザはIE6+, Fx2.5+, Safari, Chr
[JS]スライドさせるだけでなくもう一手間加えて、ぐぐぐっとかっこよくナビを表示するスクリプト -Box Lid Menu
Toybox Box Lid Menuの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトを</body>の上あたりに外部ファイルとして記述します。 <head> ... <link rel='stylesheet' type='text/css' href='css/box-lid.css'> </head> <body> ... ... <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script> <script src='js/jquery.box-lid.min.js'></script> </body> Step 2: HTML 左のナビゲーションとコンテンツをdiv要素などで配置し、並列の構造で実装します。 <div class='box-lid-menu'> <div cl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tutorialzine
Apple風のインターフェイスを実装するチュートリアル集