All-in-one animation engine. A fast and flexible JavaScript library to animate the web.
Anime.js | JavaScript Animation Engine
All-in-one animation engine. A fast and flexible JavaScript library to animate the web.
Easing Functions Cheat Sheet
Easing functions specify the rate of change of a parameter over time. Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor. This page helps you choose t
インタラクティブ・プログラミング勉強会 第1回 乱数 | fladdict
巷では、スマホは「手触り」が重要・・・って話が持ち上がりつつあるが、使い易さと気持ちよさを両方できる人材が不足している。広告Flash業界で培われたインタラクションのノウハウは、だんだんと失伝しつつあり、ビジュアルや動きをちゃんとコーディングできるスマホ系の人材なかなかいない。新しく勉強するパスもほとんどない。 そんなわけでTHE GUILDの社員研修として勉強会をすることに。目標は1年ぐらいでこの程度のモリモリ動くものを作れるようにすること。で、2年目に動きや手触りに、合理性や必然性、使い易さを付加できるとこまでもっていく。 第1回はインタラクティブの根幹となる乱数について。 1: 乱数とは ランダムな値を返す関数、機能。 乱数はインタラクティブ・プログラミングの根源。静的な絵とは根本に異なる、永遠に定着しない絵を作り出す。 インタラクティブなプログラミングでは、知識以上にその応用力が問
Anime.js | JavaScript Animation Engine
All-in-one animation engine. A fast and flexible JavaScript library to animate the web.
Spirit - The animation tool for the web
SpiritThe ultimate tool to create high-quality animations directly in the browser. Important Notice: I want to extend my deepest gratitude to everyone who has supported Spirit over the years. After careful consideration, I have made the difficult decision to discontinue Spirit as a service. Read more ...
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0af55bc16bf3c0a6a24924c1dcaf778ffd1396ed/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
Page Loading Effects | Codrops
A set of creative page loading effects that use SVG animations with Snap.svg. The idea is to show an overlay with a interesting shape animation while new content gets loaded. If you have visited the brilliantly designed websites of Nicolas Zezuka and Active Theory you might have noticed the slick loading animations that happen before new content is displayed. This kind of loading style is quite tr
JavaScriptでアニメーションを書く初歩の初歩
JavaScriptを使ってアニメーションを書くときに有用なテクニックの、基本中の基本をご紹介します。おそらく、このブログを見ている人のほとんどにとっては釈迦に説法だと思います。今回、requestAnimationFrameの話すらしません。その点、ご留意ください。 まず、JavaScriptでアニメーションをする場合に気をつけないといけないのが、一度JavaScriptの実行（Context）を抜けないとブラウザに描画が反映されないということです。簡単に言うと、 <html><head><title>bad sample</title><script> onload = function() { var e = document.getElementById("e"); for(var i = 0; i <= 100; i += 5) { e.style.left = e.style.
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
AnimateScroll - jQuery Plugin
What is it exactly? AnimateScroll is a jQuery plugin which enables you to scroll to any part of the page in style by just calling the animatescroll() function with the Id or Classname of the element where you want to scroll to. Basic usage: $('body').animatescroll(); Click for a Demo It gives power to the user with its various options to customize the style of scrolling, scroll speed and many more
Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
jsgif
jsgif: A GIF player in JavaScript Problem You look up a sorting algorithm on Wikipedia, and there's a handy animated GIF on the page; but it's hard to follow because it goes at a strange pace. Alas! If only you had some way of stopping the animation and going through it frame-by-frame... Problem You have this hilarious animation of a cat doing a funny thing; but it would be 3½ times as hilarious i
jQuery Easing Plugin
Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). All done with a straight animate call, no need to specify the animation type at all. Select easing types for the demo first one for down, second one for up. Then click the clicker. Updates 12/11/07 1.3 jQuery easing now supports a de
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - codrops/PageLoadingEffects: Modern ways of revealing new content using SVG animations.
GitHub - miniMAC/magic: CSS3 Animations with special effects
GitHub - sublimehq/anim_encoder
http://caat.ludei.com/
Transit - CSS transitions and transformations for jQuery
SUPERSCROLLORAMA
jquery.easie.js