toioを使って簡単にゾートロープ(立体アニメーション)を作る方法 - Qiita
2. 回転台の工作 まずはA4サイズで印刷された工作シートから、四角いパーツと丸い大きなパーツをハサミで切り出します。特に四角いパーツは後でコレをガイドとして貼り付けしますので、できるだけ正確に切り取りましょう。なお、丸いパーツはしばらく使わないです。 ここでCD/DVDを取り出し、CD/DVDの内側の穴と切り取った四角いパーツの黒い丸がピッタリ合うように、裏側からテープで止めます。ここも出来るだけ正確に貼り付けます。 次に、CD/DVDを裏返して、四角いパーツにtoioコアキューブ専用プレート(LEGOの4*4プレートでも良い)を両面テープでつけます。この時、貼り付ける向きに注意してください。キューブを取り付けたとき、CD/DVDの中心に近い方にキューブのtoioロゴが来るように貼り付けます。専用プレートで言うと突起が付いている辺が中心に近くなる向きです。光に透かすと向きがはっきりとわか
Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは - アンドエンジニア - エンジニアのこと、エンジニアから。
この記事でわかること 良いUIを実装するために、デザイナーもエンジニアも『融けるデザイン』を読もう コードで動きのあるデザインを実装したい人は『Nature of Code』を読もう 自己満足な「やたら動くWebサイト」にならないために、デザイナーとエンジニアがコミュニケーションをし続けよう 世界最大級のウェブデザインアワード、「awwwards」。 2020年5月15日のSite Of The Day(賞のひとつ。その日最も優れたWebサイトが選ばれる)を受賞したのは、25歳の日本人Webエンジニア、なめサン。 彼の受賞作、100 DAYS OF POETRYは、のってぃ氏が制作した、100枚のグラフィックアートを閲覧するためのWebサイトだ。 100 DAYS OF POETRY Webサイト制作では通常、「デザイナーの作ったデザインをエンジニアが実装する」という分業体制が一般的。 し
The ultimate guide to proper use of animation in UX
Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerni
Webサイトにおけるアニメーション実装へのアプローチ 〜未だ見果てぬ夢〜 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 私は常々 Web サイトにおいてアニメーションはなくてもよい存在だと考えています。なぜならば・・・と話を続けたくはあるのですが、まあ正当な強い持論があるわけでもないので、ここで大仰に語ることは控えておきます。アニメーションを実装する立場でありながら、そのような考えをもち常に自責の念にかられながらも制作を続けています。そんな中でさまざまな実装へのアプローチを試みた雑な感想を、簡単なデモとあわせてご覧ください。 1. JavaScript で要素を動かす 古から伝えられてきた魔法。緻密な計算を駆使してあらゆるものを自在に操れ。 See th
Dynamic Shape Overlays with SVG | Codrops
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects. Today we’d like to share another way of achieving morphing page transitions. This time, we’ll generate multiple SVG curves with JavaScript, making many different looking shapes possible. By controlling the individual coordinates of the several layers of SVG paths, the
SVG を transform で楽しくアニメーションするための最適化 〜僕らは幸せになるために生まれてきた〜 - Qiita
SVG を transform でアニメーションさせる場合、SVG 内の各要素を指定すると、原点が SVG 全体の左上なってしまいます。translate などは問題ないですが、scale や rotate などは思うようにアニメーションさせることができないです。 動かしたい要素をそれぞれ別の SVG に分けて、重ねて、原点を調整することで、対応することはできます。 しかし、それをひとつひとつ設定していくのは骨が折れる作業になります。とてもやってられないですね。だからといって、SVG ではない要素でつくってひとつひとつ配置していくのは涙が出るほど辛いでしょう。こんなことはエンジニアがやることでないです。僕たちは幸せになるために生まれてきたのだから。まだまだ理想にはほど遠いですが、とりあえず少しは楽になる方法を考えてみました。 作業手順 大きな作業手順としては以下の3ステップです。 svg
マイクロインタラクションとバレエ｜深津 貴之 (fladdict)
UIのモーションを考える時、よく脳内でバレリーナの動きを再生する。 妹がバレエをやっていたため実家の居間では、ローザンヌ国際バレエコンクールのビデオがよく流れていた。 ローザンヌは世界最強の若手バレリーナを決める大会だ。この番組はクロード・ベッシー女史というコメンテーターの、辛口実況がウリだった。彼女はパリオペラ座学校の校長先生でもあり、それゆえに評価のハードルが非常に高い。コンテストの登壇者は、ほぼ確実にベッシー先生に滅多斬りにされる。TVカメラのまえで泣きだすこともある。ある意味、登竜門であると同時に公開処刑の場でもあった。 そんなベッシー先生が珍しく大絶賛していたのが、2001年だか2002年に出場したミレナ・シドロヴァだった。（追記、ベッシーさん2002年引退してますね。ビデオで見てたから時系列がメタメタだった。2002年のコメンテーターは別っぽい）。 バレエに特に興味のなかった僕
Metaballs
Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs. From a mathematical perspective they are an iso-surface. They are rendered using equations such as f(x,y,z) = r / ((x - x0)2 + (y - y0)2 + (z - z0)2). Jamie Wong has a fantastic tutorial on rendering metaballs with canvas. We can replicate the metaball effect using CSS & SVG by applying both blur and contrast fi
ボタンにSVGを使って水がせりあがる様なホバーエフェクト | かちびと.net
Result SVGを使うといろいろ作れて楽しいですね。 HTMLで書いた自作のSVGをurl()フィルターで参照しています。 css .c-button--gooey {/*ボタンの基本スタイル*/ color: #06c8d9; font-size: 1.3em; text-transform: uppercase; letter-spacing: 2px; border: 4px solid #06c8d9; border-radius: 0; padding: 1.2em 3.4em; position: relative; transition: all 700ms ease; } .c-button--gooey .c-button__blobs {/*HTMLで書いたSVGを参照*/ height: 100%; filter: url(#goo); overflow: hid
Animated SVG Avatar
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
Making of Fly ft. 79, Kaho Nakamura
Last summer, I was so tired of my client works indeed. So I decided to go back to my hometown and devote the whole summer to the music video for my friend producer, imai. I’ve made the video for ‘Eye’ from his electronic duo group_inou, which used StreetView and other creative coding techniques. Also, in this video, I introduced openFrameworks and ViveTracker to realize the smooth and free camera
SVG アニメーションツール Shape Shifter の使い方 - Qiita
ダウンロードのプログレスバーやボタンを押した時のフィードバックなど、アニメーションはアプリに欠かせない要素の一つです。今回は Shape Shifter というツールをご紹介したいと思います。 Shape Shifter とは？ alexjlockwood/ShapeShifter にもあるとおり、 SVG 形式のアイコンのアニメーションを作成するためのツールです。 Shape Shifter の画面構成 まずは Shape Shifter の画面構成を見てみましょう。この記事では下図の名称で呼ぼうと思います。 プレビュー画面 アニメーションのプレビューを確認できます。 左からスローモーション、巻き戻し、再生、早送り、繰り返しのボタンが並んでいます。巻き戻しはアニメーションの最初の位置、早送りはアニメーションの最後の位置に移動します。 画像の管理 画像を管理できます。 SVG などで定義さ
現場で使えるアニメーション系JSライブラリまとめ(2018年版) – TweenMax, CreateJS, WebAnimation, Velocityなど - ICS MEDIA
現場で使えるアニメーション系JSライブラリまとめ GSAP, Anime.js, Motion, Tween.js, WebAnimationなど ウェブサイトのインタラクションやUIの演出など、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、Canvas、SVGなどJavaScriptを用いる場合は、CSS Transitionでは対応できず、アニメーションライブラリが必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころです。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。 今回紹介するメジャーなJSライブラリ6種類 メジャーなJavaScriptライブラ
あえてズレを！ ウェブのアニメーションを「いい感じ」に魅せる手法 - ICS MEDIA
アニメーションはウェブサイトやアプリ、ゲームのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションにたいして苦手意識を持っている方も少なくないでしょう。今回は私たちがアニメーションを作る時に用いている、簡単に「いい感じ」に仕上げるテクニックを紹介します。 CSS Transitionなどは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせられます。本記事のデモはCSS版、GSAP版、Anime.js版の3種類で作成しています。お使いの技術にあわせて参考にしてください。 CSS版：CSSアニメーションを中心に作成したサンプル。演出の精度は簡易的。 GSAP版：JSライブラリGSAPジーサップを用いたサンプル。演出の精度が高め。 Anime.js版：JSライブラリAnime.jsを用
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - nbedos/termtosvg: Record terminal sessions as SVG animations
AI Innovation Workspace | Miro
己の感覚のままに装飾しながら、SVGで折れ線グラフを描いてみる - Qiita
SVG Animations
SVG Animations
