JavaScript ( jQuery ) 【動的に貼り付く】スクロール時にCSS Shapesを使ってテキストをアニメーション表示させてみる
こんにちは。
今回は画像にclip-pathを用いて形状を指定することにより、外形の凹凸に合わせたテキストの流れ込みをアニメーションで表示させたエフェクトを紹介します。
テキストの要素をShapesプロパティにより、凹凸の形に変形しながら移動・回り込みするさまが楽しいです。
JavaScript ( jQuery ) 
LIFE 【平常心になるために】人のイライラの種は対人関係からくるもの？自分の問題？
自分が感じるイライラは一体どこからやって来るのでしょうか？
その原因となる「種」は対人関係によるもの？、それ以外であっても、ひとまず心を落ち着かせてみましょう。そんな不平不満など感じたとき、心を落ち着かせ、以前より聞きながせる方法があります。
JavaScript ( jQuery ) 【フリップカードアニメーション】カードを変化・移動させてコンテンツ内を楽しく見せよう
こんにちは。
今回は、過去に取り上げた「フリップ・カード・アニメーション」の第二弾として、jQueryでCSS trasform プロパティに変化をつけて簡単なカード・アニメーションを紹介します。
カード内のコンテンツ・スペースに手を加えて、楽しくしたり、オシャレにしたりと、好みにデザインしてみたらどうでしょう。😜 (CSS,jQuery)
JavaScript ( jQuery ) （第二弾）可視領域を遠近感のあるアニメーションで表示させたい
こんにちは。今回はtransformを使用して、スクロールさせながら現れる可視領域を、遠近感のあるアニメーションで表示させて遊んでみました。過去にも可視化させるコンテンツをアニメーション表示させる記事を書きましたが、これも単純で面白いですよ。(HTML,CSS,jQuery)
LIFE 得体の知れない不安を小さくさせたい（心のモチベーション）
心が晴れなく「漠然とした不安」を抱えてしまうほど、やっかいなものはありません。なにが不安なのか寂しいのか、怖いのか、わからない状態。残念ながら最終的にそのような不安を解消する万能薬はありません。何事も「解決するのではなく、対処する」という姿勢を保ちながら、少しの行動を起こすだけで、状況はよくなります。
LIFE 【デジタル・デトックス】生活リズムの改善やデジタル疲れから守るために
仕事・生活面では手放さすことが出来なくなっている身近な電子機器を使用していることが、今まではなかったカラダの不調を感じる要因になっているかもしれません。そんなデジタルな生活に付き合っていくには、適度に「デジタル・デトックス」を行いましょう。少しの時間でも遠ざけることで、生活のリズムが戻ったり、体調が改善されます。
LIFE 【よい印象に】単なる雑談でも上手な始め方があります（初対面）
何事にも準備は大切ですね。
会話をする際は、雑談でさえ「よい印象」や「安心感」を与える準備が必要です。ふだんの会話でも上手な始め方さえ知っていれば、自然ないい印象でスタートがきれるはずです。" 初対面 "でも第一印象の大切さを心得ておきましょう。
CSS 【CSSのみで可能】アイコンの画線の色を変えてみたい
写真などの画像全体にフィルターをかけて色を変える（セピア色など）方法はよく見かけるのですが、たとえば、シンプルなPNG形式のアイコンで作画されたキャラクターの画線のみに色の変更をくわえたい場合、どうしたらいいでしょうか？それをCSSだけで可能にさせる方法を記事にしてみました。😀
LIFE 【毎日をさわやかに】見栄を張るのをやめて楽な心をとり戻す
「周囲にどう思われるか」を起点に理想を描いたりすることはありますか？
他人の目を優先し、「ありのままの自分」の姿や本心をごまかして振る舞うと、心が疲弊してしまいます。見栄を張ることをやめて、理想と現実のギャップに苦しまないためのお話しです。
JavaScript ( jQuery ) 【CSS JavaScript】曲線の背景とクリックした座標に「波紋」アニメーションをかける
今回はトップのバックグランドの画像を曲線にして、Parallax（パララックス）風のオープニングページと、マウスをクリックした際に、クリックした座標をもとに「波紋」のようなアニメーションを発動させるショートページを作ります。(CSS,JavaScript)😀