跳んだ！消えた！動きがかわいい、スクリプト紹介

こんにちは。最近「貝だしのボトル味噌汁」にハマっている小宮です。

制作部ではホームページ制作や新規ページの追加などが増えバタバタしてきました。

作るにあたってアイデアを集めるためにいろいろなホームページを参考にするのですが、見ていると「こんな動きもできるんだ！」というものがあります。

そこで今回は私が見つけた面白い「スクリプト」を紹介します。

そもそも「スクリプトとは何ぞや？」

スクリプト（＝script）は、もともと「台本」「原稿」「脚本」「下書き」などという意味を持つ言葉です。IT業界では簡易的なプログラムとして用いられる用語です。

メモ帳などのテキストエディタを用い、特定のファイル拡張子を付けて保存したプレーンテキストファイルのことを指します。つまり、メモ帳があればスクリプトを作成することができるというわけです。

その他、フリーのテキストエディタにはWindows対応の「Tera Pad」「サクラエディタ」、Mac対応の「CotEditor」などがあります。

簡単にいうと「ここでこう動いてくれ」という命令文です。画像が右から左へスライドしていくことも、スクリプトで命令して動いています。

1.Hover.js

マウスカーソルをボタンに乗せたときのアニメーションをつけてくれます。ブルブル震えたり、上から色が変わったりいろいろな動きを設定できます。

2.shapeshift.js

見たことある人もいるのではないでしょうか。レスポンシブデザイン（端末の幅によってレイアウトが変わるデザイン）のサイトで使われています。上にあるデモコントロールでどの順番で改行するか確認できます。

3.Enllax.js

スクロールに合わせて画像を動かすことができます（デモサイトでは風船の画像が飛んでいます）。上下左右はもちろん、早さも設定できます。

4.skrollr.js

こちらもスクロールに合わせて動くタイプのスクリプト。背景の水玉は遠ければ遅く、手前側にあれば速く動きます。また、文字を回転させたり横からニュッと出たりできます。

5.roundslider

ダイヤルやメーターみたいな円を設置することができます。ついつい動かしたくなっちゃいます。

などなど、ホームページで出来ることって多いんです。

ただ注意しなければならないのが、動きが多ければその分、サイトが重くなります。

読み込みが遅くてイライラするホームページになってしまったら意味がありません。

適度にいれていくことが大切です。

そして、なんといっても見やすいことが大前提です。

私もページを作っているとき、ふと遠めに見て見やすくなっているか、わかりやすいデザインになっているかと何度も確認します。

伝えたいことがしっかりわかる、そんなホームページを目指しています！

┏━┓…────────────────────────────────────
┃◇　住宅会社・工務店・リフォーム会社専門のWEB 集客コンサル　／　株式会社チタン
┗━━…────────────────────────────────────

■チタンfacebook『Web制作・集客｜株式会社チタン』
https://www.facebook.com/titun.jp

Tweet