svg

「デザイナー必修 SVG 基本&アニメーション」セミナーに参加しました。

(これは、セミナーレポートでなくて、日記です)

6月13日(木)めずらしく晴れ 木曜日は腹筋の日

木曜日の昼休みは「腹筋」の日にしています。ジムに、腹筋だけ1時間やるクラスがあって、なるべく出るようにしているのですが、ムキムキの目立つところの筋肉ではなくて、「体幹(体の中心にある細い筋肉)」をはじめ、体のコンディショニングを整える上で重要な、腹筋(と言っても、いろいろなキンニクがあるみたいです

もっとみる

Text Crop と SVG arrow [ codepen: css ]

SVG の矢印付きリンクボタン実装例です。SVG は <use xlink:href="***"> で使い回せるように実装。普通に実装しようとすると文字要素自体が持つ上下余白がじゃまになったりするので :before と :after を使って上下余白を調整。これを Text Crop と呼んでます。

↓ここで知りました。

中の文字が動的に代わり、行数も変わるようなパターンの場合に非常に便利で

もっとみる

from bookmark to favorite - 2019.04

JavaScript

with Shadow DOM
- Encapsulating Style and Structure with Shadow DOM | CSS-Tricks

shodow DOM を解説しつつ、ダイアログをつくる。

don’t need input number
- You probably don’t need input type=“number”

マウスホイ

もっとみる

from bookmark to favorite - 2019.02

これは、日々の Web 制作で生まれたブックマーク集です。時事的に新しい記事もあれば、そうでないものもあります。引き出しやすいようにメモも付けておきます。

JavaScript

setTimeout
- ページ読み込み中に setTimeout() や setInterval() が先送りされるようになりました (影響あり) | Firefox サイト互換性情報

settimeout の挙動

もっとみる

from bookmark to favorite - 2019.01

これは、日々の Web 制作で生まれたブックマーク集です。時事的に新しい記事もあれば、そうでないものもあります。引き出しやすいようにメモも付けておきます。

JavaScript

DeviceMotion event
- Shiny, Simulating Reflections for Mobile Websites

スマホのジャイロを利用したリフフレクション、safari では使いにくくな

もっとみる

WordPressでSVGアニメーションを挿入したい(インラインでは難しい...?)

WordPressで記事を書いていて、動くSVGを挿入するのに苦戦したので、そのメモを残します。結果としては、『SVG Support』というプラグインを導入することと、SVGのanimateタグを使うことによって、WordPressでも動くSVGアニメーションを表示できるようになりました。

こちらのnoteでは、SVGアニメーションを表示できるまでに苦戦した原因と、その解決策についてまとめてい

もっとみる

[ew] Quay

http://www.quay.com.au/
オープニングスプラッシュがおしゃれ。
縦スクロールで展開するコンテンツはViewportにフィットした画面構成で非常に読みやすい。
右上の追従予約ボタンクリックで表示される予約パネルの中身もシンプルで使いやすい印象。

SVGアニメーション

イラレで作られたイラストデータを、アニメーションで一瞬表示させたい(いわゆるスプラッシュ)という課題があって調べていたところ、
https://signal.tokyo/howto/how_webcreate/1947
https://ics.media/entry/8439
Animate CC から可能だとあったので、Flashにまみれていた懐かしの日々を思い出しながら習作(…といってもトゥイ

もっとみる

Lottieでweb表示させる時につまづくいくつかのポイント

実案件でようやくAfterEffectsで bodymovin / lottie を使ってみました。2019年3月時点でweb表示させるのにちょっとつまづきそうだったポイントをいくつか明記しておきます。

読み込みファイル名が変わった

何か技術を使う時、親切に説明してくれているサイトはわかりやすくて大変助かりますよね!私も今回いくつか参照しました!
しかしながら、今日時点で読み込むファイル名が変

もっとみる

SVGをモーフィングしながらclipPathで画像をクリップする

はじめまして、スタートアップでUIデザインやフロントエンドエンジニアなどをやっている中村といいます。
昨年の8月から業務としてWebに携わりはじめました。今後の作品をまとめていくためにポートフォリオサイトをちょっとずつ作っていこうという次第です。
海外のサービスのLPなんかでよく見る、SVGがもやもやと揺らぐアニメーションを自分のサイトにも入れたいなと思ったのですが、ついでにそのSVGで画像のクリ

もっとみる