milkcocoaとgmaps.jsで、スマホ（と、まろ氏）の位置情報をリアルタイムに取得してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エンジニアののびすけです。 最近、同じくエンジニアのまろ氏が目立ってきて焦っています。 先日、Google Mapsのライブラリであるgmaps.jsを使った 「Web初心者でもGoogle Mapsをカスタマイズできるgmaps.jsでAPIを使い倒そう！」 とmilkcocoaを使った 「インタラクティブコンテンツを作ろう！milkcocoaで5分のチャットアプリ制作」 を書きました。 Web上の地図表現とインタラクティブな表現。 これらを使って何かをやりたいとは思ったのですが、アイディアが無いので（誰かください）今回はこの2つの技術を組み合わせて、エンジニアのまろ氏の現在地をGoogle Maps上にリアルタイムに反映してみたいと思います。 今回はこれを1時間弱程度で作りました。milkcocoaとgmaps.jsは便利っすなぁ。 作ったものの構成イメージ 上のような構成
アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのおじいちゃんです。 今回はパフォーマンスを意識したアニメーションを実装できる「requestAnimationFrame」について書きたいと思います。 requestAnimationFrameとは requestAnimationFrameは、アニメーション実装時など、再描画が頻繁に行われる処理に使えるメソッドになります。 window.requestAnimationFrame() メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。 引用元：MDN setTimeoutやsetIntevalと比較されることが多いですが、主に以下のような違いがあります。 requestAnima
Photofy | Photo Swap Shuffle Plugin for jQuery
Not Just Any Gallery Plugin Photofy is a completely new take on the over-developed gallery plugin. Photofy doesn't just display images, it randomly shuffles them around in thumbnails, whilst pre-loading the next set of images in the background for a smooth transition. Giving a nicely different effect and keeping page load times snappy and consistent. The long awaited second version of Photofy is n
[JS]実行のタイミング（開始時間・回数・リピートなど）を簡単に設定できるスクリプト -timing
JavaScriptにはsetTimeout(), setInterval()とタイミングを設定できるメソッドがありますが、より簡単にタイミング（遅延時間・回数・リピートなど）を設定できるjQueryのプラグインを紹介します。 timing — a jQuery plugin [ad#ad-2] デモを例に、スクリプトの使い方を紹介します。 スクリプトの準備 スクリプトを使用するには「jquery.js」と当スクリプトを外部ファイルとして記述します。 ※jQueryは1.2+対応で、.join()使用時は1.7+を。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/<preferred-version>/jquery.min.js"></script> <script type=
さまざまなタイプのスライドショーが簡単に設置できるスクリプト -Agile Carousel | コリス
一つ一つの完成度が高い、アニメーションを伴ったさまざまなタイプのスライドショーが簡単に設置できるjQueryのプラグインを紹介します。 Agile Carousel - Javascript Slideshow - Image Carousel [ad#ad-2] Agileは以前ちらっと紹介しましたが、つい最近バージョンアップしたので改めて紹介します。 以前のバージョンではjQuery UIも併用するタイプでした。 Agile Carouselには、下記のさまざまなタイプのスライドショーが用意されています。
JQuery Plugin: imBannerRotater | GrasshopperPebbles.com
Tweet I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog. My intention
jQuery Title Alert | Jonatan Heyman | heyman.info
A little more than a year ago I wrote a small jQuery plugin at ESN where I work, called jquery-titlealert. It provides functionality for flashing a notification message in the browser title. Title alert notifications can be useful when you want to notify a user of some kind of web page event (for example an incoming chat message), when the user has another window, or another browser tab, in focus.
[JS]リスト要素の項目をアニメーションで表示するシンプルなティッカー -List Ticker
リスト要素の項目をフェードやスライドのアニメーションで表示するシンプルなティッカーのスクリプトを紹介します。 Super simple jQuery ticker デモページ デモではリスト要素の各項目が自動で次々に表示され、スクリプトのオプションでは表示方法（フェード・スライド）とアニメーションのスピードが設定できます。 実装はシンプルで、HTMLは下記のようになります。 HTML 「id="fade"」は変更可能です。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="fade"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> <li>Fourth Item</li> <li>Fifth Item</li> </ul> </textar
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
文章中の任意のキーワードをアニメーションしながら定期的に別のキーワードに置き換える軽量jQueryプラグイン・dynamo.js
yktmt blog: setIntervalのcallbackに引数を渡す