Create a Vertical Sliding Bar Thumbnail Effect demo 上下にスライドするアニメーションはとても軽快で、ぜひデモページで実際に試してみてください。 パネルは分割する必要はなく、スクリプトのオプションではインとアウトのスピードやバウンスなどの調整ができます。 スクリプトのベースにはjQueryが使用されているため、実装にはjquery.jsが必要です。
■2014/12/30に開催されたコミックマーケット「ハラタオル」ブースにてプレゼンした動画です。ココで作られている内容が本に収録されてるものです。特別付録込。 ハラタオル
※本セッションには、多くの動画が含まれていたりノートに備考が記載されている可能性があります。実際の講演で行われたスライドが下記からダウンロード可能ですので、是非そちらをご覧頂けますと幸いです。 講演パワーポイントリンク: https://epicgames.box.com/s/8mmgpxjfgbvk86wdfs23t0xbqwzfrrcu 登壇者 林 武尊さま 内容 エフェクト制作においての各種レギュレーションや、制作中に起こった問題、検証したこと、どうやって解決したかなどを網羅的にお話する内容になります。 本スライドは2019年3月15日に行われた「UE4を用いた大規模開発事例紹介 ~スクウェア・エニックス様をお招きして~」にてスクウェア・エニックス様に講演していただいたものです。 当日は本講演は1セッションで行いましたが、公開頂いたスライドページ数がSlideShareの制限に達した
クリスマスだしたまには便利な記事でも書く。 以前少し書いた、ゲームにアニメ風のエフェクトを入れたいという話。アニメ風というのは例えば こういう光線や光輪を指す。ポイントとしては、わざと線の太さを不安定にしたり途切れ途切れにして躍動感を出す、という所。 さて、まず光輪からいくと、左上に(0,0)、右下に(1,1)のテクスチャ座標を指定した矩形ポリゴンを用意する。(次の画像だけ、u,vを赤と緑に割り当てている) 中心が(0.5,0.5)なので、フラグメントシェーダー上でテクスチャ座標と(0.5,0.5)の距離をとって、ある閾値を超えたらdiscardすると円形になる。 void main() { vec2 rpos = v_texCoord - vec2(0.5, 0.5); float r = length(rpos); if (r > 0.5) { discard; } gl_FragCo
Googleの新UX「Material Design」のアナウンス以降、波紋のエフェクトを数多く紹介してきました。例えばこれとかRiiple Click EffectとかWavesとか。 それらとは一味違い、WebGLでリアルな波紋を描くjQueryのプラグインを紹介します。 jQuery Ripples Plugin -GitHub ↑ファイルサイズを軽減してます。実際はもっと本物の水面です。 jQuery Rippleのデモ jQuery Rippleの使い方 jQuery Rippleのデモ デモはChrome, Safari, Firefox, Opera, IEは11+で、OpenGL 2.0対応のビデオカード内蔵のPCでご覧ください。 ページ上をクリックすると、そこから波紋がどんどん増えます。 jQuery Rippleの使い方 Step 1: 外部ファイル 当スクリプトとjq
まず最初に書いておくと、この方法は失敗作だ。 単純にパフォーマンスが良くないし、精度も今ひとつ。 だけど、同じ過ちを犯す人がいるかもしれないから、メモに残しておく。 ちなみに、こんな感じになる。一応リアルタイム。 画像はSweetSpotの見せられないよアイコンより。 モデルはAoiちゃん。 少し前からあった自分好みのアセットで、制服・パジャマ・道着のような物から、ボロボロにされた服やバスタオル一枚、スク水ニーソ・セーラー服の下にスク水といった、マニアックな物も入ってる逸品。 モーションも格闘から会話・移動等々、非常に良い感じ(62種類?多すぎて分からん) Aoi Character Packあ、ちなみにバスタオルの中は黒塗りです。 つまりシュレティンガーのぱんつ。 この方法、やってる事はすごく簡単だ。 Mesh Coliderをリアルタイムに更新パンツにコライダーを設定パンツへ向けてRa
コメント(閉):1 根保孝栄・石塚邦男 14-11-06 (木) 2:33 ダークエネルギーなんてわけの分からないエネルギーが宇宙に充満している・・・神の御心ではないか? なんて・・それはないか。不思議はこの世。 トラックバック(閉):4 pingback - 右の頭から左の頭へ腕を動かし撮影した自撮り映像をつなげると異空間トリップできる「Donut Selfie」 | mifdesign_antenna より 14-10-18 (土) 18:57 […] 右の頭から左の頭へ腕を動かし撮影した自撮り映像をつなげると異空間トリップできる「Donut Selfie」 | mifdesign_antenna […] pingback - ツカエル!ネットの話題 » Blog Archive » 10月19日 05:00版 より 14-10-19 (日) 5:00 […] 右の頭から左の頭へ腕を動
デモページ [ad#ad-2] lake.jsの使い方 HTML 画像はimg要素で配置し、「display: none;」で一旦非表示にします。 <img id="lake-img" src="lake.png" style="display: none;"/> 画像は下記のように、上半分のみ用意します。 使用している画像:lake.png 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="jquery.js"></script> <script src="lake.js"></script> JavaScript jQueryのセレクタで適用する画像を指定し、スクリプトを実行します。 オプションではアニメーションのスピードやさざ波の量などを調整できます。 <script> $(function() { $('#lake-img
Pythonを始めたばかりのユーザーの多くが、どちらのバージョンを使えばいいのか迷っています。私の答えは、「気に入ったチュートリアルに書かれているバージョンにしましょう。そして、あとで違いを調べてください」という言葉につきます。 それでは、新しいプロジェクトを始めるときにはどちらを選べばいいのでしょうか? 使おうとしているライブラリを全てサポートしているなら、2.7.x系と3.x系のどちらを使ってもよいでしょう。そうはいっても、この2つのメジャーバージョンについて大きな違いを見ておくのは良いでしょう。どちらかのみでコードを書いたり、プロジェクトに使おうとしている時によくある落とし穴を避けられるからです。 __future__ モジュール Python 3.x で導入されていて Python 2 で使えないキーワードについては、 __furute__ モジュールをインポートすることで Pyt
Effects Codeでは、フラッシュやAction Scriptの知識が無くてもXMLファイルを編集するだけで使用できるフラッシュのエフェクト集を配布しています。
【画像あり】東京のサンシャイン水族館が開発した道案内アプリが海外で話題に 【翻訳】 Tweet 東京にあるとある水族館はこれ以上なく素敵な道案内サービスを新しく導入した。そう、ペンギンである One Tokyo aquarium has created the best way to get around ever: PENGUINS. 1: :2014/07/10(木) 東京にあるサンシャイン水族館はそのアクセスの悪さもあり、入館者を誘致する新たな方法を探していた。 The Sunshine Aquarium in Tokyo has been looking for a new way to attract visitors, especially since they're so far away from the closest subway stop. 翻訳元: http://n
ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ!と思わせるクリエイティブなエフェクトを7つ紹介します。 Inspiration for article intro effects 7つのエフェクトをアニメーションgifにしてみました。 ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるかっこいいエフェクトばかりです! 各エフェクトのソースは上記ページからまとめてダウンロードできます。
a要素にテキストを配置して実装したシンプルなボタンに、ゼリーのようにぷるるんとさせるアニメーションを与えるスタイルシートを紹介します。 ↓は、デモをアニメーションgifにしてみました。 Gelatin over button effect with Sass HTML HTMLは非常にシンプルです。 <a href="#" class="btn">Click Here</a> <a href="#" class="btn btn-secondary">Click Here</a> CSS スタイルシートは少々長いですが、こぴぺでそのまま利用できます。 Sass版は、Gelatin effectをご覧ください。 a.btn { display: inline-block; margin: 15px 15px 0; padding: .6em 1.1em; font-size: 26px; f
by World Bank Photo Collection 「『相手が理解する言葉』で話せば、言葉は相手の頭にまで届くでしょう。でももし『相手の言葉』で話したら、言葉は相手の心にまで届きます」という言葉を残した元南アフリカ大統領のネルソン・マンデラ氏が無意識に使っていたと言われるのが「外国語効果」です。交渉力に優れていたマンデラ氏が使っていた外国語効果とはどんなものなのか、Mapping Ignoranceがまとめています。 Mandela was right: the Foreign Language Effect | Language | Mapping Ignorance http://mappingignorance.org/2014/02/03/mandela-was-right-the-foreign-language-effect/ マンデラ元大統領は1964年に国家反逆罪
久しぶりに、テキストエフェクトのPhotoshopのチュートリアルをまとめてみました。 Photoshopのスキルアップだけでなく、デザインの引き出しを増やすかっこいいエフェクトがたくさんです!
最近のトレンドカラーを使い、シンプルなオブジェクトをさまざざまな楽しいアニメーションで動かしたプリローダーの素材を紹介します。 Flat Preloaders ダウンロードできるファイルのフォーマットは3種類で、32x32, 64x64, 128x128とサイズも3種類が用意されています。 .gif (すぐに使えるGIFアニメーション) .png (スプライト用の画像) .aep (After Effect用) プリローダーは10種類で、どれもかわいく楽しいアニメーションです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く