実習5

アニメーション

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

左から1

左から2

左から3

左から4

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

テキストリンクのアニメーションその2

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

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;}}

ブロックのカスタマイズ

見出しH2

見出しH2

見出しH3

見出しH4

見出しH5

フォントサイズ デフォルト、行の高さ 1.5
その時私の受けた第一の感じは、Ｋから突然恋の自白を聞かされた時のそれとほぼ同じでした。私の眼は彼の室の中を一目ひとめ見るや否いなや、あたかも硝子ガラスで作った義眼のように、動く能力を失いました。

フォントサイズ 18px、行の高さ 1.4
私は棒立ぼうだちに立たち竦すくみました。それが疾風しっぷうのごとく私を通過したあとで、私はまたああ失策しまったと思いました。もう取り返しが付かないという黒い光が、私の未来を貫いて、一瞬間に私の前に横たわる全生涯を物凄ものすごく照らしました。そうして私はがたがた顫ふるえ出したのです。

それでも私はついに私を忘れる事ができませんでした。

私はすぐ机の上に置いてある手紙に眼を着けました。それは予期通り私の名宛なあてになっていました。私は夢中で封を切りました。しかし中には私の予期したような事は何にも書いてありませんでした。私は私に取ってどんなに辛つらい文句がその中に書き列つらねてあるだろうと予期したのです。そうして、もしそれが奥さんやお嬢さんの眼に触れたら、どんなに軽蔑されるかも知れないという恐怖があったのです。

装飾文字 shadow1

デザインのトレンド､かっこいいグラデーションを実装

• りすとあああ
• りすといいい
  りすといいい
• りすとううう

	ラベル1	ラベル2	ラベル3
1	a1	a2	a3
2	b1	b2	b3
3
4
5