DESCENTE(デサント) 2017SS特設サイトTOPページのフロントエンドを担当いたしました。
シンプルな構成ではありますが、WebGLを使った商品切り替えエフェクト、ページ全体のトランジションなどを工夫し、単調になりすぎずユーザーが特別感を感じられるように心がけて実装しました。
PC、スマホと同じ演出となっていますのでぜひ両端末でご覧ください。
DESCENTE(デサント) 2017SS特設サイトTOPページのフロントエンドを担当いたしました。
シンプルな構成ではありますが、WebGLを使った商品切り替えエフェクト、ページ全体のトランジションなどを工夫し、単調になりすぎずユーザーが特別感を感じられるように心がけて実装しました。
PC、スマホと同じ演出となっていますのでぜひ両端末でご覧ください。
僕のやってることや仕事の実績などは完全にこのブログに集約することにして自分のサイトもリニューアル。このブログへの扉ページ的な位置付けにしました。背景とか結構自分好みにぐにょぐにょさせてます(テキストは日々思ってることがランダムで表示されます!)。PCとSPどっちも見れるのでよかったらぜひ!
そろそろ.jadeじゃなくて.pngに切り替えようと思ったけど.pngだとSyntaxThemeがjadeじゃなくてplanetextになってしまうので、pngファイルをjadeファイルとして認識させる。
"*": "file-types": pug: "source.jade"
最後にAtomを再起動して終わり。
iPhoneでマナーモードにしてても音がなってしまう現象。
調べたのでわすれないようにメモ。
webaudioAPI単体なら問題ないが、HTMLAudioを一回でも使うとマナーモード無視で音が鳴ってしまう。今回はhowler.js使っててこのライブラリの場合どうやらライブラリ内でfallbackする際に使われてる模様。(たぶんAPIの存在チェックでnew Audio()とかやってる)
けれど、一発で解決できるグローバルパラメータあったので解決。
そんなものはなかったので、howler.jsちょいいじった
ここをコメントアウトして、
https://github.com/goldfire/howler.js/blob/master/src/howler.core.js#L209-L214
この行の前で、
https://github.com/goldfire/howler.js/blob/master/src/howler.core.js#L232
こんな感じで強制return
self._codecs = { mp3: true } return self;
※今やってるのはwebAudioAPI非対応のIE11も対応するので、上記のコメントはiOSのみの場合に限定した。こんな感じで。
var isiOS = /iPhone|iPad|iPod/i.test(self._navigator && self._navigator.userAgent); if(!isiOS) { try { var test = new Audio(); if (test.muted) { self.noAudio = true; } } catch (e) {} }
MOZZ TOKYOコーポレートサイトのフロントエンドを担当いたしました。
レスポンシブでありながらスマートフォンとPCで別々のUIを実装したTOPページ(もちろんワンソース)や、使いやすさと見た目のバランスを考慮した最低限の演出など、シンプルですが丁寧な実装を心がけました。
ぜひ両端末でご覧ください。
/*
クレジット :
Producer:小坂大輔 (EPOCH)
Project Manager:湊さおり (EPOCH)
Art Direction/Designer:浅野南
HTML/CSS:池田亮
CMS:西塚豪