CodeHiveCodeHive
CodeHive
Animation Demo

テキスト要素が表示されると、蛍光ペン風マーカーで装飾する

このページでは、スクロールしてテキストが表示されると、マーカーで装飾するアニメーションを紹介します。

  • 一度だけアニメーションを発火する
  • 要素が表示されるたびにアニメーションを発火する

上記の2パターンを用意しています。

一度だけアニメーションを発火する

以下のテキストは、画面内に入った最初の一回のみアニメーションが発火します。

こちらはダミーテキストです。このテキストが表示されると、マーカーが引かれます。このアニメーションは、最初にこのテキストが表示された時に、一度だけ発火します。

こちらはダミーテキストです。このテキストが表示されると、マーカーが引かれます。

こちらはダミーテキストです。このテキストが表示されると、マーカーが引かれます。このアニメーションは、最初にこのテキストが表示された時に、一度だけ発火します。

こちらはダミーテキストです。このテキストが表示されると、マーカーが引かれます。

こちらはダミーテキストです。このテキストが表示されると、マーカーが引かれます。このアニメーションは、最初にこのテキストが表示された時に、一度だけ発火します。

こちらはダミーテキストです。このテキストが表示されると、マーカーが引かれます。

こちらはダミーテキストです。このテキストが表示されると、マーカーが引かれます。このアニメーションは、最初にこのテキストが表示された時に、一度だけ発火します。

こちらはダミーテキストです。このテキストが表示されると、マーカーが引かれます。

要素が表示されるたびにアニメーションを発火する

こちらのテキストは、画面内に入るたびにアニメーションが発火します。
一度テキストが画面外に出ると、アニメーションがリセットされます。

こちらはダミーテキストです。このテキストが表示されると、マーカーが引かれます。このアニメーションは、画面に表示されるたびに発火します。

テキストが画面外に出てからもう一度入ると、アニメーションが再発火します。

こちらはダミーテキストです。このテキストが表示されると、マーカーが引かれます。このアニメーションは、画面に表示されるたびに発火します。

テキストが画面外に出てからもう一度入ると、アニメーションが再発火します。

こちらはダミーテキストです。このテキストが表示されると、マーカーが引かれます。このアニメーションは、画面に表示されるたびに発火します。

テキストが画面外に出てからもう一度入ると、アニメーションが再発火します。

こちらはダミーテキストです。このテキストが表示されると、マーカーが引かれます。このアニメーションは、画面に表示されるたびに発火します。

テキストが画面外に出てからもう一度入ると、アニメーションが再発火します。

CONTACT US! CONTACT US! CONTACT US!

CONTACT US! CONTACT US! CONTACT US!

CONTACT US! CONTACT US! CONTACT US!

アニメーション制作なら
コードハイブにご相談ください!

お問い合わせ
CodeHive