こんにちは。WebGLのお勉強1週間目くらいの絵描き系エンジニア「ゆき」です。最近Qiita界隈でもタピオカが流行っているらしいので、今日は勉強中の技術をフルに活用してタピオカを作ってみました。 ここで試せます（スマホ未対応）： https://tapioca-pixi.firebaseapp.com この記事の内容と想定読者 この記事ではJavaScriptの描画エンジンの定番の一つであるPIXI.jsと、物理演算ライブラリのmatter.jsを使って、タピオカを可愛くふわふわさせる表現のアプローチとポイントを解説します。 物理エンジンと描画エンジンの連携方法 シェーダーによるオリジナルの表現 物理演算で表現したいものを作るためのチップスいくつか シェーダー(glsl)周りは結構独特なので別途もうちょっとちゃんとした解説記事を書く予定です。この記事はどちらかというと駆け足のネタ記事になっ
イントロダクション 初めまして！ 面白法人カヤックでフロントエンドエンジニアをやっております、ごんと申します。 今回はタイトルの通り、Three.js の記事を書かせていただきました。 先月、JRA（日本中央競馬会）の年末のビッグレース・有馬記念のプロモーションとして、シン・アリマというキャンペーンが行われ、弊社では、そのWebサイト制作などをお手伝いさせていただきました。 このキャンペーンは、有馬記念とシン・ゴジラのコラボレーション企画で、スペシャルWebサイトでは、競走馬の名馬アリマとゴジラが、市街地や中山競馬場でデッドヒートを繰り広げるという、概ね荒唐無稽なゲームを遊ぶことができました。 残念ながらすでに、サイトの公開期間が終了してしまい、現在はゴジラや名馬アリマの雄姿を見ることはできないので、スクリーンショットを貼ります。 シン・アリマでは、WebGL を利用し、モバイルブラウザ上
All-in-one animation engine. A fast and flexible JavaScript library to animate the web.
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0af55bc16bf3c0a6a24924c1dcaf778ffd1396ed/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
SVGDOMのプロパティを変更 それでは、さっそくSVGDOMの操作方法について記載していきます。 <rect id="rect" x="50" y="50" width="100" height="100" fill="#91e600" /> TweenMax.to($element,0.5,{attr:{x:100,y:150}); 指定した要素のx,y座標がアニメーションで変化していますね。viewBoxの指定方法については、後述します。 原点を固定してアニメーション transformOriginとsvgOriginを使ったアニメーション方法について説明します。 CSSで用いられるtransform-originは、要素の原点を変更することができるプロテパティです。 TweenMaxでも同じように各要素の原点を指定する場合は、transformOriginに値を渡すことで原点を変更
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
