大島学習塾のブログ

ホームページ以外にはあまり使い道はなさそうですが、SNSなどで使えるシーンがあれば使っていこうと思います。

このアニメーションは、ホームページを表示しているのと同じ、PHP（Hypertext Preprocessor）とCSS（Cascading Style Sheets）という技術を使って作られています。

少し専門的な（？）話になりますが、当塾のロゴマークはSVG（Scalable Vector Graphics）という画像フォーマット（拡張子は.svg）で作られています。
これはAdobe Illustratorというお絵かきをするソフトで作ることができます。
この画像フォーマットの特徴は、デジカメ等で撮った写真などと違い、拡大してもギザギザにならずにキレイに表示されることです。
画像ファイルの中に「この座標にこういう曲線をこの線の太さで描く」のように図形のデータが入っており、拡大率にあわせて画面表示されるので、キレイに表示されるというワケです！

今回は、もともとあった塾のロゴマークのSVG（を少し加工したもの）を、ホームページを記述しているPHPに取り込み、それをCSSのアニメーション機能で動かすという方法でモーションロゴを作成しました。

もともとこういうものを作るのが好きだし、いろいろやり方を調べたりして作っていくのは楽しいです^^