タグ モーフィング
人気順 10 users 50 users 100 users 500 users 1000 usersCSSだけでモーフィングを実装できる!文字列を違う文字列に滑らかに変化させるCSSのテクニック | コリス
文字列を違う文字列に滑らかに変化させるモーフィングをCSSで実装するテクニックを紹介します。 モーフィングは人が別の人に変化するのを映画やテレビで見かけますが、文字ならCSSだけでそれっぽく簡単に実装できます。 仕組みは、CSSのblurで文字をぼかして変化の間をつなげています。 実際の動作は、下記でお楽しみく... 続きを読む
写真を動かせっ! GIFアニメでひと工夫。読者を楽しませるアレンジ Graphics Interchange Format - 葉ログ
動く写真で読者を楽しませませんか? 写真やイラストの重要性 百聞は一見に如かず 写真を動かしてみよう 動くものは目に止まる これまでに葉ログに掲載したGIFアニメーション 動画から作るGIFアニメーション 上級編、滑らかなGIFアニメーションをつくる モーフィングという技術 おわりに (約1400文字) 動く写真で読者... 続きを読む
イヌをネコに変形!映画やテレビでよく見かけるモーフィングを作成できるオンラインツール -HyperMorph 3000™ | コリス
映画やテレビなどでよく見かけるモーフィングを簡単に作成できるオンラインツールを紹介します。 イヌからネコに、のように似たような形状だけでなく、全く異なる形状でもある物体から別の物体に変形させることができ、いろいろ楽しめる...記事の続きを読む 続きを読む
2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選 | コリス
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの... 続きを読む
SVGモーフィングで、図形を徐々に変化させてみよう | Webクリエイターボックス
モーフィングとは、ある図形から別の図形へと自然に変形するように中間の画像を補正して映像を見せる技法です。Flashでは「シェイプトゥイーン」でモーフィングを表現していましたね(懐かしい!)。CSS3のアニメーションだと、画像の移動・回転なんかはできちゃいますが、形そのものを変形させるのは難しいです。SVGを使えば、そんなアニメーションも作成可能!さっそく挑戦してみましょう! SVGモーフィングを使... 続きを読む
コレは使ってみたいな!CSSで作成されたアイコンをモーフィングで変形させるスクリプト -Marka | コリス
画像やSVGは使用せず、CSSで作成されたサークル・アロー・チェック・リストなど、Webページで使うさまざまなアイコンをJavaScriptで変形させるMarkaを紹介します。 変形は下記のように異なる形状へ変えたり、サイズやカラーだけを変更することもできます。もちろん、CSSで実装されたアイコンをそのまま利用するだけでもOKです。 Marka Marka -GitHub Markaのデモ Mar... 続きを読む
[JS]テキストを次々にモーフィングのアニメーションで表示するスクリプト -Morphext | コリス
複数のテキストを次々にモーフィングのアニメーションで表示するjQueryのプラグインを紹介します。 スクリプトとは関係ないですが、ページのアニメーションもかっこいい! Morphext Morphext -GitHub Morphextのデモ Morphextの使い方 Morphextのデモ デモではテキスト内のインラインで、複数のテキストがモーフィングで次々に変更されて表示します。 デモ Mor... 続きを読む
はいだしょうこ画伯の5年間の成長を、SVGでモーフィングにしてみた - jsdo.it - Share JavaScript, HTML5 and CSS
はいだしょうこ画伯の5年間の成長を、SVGでモーフィングにしてみた jQuery UI v1.8.1 Raphael 1.4.3 - JavaScript Vector Library jQuery v1.6 (function($) { /** * MorphingImage class */ MorphingImage = function(name, data) { this.name = ... 続きを読む