読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

【HTML】画像を動画っぽく表現してみる

 chuckです。

オシャレなサイトを発見しました。こちらです。

www.startup50.jp

 

こちらのTOPページの背景画像が動いている(ように見える)んですよね。

f:id:chuck0523:20150921225645p:plain

 

面白いなーと思ったので、自分なりに再現してみます。

 

 

作ったやつ

f:id:chuck0523:20150921225839p:plain

http://chuck0523.github.io/front-end-coding/imageLikeVideo/index.html

 

こちらです。背景が動いているように見えます。

 

要は背景画像が拡大と縮小を繰り返しているだけです。が、位置がちょっと残念ですね。

画面の中心を軸に拡大・縮小してほしいのですが、今回は時間切れ…。 

 

詳細はコードを参照ください。 

 

書いたコード

メタ言語で書いたので、ちょっと読みづらいかも…。

gist4f73d4c41bb5f437eb0e

 

gistde33ca00b025d9d1c2d6

 

gist8bb2790f595402115a6a

 

メタ読める方はこちらも!

gistae30527eea53c0be73c5

 

gisteb1c0b917b96dd962409

 

gistacb9eae956d2c80fdeee

 

参考にしたサイト

文字サイズをこれで指定してみました。

dev.classmethod.jp

 

背景画像の指定に。

kawatama.net

 

なにげに初めてcoffeeでjQuery使いました!便利×便利って感じで良かったです。

www.webopixel.net

 

coffeeScriptでsetTimeoutをどう書くかの参考にしました。

tech.kayac.com

 

position() - jQuery 日本語リファレンス