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

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

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

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

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

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

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

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

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

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