2020-10

CSS

ブレンド・モードとスクロール・スナップを使ったエフェクト

今回はフルスクリーンでで表示させるエフェクトにつき、2種類の効果を使ったもので紹介します。 スクロールごとにバックグランド画像と色をブレンドさせながら表示させる効果と、少し動かしたスクロールでも表示領域の位置へ止まってくれるスクロール・スナップ を実装させたエフェクトです。(CSS)
CSS

【シンプルに実装】バックグランド・アニメーション

バックグランドをシンプルなアニメーションで表示させます。手軽にコピペするだけで、即実装できますので、お試しくださいね。😀 (HTML,CSS) 擬似クラス(nth-child)を使って10ヶ分の子要素に時間の動きや位置を変えてアニメーションをかけます。
JavaScript ( jQuery )

【お役立ち】マウスポインタの座標を取得させて横にテキストを吹き出しさせる

マウスポインタが要素内にホバーした時にどの位置からもポインタ横に吹き出しを表示させる方法をご紹介します。文章内のキーワードなどに対して説明を吹き出し表示させてあげるのに、とても便利です。(CSS,jQuery)
JavaScript ( jQuery )

【簡単です】スクロールさせ左右から可視出来るコンテンツをスライド表示

スクロールをさせて行くと、コンテンツが左右からスライドしながら現れます。カード状のコンテンツがよく上下左右からポップアップしながらフェードインするのもありますが、Window内の可視できるコンテンツ全体をスライドさせるのも面白いですね。(CSS,jQuery)
CSS

【読込み中の待機時間に】シャッター・アニメーション(自由にカスタマイズ)

ウェブページが読み込み中であることを、分かりやすく伝えてくれるローディングアニメーション。ページコンテンツの読み込み完了までのの些細な時間でも、遊び心でユーザーを飽きさせない為の仕掛けは必要ですね。(HTML,CSS)
CSS

【天空の城】雲をリアルにアニメーション化させたエフェクト

雲をリアルに動かして、幻想的に見立てるアニメーションです。 実はこのエフェクト、マチュピチュの画像とPNG形式(透明)の雲の画像を使って簡単にアニメーション表示させてるだけなんですよ。 (HTML,CSS)
タイトルとURLをコピーしました