アンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプトを紹介します。 ↓はアニメーションGIFなので音はありませんが、実際のデモでは弦楽器のような音を奏でます。 びよ～んとなるのが、かなり気持ちいいです。
![[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/d2f2dbf82a4fb6727e6605167fd615db3de10740/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015042703.gif)
[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS
アンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプトを紹介します。 ↓はアニメーションGIFなので音はありませんが、実際のデモでは弦楽器のような音を奏でます。 びよ～んとなるのが、かなり気持ちいいです。
第23回 JavaScriptによるUIの実装：スライダー | gihyo.jp
こんにちは、前回、前々回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。今回は前回のドラッグと関連の深いスライダーを実装してみます。 基本のスライダー スライダーは簡単にいえば動きの制限されたドラッグです。 今回も、最初はなるべくシンプルに実装してみます。まず、基本となるHTMLは次の通りです。 スライダーの基本HTML <form class="js-slider-form" onsubmit="return false;"> <input type="text" name="slider" id="slider1o" value="0"> <div id="slider1" class="js-slider"> <div></div> <input type="button" value=""> </div> </form> 今回は少々手抜きで、input ty
2次元物理計算エンジンをブラウザで実現する「Matter.js」
面白いアニメーションを作るために物理演算エンジンを使いこなせればとても便利ですが、自力で物理演算に取り組むには高度な知識と技術が必要となります。そんな扱いの難しい物理演算を手軽に導入できるJavaScriptのAPIが「Matter.js」です。 Matter.js - a 2D rigid body JavaScript physics engine http://brm.io/matter-js/ Matter.jsでどんなことができるのかはデモを見れば一発で分かります。上記サイトの「Demo」をクリック。 すると、「Matter.js Physics Engine Demo」という物理エンジンのデモページが開くので、プルダウンメニューにあるデフォルトパラメータを指定して、「Reset」をクリックすればOK。2Dのアニメーションが再生され、Matter.jsでどんなことができるのかが直
第1回 Aptana Jaxerとは？／Jaxerのここが素敵 | gihyo.jp
Apatna Jaxerとは？ サーバサイドJavaScriptとは、その名の通りサーバ側で実行するJavaScriptのことです。 JavaScriptはクライアントのブラウザ上で実行するもの、というイメージが強いので、サーバ側で実行すると言われても、ピンと来ない方も多いかもしれません。 サーバサイドJavaScriptのエンジンは、いくつかのプロダクトが登場しています。Javaによる実装のRhinoやCによる実装のSpidermonkeyは、その代表格になります。 先日、統合開発環境Aptana Studioで有名なAptana社が、サーバサイドJavaScriptを実現する"Ajaxサーバ"Aptana Jaxer（以下、Jaxer）を発表しました。 Ajaxサーバ、とは耳慣れない言葉ですが、Jaxerの特徴をずばりと言い表すために作った造語だと思います。Jaxerを利用すると、Aj
[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js
スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できるスクリプトを紹介します。 jQueryやAngular.JSなど他のスクリプトは不要です。 Ilya Grigorik Timesheet.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="/javascripts/timesheet.js" type="text/javascript" /> </head> Step 2: HTML タイムスケジュールシートを配置する空のdivを用意します。 <div id='timesheet'></div> Step 3: JavaScript 一行目は配置する要素、自至、二行目以降はアイテムを配列で記述します。 new Timesheet('timesheet', 2002,
![[JS]イベントを時間軸で表すタイムスケジュールシートをシンプルなコードで作成できるスクリプト -Timesheet.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/011acf8e1c9225d55d2cc1eebb90e3691f016a1f/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090802.gif)
p5.js
p5.js is a friendly tool for learning to code and make art. It is a free and open-source JavaScript library built by an inclusive, nurturing community. p5.js welcomes artists, designers, beginners, educators, and anyone else! Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza. Coding Club for people aged 50+ in Korea, led by Inhwa Yeom. Qianqian Ye intro
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 先日の「OpenIL vol.2」にて「5分でわかるVue.js」というLTを発表しました。 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 前編 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 後編 この記事は、その時のLTの資料を元にブログ化したものです。 jQueryは頑張れば頑張るほど辛くなる jQuery、簡単に動きのあるサイトを作れてとても便利ですよね。 // 何か画面に反映する $(".hoge").html("変更したい内容"); // 変更時に何か処理して変更する $(".foo").on("change", function() { $(".bar").html("変更したい内容"); }); イベントを受け取って、色々と処理をし
JavaScriptでセキュアなコーディングをするために気をつけること
kintoneはJavaScriptを使って自由にカスタマイズできます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできますが、セキュアなコーディングをしないと クロスサイトスクリプティング （以下、XSS）などの脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的なポイントを解説します。
【JavaScript】デザインパターンを知ってみる。モジュール・パターン編 | バシャログ。
JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました。 なぜ使うの？ モジュール・パターンは名前の通り、処理を他の処理とぶつからないように安全に切り離し、モジュールの形として提供する考え方です。YUI などの大規模なフレームワークから小さなライブラリにも取り入れられています。以下のようなメリットがあります。 グローバル変数を極力減らして、機能をモジュールの形で提供できる。 コードの成長に合わせて構造を作れる コードを見通しやすくする 要件に応じて追加、置き換え、削除ができる シンプルな書き方 Sample というオブジェクトを作って、いろいろ便利な機能をつけていきたい、という場合、下記のような書き方ができます。 var Sample = { name: 'sampleくん', age: '30',
JavaScript で throw "" ではなく throw new Error() を使ったほうがよい(些細な)理由 - latest log
JavaScript で人為的に例外を発生させるには、大きく分けると以下の2種類があります。 throw new しない書き方 throw "ソフトウェアでエラーが発生しました。サポート担当者に連絡し、この問題を報告してください。"; o_o は String 扱いで、o_o.stack も undefined になっています。 throw new する書き方 throw new Error("一般的なエラーだよ"); throw new TypeError("型がちがうよ"); throw new SyntaxError("文法おかしいよ"); throw new URIError("URIちがうよ"); 他にも、RangeError, ReferenceError, MediaError, FileError, EvalError などがあります。 throw new した場合は、o_
enchant.jsでスマホ向けゲームを作り始めるための基礎知識
enchant.jsでスマホ向けゲームを作り始めるための基礎知識：enchant.jsでHTML5＋JavaScriptゲーム開発入門（2）（1/4 ページ） 大人気のHTML5＋JavaScriptベースのゲームエンジン「enchant.js」を使ってゲームアプリを作る方法を解説していく。今回は、enchant.jsでゲームを作るための準備の仕方や、サンプルアプリのソースコードを実例に基礎文法などを紹介
favico.js·Faviconを自在にコントロール MOONGIFT
Webカムや動画までFaviconに流しちゃいます！ FaviconはWebサイトのマークとして大事な役割を担っていますが、単に同じ画像をいつまでも表示しているのでは面白みがありません。もっと活用したい、そう考える人に使ってみて欲しいのがfavico.jsです。 できること favico.jsができることはFaviconのダイナミックな変換です。例えば、 バッジ表示 別なアイコンに差し替え 動画の表示 Webカムの表示 ができます。Faviconの中でWebカムを表示したいと思うケースは思いつきませんが、バッジ表示やユーザによってアイコンを変えると言うのは十分ありえるのではないでしょうか。 バッジ表示についてはアニメーションや形を指定することもできます。 デモ バッジ表示。数はダイナミックに変更できます。 数をアップしました。 アイコンの差し替え。 動画の再生。 バッジの表示位置は指定でき
人気上昇中のJavaScriptライブラリを調べてみた［ジャンル別に比較］
連載 INDEX 次回 → こちらのページで【2015年版】も発表！ ■ 2014年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2013年中に人気が急上昇してきており、「2014年では必須の知識」となりそうなJavaScriptライブラリ（Library）をランキング形式で発表する。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名が一般的な英単語の場合、Web検索時に、その英単語にもヒットしてしまう。このノイズがGoogleトレンドでの結果として入り込んでいる可能性が高いことをご了承いただきたい。各ジャンルは、筆者が独自
JavaScriptの変数のスコープをきちんと理解しているかクイズで確認してみよう -Javascript Scope Quiz
JavaScriptの変数のスコープをきちんと理解しているかクイズで確認してみよう -Javascript Scope Quiz
[JS]スマフォで各セクションのヘッダをそれぞれスクロールに追従させるスクリプト
iPhone, iPad, ガラケーなどのスマフォで、各セクションのヘッダをそれぞれ半透明の状態でスクロールに追従させるスクリプトを紹介します。 A, B, C と追従中 対応ブラウザ iPhone 4GS (iOS5) iPhone 4G (iOS5) iPhone 3GS (iOS5) iPad 3 (iOS5) iPad 2 (iOS5) Galaxy S3 (Ice Cream Sandwich) Galaxy S2 (Gingerbread) NEXUS S (Jelly Bean) 実装 Step 1: 外部ファイル 外部ファイルは下記の2つのスクリプトと当スクリプト・スタイルシートをhead内に記述します。 zepto.js jQueryと互換性のあるモバイル用軽量ライブラリ iscroll.js モバイルでposition:fixedを実現するスクリプト <script s
[JS]jQuery無し、アニメーションを使ったスライダーを簡単に実装できる軽量スクリプト -slidr.js
コントローラーとパンくず slidr.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 ... <script type="text/javascript" src="/path/to/slidr.min.js"></script> </body> Step 2: HTML 各パネルはinline, inline-block, blockのどの要素を使用しても構いません。ラッパーにidを付与するのを忘れずに。 <ul id="slidr-ul" style="display: inline"> <li data-slidr="one">apple</li> <li data-slidr="two">banana</li> <li data-slidr="three">coconut</li> </ul> <div id="s
[JS]数字や文字をクルマの走行距離計のようにぐるぐる回転させて表示するスクリプト -Odometer
テーマファイル「train」 Odometerの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 スタイルシートはさまざまなテーマが用意されています。 <link rel="stylesheet" href="odometer-theme-car.css" /> <script src="odometer.js"></script> 要素を指定する時にjQueryのセレクタを使用する時は、jquery.jsを加えます。 Step 2: HTML オドメーターを表示する要素を配置します。 「123」は初期表示の数字です。 <div id="odometer" class="odometer">123</div> Step 3: JavaScript innerHTMLで最終的に表示する数字を指定します。 テキストの場合は、innerTextで
jQueryで見栄えのいいグラフが描ける「jqPlot」 (1/3)
証券会社のサイトの株式相場グラフ、ショッピングサイトの価格変動グラフなど、Webサイト上に変動するデータをもとに、動的にグラフを表示したいことがあります。従来は、Flashを使うことが多かったですが、最近はAjax/JavaScript人気もあって、「JavaScriptでグラフも作成したい」というニーズも強くなっています。 以前、本誌では、HTML5のCanvasを使った図形のサンプルとして、グラフの描画方法を紹介しましたが（関連記事）、今回はグラフ描画に特化した専用ライブラリ「jqPlot」を使って、もっと簡単に見栄えのいいグラフを作成する手順を紹介します。 グラフに特化したjQueryプラグイン「jqPlot」 「jqPlot」はクリス・レオネロ氏が開発しているJavaScriptライブラリで、jQueryのプラグインとして動作します。HTML5のCanvasを応用してグラフを描く仕
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
特集：Firefox 3とFirebugで始めるJavaScript開発｜gihyo.jp … 技術評論社
The Design Pixel - Online Magazine for Web Designers and Developers