昔の催眠術の定番と言えば、紐にぶらさがったコインだ。左右に揺らされたコインを集中してじっと見ていると、催眠効果が発動するというもので試した昭和のちびっこたちも多いんじゃないかな？ 最新の催眠効果が得られると話題のアニメーションは、やはり規則性・連続性のある動きをじっと見るというものなんだけど、その映像の奇妙さも相まってとてもクセになる。 実際にこれらの映像は、見る人をリラックスさせ、瞑想モードに突入するような自律感覚絶頂反応が得られるという。 そう、ASMR効果だ。 それでは実際に見ていこう。
ある意味これも催眠術？規則性・連続性のある動きを持った3Dアニメーションで癒し効果。新感覚のASMR動画10本 : カラパイア
昔の催眠術の定番と言えば、紐にぶらさがったコインだ。左右に揺らされたコインを集中してじっと見ていると、催眠効果が発動するというもので試した昭和のちびっこたちも多いんじゃないかな？ 最新の催眠効果が得られると話題のアニメーションは、やはり規則性・連続性のある動きをじっと見るというものなんだけど、その映像の奇妙さも相まってとてもクセになる。 実際にこれらの映像は、見る人をリラックスさせ、瞑想モードに突入するような自律感覚絶頂反応が得られるという。 そう、ASMR効果だ。 それでは実際に見ていこう。
第17回 立体的なナビゲーションバーのアニメーション | gihyo.jp
今回のお題は、ボタンが立体的に並んだナビゲーションバーだ（サンプル1）。マウスポインタを重ねると、ボタンが飛び出す。「Navigation Bar by Jan Kaděra」のデザインとアニメーションをもとに、わかりやすく組み立て直した。3次元の動きで、ボタンの数も多い。少しやっかいそうに感じたかもしれない。ところが、思いのほかコードはたやすい。 サンプル1 CSS3: 3D style navigation bar 平面的なナビゲーションバー まずは<head>要素にいくつか仕込みをしておこう。ボタンのアイコンにはFont Awesomeを使うので、つぎのようにCDNを読み込む（第15回の「アイコンWebフォントを使う」参照）。おなじみの-prefix-freeも加える。そして、今回はリセットCSSを用いた。ブラウザによって異なるデフォルトをリセットすることで、表現が揃えられ
第16回 並んで弾けるアニメーション | gihyo.jp
今回のお題は、水平に並べた要素に時間差で波紋のような弾けるアニメーションを加える（サンプル1）。「Smooth Pulse」のデザインとアニメーションをもとに、わかりやすく組み立て直した。アニメーションの工夫があるものの、技術的にはむずかしくない。ただ、要素の数だけアニメーションのコードが増える。jsdo.itのスペースも考え合わせて、要素の数は4つに減らした。 サンプル1 CSS3: Smooth Pulse 水平に並べた要素に静的なスタイルを割り当てる アニメーションを加える前の、4つの要素の組み立てと静的なスタイルは、後に掲げるコード1のとおりだ。border-radiusプロパティの値を50%にして、要素は円形にした。そして、色は緑系（#33ffff）から青系（#3399ff）まで、段階的に変えている（図1）。アニメーションは、円形の<a>要素（class属性"circl
第8回 マウスポインタを重ねたテキストのアニメーション（1） | gihyo.jp
今回はお題として、マウスポインタを重ねたときのテキストのアニメーションを取り上げたい。「Inspiration for Text Styles and Hover Effects」を参考に、3つほどつくってみた（サンプル1）。もちろん、HTMLとCSSの構成はわかりやすく改め、コードも絞り込んである。ただ、3つすべてを解説しようとすると長くなりそうだ。そこで、サンプル1の2つ目については次回に送り、今回はひとつ目と3つ目を説明しよう。 サンプル1 CSS3: Text styles and hover effects 2つの項目の静的なデザイン <body>要素には、2つの項目をつぎのようなコードで構成した。項目ごとの<div>要素（class属性"item"）にリンクのための<a>要素（class属性"link"）を含め、テキストは<span>要素で加えている。アニメーションは、項
第7回 追加情報をアニメーションで表示するボタン | gihyo.jp
今回のお題は、アニメーションするボタンだ。マウスポインタを重ねると追加情報が現れる（サンプル1）。「Animated Buttons」の表現を参考にした。例によって、HTMLとCSSの構成はわかりやすく改め、コードも絞り込んである。 サンプル1 CSS3: Animatied buttons ボタンの静的なデザイン <body>要素に書くコードは以下のように構成した。各ボタンを<a>要素（class属性"btn"）として<div>要素（class属性"container"）の中に納めた。ボタンの<a>要素は、それぞれ3つの<span>要素（class属性"btn-text"と"btn-slide-text"および"btn-icon"）をパーツとして含んでいる（図1）。3つめの<span>要素の中には、さらに空の<span>要素が加えてあり、CSSで矢印を背景画像として与える。 図
｢馬が走る時、全ての足が宙に浮いている瞬間はあるのか｣を解決した歴史的映像を現代アニメーションに
｢馬が走る時、全ての足が宙に浮いている瞬間はあるのか｣を解決した歴史的映像を現代アニメーションに2016.03.26 12:008,065 塚本 紺 え？馬の足ってどれかは地面についてるでしょ？ちがう？ ｢馬が全速力で走る時も、どれかの足がかならず地面についている｣ ｢いや、全ての足が浮いている瞬間というのはある｣ みなさんどちらが正しいかご存知ですか？これ、19世紀に競馬好きの間でよく議論となったトピックなんですが、カリフォルニア州知事であるLeland Stanfordは強固な｢絶対に全ての足が浮いている瞬間がある｣派でした。 どれくらい強固だったかというと当時、写真分野のパイオニアであったイギリス人Eadweard Muybridgeをわざわざ雇って、証拠写真を撮らせたくらい。雇われたMuybridge氏は24台のカメラを使って馬が走っている姿を捉えました。 そうやってできた映像で、
第4回 3次元で垂直に回る立方体のメニュー | gihyo.jp
今回のお題も、前回と同じく項目を並べたメニューだ（サンプル1）。ただし、今度は3次元のアニメーションにした。マウスポインタをメニュー項目に重ねると、立方体のように垂直に回る。CSS3を使えば、このような3次元の表現もできてしまう。CodePenに公開された「CSS Cube Flip」を参考に、HTMLとCSSのコードの構成を改め、簡潔にした。 サンプル1 CSS3: Cube Flip メニューのもとになる静的スタイル まず、<body>要素に書くコードの構成だ。メニューは、つぎのように<ul>要素でリストとして組み立てる。メニュー項目を<li>要素（class属性"component"）とし、その中の<a>要素（class属性"face"）にテキストを加えた。そして、メニューの<ul>要素全体を、<div>要素（class属性"container"）で包んでいる。 <div cla
アニメーションで見る重力波の動き | ライフハッカー・ジャパン
宇宙の巨大な物体同士が衝突すると、時空構造に波紋が生じる。ここ1週間ほど、世間を賑わせている重力波のニュースですが、重力波の存在は100年も前にアインシュタインによって予言されていました。でも、実際に観測されたのは初めてのこと。重力波の観測は、ルイジアナ州とワシントン州で研究を行うLIGO（ Laser Interferometer Gravitational-Wave Observatory）が発表したものです。 発表のあったシグナルは、2つのブラックホールの衝突によって生じたものです。Popular Scienceの Sophie Bushwickの説明によると、2つのブラックホールが近づくにつれ、お互い渦のように回転していたのだそうです。そしてより近くなるとブラックホールの回転はさらに速くなり、最後には融合して1つの巨大なブラックホールになってしまったのだそうです。この破壊的な現象に
Live2Dに入門してAndroidで動かしたりして遊んだ - みんからきりまで
Live2Dという技術があります。 http://www.live2d.com/ 二次元のイラストを3D化せずにそのまま動かせるという夢の技術。 最近だとFaceRigと組み合わせたこんなのが話題になったりした。 www.4gamer.net 3年くらい前にYoutubeで紹介動画を見た時からずっと応援している技術なんだけど、このLive2Dでキャラを動かすのを自分でも試してみた。 Cubism EditorでLive2Dモデルを作ってみる Cubism Editor | Live2D どうやらこのCubism EditorというソフトウェアでLive2Dモデルが作成出来るようなので、インストールした。 とりあえず公式のチュートリアルページを見ながら見よう見まねでやってみる。 入門チュートリアル - Live2D Cubism 2 マニュアル 元の絵はこんな感じです。 Live2Dの仕組み
Interpolator で補間 - JavaFX in the Box
この記事は、JavaFX Advent Calendar 2015 の 9 日目の記事です。 昨日も私の JCConf で JavaFX について発表してきた でした。 明日は @kokuzawa さんです 今日は小ネタ。 アニメーションで重要な概念に Interpolator があります。Interpolate が「補間する」という意味なので、Interpolator は「補間をするもの」ぐらいですかね。 コンピュータでアニメーションをする時は、ある時点での状態から、次の時点での状態を指定します。JavaFX で Timeline を使うのであれば、ある時点の状態を示すのが KeyFrame になります。 通常は複数の KeyFrame でアニメーションを行うわけですが、その KeyFrame 間の状態をどのようにつなげていくかということが補間です。 たとえば、移動する場合であれば、ある
インフォグラフィックスで学ぶ、あらゆるモノの動く仕組み
わかりやすいって大事。 コレってどんな仕組みで動いているの？ そんな疑問を解決してくれるインフォグラフィックスがコチラ。Jacob O'NealさんのサイトAnimagraffsでは、インフォグラフィックスを使って銃やスピーカーなどのあらゆるモノの内部構造やその中で使われている技術、仕組みを解説しています。アニメーションの特性を生かした説明はわかりやすいだけでなくなんだかカッコいい！ 思わず読みふけってしまいますね。 拳銃についての解説ページはコチラ。 スピーカーについての解説はコチラ。 ジェット機のエンジンについての解説はコチラ。 クルマのエンジンについての解説はコチラ。 Jacob O'Nealさんはポートランドを拠点として活躍するグラフィック・デザイナーです。ご紹介したメカニックなモノ以外にも、Animagraffsでは様々なモノについてインフォグラフィックスで解説していますよ。O’
Learn Something on Twitter: "This is why your phone camera takes weird photos of spinning propellers https://t.co/3RAhpowBdp"
This is why your phone camera takes weird photos of spinning propellers https://t.co/3RAhpowBdp
第11回 アニメーションの原理とデザイン | gihyo.jp
本コラムの第1回では、iPhoneをはじめとするタッチパネル操作がなぜ気持ちが良いのか、自己に帰属する動きとアニメーションに分けて説明しました。その際、アニメーションはユーザの注意を引いたり、ナビゲーションの際に利用するという話をしました。 今回はより詳しいアニメーション表現の種類について考えていきます。 Disneyが提案するアニメーションの原理 アニメーションの語源は「アニマ」というラテン語の「魂」という意味に由来し、「命を与えて動かす」という意味があります。したがって、アニメーションの目的には、生命らしい動きの追求があります。 アニメーションはさまざな作家によって研究されていますが、特に動きの体系化として有名なのが、Walt Disneyが分類・定義したアニメーション12の法則です[1]。 スクオッシュ（潰し）とストレッチ（伸ばし） アンチシペーション（予備動作） ステージング（
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
新着記事
フィルムを動かすとティモテに会える！？イラストレーションに命を吹き込んだ仕掛け絵本「ヴェント」 : カラパイア
さまざまなソートアルゴリズムをアニメーションで学べるサイト「SORTING」 | ライフハッカー・ジャパン
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
発泡スチロールで作られたストップモーション・アニメがCGと見間違うほどのクオリティ