jQueryスライダー系プラグインの「slick」を使ったフェードインしながら画像が切り替わるスライドを紹介します。
slickを使ったfade-in-outスライダー実装方法【jQuery】
webデザイン
WAVEアニメーションを使ったメインビジュアル【webデザイン】
メインビジュアルに使える波型のアニメーションを紹介します。
webデザイナーのプロも愛用する参考書4選【参考書選び】
webデザイナー初心者にオススメするこれだけは持っておくべき参考書を4つ紹介します。
radioboxを使った画像のスライダー実装方法【CSS】
<input>タグのラジオボックスを使ったスライダーを作成しました。定番のスライダーなので使いこなせるようになりたいですね。
【webデザイナー必須】URLをQRコード化してスマホで見る方法
webデザインを作成する上で今ではスタンダードになっているスマホファースト。PCよりSPからの閲覧者が多くなった現在、SPデザインを作成することが多いと思います。今回はSPデザインの確認を行うときにオススメの方法を紹介します。
ネオンのように光るホバーエフェクトボタン【CSS】
ネオンのように光るボタンをホバーエフェクトで作成してみました。ダークなサイトなんかに使えそうです。
BAKEのMVのホバーエフェクトを真似てみた【webデザイン】
BAKE抹茶チーズタルトのサイトのメインビジュアルのホバーエフェクトが好きだったので、真似てみました。Javascriptを使ったホバーエフェクトを使っているので、ぜひ参考にしてみてください。
一文字ずつテキストを表示させるアニメーション【タイプライター風】
タイプライターで文字を入力するようにテキストが一文字ずつ表示されるアニメーションを作成しました。webデザインの参考にいかがでしょうか。
背景に一枚の画像を使ったグリッドレイアウト【display-grid】
display : grid ;を使ったグリッドレイアウトを作成してみました。画面を等分に切り分けられるので、整理されたレイアウトをデザインしたい時にオススメです。
映画の予告風テキストアニメーション【UsingOnlyCSS】
今回は映画の予告や車のCMでよく見る、テキストアニメーションを紹介します。文字が左から浮き上がっていくアニメーションです。CSSのみで実装できますので、トライしてみてください。