今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
使い方 まず最初にチェックするコンテンツです。どのような考えをもとにプログラムを組み立てていくか、設計力を学びます。 サンプル 使い方で学んだことを生かして、簡単なサンプルの作成を学んでいきます。 プラグイン jQueryで利用できる便利なプラグインを紹介していきます。 リファレンス jQueryのリファレンスです。辞書代わりにご利用ください。 使用例 企業サイトでのjQueryの使用例を紹介していきます。 始めに jQueryはデザイナーにも利用しやすいjavaScriptプラグインです。このサイトはhtmlやcssを充分に理解しており、さらに基礎的なjavaScriptをマスターしている方を対象に記事を書いています。 現在はスマートフォン用のゲーム制作に注力しているため、本サイトの更新は休止状態(2014年3月が最終更新)です。ゲーム制作に関するブログ:スマゲー作るよ!はほぼ毎日更新し
いつかきっと使うメモ 今回の記事は以下から How To Build a Fullscreen Background Video Player | Vandelay Design Blog About the Author:Jake Rocheleau @jakerocheleau. Jake’s Google+ profile. より詳しく、技術的に読みたい方は今すぐGOです(記事は一応チュートリアルで全文英語です) jQuery / jQuery UI / Video.js / imagesLoaded を用いて、bigvideo.js と以下の指定で動くそう。 <script type="text/javascript"> $(function() { var BV = new $.BigVideo(); BV.init(); BV.show('動画.mp4'); });
この記事は賞味期限切れです。(更新から1年が経過しています) 先日リニューアルのご報告をした Matsukaze.で使用している ブラー効果をつけたスライダーで、実験的に採用した手法を記録しておきます。 基本的な仕組み ぼかし画像の透明度について 簡単なデモ まとめ 基本的な仕組み まずスライダーに使用する絵を連結して一枚の画像にしたものを作成。 そして、その画像を横にブレさせた画像を別途用意します。 ぼかし画像は、例えばFireworksなら「移動(ぼかし)」を水平方向にかけ、 さらにその上に反対方向の「移動(ぼかし)」をかけたものを透明度50%ぐらいで重ねています。 ぼかしの強さはコンテンツの内容・大きさとご相談で、いい按排を探ります。 HTML上ではその2つの画像を、ぼかし画像を上にして重ね合わせて配置し、 スライダーが動く時にぼかし画像の透明度を変更してスピード感を出します。 基本
コア コア(基本) セレクタ セレクタ(基本) セレクタ(継承) セレクタ(属性) セレクタ(基本フィルタ) セレクタ(コンテンツフィルタ) セレクタ(ビジビリティフィルタ) セレクタ(子要素フィルタ) セレクタ(フォームフィルタ) トラバース トラバース(親子関係) トラバース(フィルタリング) トラバース(その他) イベント イベント(イベントハンドラ) イベント(ブラウザイベント) イベント(読み込み) イベント(フォーム関連) イベント(キーボード関連) イベント(マウス関連) イベント(イベントオブジェクト) 属性・値 属性・属性値 HTML・テキスト・値 クラス スタイルシート スタイルシート(基本) エフェクト エフェクト(表示) エフェクト(フェードイン) エフェクト(スライドアップ) エフェクト(カスタム) 操作 操作(DOM挿入(内側)) 操作(DOM挿入(外側)) 操
legit online casino real moneyHighest Payout Online Online Casinos: A Comprehensive Overview-rn When it comes to online casinos, players are always on the lookout for the highest possible payment city center online jugar portions. Nevertheless, legit online casino real money that would not want to optimize their possibilities of winning large? In this comprehensive guide, we will check out the glo
jQuery 1.9.0におけるhover() jQuery Core 1.9 Upgrade Guideの日本語解説がいくつか出ていて、間違った内容が記述されてるので補足と訂正をしておきます。 [jQuery/Javascript]jQuery Core 1.9 Upgrade Guideの翻訳というか解説 | Wood-Roots.blog jQuery 1.9 で変わったところを調べてみる。 | バシャログ。 共に「hover() が非推奨に」となってるがこれは間違い。 As of 1.9, the event name string "hover" is no longer supported as a synonym for "mouseenter mouseleave". This allows applications to attach and trigger a cu
今さら聞けないjQuery実行パターンまとめ :: 5509(+1) noriさんのブログでまとめられていた「.ready()」などのjQueryの実行パターンについてのまとめ。jQueryの書き出しに書かれる.ready()メソッドや$(function(){~});などを「おまじない」とか「最初に書いておくもの」なんて言われたり見て覚えていた人が多いんじゃないかなって思うのですが、こういうまとめがあるとわかりやすくていいですね。 十分ではあるのですが、僕なりの補足を入れておこうかなと思ったので紹介も兼ねてエントリー 慣習的に書く理由 この「$(document).ready(function(){~});>」や「$(function(){~});」はjQueryのスクリプトを書くときの最初に、慣習的に書くもので、「おまじない」とか「とりあえず書いておけ!」なんて言われて、何となく書き入
なんとなく使っているだろう.ready()メソッドについて詳細に見てみましょう。 .ready()メソッド .ready()メソッドという呼び方がパッとしない人もいると思います。こういうのです↓ $(function(){ // .ready()が呼び出されたときに実行されるハンドラ }); jQueryを実行する際のおまじないみたいなものですね。これの中にjQueryコードを書いていくとページロード時(Documentの読み込みが完了時)に実行してくれます。 何気なく使ってる人も多いと思いますが、実際のところこれは何?ということで、少し掘り下げてみましょう。 .ready()を使う際の形式 jQuery APIによれば、以下の3つが.ready()として同じように使えるようです。 $(document).ready(handler) $().ready(handler) (推奨されていな
jQuery 1.9が正式リリースされましたね! で、同時にjQuery 2.0 β版がリリースされました。 この二つのバージョンの違いは、サポートブラウザの違いです。 jQuery 2.0は後方互換性を切り捨てて、IE6-8では動作しなくなった代わりに、内部のリファクタリングやファイルサイズの縮小を狙っています。 デスクトップブラウザ以外を対象としている場合、2.0は非常に魅力的な選択肢となることでしょう。 そこで気になるのが、「jQuery 2.0はどれくらい小さくなったのか?」という事です。 ただし、jQuery 2.0はまだまだ開発途上で、リファクタリングやサイズ縮小の余地はまだまだあるとのこと。 なので、jQuery 2.0の新しいリリースが出るたび、結果は更新して行きたいと思います。 jQuery 1.9, 2.0, zepto.js,そしてjqMobiを比較してみる
軽めのjQuery Advent Calendar 2012の6日目の記事です。画面下から「ニョキっ」と出現させる、エフェクト付きの表示について簡単に。 先日、いつもSaCSSでお世話になっているアミバ様…にjQueryを使って、画面下から「ニョキッ」と出現させるようなエフェクトをやるにはどうしたらいいか?と質問をされました。 jQueryにはエフェクト付きで表示・非表示を切り替えるメソッドが用意されていますが、今回はslideUp・slideDownを使います。
2012/12/02 少しだけわかる人向け Webの開発において欠かすことのできないJavaScript。 html/cssしか触った事のない人でも理解のしやすいモデルを提供するjQuery。 非常に便利なjQueryですが、DOM操作のコスト自体が低くなる訳ではありませんので、 実装方法によってはブラウザに大きな負荷をかける場合があります。 特にモバイルブラウザにとってはシビアな所だと思います。 モバイル端末の性能も飛躍的に向上してきてるとはいえ、 最適化された実装を目指さない理由はないでしょう。 この辺りを気をつけると良いっていうポイントを挙げてみます。 jQueryと銘打ってますがそれに限らず、Zeptoでも生jsでも同じです。 ループ文の書き方 よく書かれがちなループ文。 var array = ["data1", "data2", "data3", "data4", "data5
最近のレスポンシブWebデザインの影響もあって ボックスをタイル状に並べた構成のグリッドレイアウトWebサイトをよく見かけます。 ウィンドウサイズによって最適な配置で画面を構成できたりするグリッドレイアウトですが jQueryを使って簡単に実装することができるプラグインを自分用メモとして紹介してみます。 まずは「BlocksIt.js」 BlocksIt.js | Dynamic Grid Layout jQuery Plugin – Plugin Page デモページはこちら BlocksIt.js Demonstration #1 – Random Dynamic Grid Layout BlocksIt.js Demonstration #2 – Pinterest Dynamic Grid Layout with CSS3 Transitions ページをロードするたびにランダムで
最近のJavaScriptのつくりとして、jQuery等のプラグインを使ったりしてると複数のJavaScriptを読み込まないといけなくなります。 これに対応するために import.js というスクリプトを作って<script>タグをdocument.writeしたりもしますが、数が多くなるとレスポンスが悪かったり、いろいろジレンマが発生してきます。 参考: http://www.ezgate-mt.sakura.ne.jp/javascript/83.html これらをSublimeTextでショートカット一発で解決する方法を考えてみました。 と、いっても、ものすごいレガシー感いっぱいの内容ですが・・ JS圧縮ライブラリ (UglifyJS等) をインストールする それを使うためのバッチファイルやシェルスクリプトを書く SublimeTextでショートカットキー一発で呼び出す設定を書き
少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、今回はプラグインなしで実装できるjQueryの小技を紹介します!「jQueryってなんだ?」という人もコピペで実装できますよ!サンプルも用意したのでぜひご覧ください! 追記:この記事で紹介されているいくつかの方法が、今では CSS のみで実装可能です!詳しくは「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」をご覧ください。 jQuery の基本的な使い方まずはjQuery 本家から jQuery ファイルをダウンロードします。<head> 内に下記を記述し、jQuery ファイルを読み込みます。 <script type="text/javascript" src
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 table要素をレスポンシブに対応させる、というスクリプトです。他にも同じようなスクリプトは存在しますが実用的ではなかったので紹介してなかったですけどこれはアリな気がします。 table要素をレスポンシブに対応させるjQueryプラグインです。他にもMediaTableやzurbのスクリプトもあります。 ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替える、というもの。 上記のようにタップすると非表示部分のカラムの内容が表示されます。ユーザーにとっても分かりやすい気がしました。 公式の動作サンプルです Sample コード <script src="http://ajax.googleapis.com/ajax/libs/jqu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く