velocity.jsの使い方 記述方法とオプション機能 — un-Tech
どうも、茂吉です。 突然ですが、あなたのアニメーション、動きがカクついていませんか？ 「カクつきは感じているが仕方ない。」と思っている方、 滑らかなアニメーションにすることができます。 「いいえ。カクついてなどいません。」と思った方、 実はカクついていることに気づいていないだけかもしれません。 velocity.jsは、jQueryの.animate()よりも実行速度が早く、動きが軽快で多機能な拡張ライブラリです。 実際にjQueryとvelocity.jsを比べてどれだけアニメーションが滑らなのか、 まずはデモをご覧下さい。 デモページはこちら 2つを比較してみてどうでしょうか？ 普段使っているjQueryはvelocity.jsと比べて動きにカクつきがあることがわかります。 本記事ではvelocity.jsを使ったことがない、使い方がわからない方を対象に、 velocity.jsの基本
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
次のプロジェクトで使いたい、CSS3からSVGまでアニメーションを実装するスクリプトのまとめ
最近のウェブやスマフォのページで使われている効果的で面白いさまざまなアニメーションを実装できるスクリプトを紹介します。 スクロールに連動してさまざまな要素がアニメーションで表示されたり、ページを表示する時にふわっとさせたり、画像にSVGでブラーをかけてテキストを載せたり、物理演算エンジンで慣性を楽しんだりなど、デモを見るだけでもかなりいい刺激がもらえるスクリプトばかりです。 Agile Agile -GitHub SVGやWebGLを使用せず、JavaScriptでCSS3アニメーションを生成するライブラリ。デスクトップの各ブラウザ対応だけでなく、スマフォやタブレットにもパフォーマンスが最適化されています。キーフレームやトゥイーンを使ったアニメーションが得意です。
【初心者でもできる！】JavaScriptでFlashのようなタイムラインアニメーションを簡単に作る方法 | Digital experience University
2013年 05月 09日 【初心者でもできる！】JavaScriptでFlashのようなタイムラインアニメーションを簡単に作る方法 Yoshiaki Sato はじめまして、フロントエンド担当のヨシアキです。 この記事では、JavaScriptで作るFlashのようなタイムラインアニメーションについて、編集や管理の手間が省けるような作り方を説明していきます。 初心者向けに解説していますので、ぜひこの記事を参考にしてご自分のタイムラインアニメーションを作ってみて下さい！ 目次 はじめに - 増え続けるJavaScript製アニメーション 下準備 - HTMLとCSS JavaScriptアニメーションの作成！ まとめ このアニメーションのサンプルを見る はじめに - 増え続けるJavaScript製アニメーション iOSなどで表示ができないFlashの代替手段としてJavaScriptで
【Ninja】jQueryとCSS3アニメーションで作る何度もクリックしたくなる「ページトップ」ボタン / SQUEEZE - Web Design Studio -
前回の記事『Webデザインの参考にしたい遊び心あふれる「ページトップ」ボタン9個』にならって、jQueryとCSS3アニメーションを使って遊び心あふれる何度もクリックしたくなる「ページトップ」ボタン作成してみました。 Ninjaページトップボタンブックマークバーとスクロールアニメーションを活かしたページトップボタンにしてみました。サンプルページをご覧ください。 サンプルページ » 忍者登場はCSSスプライトアニメーションコマ送りでアニメーションさせるため、1枚のPNG画像に32px×32pxの絵を10個並べました。マウスオーバーした時に、X軸方向に-32pxずつ背景画像がずれることでアニメーションしているように見えます。 .ninja{ display:block; width:32px; height:32px; background:url(images/ninja.png) no-r
animo.js • Labs by Big Room Studios
animo.js A powerful little tool for managing CSS animations Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic. August 13th, 2013 by Daniel Raftery You can easily install animo via the GitHub repo or using bower's package manager. Using First and foremost, animo includes the amazing animate.css library by Dan Eden which provides you with nearly 60 be
jQueryで順番にアニメーションする方法を考える | スターフィールド株式会社
jQueryを使ってアニメーションさせる場合、アニメーションを同時ではなく、 何かの動作が終わった後、順番に実行するということも必要になってきます。 特に最近は、サイトのコンテンツもパララックスを使ったものなど、リッチなものが増えており、 そういった機会も増えてきています。 そこで、jQueryを使って順番にアニメーションする方法について、２つほど取り上げてやってみました。 ↓デモはこちらから DEMO 今回は、 車が走ってくる 車が木にぶつかって木が揺れる 鳥が逃げ出す という順番で実行するアニメーションを考えます。 まず車が走ってきた後に、木にぶつかって木が揺れるところまで。 jQueryでは、animate()で、コールバック関数を指定することで、 アニメーションが終わった後に、別の動作をさせることができるので、 それを利用しようとしましたが、 そうした場合、 今回のように特殊なイー
CSS3で疑似3D表現を実現するSprite3D.jsを触ってみた、その2 | KnockKnock
以前の記事で紹介しましたが、JavaScriptとCSS3だけで疑似的に3D表現を行うことができるSprite3D.jsを再びさわりましたので投稿します。 視差を利用して、立体的な表現を手に入れるパララックスも流行りましたが、もっと立体的な表現ができるSprite3Dによるトランジションは意外と効果的ではないかと思い作成しました。一見普通のコンテンツですが、リンクをクリックしたときの驚きは、パララックスをはじめてさわった時に勝るとも劣らないんではないかと思います。しかもパララックスだとFixedがまともに使えないスマフォでは再現がほとんど出来ないと思いますが、これはスマフォで問題なく表示可能です。実装も非常に簡単なので是非一度さわってみてください。 サンプル Sprite3Dとはあまり関係ないですが、実装にはTypeScriptを使用しました。TypeScriptはクラスベースでJavaS
JavaScriptのシンプルなトゥイーンエンジン | KnockKnock
JS系のTweenライブラリだと、オブジェクトのCSSプロパティにトゥイーンをかける事を基本に設計されている場合が多いかとおもいます。もちろんTweenかけるものって基本的に表示要素なので、CSSにトゥイーンをかけることは間違ってはいないのですが、以前の記事にてSprite3Dを使用しましたが、Sprite3Dを使ってトゥイーンをかけたい場合は、CSSプロパティではなく、メソッドを実行する必要があります。もちろんメソッドの中ではCSSプロパティを操作しているわけですが。 そういった目的に絞って、シンプルなトゥイーンエンジンが必要になり、作りましたので投稿します。 概要は、オブジェクトのプロパティの値を現在の値から、指定した値まで、指定秒で、指定イージング関数を通して変化を与えつづけます。 ソース デモページ 基本的な使い方ですが、まずはじめに第一引数にオブジェクトを渡してTween関数を実
Contract web dev by day & Indie hacker by night! | AaronLumsden.com
PureDigital I have a passion and thirst for learning new technologies to keep up-to-date with modern web development. Certified Laravel Developer I fuss over creating software that not only looks and feels great but that are user friendly and adaptable to changing user needs. I’ve been bringing web ideas to life in a planned and managed way since 2009. I'm also a certified Laravel developer by Lar
Zoomooz.js
Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Download ZIP File Download TAR Ball Fork On GitHub Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Quirky
[JS]自分仕様のかなりかっこいいローディング用アニメーションを生成できる -Sonic Creator
かっこいいデザインのローディング用アニメーションのCanvas版、アニメーションGIF版、CSSスプライトPNG版を同時に作成できるオンラインサービスを紹介します。 Sonic Creatorの前に、まずはSonicのデモから。 Sonic Sonicは、HTML5 Canvasを使ってローディング用のアニメーションを作成する超軽量（約3K）のスクリプトで、実装方法などは下記をご覧ください。 かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic 今回紹介するのは、このSonicをコードベースでオンラインで簡単に設計でき、それをアニメーションGIFやCSSスプライト用のPNG画像を生成するオンラインツールです。
アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」:phpspot開発日誌
jQuery Animated Table Sorter アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」。 ソート可能なテーブルを実現するjQueryプラグインはよくありますが、アニメーションするのははじめてかも。 どこからどこに移動したか？という部分が分かりやすく、一瞬でソートされてしまうテーブルよりもカッコ良いだけではなく使い勝手もよさそう 関連エントリ シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table Sort」 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」
マウスホバーでスムーズにjQueryのアニメーションをコントロールする方法 :: 5509
jQueryを使えば超簡単にアニメーションもできますし、フェード効果の実装も楽々できますね。簡単に実装できるので結構使ってるサイトを見ますが、カーソルを素早く乗せたり外したりするとチラチラすることが多いんですよね。 何言ってるか文章だと伝わりにくいので、サンプル1を確認してみてください。 どうでもいいっちゃどうでもいいのかも知れないですけど、こういう小さなこだわりって結構重要なんじゃないでしょうか。 で、このチラチラ、簡単に解決できるので知らなかった人は覚えておくといいかもです。 結論は簡単で .stop(true, false)を.animate()の前に入れる .animate()メソッドのオプション部分でqueue: falseを指定する のいずれかです。 このときに.stop()メソッドを利用するのですが、.stop()メソッドには2つ引数を指定できて、引数の値で動作もちょっと変わ
AviaSlider - a unique jQuery Image slideshow plugin!
Features of the Avia Image Slider 8 unique transition effects Lots of easy to set options to create your own effects Included Image preloader Autoplay that stops on user interaction Valid HTML5 and CSS 3 Markup Packed version only weights 8kb Supports linked images already prepared to work with prettyPhoto Lightbox works with jQuery 1.32 and higher Browser Support Internet Explorer 6 and higher Sa
[JS]jQueryのプラグイン33+1選 -2010年7・8月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Shadow animation シャドウをアニメーション。 bgFade マウスホバーで背景をフェードでアニメーション。 hove
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iHover CSS3 hover effects pack
http://tobia.github.io/CrossSlide/
[JS]jQueryのアニメーション機能をよりスムーズにするプラグイン -hoverFlow