animationに関するopparaのブックマーク (61)
-
oppara 2021/09/12
-
-
-
-
-
-
JavaScriptとCSS Spriteを組み合わせてアニメーション·MovieCrop.js MOONGIFT
MovieCrop.jsはCSS Spriteを使ったアニメーションライブラリです。 Sprite画像を使うとマウスオーバーと連携させてボタンの押し下げによる配色変更を行ったりできます。それと似たような仕組みを使ってアニメーションを実現してしまうのがMovieCrop.jsです。 例。単純にくるくる回転し続けます。 再生、停止、逆再生もサポート。 コールバックを使って順番にアニメーションさせることもできます。 アニメーションの素材になる画像はSprite画像になっている必要があります。それをJavaScriptを使って順番に変更していくことでアニメーションのように見せることができます。カスタマイズもできるので色々な見せ方に使えそうです。 MovieCrop.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る Web上でアニ
-
AndroidのアニメーションTIPS
こんばんは、牧野です。 ここのところ2、3ヶ月くらい、古典に興味がわいています。中学や高校の授業で勉強する、いわゆる古文の範囲です。百人一首を覚えたり、枕草子の現代語訳を読んだりしています。1000年以上前に書かれたものなのに、今でも共感できることがたくさんあったり、そうでないものも感性や文化の違いがわかっておもしろいです。 それに関連して、先月あたりから休日と仕事後の時間を使って百人一首のAndroidアプリを作っていました。今回は普段となるべく違うことがしたくて、Javaを使いました。 ということで、今日はインフラネタではなく、アプリ作成で使ったAndroidのアニメーションについて書きたいと思います。 ■回転しながら移動するアニメーション 百人一首のアプリでは、取り札にタッチするとその札を回転させながら画面外に飛ばすようにアニメーションしています。 取り札をそれぞれ一つのTextVi
-
Simple yet amazing CSS3 border transition effects
Description Some crazy effects with Border Transitions. Originally made by ksk1015. Pretty basic CSS3 code, but amazing output.
-
PNGを結合させてアニメーションを実現·Animation Encoder MOONGIFT
Animation EncoderはPNG画像を結合させてアニメーションPNGを実現させてしまうソフトウェアです。 何らかの説明動画を表示するのにあたってIE6からiPadまで表示でき、かつ減色したりしないで表示するにはどうしたら良いだろうか。Animation Encoderが選んだのはPNGを結合して表示するという無茶な手法だ。 画像の一覧です。これらを結合します。 仕組みとしてはまずスクリーンショットを撮影し、それをミリ秒のタイムスタンプを付けて保存していく。そしてAnimation Encoderを使って複数のPNGを一つのファイルに結合させる。後はJavaScriptを使ってアニメーションさせるという仕組みだ。videoタグやFlashを使うことなく、サイズも大きくて奇麗なアニメーションが作れるようになる。 Animation EncoderはPython製、BSD Licens
-
JavaScriptでネイティブ並の速度を誇るゲームを開発·Ejecta MOONGIFT
EjectaはCanvasとオーディオ、JavaScriptをサポートしたフレームワークでネイティブ並のiOSアプリ（ゲーム）を開発できます。 iOSアプリでゲームを開発する際にはObjective-Cを使うのが基本でしょう。WebベースであったりTitaniumのようにJavaScriptのエンジンを経由するとそれだけ速度が低下してしまいます。しかしそんな限界に果敢に挑戦するフレームワークがEjectaです。 サンプルです。JavaScriptとは思えないほどスムーズな動きです。 指を動かすと線の太さ、明るさが変化します。 これくらい細くもできます。 線の数をぐっと減らしました。 Ejectaはゲームとアニメーションに特化したソフトウェアで、Canvasとオーディオだけで構成されています。JavaScriptは素のJavaScriptとして実行されます。これによりHTML5のゲームは多少
-
すげえ！Webブラウザ上だけでアニメーションGIFを作成·Mothereffing animated gif MOONGIFT
Mothereffing animated gifはWebブラウザ上で任意の画像からアニメーションGIFを作成するソフトウェアです。 これまではローカルのアプリケーションでしか出来ないと思っていたようなことがどんどんWebアプリケーションでできるようになっています。今回は画像をまとめてGIFアニメーションにしてしまう、そんなMothereffing animated gifを紹介します。 まず画像をドロップします。 画像サイズ、切り替え時間、クオリティなどを変更できます。終わったらAnimateボタンを押します。 ちゃんとアニメーションGIFになりました。 画像を入れ替えたり、回転させることもできます。 Mothereffing animated gifはサーバサイドに画像をアップすることなく、クライアントサイドだけで画像の処理を行います。GIFなのでJPEGをアップするとかなり画像が荒く
-
CSS Flip Animation
You've all asked for it and now I've added it: Internet Explorer support! Annoyingly enough, the change involves rotate the front and back elements instead of just the container. Skip to this section if you'd like the Internet Explorer code. IE10+ is supported; IE9 does not support CSS animations. CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can c
-
品質高いJavaScriptアニメーションライブラリ·BonsaiJS MOONGIFT
BonsaiJSはFlashアニメーション並みの動作が可能なJavaScriptライブラリです。 JavaScriptによるアニメーションライブラリが増えています。BonsaiJSもその一つです。多彩なアニメーション処理が可能になっていますのでぜひご覧ください。 トップページです。ここもアニメーションされています。 マウスを動かすとブロックが表示されます。 グラフです。マウスのあたっている部分が大きくなります。 スターです。ぐりぐり動きます。 オブジェクトが飛び交います。 Pongを実際に遊べます。 円がダンスするように動きます。 ドラッグで動かせます。 デモを実際に動かした動画です。 BonsaiJSはキーフレームベースのアニメーション、画像だけでなくパスにも対応し、モーフィングもできます。マウスによる操作も可能で、Flashの代わりはもちろんゲーム開発にも使えるのではないでしょうか。
-
JavaScriptでインパクトあるアニメーションを実現·jsAnim MOONGIFT
jsAnimはJavaScript製のアニメーションライブラリです。 Webページ上にインパクトあるアニメーションを実現しようと思ったら、これまではFlashを使うのが一般的でした。しかし今後はJavaScriptで十分かも知れません。そんな未来を感じさせるのがjsAnimです。 サンプルです。キャラクターが左右に動きます。 動かし方も色々あるのでぜひ触ってみてください。 トップページの動画 jsAnimはオブジェクトの上下左右の動きはもちろん、そのスピードも可変にしたり移動を計算処理によって滑らかに処理できます。各オブジェクトをそれぞれタイムラインベースで操作することで、大きな一つの作品が実現するでしょう。 jsAnimはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 見た目のインパクトを考えた場合、やはりアニメーションとい
-
BookBlock: A Content Flip Plugin | Codrops
A jQuery plugin that will create a booklet-like component that let’s you navigate through its items by flipping the pages. BookBlock is a plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow f
-
Animate validation feedback using jQuery
Yesterday, I came across Jumpchart.com and while I was checking out their website one thing catched my eye: validation feedback was animated! In this tutorial I will explain how to create this nice little trick. Download source code View demo The trick is very simple: after user presses signup button, validation occurs and all fields that are invalid get shaken a little bit. They have very simp
-
-
-
Animated Responsive Image Grid | Codrops
A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions. Today we want to share a jQuery plugin for creating a responsive image grid with you. The idea is to have a list of images and define th
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
