Gentallela - プログラマでも美しく管理画面を作成できるBootstrapテーマ | ソフトアンテナ
「Gentellela」はBootstrap 3を使った無料の管理画面用テンプレートです。デフォルトスタイルのBootstrap 3をベースとして多数のパワフルなjQueryプラグインやツールを組み込んだもので、美しい管理用パネルやダッシュボードを簡単に作成することができます。 テーマにはチャートや、カレンダー、フォーム検証ライブラリ、ウィザードスタイルのインターフェイス、ナビゲーションメニュー、テキストフォーム、スライダー、プログレスバー、通知メニューなどたくさんの有用なライブラリが組み込まれています。 今回はオンライン上で確認できるデモサイトを元に、どのような画面が実現できるのかスクリーンショットとともに紹介したいと思います。 ダッシュボード ▲ダッシュボードのデモでは多様なチャートが表示できることが確認できます。テーマはレスポンシブ対応で画面サイズに応じて適切に描画されます。 フォー
UIWebViewでつくるUI
発表時に使用したサンプルはこちらです。 http://www.dotapon.sakura.ne.jp/blog/?p=169
[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS
アンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプトを紹介します。 ↓はアニメーションGIFなので音はありませんが、実際のデモでは弦楽器のような音を奏でます。 びよ～んとなるのが、かなり気持ちいいです。
![[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/4994629c775aed71d12401ca0a2937780f88e550/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015042703.gif)
Effeckt.css
From Below From Above Slide In (top) Slide In (right) Slide In (bottom) Slide In (left) Newspaper Side Fall Sticky Up 3D Flip (horizontal) 3D Flip (vertical) 3D Sign Fade In 3D Slit 3D Rotate Bottom 3D Rotate In Left Blur Let Me In Make Way! Deep Content Slip From Top From Top, Tilt Fall From Top to Bottom From Bottom to Top From Left to Right From Right to Left From Above to Below From Below to A
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
Intro.js - Step-by-step guide and feature introduction for your website
No dependencies, fast and small 10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped). User-friendly Navigate using keyboard or mouse. Easily change the themes for your website. Browser compatibility Works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer. Why using Intro.js? When new users visit your website or product you should demonstrate your product features
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
第10回 リアクティブ・プログラミング | gihyo.jp
リアクティブ・プログラミング 今回お伝えするのは、Meteorが一般的なWebフレームワークとは一線を画しているコンセプト、「リアクティブ・プログラミング」についてです。 リアクティブ・プログラミングとは、端的に言うと、あるデータに対して行った変更が自動的に伝播し、その他の部分に影響をおよぼすようなプログラミング・パラダイムのことです。 たとえば表計算ソフトの一般的な機能として、セルの値に応じて、そのセルを参照している部分の値も自動的に変更されるというものがありますが、これはリアクティブ・プログラミングの典型的な例です。 また、MVCフレームワークの中には、モデルの値を変更すると自動的にビューが更新されるという機能を持つ（バインディングと呼ばれます）ものもありますが、これもリアクティブ・プログラミングの例と言って良いでしょう。 Meteorの素晴らしい点は、リアクティブ・プログラミングを
Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 - Qiita
結論: Javascriptの乱用をやめるのが一番。 はじめに書いておきますがしょうもない話です。 結論、開発者としてはどのような方向性でやるべきか、を書いています。 JS多い時代でのフレームワークの根本的な問題云々のことは書いてません。 さて、現状、モバイルにおいて、Javascriptでまともに動くものを作ることは難しいです。 Twitterから引き抜いた超優秀なWebエンジニアを多数抱えるMediumですら、未だにモバイルで多数のバグを抱えています。 超優秀なエンジニアを世界一抱えているであろうGoogleのGmailですら、モバイル版のWebはすぐクラッシュします。また、自前スクロールに致命的なバグも抱えています。 正確には「UIが不審な挙動をする」ですが、エンドユーザにとっては同じことで、「バグ」です。 サーバサイドで起こるバグと同じ程度、いやそれ以上に、サービスに影響を与えます
[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]Flashなどを簡単に設置するスクリプト(代替表示付) -jMedia
jMediaは、FlashやQuickTimeなどのプラグインを必要とするファイルを簡単に設置することができるjQueryのプラグインです。 jQueryのプラグインは、下記ページでもエントリーしています。 jQueryのプラグイン33+1選 jMedia jMediaは、単にプラグインファイルの設置だけではなく、IEのActiveXへの対応やプラグインの探知機能も備えています。 また、設置には下記の3つのモードが利用できます。 プラグインが無い場合、代替コンテンツを表示するモード。 [demo] クリックして、はじめてプラグインコンテンツを表示するモード。 [demo] 印刷時に、印刷用の代替コンテンツを表示するモード。 [demo] jMediaで設置可能なファイル Flash (.swf) QuickTime (.mov) Real Media (.ram, .rm) Windows
UIテストの自動化！Node.jsとSeleniumでWebアプリのUIテスト環境構築 – ICS MEDIA
Webアプリケーションを開発する際、みなさんはどのようにテストを行っていますか？ Webアプリケーションは、ユーザーごとに異なるブラウザを使用しており、ユーザー操作も必要となるため、手作業でテストをされている方も多いと思います。また、機能改修やバグフィクス後に、リグレッションテスト（改修により既存機能への影響がないかを確認する回帰テスト）が必要となりますが、時間が取れずしっかりとテストができていない方も多いのではないでしょうか。 本記事では、これらのテストを自動化することのできる「Selenium Webdriver」（セレニウム ウェブドライバー）について紹介します。 入力フォームのバリデーション機能をチェックするデモ 簡単な入力フォームのバリデーション機能をチェックするデモを動画で紹介しましょう。入力値に対して期待するエラー文言が表示されているかのテストを実施しています。Seleniu
[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
[JS]複数のパネルをアニメーションでスライドして切り替えるスクリプト -Sliding Tab Menu
サイドバーなどの省スペースにぴったりな、複数のパネルをスムーズなアニメーションでスライドして切り替えるスクリプトをQuenessから紹介します。 jQuery Sliding Tab Menu for Sidebar Tutorial demo デモでは、タブをクリックすると、それに対応したパネルがスライドして表示されます。 各パネルはコンテンツの量に合わせてサイズが調整されます。 タブとパネルはそれぞれdiv要素で実装されており、スライドのアニメーションにはjQueryとjQuery.ScrollToが使用されています。
Brian Reindel | Writer
You can find me writing science fiction and fantasy short stories on my Substack, Future Thief.
Slideout.js - A touch slideout navigation menu for your mobile web apps.
$ npm install slideout $ bower install https://github.com/mango/slideout.git $ component install mango/slideout 1. First of all, you'll need to have a menu ("#menu") and a main content ("#panel") into your body. <nav id="menu"> <header> <h2>Menu</h2> </header> </nav> <main id="panel"> <header> <h2>Panel</h2> </header> </main> 2. Add the Slideout.js styles (index.css) in your web application. body
[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)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React概論
[JS]ホバー時に浮かぶエフェクトがとってもリアルなスクリプト
[JS]画像をダイナミックな上下のスライドで変更するスクリプト | コリス