フーノページ

フーノページ

と いいます。
〽️ ← これは”いおりてん”といいます。


初めまして。いいかげん情報提供者の「ふ」です。
HTMLうろ覚え。CSSうろ覚え。
Swift中途半端。
ガジェットたまに紹介。

それなりに更新・修正を重ねて、観ていてたのしいページにしたいと思いますので。よろしくお願いします。




新着。

イラレ、オブジェクトのサイズでアートボード生成、png書き出し。

2021.10.13
サッとpng書き出しならこれ。


SVG、集中線のアニメーション。

2021.10.08
ランダムな「遅れ」を指定するだけ。

SVGでニューモフィズムのアニメーション。

2021.10.01
拡張性のある実装にしています。


HSL変換を使った配色や色指定。

2021.09.24
配色パターンを秒作。


SVG、金属文字を表現。

2021.09.17
CGビギナーの課題曲。


CSSアニメーション、期末テスト。

2021.09.12
transform/transitionのスキル。


SVGとCSSで画像の境界線をぼかす。

2021.09.07
内側は鮮明、周りはblur。

花火のアニメーションをSVGで作ろう。

2021.08.30
空洞を作りつつ広がっていく線分。


transform:skewの仕組みを理解する。

2021.08.27
5つの法則が存在します。

SVGで転がりアニメーション。

2021.07.28
回転量と移動距離を一致させる方法。

SVG要素のtransformについて。

2021.07.16
普通のHTML要素とは大きく違います。

transform:matrixの使い方② 〜要素の反転と基準点について。

2021.07.05
matrixにおける「基準点」の役割とは?


スマホでのhoverを考える。

2021.07.01
4つのパターンで検証。


transform:matrixの使い方①。

2021.06.24
基本的な変形をmatrixで行う。

transform:matrixを理解する。

2021.06.14
行列計算は必要なし。

CSSアニメーション、中間テスト。

2021.06.03
基本編を終えたらチャレンジしましょう。


雨のアニメーションをSVGで作ろう。

2021.05.30
webページ上に雨を降らせます。

SVGで円グラフアニメーション。

2021.05.21
SVGの「破線」と「円周率」。

SVGで棒グラフのアニメーション。

2021.05.09
SVGを「htmlの部品」として利用する。


SVG アニメーション、ランダムにキラキラ。

2021.04.25
〜SVG in SVG。

SVG アニメーション、カメラのシャッターを再現。

2021.04.11
「アニメーションごと」重ねていく。

SVG アニメーション、パスの内側を切り抜いて透過させる。

2021.03.18
不透明度を移植する。

SVGアニメーション、 回転の中心を指定する。

2021.03.09
座標を取得して%変換。


SVGアニメーション、 回転スワイプで画像切り替え。

2021.02.27
ポイントは「2重クリップ」。


SVGに画像をぴったりと配置〜
preserveAspectRatio。

2021.02.19
縦横比が違っても安心。


clip-pathをアニメーションさせる。

2021.02.09
「覗き窓」自体を動かす。


ページめくりアニメーション 作り方。

2021.02.02
画像を読み込むだけで実装。


SVGとCSSで、 見開きページ風に画像切り替え。

2021.01.24
SVG領域を確保すると便利。



HTMLで画像を重ねる、便利な方法。

2021.01.20
positionやz-index指定なし。



SVG、波を表現する。

2021.01.16
合成されたリアルな波を目指す。


SVG モーフィングが動かない!

2021.01.11
3つの確認ポイント。


SVGでモーフィングアニメーション。

2021.01.10
オブジェクトをなめらかに変形させる。

SVGアニメーション、 複数のボタンを一括制御。

2020.12.29
1度作っておけば楽チン ♬

SVGでボタンアニメーション【Web Animations API】。

2020.12.19
event.targetからオブジェクトを動かす。

SVG、ボタンのon/offを表現。

2020.12.03
イベントにも効率よく対応。

SVG、3D空間に配置してアニメーション〜preserve-3d。

2020.11.20
〽️ オブジェクトごとに重ねて配置。

SVGでWeb Animations API。

2020.11.12
〽️ ネイティブJavaScriptでのアニメーション。

perspectiveで奥行きのあるアニメーション。

2020.11.01
〽️ 1点透視の環境を再現。

CSSで3D回転アニメーション。

2020.10.21
〽️ rotate3dに挑戦。

SVGアニメーション、裏表を見せながら回転。

2020.10.09
〽️ X軸を基準に回転。


SVGアニメーション、mask要素で手書き風テキスト。

2020.10.01
〽️ <mask>要素について理解しましょう。


SVG、線を描くアニメーション。

2020.09.23
〽️ 破線のプロパティをつかいます。


SVG、use要素を使ったモーションパス。

2020.09.07
〽️ ポイントは‥「マイナスの遅れ」。


SVG、モーションパスで複数の要素を動かす。

2020.08.29
〽️ 小技を集結させて実装します。


SVGでモーションパス(基本編)。

2020.08.18
〽️ 好きな軌道で画像を動かす。


SVGとCSSで作る、吹き出しアニメーション。

2020.08.10
〽️ 吹き出しの形は自由自在。


SVGアニメーション、エンドレスに流れる画像。

2020.07.23
〽️ タイトル部分に使えそう?ふふふ。

SVGアニメーション06、アニメーションに合わせてテキストの色を反転。

2020.07.15
〽️ 3つの長方形を動かします。

SVGアニメーション05、アニメーションしている部分をクリッピング(マスク)する。

2020.07.06
〽️ テキストの内部だけアニメーション。






「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いて行きたいと思います。

🐧 twitter 🐧



© 2019 ふ
▶︎ プライバシーポリシー
▶︎ お問い合わせ