パララックスなサイトを作る際に、スクロールに応じてJSで要素を動かすと思うのですが、その時にある場所でCSS3 Animationsが動いていると、スクロールがカクついてしまい、FPSが残念な状態になります。 そこで、スクロールが動き出した時にCSS3 Animationsを止めて、スクロールを止めた時にCSS3 Animationsを再度動作させるという処理を加えれば、スクロールがカクつくことなく、スムーズになります。 スクロールや、リサイズといったJavaScriptのイベントは連続で処理されます。そういったイベントの「開始した時」「動作している時」「停止した時」の状態が取れるjQueryのプラグインを作成しました。 jQuery.MovingState このプラグインを使い、CSS3 Animationsを動的に操作してみたいと思います。 CSS3 Animationsを一時的に停止
<script src="..."> という感じでjsファイルを読み込んで、src部分が http://example.com/lab/test.js であるとき、 http://example.com/lab/ を自分自身で取り出す方法を模索する。 自分自身のsrcを調べる方法は とてもシンプルに自分自身が属する script 要素を取得 - IT戦記 http://d.hatena.ne.jp/amachang/20061201/1164986067 で大体いいと思います。 もしくは var n=document.getElementsByTagName("script"); n[n.length-1].src; // 自分自身のurl 相対パスの場合とか調べてないけど、今回の主題はディレクトリを取り出すとこなので後回し。 Twitterでどういう方法があるのだろうと投
A friend of mine and I are currently discussing what is a closure in JS and what isn't. We just want to make sure we really understand it correctly. Let's take this example. We have a counting loop and want to print the counter variable on the console delayed. Therefore we use setTimeout and closures to capture the value of the counter variable to make sure that it will not print N times the value
Hacker Newsを見ていたらMozillaの公開しているプロジェクトが話題になっていました。内容はシンプルかつ強力です。JavaScriptのコードを埋め込むだけでWebサイト上でチャットやカーソル位置の共有、音声チャットといったコラボレーション機能が使えるようになります。 TogetherJSは次のような機能をサポートしています。 ビデオと音声のチャット テキストチャット カーソルとクリックの共有 共同ブラウジング ユーザ情報の共有 リアルタイムコンテンツ同期 埋め込むだけで使えるというのはどういうことかと思いますが、実際にはJSで書かれたサーバサイドモジュールとクライアントサイドのスクリプトで構成されています。サーバーサイドを自分自身で稼働させる事も勿論できますが、サンプルとして貼り付けるコードについてはMozillaがホスティングしているhubというサービスをサーバーサイドとし
Webで動かしながら操作案内を簡単設置！ 使わないとかなり損するIntro.jsとは：HTML5アプリ作ろうぜ！（8）（1/2 ページ） HTMLに属性を追加していくだけで、実際に操作しながら案内できるチュートリアルを簡単に付けられるJavaScriptライブラリの使い方を解説します。 動画や専用ページのチュートリアルより分かりやすく、HTML初心者でも手軽に設置できるIntro.js 今回の「HTML5アプリ作ろうぜ！」は、「Intro.js」を紹介します。 読者の皆さんは、Webサイト／Webサービスのチュートリアル／操作案内を作成するには、チュートリアル専用のWebページを作成したり、操作する動画を作成したりしている方も多いかと思います。Intro.jsを利用すると、実際に操作しながら案内できるチュートリアルを簡単に付けることができます。そのため、チュートリアル専用ページや動画を作成
tmlib.js って何？ ゲームやツールを簡単に作る事ができる JavaScript ライブラリだよ♪ PC とスマートフォンどちらでも動くんだ 『プログラミングって気軽にできるもんなんだ』 『ゲームってこんなに簡単に作れるんだ』 って感じてもらえると嬉しいな かんたんに使えるよ♪ tmlib.js は初心者から上級者まで 幅広く使えるライブラリだよ Usage を見ればすぐに tmlib.js を 使ってプログラミングを始められるよ
The most popular coding language for the web is javascript; so much so that since the advent of HTML5, it has now been officially accepted as the default standard. Javascript has moved beyond a smaller client-side browser-based language to become integrated not just for front-end design, but also for back-end server-side development. As a result there are has been a huge growth of Javascript libra
メモ。 いい加減やらないと行けないと思いつつ、二回ほど試して上手く行かなくて放置してたので再入門した。 ディレクトリ構成 ├── app.js ├── entities ├── libs │ ├── backbone-0.9.9-min.js │ ├── bootstrap-2.2.2-min.js │ ├── jquery-1.8.2-min.js │ ├── jquery-layout-1.3.0-30.77.js │ ├── jquery-ui-1.9.1.custom.js │ ├── jquery.jsPlumb-1.3.16-all.js │ ├── micro-log.js │ ├── moment-1.7.0-min.js │ ├── require-2.1.2-min.js │ └── underscore-1.4.3-min.js ├── main.js ├── mod
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
読み込みが完了するまで待機し、完了後のコールバック関数を設定できるようになります。 例えば、IEのためだけに書かれたコードを「if IE」タグを使うのではなく動的に変更する事が出来るようになります。 以下のようなコードで動作するようです。 yepnope([ { load: 'js/jquery.js', wait: true }, { test: Modernizr.geolocation, nope: ['googleapi.js', 'needs-googleapi.js'], wait: true, callback: function(){ alert('JS was loaded!'); } } ]); このコードはjQueryの読み込み完了後に、googleapi.jsとneeds-googleapi.jsを読み込み、 全ての読み込みが完了したらアラートを表示するサンプルです
ExternalInterface.addcallbackはFlash(swf)とHTML(JavaScript)を連携させる場合に使う。 JavaScriptから任意のタイミングでswfの関数を呼び出し、引数を得ることができる。 今回はhtml上のボタンから、JavaScript上の関数（as3sendToActionScript）を実行し、ActionScript上の関数を実行するものを作ってみた。 ボタンをクリックすると、Flash内の赤丸が移動する。 以下、実行例とダウンロードファイル一式 ↓AS2版 左へ下へ上へ右へ //JSと交信する機能を読み込みます。 import flash.external.ExternalInterface; //テキストエリアをつくります。 _root.createTextField("return_txt", 0, 0, 0, 300, 20);
Moment.js 2.30.1 Parse, validate, manipulate, and display dates and times in JavaScript. Install npm install moment --save # npm yarn add moment # Yarn spm install moment --save # spm meteor add momentjs:moment # meteor bower install moment --save # bower (deprecated) Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YY
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('click', function () { // update 処理 }) でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っている
I have been using it quite substantially for a number of different projects now and must say that I absolutely love the way it works. - Soteri Panagou I've been using your grid on a couple of small projects and I've got to say it's an awesome piece of work. It's very easy to configure and offers a lot of features while staying really responsive. As a programmer it inspires me to write better code.
フォームにテキストを入力する際、ちょっと面白いアニメーション（5種類）を与えるjQueryのプラグインを紹介します。 colissと入力、そして削除すると、こんな感じです。 Fancy Input Fancy Input -GitHub Fancy Inputのデモ Fancy Inputの使い方 Fancy Inputのデモ デモはFirefox, Chrome, Safari, Operaでご覧ください。 IEはゴメンナサイとのことで、通常通りに入力できるだけです。 デモページ デモではテキストとテキストエリアの2種類があり、エフェクトはそれぞれ5種類用意されています。 ※日本語の入力は対応していないようです、残念。 Fancy Inputの使い方 実装は非常に簡単です。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
