エフェクト作成ツールのEffekseerがWebGLに対応。Web表現の新兵器となるか - ICS MEDIA
エフェクトツール「Effekseer」ですが、2017年5月25日、WebGLに対応したEffekseerForWebGLがリリースされました。今回はEffekseerで作成したエフェクトをJavaScriptライブラリ「Three.js」を使ってWebGLで表示するまでの流れを紹介します。 EffekseerForWebGLのデモ デモを別ウインドウで再生する ソースコードを確認する Effekseerでのエフェクト作成をオススメしたい理由とは？ 1つのエフェクトソースでマルチプラットフォームに展開できる点。たとえばEffekseerはUnityにも対応しているため、WebブラウザとUnityプラットフォームの両方に対応できます (DirectXやOpenGLを用いたアプリケーション、Cocos2d-x、Unreal Engine4、さらにはMMDやSiv3Dにも対応）。Unity用コン
コロプラ流 『白猫プロジェクト』、『白猫テニス』を支えるエフェクト制作テクニック
2016/12/15 PR コロプラ流 『白猫プロジェクト』、『白猫テニス』を支えるエフェクト制作テクニック モバイルゲームにおけるエフェクト表現は、ゲーム品質やユーザー満足度に直結する重要な要素だ。『白猫』シリーズでおなじみのコロプラでは、様々な職歴のエフェクトデザイナーの手によって、リッチな見映えを伴った多種多様なバリエーションのエフェクトが日々生み出されている。本特集では『白猫プロジェクト』『白猫テニス』におけるエフェクト表現を事例にしながら、彼らの制作手法、更にはコロプラのエフェクトデザイナーに求められる素質について見てみよう。 INFORMATION 現在、コロプラでは各プロジェクトでエフェクトデザイナーを絶賛大募集中！ ゲーム業界だけではなく、アニメ業界、実写・VFX業界など異業種で培ったノウハウを遺憾なく発揮してください。 ＞＞＞詳細はこちらから 『白猫プロジェクト』のエフェ
[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js
Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか？ PJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトを紹介します。 Barba.js Barba.js -GitHub Barba.jsのデモ Barba.jsの使い方 Barba.jsのデモ Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。 ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。
![[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/4521503cad1ef35e553783a3eb0c0ab4a4bc1361/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016063007.png)
その手があったか、と思わせてくれそうなCSSやアニメーションなどのまとめ
作成：2016/06/6 Web制作 > 今っぽくするための、ありそうで無かったエフェクト。その手があったか、と思わせてくれそうなアイデアとソース。最近のWebサイトで使われている、心地よいアニメーションを実装するCSSなどのまとめ。 エンジニア速報は Twitter の@commteで配信しています。 背景画像が放射状に広がるスライダー クリックすると背景画像を円形にマスクしながら波紋のように広がる、シンプルなレスポンシブ対応スライダー。 [ダウンロード・デモ] Radial SVG Slider | CodyHouse カーテンが左右に開くようなエフェクト 画面をクリックするとカーテンが左右に開閉する動きをします。まだ、こういった動きを取り入れているサイトが少ないようなのでメモ。 [ダウンロード・解説] Creating a CSS Curtain Opening Effect | C
仕事を読み解くキーワード：もう一歩踏み込みたい｜採用情報｜任天堂
イカたちが敵味方に分かれてインクを撃ち合うWii Uの『Splatoon（スプラトゥーン）』は、ゲームの終盤になると画面の大半がインクだらけになってしまいます。なので、ある意味「主人公はインク」とも言えるゲームです。 入社してからずっとエフェクト（映像効果）を担当してきた私は、『Splatoon』のインク全般を担当することになったのですが、インクが主役なだけに「ヘタなものは作れないぞ」という覚悟で臨むことになりました。 インクの表現で、私が最も試行錯誤を繰り返したことのひとつは、ブキで撃ったときのインクの見えかたです。ブキを横に振りながら撃つと、槍のような形をしたインクが断続的に飛んでいるように見えて、周りの人たちは「これでいいよ」とは言ってくれたものの、自分ではどうも納得しきれませんでした。もっとよりよく見える方法がないかと、デザイナーという仕事柄、もう一歩踏み込みたいと考えたのです。
jQueryとCSS3で手軽に実装できるスクロールエフェクト
2015年10月6日 CSS, JavaScript, jQuery 近頃Webデザインのギャラリーサイトで見かける素敵Webサイトって、どれもアニメーションなどのエフェクトがかっこいいですよね。という事で今回は、中でも簡単に実装できそうな効果をひとつ。スクロールすることで要素が可視範囲に表示されると、CSS3のアニメーションを使ったエフェクトが実行される、というのを実装してみようと思います。なんだか難しそう…と、食わず嫌いでいた人でも、基本さえおさえておけば、あとはアイデア次第で自分好みにカスタマイズできると思いますよ！ ↑私が10年以上利用している会計ソフト！ 基本：スクロールでテキストをぼわ〜んと表示 画面をスクロールすると、下からぼわ〜んとテキストが表示されるエフェクトを実装してみましょう！ HTML まずはエフェクトを与える要素をHTMLに記述。安心してください、まだ何も変わった
After Effects 全エフェクト
After Effectsの全エフェクトを解説 オススメ★は個人的な意見となりますので、業種、価値観によりことなりますので目安程度とお考えください。 （※解像度をOriginalに変更頂く事でフル解像度の画面でご覧頂けます） フリーで学べる動画講座 Adobe Authorized Training Center...
CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応
Posted: 2015.05.07 / Category: HTML&CSS, javascript / Tag: CSS3, jQuery iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。 確認環境： Chrome42, Firefox37, Safari7, iOS8, Android 4.4 均一の余白で配置するバージョン paddingのみでぼかすパネルを配置する方法です。これならCSSオンリーでいけます。 html&cssは下記のようにします。 html <div class="panel"> <div class="panel-in"> <div class="panel-main"> 内容文が入ります。 </div> </div> </div> css *::before,
Seriously.jsで動画・画像にリアルタイムエフェクトをかける方法【ほりぼーいドッキリ編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんこんにちは、エンジニアののびすけです。 最近はWeb上で動画背景を使った表現のサイトが増えてきてますね。Webブラウザの性能が上がってきている昨今では、（スペックにもよるのですが）ブラウザ側でそういった処理もガンガンできます。 今回はそんなリッチな表現ができる「Seriously.js」をご紹介します。 Seriously.jsとは http://seriouslyjs.org/ 少し前に話題になった、動画や画像にブラウザ上でリアルタイムエフェクトを掛けることができるライブラリ。複雑なエフェクトをたくさん使えるにもかかわらず、簡単なJavaScriptの記述で操作できます。 サンプルを触ってみよう まずは、どんなことができるのかが気になると思います。Seriously.jsの公式デモを紹介してきます。 こちらのページにデモへのリンクがあるので試してみましょう。 ※執筆時点ではGoo
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
このUIエフェクトすごい！ふわふわと紙が風に舞うような新感覚の操作性 -Windy Effect | コリス
カード型レイアウトの各カードを紙が風に舞うように操作できる美しくて楽しいプロトタイプのエフェクトを紹介します。 こんなエフェクトが実装される日もそう遠くはなさそうですね！
今一番気になるCSSの美しいエフェクト！インクを水面に落としたように波紋が広がり消えていく -Ripple Click Effect
Googleが先日発表した新しいUX「Material Design」の中で特に注目されているのが、タップやクリックをするとインクを落としたように波紋が広がるエフェクト。 これを実装するテクニックを紹介します。 Material Designについては、前の記事（「波紋」のアニメーションを実装するテクニック）で動画を紹介しています。 この波紋のエフェクトはあちこちのコミュニティで盛んで、その中でもここで紹介するエフェクトはかなり美しく仕上がっています。 デモではリストで配置したナビゲーションの各アイテムをクリックすると、そのクリックした地点を中心に波紋が広がり、フェードで消えていきます。 ※上記はエフェクトが分かりやすいよう、各アイテムの高さを広げています。 実際の動作は、下記ページでお楽しみください。 Ripple Click Effect from Google Material De
スクロールやクリックした際に、おおっ！と思わせるクリエイティブな7つのエフェクトがかっこいいっ！
ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ！と思わせるクリエイティブなエフェクトを7つ紹介します。 Inspiration for article intro effects 7つのエフェクトをアニメーションgifにしてみました。 ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるかっこいいエフェクトばかりです！ 各エフェクトのソースは上記ページからまとめてダウンロードできます。
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ゴーストボタンと相性が良さそうなホバーエフェクト 10＋ - NxWorld
liffect - effect for lists