アニメーション

ページを表示した時にアニメーション

Webページにアニメーションを実装するクラスを紹介します。
ページを表示した時に要素をアニメーションで表示、スクロールした時に要素をアニメーションで表示など、最近見かけるアニメーションを実装しています。

それからの私はほとんど論文に祟たたられた精神病者のように眼を赤くして苦しんだ。私は一年前ぜんに卒業した友達について、色々様子を聞いてみたりした。そのうちの一人いちにんは締切しめきりの日に車で事務所へ馳かけつけて漸ようやく間に合わせたといった。他の一人は五時を十五分ほど後おくらして持って行ったため、危あやうく跳はね付けられようとしたところを、主任教授の好意でやっと受理してもらったといった。私は不安を感ずると共に度胸を据すえた。毎日机の前で精根のつづく限り働いた。でなければ、薄暗い書庫にはいって、高い本棚のあちらこちらを見廻みまわした。私の眼は好事家こうずかが骨董こっとうでも掘り出す時のように背表紙の金文字をあさった。
梅が咲くにつけて寒い風は段々向むきを南へ更かえて行った。それが一仕切ひとしきり経たつと、桜の噂うわさがちらほら私の耳に聞こえ出した。それでも私は馬車馬のように正面ばかり見て、論文に鞭むちうたれた。私はついに四月の下旬が来て、やっと予定通りのものを書き上げるまで、先生の敷居を跨またがなかった。

スクロールに連動するアニメーション

HTMLは要素に､以下いずれかのclassとdata属性を用いる。

class="animate anidown" data-animate="anidown 2s"
class="animate anileft" data-animate="anileft 2s"
class="animate aniback" data-animate="aniback 2s"
class="animate anirotate" data-animate="anirotate 2s"
class="animate aniright" data-animate="aniright 2s"
class="animate aniup" data-animate="aniup 2s"

スクロールに連動するアニメーションの実装にはIntersection Observerという機能を使用します。以下､JavaScriptコードを示します。

<script>
const callback = (entries) => {
// The entries variable will contain the list of
// elements that you are observing. When ever 
// intersection occurs, you need to do forEach loop 
// to find which one intersected. 
// For this we check a flag on the element called "isIntersecting"
entries.forEach(
  (entry) => {
    if (entry.isIntersecting) {
      console.log("The element is intersecting >");
      //If intersecting then attach keyframe animation.
      //We do this by assigning the data attribute 
      //we coded in the markup to the style.animation 
      //of the element
      entry.target.style.animation = 
      entry.target.dataset.animate;
    } else {
      //We take of the animation if not in view
      entry.target.style.animation="none";
    }
  });
}

//1] Create a new intersectionObserver object, 
//which will accept a callback function as a parameter.
let observer = new IntersectionObserver(callback);

//2]Select all elements that have ".animate" class.
//In our case we have three elements (.image,<p> and h<2>).
const animationItems = document.querySelectorAll('.animate');

//3]Loop through selected elements and add to the observer watch list.
animationItems.forEach(item => {observer.observe(item) })
</script>

アニメーションアンカー

aタブ(Anchor、リンク)へマウスを乗せたときのアニメーションです。テキスト及び画像のアニメーション例です。

テキストリンクのアニメーションその1 class=”aniline”

テキストリンクのアニメーションその2 class=”aniline2″

タイトルのアニメーション

WordPressで作られたHPのタイトルにアニメーションを付ける。
各自で､自分のホームページのタイトルにアニメーションを付けてみよう。

テーマ:Huemanの例

パソ隊HP https://pasotai.org/
ロゴの設定 外観-カスタマイズ-ヘッダーデザイン-サイト情報:ロゴ(logo画像を設定)
ロゴ(logo.png)のソース
<p class="site-title">
  <a class="custom-logo-link" href="https://pasotai.org/" rel="home" title="パソコン楽しみ隊 | ホームページ"><img src="https://pasotai.org/wp-content/uploads/logo.png" alt="パソコン楽しみ隊" width="1382" height="492"/></a>
</p>
 
class="site-title"に対しアニメーションのクラスを設定する
.aniback, p.site-title {animation:animefromback 1.4s ease backwards;}
@keyframes animefromback{ 0%{ transform:scale(0); opacity:0;} 100%{ transform:scale(1); opacity:1;}}

テーマ:Twenty Twenty-Oneの例

太郎のホームページ http://hpwg.wp.xdomain.jp/
タイトルのソース
<h1 class="site-title">太郎のホームページ</h1>
    <p class="site-description">Just another WordPress site</p>
 
class="site-title"に対しアニメーションのクラスを設定する
.aniback, h1.site-title {animation:animefromback 1.4s ease backwards;}
    @keyframes animefromback{ 0%{ transform:scale(0); opacity:0;} 100%{ transform:scale(1); opacity:1;}}
    .anileft, p.site-description {transform-origin:left center; animation:anileft 1s both; animation-delay:1s;}
    @keyframes anileft {0%{transform:translate(-3em,0);opacity:0;text-shadow:0 0 0 #0f0;} 50%{text-shadow:0 0 1.0em #0f0;opacity:0.5;} 100%{transform:translate(0,0);opacity:1;text-shadow:none;}}

テーマ:Lightningの例

ホスピスケアを広める会 http://hpwg.wp.xdomain.jp/
タイトルのソース
<h1 class="navbar-brand siteHeader_logo">
<a href="http://hoscare.wp.xdomain.jp/">
<span>ホスピスケアを広める会</span>
</a>
</h1>
 
class="siteHeader_logo"に対しアニメーションのクラスを設定する
(外観-カスタマイズ-追加 CSS に設定する)
.aniback, h1.siteHeader_logo {animation:animefromback 1.4s ease backwards;}
@keyframes animefromback{ 0%{ transform:scale(0); opacity:0;} 100%{ transform:scale(1); opacity:1;}}