JavaScript ( jQuery )

こんにちは。 今回は画像にclip-pathを用いて形状を指定することにより、外形の凹凸に合わせたテキストの流れ込みをアニメーションで表示させたエフェクトを紹介します。 テキストの要素をShapesプロパティにより、凹凸の形に変形しながら移動・回り込みするさまが楽しいです。

こんにちは。 今回は、過去に取り上げた「フリップ・カード・アニメーション」の第二弾として、jQueryでCSS trasform プロパティに変化をつけて簡単なカード・アニメーションを紹介します。 カード内のコンテンツ・スペースに手を加えて、楽しくしたり、オシャレにしたりと、好みにデザインしてみたらどうでしょう。😜 (CSS,jQuery)

こんにちは。今回はtransformを使用して、スクロールさせながら現れる可視領域を、遠近感のあるアニメーションで表示させて遊んでみました。過去にも可視化させるコンテンツをアニメーション表示させる記事を書きましたが、これも単純で面白いですよ。(HTML,CSS,jQuery)

今回はトップのバックグランドの画像を曲線にして、Parallax（パララックス）風のオープニングページと、マウスをクリックした際に、クリックした座標をもとに「波紋」のようなアニメーションを発動させるショートページを作ります。(CSS,JavaScript)😀

今回は画像を円状にフェードインさせる効果と、テキストの要素をホバーさせると虹のように色彩を変えながら綺麗に演出させてあげるエフェクトをご紹介します。 綺麗に演出させる効果としていかかですか。(HTML,CSS,jQuery)

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

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

カード全体の領域にポインターを置くと、下からアイコンが１ヶづつ順番に浮き上がって来るアニメーションです。 アイコン単一にホバーすると光を発しながら回転し、領域から外れると、ボタンが順番にゆっくりと下に降りて消えて行きますよ。(CSS,jQUERY)

再生させているムービーからスクロールをかけると「円状に段々と大きさに変化がおきる」エフェクトです。このアピールの仕方は、とても気にいっています。😍 (HTML,CSS,jQuery)