実習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
その時私の受けた第一の感じは、Kから突然恋の自白を聞かされた時のそれとほぼ同じでした。私の眼は彼の室の中を一目ひとめ見るや否いなや、あたかも硝子ガラスで作った義眼のように、動く能力を失いました。

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

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

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

装飾文字 shadow1

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

  • りすとあああ
  • りすといいい
    りすといいい
  • りすとううう
ラベル1ラベル2ラベル3
1a1a2a3
2b1b2b3
3
4
5
登別温泉の鬼提灯北海道-登別
星峠の棚田新潟県十日町市
星峠の棚田新潟県十日町
水辺の桜兵庫
水辺の桜兵庫