jQueryのプラグイン「CSSMatrix」を使って、不連続のレイヤーに要素を配置し、それぞれを分離して3Dにぐるぐる回転して表示するデモを紹介します。
[JS]レイヤーに要素を配置し、分離して3Dにぐるぐる回転させるスクリプト -CSSMatrix
jQueryのプラグイン「CSSMatrix」を使って、不連続のレイヤーに要素を配置し、それぞれを分離して3Dにぐるぐる回転して表示するデモを紹介します。
[JS]自分仕様のかなりかっこいいローディング用アニメーションを生成できる -Sonic Creator
かっこいいデザインのローディング用アニメーションのCanvas版、アニメーションGIF版、CSSスプライトPNG版を同時に作成できるオンラインサービスを紹介します。 Sonic Creatorの前に、まずはSonicのデモから。 Sonic Sonicは、HTML5 Canvasを使ってローディング用のアニメーションを作成する超軽量（約3K）のスクリプトで、実装方法などは下記をご覧ください。 かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic 今回紹介するのは、このSonicをコードベースでオンラインで簡単に設計でき、それをアニメーションGIFやCSSスプライト用のPNG画像を生成するオンラインツールです。
jQuery/CSS3で雲をゆらゆらさせる
jQuery/CSS3で雲をゆらゆらさせる 雲の画像を背景に設定してゆらゆらさせてみました。 jQueryバージョンとCSS3バージョンでお送りいたします。 投稿日2013年03月29日 更新日2013年03月29日 はじめに雲の画像を用意します。 パララックス的にした方がクールだと思ったので大きい画像と小さい画像を作成しました。 わかりやすいように背景がブルーになっていますが、実際は透過pngです。 ちなみに雲の素材はこちらの素材サイト様からお借りいたしました。 商用フリーで使える影絵素材サイト シルエットデザイン jQueryバージョン 最初はjQueryバージョンです。 画像が2つあるのでdivを2つ作成して適当なidを割り当てます。 html <div id="main-img"><div id="bg"></div></div> CSSはそれぞれのdivに作成した画像を「back
プレゼン用のスライドショーを実装する、わずか1KBなのに多彩なエフェクトを備えタッチデバイスにも対応したスクリプト -Bespoke.js
コンカーブ 凹状に配置したパネルをスライドします。 Bespoke.jsの使い方 スライドショーの実装は簡単で、3ステップです。 Step 1: HTMLと外部ファイル スタイルシートとスクリプトを外部ファイルとして記述し、各パネルはsection要素で実装し、articleで包みます。 スタイルシートはテーマごとに変更します。 <link rel="stylesheet" href="path/to/my/theme.css"> <article> <section>Slide 1</section> <section>Slide 2</section> <section>Slide 3</section> </article> <script src="bespoke.min.js"></script> <script src="path/to/my/script.js"></scri
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
Vim で javascript 書くためにやってる設定 | バシャログ。
杉の木を伐採しまくるバイトを始める夢を見ました・・・。みなさん、こんにちは nakamura です。 前回 Vim で PHP 開発するための設定 を書きましたが、今回は Vim で javascript を書くための設定をいくつかご紹介しようと思います。（基本は前回 PHP 用に行った設定の javascript 版です） 関数名などの自動補完 PHP と同様に辞書ファイルを用意して neocomplecache で補完するだけです。辞書ファイルは以下からjavascript.dict と jQuery.dict を拝借して $HOME/.vim/dict/ に置きました。 config/vim/dict at master · guileen/config · GitHub （ただちょっと古いんだよな～・・・。自動生成するスクリプト軽く書こうかな・・・。） .vimrc autocmd
VOYAGE GROUP エンジニアブログ : jQueryを用いた美しいajax処理
2013年02月14日10:48 カテゴリprogramming jQueryを用いた美しいajax処理 こんにちは、Research Panel Asia の関口(@takkyuuplayer)です。 jQueryを用いた非同期処理の待ち合わせについて書きたいと思います。 昨今WebにリッチなUIが求められていますが、その際によく遭遇するのが次のような処理です。 「処理A(非同期)が終わってからその結果を元に処理Bを行いたい。」 jQuery.getなんかでデータを取ってくる際には必須ですね。このような非同期処理の待ち合わせはjQuery.Deferredを使うと簡単に実現可能です。 jQuery.Deferred ex1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></titl
スワイプできるLightBox実装jQueryプラグイン「Swipebox」:phpspot開発日誌
Swipebox | A touchable jQuery lightbox スワイプできるLightBox実装jQueryプラグイン「Swipebox」。 LightBoxが最初に出た時はタッチデバイスがこんなにも流行っているとは思いませんでしたが、今やタッチデバイスの勢いは留まることを知りません。 というわけで、タッチデバイスでも画像をスワイプで送ることのできるjQueryプラグインが公開されています。 PCでも動作するように設計されており、これから実装するならスワイプが標準対応のものが便利そうです。 ５年後、１０年後はタブレットが主流となっていると仮定すると、こうしたプラグインの類もほとんどがスワイプ対応なんていうことになっていそうですね。 関連エントリ 今こそ知っておくLightbox風プラグイン20+
jQuery スライダーの中にスライダーが設置できるプラグイン【 jQuery slideinslide 】 | Stronghold Archive
どうもこんばんは。今回のTipsは【jQuery スライダーの中にスライダーが設置できるプラグイン jQuery slideinslide】です。今回のプラグインは自作です。機会は少ないですが何度かスライダーの中にスライダーを設置したいという場面がありました。これまでは都度スクリプトを書いていたのですが…ちょっと面倒だなぁとプラグイン化しました。この謎なプラグイン…自分用にとっておいてもいいのですが、存在自体忘れる可能性もあるので…備忘録としてメモしておきます。 DEMO & DOWNLOAD 更新情報 ・2013 3/8 水平方向へのスライド機能を追加。詳しくはOptionをご確認ください。上下左右のキーボートにも対応しております。DEMOはこちらから 実装方法 実装は至ってシンプルです。スライドの中にスライドの入るHTMLを用意し、プラグインを読み込みます。 読み込みファイル（jQue
TypeScript0.9alphaをNode+Gruntで使うよ
Swift is the best programming language you should learn and make your dream app easily. Swift programming is a powerful yet easy-to-learn coding language created by Apple. It's frequently used for developing iOS and macOS applications, as well as tvOS and watchOS apps. While you can use other languages to create Apple apps, Swift is the preferred language, and it's recommended because its code is
最近のMVCとJavaScriptのMVCについて まとめ - webとかmacとかやってみようか R
ここ最近のWebアプリの進化に伴い、ネイティブアプリ並のUIを持ったWebアプリへの期待が高まっています。jQueryなんかで簡単にDOMを操作できるようになりましたが、ある程度の規模のアプリを作ろうとすると jQuery だけでは厳しいものがあります。 そこで、JavaScript でも MVCパターンを適用し、モデルとビューの分離して、開発・保守しやすい設計にする、という流れになってきています。MVCは、元々は Smalltalk で GUI アプリを作るときの設計指針として考えられました。デザインパターンの一つでもありますが、Singleton や Observer といった GoFのデザインパターンよりも抽象度の高い、ソフトウェアアーキテクチャです。 そして時は流れ、Webの時代になると Strutsなどで代表されるWeb3層モデルとして、Webアプリの設計パターンとして一世を風靡
[JS]実装は簡単で高性能、ロード無しでページを次々に表示するスクリプト -Navi.js
複数のページをブラウザのロード無しで、アニメーションで次々に表示するjQueryのプラグインを紹介します。 これ系のスクリプトはいくつか紹介してきましたが、ページタイトルの設定やネスト、戻る・次へボタンの対応など、使い勝手もなかなかです。 Navi.js Navi.js -GitHub Navi.jsの特徴 Navi.jsのデモ Navi.jsの使い方 Navi.jsの特徴 Navi.jsの仕組みは一つのファイルに複数のページのコンテンツを配置し、それをページごとに遷移するように表示します。 タブ、ナビゲーション、カルーセル、ページネーション、パンくずをサポート コンテンツにあったページタイトルを表示 戻る・次へボタンのサポート コンテンツのネストをサポート スライドアップ、スライドレフト、スライドアップ・レフト、フェードのエフェクトを用意 AJAXサポート Google Analytic
jQueryで$(document).readyを複数実行した場合のthisやvarについて - maeharinの日記
はじめに jQueryを使う時は、$(document).ready(handler)やその省略法である$(handler)でdom構築ができてからコードを実行することが多い。（handlerは無名関数などの関数オブジェクト） で、たまに複数のファイルで何度も$(handler)を呼び出すことがあるのだけれど、その際$()の引数に渡しているhandler内のthisやvar宣言について混乱しがちだったので整理しておく。ちなみに検証環境はChrome ver24、jQuery1.9.1。概念はES3を基準にする。 前提 書き方色々 以下の3つは同義（真ん中は推奨されない） $(document).ready(handler) $().ready(handler) //this is not recommended $(handler) http://api.jquery.com/ready/
testem + mocha on Travis-CI - ブラウザでのテストを自動化する - 四角革命前夜
Travis-CIでブラウザのテストできないのかなー、できないよなーと思いつつ、いろいろ探してみたら出来るような事を知り、今ホット（なのかな？）なtestemを使う事でmochaでのテストも実行できるらしい！という事を知ったので試してみました。 準備 package.jsonの記述を変更します。 package.json "scripts": { "pretest": "./node_modules/.bin/bower install", "test": "./node_modules/.bin/mocha && ./node_modules/.bin/testem ci" }, "devDependencies": { "bower": "~0.8", "chai": "~1.5", "mocha": "~1.8", "testem": "~0.2" } testemが必要なのでtes
Rails 4のturbolinksについて最低でも知っておきたい事
Rails 4のturbolinksについて最低でも知っておきたい事 （追記）turbolinksに関するセキュリティ上の懸念について turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。 高速化は大歓迎なのですが、JavaScriptのイベントの起き方が変わるため、Rails 3までの書き方をしているとまず間違いなく問題が起きます。しかも、Rails 4ではデフォルトの機能ですので、最新版を使いたいなら必ず知っておかなければいけません。 本エントリではturbolinksを使うために絶対に知らなければいけないことを分かりやすく紹介したいと思います。 動作 turbolinksの動作は、すごく大雑把に言うと以下の通りです。 リンクのclickイベントをフッ
[PhpStorm/WebStorm]CDNで読み込むJavaScriptライブラリのコード補完させるQuickfix | バシャログ。
最近Sublime Text2でJavaScriptを書いているtanakaです。一度起動すればサクサク動くのはいいですが、コンテキストを理解した補完ができる点でWeb(Php)Stormの方がいいかなぁ、と思いつつ、プラグインをがしがし導入してます。今日はWebStorm のTipsを1つ紹介 ローカルにないjsコードの補完をすぐできるようにする WebStormで以下のようにCDNを使ってライブラリを読み込むと、JavaScriptコードの補完が利用できません。jQueryならCDNからの読み込みに失敗したときはローカルのJavaScriptを読むようにしてることも多いと思いますが、Facebook の JavaScript SDKとかローカルに保存しないのではないでしょうか。 <html> <head> <title>CDNでjQuery読み込み</title> <script sr
![[PhpStorm/WebStorm]CDNで読み込むJavaScriptライブラリのコード補完させるQuickfix | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/e09ad8f655ea0962c3fc07c12b65c5a618375e0d/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_tools.png)
[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Mobileの実務で役立つ知識を基本から応用までしっかり学べる本 -jQuery Mobileコーディング
[JS]表示サイズに合わせて、さまざまな要素のサイズやレイアウトをアニメーションで変更するスクリプト -JResponsive
実践しながらjQueryを学べるオンライン学習サイト・Try jQuery - かちびと.net
