CSSだけでモーフィングを実装できる！文字列を違う文字列に滑らかに変化させるCSSのテクニック | コリス

2021/06/07 134 users コリス Blur CSS テクニック 文字列

文字列を違う文字列に滑らかに変化させるモーフィングをCSSで実装するテクニックを紹介します。 モーフィングは人が別の人に変化するのを映画やテレビで見かけますが、文字ならCSSだけでそれっぽく簡単に実装できます。 仕組みは、CSSのblurで文字をぼかして変化の間をつなげています。 実際の動作は、下記でお楽しみく... 続きを読む

写真を動かせっ！　GIFアニメでひと工夫。読者を楽しませるアレンジ Graphics Interchange Format - 葉ログ

2019/12/11 27 users GIFアニメ アレンジ 葉ログ 読者 百聞

動く写真で読者を楽しませませんか？ 写真やイラストの重要性 百聞は一見に如かず 写真を動かしてみよう 動くものは目に止まる これまでに葉ログに掲載したGIFアニメーション 動画から作るGIFアニメーション 上級編、滑らかなGIFアニメーションをつくる モーフィングという技術 おわりに （約1400文字） 動く写真で読者... 続きを読む

イヌをネコに変形！映画やテレビでよく見かけるモーフィングを作成できるオンラインツール -HyperMorph 3000™ | コリス

2018/09/18 57 users コリス イヌ 物体 変形 形状

映画やテレビなどでよく見かけるモーフィングを簡単に作成できるオンラインツールを紹介します。 イヌからネコに、のように似たような形状だけでなく、全く異なる形状でもある物体から別の物体に変形させることができ、いろいろ楽しめる...記事の続きを読む 続きを読む

2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選 | コリス

2016/12/15 388 users jQuery コリス SVG ライブラリ クロスブラウザ対応

毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの... 続きを読む

SVGモーフィングで、図形を徐々に変化させてみよう | Webクリエイターボックス

2014/12/09 70 users 図形 Webクリエイターボックス SVG Flash 中間

モーフィングとは、ある図形から別の図形へと自然に変形するように中間の画像を補正して映像を見せる技法です。Flashでは「シェイプトゥイーン」でモーフィングを表現していましたね（懐かしい！）。CSS3のアニメーションだと、画像の移動・回転なんかはできちゃいますが、形そのものを変形させるのは難しいです。SVGを使えば、そんなアニメーションも作成可能！さっそく挑戦してみましょう！ SVGモーフィングを使... 続きを読む

コレは使ってみたいな！CSSで作成されたアイコンをモーフィングで変形させるスクリプト -Marka | コリス

2014/08/22 106 users SVG コリス 変形 CSS スクリプト

画像やSVGは使用せず、CSSで作成されたサークル・アロー・チェック・リストなど、Webページで使うさまざまなアイコンをJavaScriptで変形させるMarkaを紹介します。 変形は下記のように異なる形状へ変えたり、サイズやカラーだけを変更することもできます。もちろん、CSSで実装されたアイコンをそのまま利用するだけでもOKです。 Marka Marka -GitHub Markaのデモ Mar... 続きを読む

[JS]テキストを次々にモーフィングのアニメーションで表示するスクリプト -Morphext | コリス

2014/05/27 46 users jQuery コリス スクリプト アニメーション テキスト

複数のテキストを次々にモーフィングのアニメーションで表示するjQueryのプラグインを紹介します。 スクリプトとは関係ないですが、ページのアニメーションもかっこいい！ Morphext Morphext -GitHub Morphextのデモ Morphextの使い方 Morphextのデモ デモではテキスト内のインラインで、複数のテキストがモーフィングで次々に変更されて表示します。 デモ Mor... 続きを読む

はいだしょうこ画伯の5年間の成長を、SVGでモーフィングにしてみた - jsdo.it - Share JavaScript, HTML5 and CSS

2011/05/17 120 users this.name SVG function Data 成長

はいだしょうこ画伯の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 = ... 続きを読む