flexコンテナの子要素の高さをそろえることはcssのflexレイアウトでデフォルトで可能すが、テキストエリアなどの孫要素の高さは対応をしなければ以下の様にバラバラになってしまいます。 .flex-card_bara .flex-img .flex-text texttext .flex-btn .flex-car…
SVGモーフィングとはベクターデータで作成された複数の図形を流動的に変化させるアニメーションです。 webデザインで使用すると背景アニメーションやローディングアニメーション、内容強調などで効果的に表現できます。 しかも実装はcssやjsを使用せずタグ内…
Luxy.jsの基本的な設定 読み込み HTMLの記述 パララックス効果の速度や方向の設定 視差効果の速度の設定 水平方向に移動 オフセット設定 ななめに動かす Luxyサンプル 今回はVanilla JavascriptのパララックスプラグインLuxy.jsをご紹介します。 普通パララ…
slickのプログレスバー 今更感があってなかなか記事にできなかったslickですが、なんだかんで使いやすく応用しやすいので役立ちそうな内容に絞ってまとめてみました。 slickの基本的な設定 読み込み 基本的な設定をする slickでエンドロールのように滑らかに…
ソースのコピペですぐ使えるマウスオーバーアニメーションについての解説とデモになります。 今回は忙しい人用にjsは使用せずにCSSの:hoverのみで作成しました。 普段のコーディングでマウスオーバーアニメーションを作成するときに1から作るのちょっとだる…
ちょっとおしゃれなサイトでよくみるスクロールアニメーションをinview.jsを使って簡単に確実に再現する方法を解説します。 正直「これが やりたかった」という人もおおいのではないでしょうか。 フェードインだけだと少し物足りないなぁ。でもjsのプログラ…
今回はスクロール表示の際にイベントを発生させるプラグイン「inview.js」と画像フィルターCSS（filter）を使用してスクロールしたときのアニメーションを作成していきます。 https://uhaha.net/scrolltrigger-batch/ inview.jsについて CDNでの読み込み ダ…
今回はスクロール時に要素をアニメーションとともに出現させることができるScrollTriggerを使ってデモを作ってみました。 GSAP-ScrollTrigger概要ライブラリ読み込み CDN Download ScrollTriggerを使った複数スクロールアニメーションサンプルデモまとめ GSA…
今回はグリッドレイアウトで表示されるアニメーションメニューExpanding Grid Menuをご紹介します。 Expanding Grid Menuとは GridMenu-master.zipの基本的な内容 今回のカスタム内容 Expanding Grid Menu デモ まとめ Expanding Grid Menuとは CSS Grid Lay…
ブラッシュアップポイント 今回はデザインのブラッシュアップについて初心者デザイナーさんが陥りやすいデザインの改善点を記録します。 カフェのピックアップメニュー部分をお題としてみます。クライアントの要望に沿ったという前提で ザインをブラッシュア…
multiScroll.jsというスクロール系jsプラグインの使ってコスメの商品ページ風のデモを作ってみました。デザイン性の高いプラグインなので少しの工夫でおしゃれなスクロールが作れます。今回は使い方とともにデザイン部分も含めてデモサイトの解説をしていき…
WEBサイトで3Dを取り入れてれば他のデザインパターンと差つけれるし、とにかくTOPページで印象づけに最適です。今回はそんなとき役立つコードスぺニットでthree.jsを駆使したものをcodepenからご紹介します。 実装の準備としてGLSL Glitchthree.js round 1Cu…
【WebGL】threejs 今回はcodepenで発見したおしゃれな霧のデザインのソースを解説していきます。※スクリプトゴリゴリいけないけどthree.jsは取り入れたいデザイナーさん&体験してみたいさん向けの記事になります。 WebGL Fog カスタマイズしてみる canvasを…
今回はモーダル系ライブラリのMicromodal.jsをサンプルデモ付きで解説していきます。アクセシビリティ対応を謳っているので今後モーダルライブラリの主戦力になる可能性も十分考えられます。 Micromodal.jsとはMicromodal.jsのインストールMicromodal.jsの基…
アニメーション、アラートに長けるモーダルウィンドウ系プラグイン iziModal .jsの使い方、サンプルの解説になります。上記に加えYouTubeやVimeoなどの動画 ・ GoogleMap ・ Ajaxの読み込み、フルスクリーンなども可能です。 基本的なiziModalの使い方クリッ…
ScrollRevealとはスクロール時にふわっと表示されるようなアニメーション設定に便利なプラグインです。今回はバージョンアップしたv4.0.7の基本的な使い方とcssアニメーションとの組み合わせでぼかしの表示の仕方を紹介します。 ScrollRevealの基本的な設定…
なんでもポップアップしてくれるモーダルウィンドウ系jQueryプラグインの使い方第2弾は 【 Modaal 】です。前回サンプル付きでをご紹介したMagnific Popupと比較しつつ解説していきます。 Modaalとは Modaalの基本的な使い方 画像（gallery）形式のポップア…
