Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
Marionette.js ベースで3ヶ月開発したアプリのカバレッジ推移をまとめてみた - @kyanny's blog
6月の頭から3ヶ月ほどかけて、 Rails + 一部 jQuery 的なよくある構成のウェブアプリケーションのフロントエンド部分を Marionette.js をベースに作りなおした。メンバーはいわゆるウェブ系のスキルセットを持つ開発者3名。 Marionette.js の経験者は一人もいなかったが、別プロジェクトが先行して Marionette.js を採用して同様のリニューアルを終えたタイミングで、ある程度のノウハウと「なんとかなりそう」という手応えはあった。 せっかく新しくはじめるのだからちゃんとテストを書きたい、そしてカバレッジも計測したいと思い、先行していたプロジェクトで利用していた konacha ではなく、カバレッジ計測機能をもつ teaspoon を採用した。どちらも Rails アプリの assets に置かれる JavaScript/CoffeeScript に対するテ
Browser Support in jQuery 1.12 and Beyond | Official jQuery Blog
With Microsoft ending Windows XP support this month, we’re giving the jQuery community some long-lead-time notice on changes to browser support. First of all, don’t panic! Nothing is really changing with respect to the browsers that can run jQuery for at least six more months. Our goal is to let everyone in the web development community know what the jQuery team intends to do over the next year, s
jQueryのメモリーリークの傾向と対策 — KaoriYa
Web開発にとても便利なjQueryですが、 実はメモリーリークを誘発しやすい構造であることは あまり知られていないようです。 本記事ではメモリーリークが発生する傾向と対策を紹介します。 皆さんjQueryは使ったことありますよね。Webでの開発ではとても便利で、ほぼ必須と言っても過言ではありません。しかしながらこのjQueryはメモリーリークを誘発しやすい構造であることはあまり知られていません。 GCのあるJavaScriptでメモリーリークが発生するとは何を言っとるんだ、と思われる向きもあるやもしれません。しかしGCがあっても、もう使わなくなったオブジェクトを配列やテーブル(Object)にしまいこんでいて、それを回収するタイミングが存在しなければ積もり積もってメモリを圧迫する、メモリーリークとなりうるというのは想像に難くないでしょう。jQueryで起こりうるメモリーリークはそのような
Sliding Boxes and Captions with jQuery « Build Internet
Add an extra layer of information to your images with sliding boxes. This is now a plugin! Check out the announcement post for the Mosaic jQuery plugin. Check the project page for the latest release notes and features! The Basic Idea All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of yo
20 jQuery Tutorials Teaching Super Cool Visual Effects
We all love the fancy effects that can be produced with the jQuery Javascript library. The tutorials in this collection are all based on different topics, but they all include some kind of super cool visual effect as part of their finished product. Follow the steps to recreate the described design, or use the steps to migrate the effects into awesome creations of your own. Making a Beautiful HTML5
【2024年3月】レンタルサーバーおすすめ9社比較ランキング！ 人気と評判から厳選
PR 「おすすめのレンタルサーバーランキングが知りたい」「人気のレンタルサーバーを比較したい」という方に向けて、2024年3月最新の人気レンタルサーバーのおすすめ9社をランキング形式で紹介します。 当記事ランキング1位のレンタルサーバーがキャンペーン中！ シン・レンタルサーバーがキャンペーン実施中！（2024/5/20まで） 実質385円～「利用料金50％キャッシュバックキャンペーン」 出典：シン・レンタルサーバー公式サイト シン・レンタルサーバーでは、2024年5月20日（月）まで月額利用料金が実質半額になるキャンペーンを開催中です。 ベーシックプランの36ヶ月契約なら、「13,860円」キャッシュバックで、なんと実質「385円/月」で利用できます。
lightbox
prettyPhoto prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox. It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6. It also comes with useful APIs so prettyPhoto can be launched from nearly an
HTML5 × CSS3 × jQueryを真面目に勉強 – #10.1 CSS3 Transforms(3D) | DevelopersIO
matrix3d (a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) ではサンプルコードを交えながら順に見てくとします。 matrix3dですが、こちらもmatrix 2Dと同様、複雑な理屈で取っ付きにくいうえに、rotateや3dやperspectiveといった関数で充分に代替可能なため、今回の記事では割愛させて頂きます。 m(_ _)m Transforms 3D - 事始め 端的に言うならば、Transform 3D は要素を3次元に移動ならびに回転、拡大縮小できるというものです。更に後述するperspectiveを使うことで、要素に奥行きのある表現を持たせることが可能となります。 3DではX軸とY軸に加えて、Z軸が追加されます。Z軸はウィンドウからユーザーに向かう方向が正の値で、ユーザーからウィンドウに向
ひと味違ったページ内スクロールをjQuery Easingプラグインで実装する jQuery.easing.scroll.js :: 5509
ひと味違ったページ内スクロールをjQuery Easingプラグインで実装する jQuery.easing.scroll.js サンプルを見る (IE6では確認できません jQueryを使うとかなり簡単にページ内スクロールが実装できるのですが、さらにjQuery Easingプラグインと合わせるとなかなか面白い動きができたりします。 というわけで誰でも簡単に導入できるようにプラグインにしました。以前にslideScroll.js(jQueryプラグイン版）というページ内スクロールの記事を書きましたが、悲しいことに断然こちらのほうがおすすめです。動きが滑らか…そして自分の好きな動きから選べます。 今回はソースの解説もしてるので、興味のある人は見てみてください。 ページ内スクロールプラグインなのに、7KBもあるのはEasingプラグインの容量が5KBだから…これを機に他のアニメーション部分でも
80 Useful (Free) jQuery Plugins to Enrich Your Site’s User Experience
80 Useful (Free) jQuery Plugins to Enrich Your Site’s User Experience Most of you already aware that jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. it’s also known for fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Or in developer’s words “
jQuery Mobile Tutorial: Creating a Restaurant Picker Web App | The Jotform Blog
With an increase in the number, diversity and complexity of smartphones, more and more companies want to have their own mobile app, but creating a native app can be pretty expensive. It requires special skills, as well as special coding tools, and then there is also the need to build an app per platform (Android, iOs, BlackBerry, Windows Phone, etc). All of this figures in to a higher price tag fo
任意の数のDeferredを$.whenに渡す
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / $.when.apply(this, [deferred, deferred, …]) とかやる demo on jsfiddlevar wait = function(millisec){ return $.Deferred(function(defer){ setTimeout(function(){ defer.resolve('I waited for ' + millisec); }, millisec); }).promise(); }; $(function(){ var fns = [ wait(200), wait(200),wait(500), wait(1000), wa
jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-
サイトの表現力を高められるjQueryプラグインまとめ「Fresh and Useful jQuery Plugins and Tutorials」
TOP > plugin > サイトの表現力を高められるjQueryプラグインまとめ「Fresh and Useful jQuery Plugins and Tutorials」 ユーザーが滞在しやすいwebサイトの構築には、デザイン性の高さはもちろん、利用しやすいインターフェース設計が重要。そこで今回紹介するのが、サイトの表現力を高められるjQueryプラグインまとめ「Fresh and Useful jQuery Plugins and Tutorials」です。 （JQuery Plugin For Rotating Image） webサイトに動的な表現を加えられるさまざまなプラグインが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Password strength verification with jQ
Future と Stream という同期/非同期処理の混在をシンプルにコード化できる車輪を再発明したよ - latest log
Script Junkie | Creating Responsive Applications Using jQuery Deferred and Promises (日本語訳: jQueryのDeferredとPromiseで応答性の良いアプリをー基本編 | ゆっくりと… ) をみて、 (ε・◇・)з Deferred… Promise… お 覚えられん… (ε・◇・)з 脳みそちっちゃいので、もっと気軽に使えて、簡単に書けるのがいいなぁ～ って思ってました。 なので、自分なりに、 複数の同期/非同期処理を同時に実行し、処理の合流ができたり多少の失敗があっても前に進める Future 複数の同期/非同期処理を順番/同時に実行し、流れを直感的に記述できる Stream という2つの仕組みを考えました。 Stream は一本の流れを制御し Future は同時多発的な流れを制御するため、こ
超定番の jQueryプラグインをサンプルと一緒に集めました。（商用利用OKなもの多め） | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
超定番のjQueryのプラグインを厳選して集めました。 商用利用が可能なものを優先的にピックアップしています。 （利用する際はそれぞれライセンスをご確認くださいね） 超定番プラグイン アニメーションのイージングを簡単に扱えるプラグイン jQuery.easing jQuery.easing
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
leandrovieira.com – Só mais um site WordPress
http://www.pencilscoop.com/2013/10/100-best-free-jquery-css-image-hover-effect-demos-plugins/
http://www.cmmntr.com/t/bbd82f25847d17c81bc11db6104b435c