BlogWebGLを活用してオシャンな写真スライドを作ってみたら結構俺の好みだったよ突然ですが、いつもと同じパティーンでウェブサイト作っているだけだと飽きませんか?どうも辻元気です。由佳さんがデザインして自分がコーディングしたKarinoさんのウェブサイト公開しました。繊細でゆったりしていて良いデザインだよなぁ。こちらから確認できます。https://yorozu-karino.com/本題。コーディングするにあたって、ウェブサイトの顔であるトップページの一番上(今回は写真のスライド)をなんかオシャンにできないかな〜と思って色々やった結果をお伝えします。Karinoさん、オシャレじゃないですか、ブランドとして。それをより引き立たせる方法ないかなぁ〜って言うやつです。Contents写真は複数枚見せたくて、でも、オシャンにしたい、どうしようお母さんどんな仕組みで「K」ロゴが浮き出るの?色々改造したよ堂々完成!まとめ写真は複数枚見せたくて、でも、オシャンにしたい、どうしようお母さん既にデザインは出来上がっていたので、形を変えるとかでは無く、写真が複数枚切り替わる時のトランジション(移り変わり)を工夫しよう!と思いました。検索した中で、あ!これはマッチするんじゃないの?と思ったのがこちら。Artiukhさん作)https://tympanus.net/Development/webGLImageTransitions/index6.htmlこの参考のやつみたいに、切り替わりの時に何かウニョっと動く感じ、お洒落で使えるんじゃ?と思ったんです。そのままだと、自動切り替わり、次の写真の切り替わりボタン(ドット)、スマホ対応されていたなかったで改造して使いました。どんな仕組みで「K」ロゴが浮き出るの?これは単純ではあるんですが、上の図のようなモノクロのマスクを活用しているんです。マスクの白い部分、黒い部分でそれぞれウニョっと動く動きが変わります。モノクロの方がイメージしやすいので、モノクロにしていますが、グラデーションも活用できるので、それっぽいグラデーションを活用したマスク画像を作成しました。ちなみに、ある程度エッジを際立たせないとボヤけてカッコ悪い感じになってしまうので、マスク画像作る場合は気を付けないといけないですね。マスクの作り方次第でいろんな動きがつけれますよ!色々改造したよ前述の通り、標準だと存在しない機能があります。自動切り替わり次の写真選択ボタン(ドット)スマホ対応(レスポンシブ)これらをちょっと教えてもらいながら実装しました。基本的には標準だとクリックで次の写真に切り替わるのですが、それを時間で切り替わるようにし、写真の数をカウントして次の写真選択ボタンを作り、スマホの時だとマスク画像がおかしくなってしまうので、スマホ専用のマスク画像を表示するようにしました。完成!そんなこんなで完成しました。エッジを際立たせたマスク画像を作成する事で、綺麗に「K」のロゴマークが表示され、写真の綺麗さと相まって、美しいトランジションが完成しました。NOW」発刊しました。Blog滞在2時間、普通に熊が出ます。山形の秘境「板谷駅」で初秋を切り取る。Blog人生に、ホームフォレストを。Blog気になるワード。Direction気になるワード。NOW」発刊しました。usホームページやインターネット広告などに関するご相談、ご質問などお気軽にお問い合わせください。お見積りやご相談はすべて無料で承ります。