JavaScript 系パッケージマネージャの重複問題 npm は言わずもがな Node.js のパッケージマネージャだが、フロントエンド開発においては Bower も利用するのが一般的になっている。この現状の問題点は、package.jon と bower.json という似たような管理ファイルを二重で管理しなければならないということだ。 現状の使い分けをおさらいをしておくと、次のような感じになる。 タスクランナー(Grunt/gulp)・モジュールシステム(browserify/webpack)・テストスイート(karma/testem)などの開発環境系の管理が npm の主なお仕事。インストールされたパッケージは node_modules 内に展開されて、CommonJS スタイルのモジュール管理から利用する。 本題につながる話としては、ブラウザで動くライブラリの一部は npm にも
Step 0: Add purplecoat-min.js along with jQuery. <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="http://ellekasai.github.io/purplecoat.js/purplecoat.min.js"></script> Step 1: Add data-purplecoat="foo" and data-purplecoat-label="Hello!" to any element. <img data-purplecoat="foo" data-purplecoat-label="Hello!" src="http:/
「その場編集」を実装 前回はツールチップの実装方法をご紹介しました。 今回「Edit In Place」や「その場編集」と呼ばれる、テキストをクリックすると、その場で編集できるようにする仕組みを実装してみます。 今回の仕組みを考える この「その場編集」の仕組みを考えてみましょう。今回の要件は以下の通りにします。 最初はただのテキスト クリックをすると、テキストがinput要素に置き換わり編集可能に。 input要素からフォーカスが外れたら、input要素が編集後の文字に置き換わる。 フォーカス外れた時、valueの値が空なら最初の値に戻す。 本来であれば、上記の仕組みの4の後に、PHPなどでデータベースに編集後の情報を送信し、保存するという仕組みになるのですが、今回はその前のところまでの実装方法のご紹介とします。 まずは完成サンプルとソースコードを見てみましょう。 完成ソースコード jQu
ナビゲーションの現在位置を取得し、要素にクラス(activeなど)を追加してデザインを変更するスクリプトをCSS newbieから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> $(document).ready(function() { if(location.pathname != "/") { $('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); } else $('#nav a:eq(0)').addClass('active'); }); </textarea>
左右に配置された二つのパネルをスライドのタイミングをずらして表示するコンテンツスライダーを紹介します。 dualSlider ※注意 IEでアクセスすると「Virus.DOS.Albania.429」が検出されます。当方はFirefoxでアクセスしていため気がつきませんでした。 しかしながら、スクリプト自体はかっこいいので、いつか解消されることを期待しつつURLを記載しておきます。 http://www.hugoandcat.com/DualSlider/index.html コンテンツスライダーの操作は自動と手動があり、自動と手動の切り替えは右上のボタン、手動の操作は右下で行います。 手動操作のインターフェイス dualSliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。 スクリプトのオプションでは自動・手動の切り替え、アニメーションのタイミングなどを設定
サイトを彩る多彩なアニメーション フラットデザインをベースに、随所に気持ちいいアニメーションを取り入れている「Omnisense」。コンテンツごとに用意されているさまざまなアニメーションは、どれも洗練された動きで、サイトの魅力をぐっと高めている。 ページトップにあるシンプルなボタンにマウスオーバーすると、上から矢印のアイコンがスライドして下りてくる。注目したいのは、マウスがボタンから離れたとき(マウスアウト時)の動きだ。 よくある:hoverで実装したマウスオーバーのアニメーションは、マウスオーバー時とアウト時の動きを別々に設定できないため、必ず逆の動きになる。マウスオーバー時に上からスライドしてきたら、マウスアウト時には上へ戻る、といった具合だ。 ところが、Omisenseのボタンは、マウスアウト時にそのまま下にスライドを続ける。細かな違いだが、最近ではこういったマウスオーバーのアニメー
マウスをフォーカスすると、アニメーションで色が少しずつ変化するボタンを作成する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スプライトで実装されており、画像の作成もそれ用になっています。
Webでも裁ち落としでインパクトを出せる DTPでは、1ページ内に写真を裁ち落としでページいっぱいに載せ、その上に文字を置くのは定番のデザイン。でも、Webでそれを表現するのはなかなか難しいものです。ユーザーによってディスプレイの解像度や利用するブラウザが違うためです。 現在、多くの解像度やブラウザに対応できるように、widthを固定し、コンテンツをセンター配置にすることが多くなっています。その分、うまくフルスクリーンで表現できれば、することができれば、より一層かっこよさやインパクトを与えることができます。 今回ご紹介するのは、JavaScriptを使い、フルスクリーンで背景画像を表示する方法です。第6回「裁ち落としてインパクトのあるデザインを作るでも同じようなUIをご紹介しましたが、IE6で縦スクロールが出てしまうという欠点があります。オプションの充実度からも、今回のやり方のほうが使いや
A seasoned design and product lead with nearly 30 years of experience across various fields. I bring together design management, product management, strategy, futures thinking, and systems thinking to help teams and organizations navigate an increasing uncertainty and design for the preferable future. More than 25 years of experience 8 years in building, managing, and scaling cross-functional team
Create an apple style menu and improve it via jQuerySince I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done. Since the Apple-flavored Leopard-text-in
今回使用する「Dialog」「Draggables」「Droppables」「Sortables」に必要なファイルは以下の通りです。 themes/ jquery-1.2.3.min.js jquery.dimensions.js ui.mouse.js ui.resizable.js ui.dialog.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext.js ui.sortable.ext.js ui.sortable.js jQuery UI 1.5bを使うために、今回は同梱されているjQuery 1.2.3を使うことにします。バージョンが上がりますが、これまでのサンプルの動作に影響はありません。 ライブラリの設定 ライブラリの各ファイルを、head要素の子要素に以下のように指定します(
「drawer」は、横からせり出してくる「ドロワーメニュー」をサイトに手軽に実装できるjQueryプラグインです。 ドロワーメニューはスマートフォンやタブレットなどのさまざまな画面サイズに柔軟に対応できる利点があり、GoogleやFacebookのモバイルサイトで利用されています。drawerプラグインは横幅の可変に対応していますので、レスポンシブ Web デザインにも利用できます。 drawerプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 10以降、スマートフォンではiOS 7のSafariとChromeに対応しています。 MITライセンスですので、著作権表示は削除せずに利用しましょう。 drawerは、パッケージマネージャーの「bower」でもインストールできます。bowerを導入している場合は、以下のコマンドですぐに利用できます。
Simplify dynamic JavaScript UIs with the Model-View-View Model (MVVM) pattern Declarative Bindings Easily associate DOM elements with model data using a concise, readable syntax Automatic UI Refresh When your data model's state changes, your UI updates automatically Dependency Tracking Implicitly set up chains of relationships between model data, to transform and combine it Templating Quickly gene
インタラクティブなタイムテーブルのUIなどを実装するJavaScriptのライブラリ「Glow」を紹介します。
どうもです。フロントエンドエンジニアのはやちです。 健康診断の結果が届き結果がオールAの超絶健康体だというのがわかって浮かれてるはやちです♪ギミギミ└( ^ω^ )」シェイク♪ 野菜を食べ続けた結果ですね、みなさんも野菜を食べましょう( ˘ω˘)☝ そんなのどうでもいいですね。 さて、今回は縦に長いコンテンツなどでよく見かけるスティッキヘッダーを作ってみました。 ご紹介します( ˘ω˘)☝ スティッキーヘッダーとは? スクロールしてもヘッダーがついてくる技法のことです。 ページ移動がしやすいため使用されることが多いです。また、縦に長いLPのページ内リンクで使用されることもあります。 なんだかスティッキーフィンガーみたいですね( ˘ω˘)<アリーデヴェルチ HTMLとCSSの準備 まずは準備の方法をご紹介します( ˘ω˘)☝ HTML ヘッダーは固定に配置しておくための#header
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.14? Compatibility with recent jQuery versions (up to 3.7): Usage of deprecated jQuery API
jQuery Mobile is no longer supported To read more about the status of the jQuery Mobile project, see the announcement blog post. A Touch-Optimized Web Framework jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Seriously cross-platform with HTML5 jQuery Mobile framework takes the "w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く