こんにちは、okutani(@okutani_t)です。みなさんはWebサイトに動きをつけるとき、どうしていますか？ 『Animate.css』 と『wow.js』を組み合わせて使うことでお手軽かつシンプルにWebサイトに動きをビュンビュンつけることができます。ええ、そりゃあもうビュンビュンに。 このふたつを使うことで、ほとんどプログラミングせずに動きのあるサイトが作れます。 なぜ、このふたつを使うのか、それぞれの役割をかんたんに説明します。 Animate.css 文字通りWebサイトにアニメーションをつけることができるcssファイル。Animate.cssはWebサイトが読み込まれた瞬間に発動してしまうので、一般的にwow.jsと組み合わせて使う。 wow.js Webサイトのスクロール位置を知ることができる。wow.jsを使うことで、好きなタイミングでAnimate.cssを呼ぶこと

asahi.comが登場して20周年記念で、開設当時の様子を再現したページが公開されています。 トップページでリンクしているニュース記事は2015年8月10日の最新のものだが、ページデザインは横480ピクセルに収まるサイズで作られており、背景色はシルバー（bgcolor="#c0c0c0"）で、「HTML 3.0をベースにデザインしています。Netscape 1.x の使用を推奨します。」との注意書きもある。 Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch（Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch） 画像出典：Asahi NewsPaper Index（Asahi.com） 懐かしいですね。灰色の背景と

近年、見かけることも少なくなった「marquee（マーキー）」ですが、元々はIEの独自機能でもあったため、HTMLでは非推奨とされ消えていきました。 そんな「marquee」のテロップ的動きをコンテンツに組み込みたいな～と考えたとき、CSSだけでなんちゃってマーキーが表現できるので、どうしてもって時は“アリ”かもしれません。 まずはサンプルをご用意しましたので確認してみてください。 デモサンプル それでは記述方法を見ていきましょう。 HTML記述 <h2>右から左へ文字が流れていきます。</h2> <div class="imageBox"><img src="images/autumn.jpg" width="100%" /></div> <div class="marqueeRightLeft"><p>ここにマーキー文字を流します。</p></div>