JavaScript ( jQuery ) 【動的に貼り付く】スクロール時にCSS Shapesを使ってテキストをアニメーション表示させてみる
こんにちは。
今回は画像にclip-pathを用いて形状を指定することにより、外形の凹凸に合わせたテキストの流れ込みをアニメーションで表示させたエフェクトを紹介します。
テキストの要素をShapesプロパティにより、凹凸の形に変形しながら移動・回り込みするさまが楽しいです。
PROGRAMING
JavaScript ( jQuery ) 
JavaScript ( jQuery ) 【フリップカードアニメーション】カードを変化・移動させてコンテンツ内を楽しく見せよう
こんにちは。
今回は、過去に取り上げた「フリップ・カード・アニメーション」の第二弾として、jQueryでCSS trasform プロパティに変化をつけて簡単なカード・アニメーションを紹介します。
カード内のコンテンツ・スペースに手を加えて、楽しくしたり、オシャレにしたりと、好みにデザインしてみたらどうでしょう。😜 (CSS,jQuery)
JavaScript ( jQuery ) （第二弾）可視領域を遠近感のあるアニメーションで表示させたい
こんにちは。今回はtransformを使用して、スクロールさせながら現れる可視領域を、遠近感のあるアニメーションで表示させて遊んでみました。過去にも可視化させるコンテンツをアニメーション表示させる記事を書きましたが、これも単純で面白いですよ。(HTML,CSS,jQuery)
CSS 【CSSのみで可能】アイコンの画線の色を変えてみたい
写真などの画像全体にフィルターをかけて色を変える（セピア色など）方法はよく見かけるのですが、たとえば、シンプルなPNG形式のアイコンで作画されたキャラクターの画線のみに色の変更をくわえたい場合、どうしたらいいでしょうか？それをCSSだけで可能にさせる方法を記事にしてみました。😀
JavaScript ( jQuery ) 【CSS JavaScript】曲線の背景とクリックした座標に「波紋」アニメーションをかける
今回はトップのバックグランドの画像を曲線にして、Parallax（パララックス）風のオープニングページと、マウスをクリックした際に、クリックした座標をもとに「波紋」のようなアニメーションを発動させるショートページを作ります。(CSS,JavaScript)😀
PROGRAMING CodePenってご存じですか？（プログラミングを体験したい人に）
みなさん CodePen ってご存じですか？
プログラミングにチョット興味がある方、これから始めてみたい方でしたら、一度CodePenを実際にふれて見て下さい。無料で利用できる方法、簡単な操作方法を記事にしました。😀
JavaScript ( jQuery ) 【綺麗に飾ろう】円状フェードインと色彩をかさねたホバー効果
今回は画像を円状にフェードインさせる効果と、テキストの要素をホバーさせると虹のように色彩を変えながら綺麗に演出させてあげるエフェクトをご紹介します。
綺麗に演出させる効果としていかかですか。(HTML,CSS,jQuery)
CSS ブレンド・モードとスクロール・スナップを使ったエフェクト
今回はフルスクリーンでで表示させるエフェクトにつき、２種類の効果を使ったもので紹介します。
スクロールごとにバックグランド画像と色をブレンドさせながら表示させる効果と、少し動かしたスクロールでも表示領域の位置へ止まってくれるスクロール・スナップ を実装させたエフェクトです。(CSS)
CSS 【シンプルに実装】バックグランド・アニメーション
バックグランドをシンプルなアニメーションで表示させます。手軽にコピペするだけで、即実装できますので、お試しくださいね。😀 (HTML,CSS)
擬似クラス（nth-child）を使って１０ヶ分の子要素に時間の動きや位置を変えてアニメーションをかけます。
JavaScript ( jQuery ) 【お役立ち】マウスポインタの座標を取得させて横にテキストを吹き出しさせる
マウスポインタが要素内にホバーした時にどの位置からもポインタ横に吹き出しを表示させる方法をご紹介します。文章内のキーワードなどに対して説明を吹き出し表示させてあげるのに、とても便利です。(CSS,jQuery)