CreateJSで汎用的なパーティクルをつくる - Qiita
const stage = new createjs.Stage("myCanvas"); const WIDTH = window.innerWidth; const HEIGHT = window.innerHeight; stage.canvas.width = WIDTH; stage.canvas.height = HEIGHT; // 初期設定 stage.mouseX = stage.canvas.width / 2; stage.mouseY = stage.canvas.height / 3; let particles = []; let count = 0; const SIZE = 10; const AMOUNT = 5; // 1FPSで生成する量 const DECIMATION = 1; // パーティクルを間引く量 const MAX_LIFE = 50;
マウスやジャイロセンサーの動きに合わせてパララックス効果を出す parallax.js｜Gimmick log
TOPJavaScript マウスやジャイロセンサーの動きに合わせてパララックス効果を出す parallax.js マウスやジャイロセンサーの動きに合わせてパララックス効果を出す parallax.js 公開日：2015.11.20 更新日：2015.11.23 JavaScript, パララックス parallax.jsは、マウスやジャイロセンサーの動きに合わせてパララックス効果を出してくれるライブラリです。 パララックスというとスクロールで行うというイメージがありますが、スクロールするほどコンテンツ量が無い場合に実現するのが厳しかったりします^^;。 そういう場合にサイトのアクセントとして使えそうですね。 使い方 必要なファイルを読み込む 以下から配布サイトからファイルをダウンロードして読み込みます。 parallax.jsデモ&配布サイト parallax.jsダウンロードページ j
IE11 で使える機能と使えない機能 : (*x).b=z->a+y/c
Vista に限り IE9 がありますが 今時 Vista でかつ IE 使うような人はほぼいないでしょうし いないものとして扱います 一応あと 1 年です IE11 は Windows7 から Windows10 まででサポートされて 2020年から2025年までサポート期間があるようです OS のサポート切れということで 幅があります IE11 に機能が増えていくならいいのですが 増えるわけもなく CSS などのバグが直るわけもないので IE 向けに作る人はまだまだ苦痛が続くわけです 私は ただで Chrome や Firefox などの新しい機能が使えるのに好みで IE を使い続ける人のサポートをする気はないので 基本的にどうでもいいです ですが アプリやツール部分はともかく ブログなどのページの基本部分は一応動くようにしておこうかなと思います ボタン押しても反応しない とかならとも
JavaScript初級者が調べるInternet Explorer特有の仕様いろいろ
JavaScript ( != jQuery ) を勉強してます 最近、jQueryからJavaScriptに改宗を企てています。node.jsとかTitaniumとかやってみたいので、JavaScriptとして勉強し直しです。ブラウザやDOMのことを省いたらシンプルな言語ですし、柔軟で楽しい言語ですよね。 さて、業務でその取り組みを強行しようとしたところ、案の定Internet Explorer特有の仕様に悩まされたので、簡単なところで違いをまとめてみました。 Internet Explorerのことを教えていただいたり var elm = evt.target || evt.srcElement;も RT: @ahomu var evt = e || window.event;Thu Jan 27 06:19:29 via webYoshiaki Sugimoto sugimoto19
JavaScriptでjQueryを使わずにイベントをtriggerする - Qiita
基本的なことなのですが、すぐ忘れるので。。。 JavaScriptでDOMノードの任意のイベントを発火するには以下の様にします。 function triggerEvent(element, event) { if (document.createEvent) { // IE以外 var evt = document.createEvent("HTMLEvents"); evt.initEvent(event, true, true ); // event type, bubbling, cancelable return element.dispatchEvent(evt); } else { // IE var evt = document.createEventObject(); return element.fireEvent("on"+event, evt) } }
Simple background parallax scrolling in JavaScript
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
CreateJS入門サイト - ICS MEDIA
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
CircularLoader.js | Easy jQuery Plugins & tutorials
CircularLoader.js Circular progress bar using HTML5 and javascript About CircularLoader.Js is a jQuery plugin made using HTML5 and javascript to create customizable cicular progress bars with or without percentage values. It can be used to create a progress indicator. It is a fully customizable plugin which works with all browsers compatible with HTML5. It is a very easy to integrate and easy to u
Vorlon.jsとは？ ブラウザーでWebデバッグできるお手軽な開発者ツール
Vorlon.jsという開発者ツールを知っているだろうか？ このオープンソースツールを使えば、PCブラウザーで各種Webデバッグが行える。その機能概要と基本的な使い方を解説。 Vorlon.jsとは Vorlon.js（読み方： ヴォーロン・ジェーエス）とは、ChromeのDevToolsやIE／EdgeのF12開発者ツールと同じく、Webブラウザーの表示内容やネットワーク状態をデバッグするためのツールである。 最も特徴的なのが、ブラウザー上で動作することだ。PCブラウザーのデバッグはもちろん、スマホなどのモバイルデバイスのデバッグを、ケーブルをつなげることなく、Macを準備することなく、実現できるのが大きなメリットだろう。 マイクロソフトが開発したオープンソースプロジェクトであり、Node.jsとSocket.IOといったオープンな標準のみを使って開発されていて、プラグインの追加が容易で
滅び行くAndroid 標準ブラウザをサポート外にして悩みの種をなくす話
Android 4.3系以前で使われた標準のブラウザ（Android Browser）は、不具合も多いし、デバッグ方法もろくにない。スマホのIE6と化しているこのブラウザはもうサポートするのやめたかった。 しかもこの標準のブラウザはGoogleからのサポートはすでに切られています。脆弱性も絶賛放置中！ https://plus.google.com/+AdrianLudwig/posts/1md7ruEwBLF（公式見つからなかった） なのでユーザー的にも開発者的にも標準ブラウザを使うメリットはないので、 標準ブラウザのユーザーをChromeに移行するようにページトップに警告を表示し、Android 標準ブラウザをサポートから外しました。 標準ブラウザを判定する方法 あまりJSでがんばりたくないので、UAで判定します。いつもカオスなUAですが今回もカオスです。 Android端末ユーザーエ
『JavaScriptテンプレートエンジン「JsRender」のすすめ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。フロントエンドエンジニアをしている清水です。 私は今、スマートフォン向けブラウザゲーム「天下統一クロニクル」を開発・運用しています。 本記事では、天下統一クロニクルで利用しているJsRenderというJavaScriptテンプレートエンジンの基本的な使い方とちょっとしたTIPSを紹介しようと思います。 JsRenderとは？JsRenderとは、テンプレートエンジンの一種です。 jQuery Templatesの作者でもあるBorisMoore氏が、同ライブラリの後継として作成しているライブラリです。 jQuery Templatesの後
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
[JS]アナタのソーシャルコンテンツをまとめてPinterest風レイアウトで表示するスクリプト -Socialist
ブログのRSSをはじめ、Facebook, Twitter, Tumbler, Google+, Pinterest, Flickr, YouTubeなどのコンテンツを全てPinterest風のグリッドレイアウトで表示するjQueryのプラグインを紹介します。 幅800pxで表示 Socialistの使い方 Step 1: 外部ファイル head内に当スタイルシートと「jquery.js」と当スクリプトを記述します。 ※ダウンロードできるデモファイルにはjQueryの記述が無いのでご注意を。 <link href="../jquery.socialist.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <scri
HTML5+Canvasでパーティクルっぽいのを作ってみる
Posted: 2015.07.16 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 パーティクルオブジェクトを作成して動かす 基本的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎 上記の記事では一つの円を動かすだけだったので描画関数だけ作成しました。 function drawCircle(x, y, scale, color) { ctx.beginPath(); ctx.arc(x, y, scale, 0, 2*Math.PI, false); ctx.fillStyle = color; ctx.fill(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成
Ajax(pjax)遷移時におけるSNSボタン再構築
Updated 2013.10.04 / Published 2013.10.04 HTML5のhistoryAPI（pushState）とAjaxを組み合わせた遷移（pjax）時に、Twitterのwidgets.jsで埋め込んだツイートボタンが更新されない事態に遭遇しました。pushStateでURLは変更できているにも関わらず、ツイートボタンを押しても取得されるタイトルとURLは最初にツイートボタンを表示したときの遷移前の状態であり、ごっそり入れ替えてもDOMが再構築されていない様子。 TwitterのAPIドキュメントを探すも、Ajax遷移時にDOMを再構築させるような使い方はどこにも載っていない。そこで、検索語を「Tweet button Ajax」に変えてみると、Cannot update tweet button with AJaxという記事がヒット、回答欄に解決策を提示して
WebGLStudio
3D Development environment for the web. WebGLStudio (formerly known as WebGLStudio) is a platform to create interactive 3D scenes directly from the browser. It allows to edit the scene visually, code your behaviours, edit the shaders, and all directly from within the app. Try WebGLStudio.js Example Source on GitHub Documentation Learn or you can use the latest version (more features and more bugs)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE 11 でも jquery 2系 が使えない!? - Drafts
Spirit - The animation tool for the web
http://wiz-code.digick.jp/js/jquery.mousehold.js