movie
Pocket

映画のワンシーンをJavascriptで作ってみよう!という勉強会に参加しました。

映画とJS

JavaScriptってWeb初心者からすると取っ付きにくい感じがしますし、
本を読んだり勉強しても、けっきょく実践でどう使えばいいか分からず、なかなか覚えられなかったりします。

この勉強会では作るテーマが最初からあって、それを作るためにどうすればいいか試行錯誤するので、頭に入りやすい勉強会でした。

つくるもの

今回は、スターウォーズのオープニングを作りました。

テキストが手前から奥に向かって流れていくやつです。

こちらの動画の23秒あたりから。

最初に「A long time ago in a galaxy far,far away . . . .」が表示されて、フェードアウト。
そしてロゴがドンッと出てきて、どんどん奥へ移動します。

そして、ロゴが見えないぐらい小さくなったあたりで、下からテキストが出てきて奥へスクロールしていきます。

完成品はこちら。
ロゴ使ったらダメだと思うので、スターウォーズのパロディということで「サルカニ合戦」にしています。

chromeで見てください。

GitHub Page

ソースはこちら

GitHub

実装について

この一連の動きは、CSSとJavaScriptでやっています。

奥行きやアニメーションをCSSで指定し、ロゴが出てきたりテキストがスライドしてくるタイミングをJavaScriptで設定しています。

抜粋するとCSSのアニメーションはこんな感じです。

.titleanimation {
  display: block;
  -webkit-animation: titlescale ease 15s;
  -moz-animation: titlescale ease 15s;
  -ms-animation: titlescale ease 15s;
  animation: titlescale ease 15s;
}

@-webkit-keyframes titlescale {
	0% {
    -webkit-transform: scale(3.0);
  }
  2% {
    -webkit-transform: scale(2);
  }
	100% {
    -webkit-transform: scale(0.01);
  }
}

@keyframes titlescale {
  0% {
    transform: scale(3.0);
  }
  2% {
    transform: scale(2);
  }
	100% {
    transform: scale(0.01);
  }
}

ロゴが小さくなっていくアニメーションの部分です。

CSSでアニメーション用のclassを作って、JavaScript(jQuery)でタイミングに合わせてこのclassを追加し、アニメーションさせたり、テキストを消したりしています。

setTimeout(function(){
  $(".intro").fadeOut();
},3000);

setTimeout(function(){
  $(".title").addClass("titleanimation");
},4500);

setTimeout(function(){
  $(".title").fadeOut();
},15000);

setTimeout(function(){
  $(".textinner").addClass("textanimation");
},8000);

これはあくまで実装の一例です。

CSSは一切使わず、JavaScriptだけで実装した人や逆にCSSだけで実装した人もいました。

CSSでアニメーションのタイミングはどうするかというとanimation-delayというCSSプロパティでアニメーションが始まるタイミングを指定できます。

.titleanimation {
  animation-name: titlescale;
  animation-delay: 8s;
}

CSSでできることかなり多くなってますね。

さいごに

JavaScriptで映画のワンシーンを作ろうとすると、普段の業務で使わないような技術をつかったりするので楽しかったです。

実装方法もみんなそれぞれで、それを聞くのも面白いです。

次回は何をやるんですかね。
懇親会ではアニメやゲームのワンシーンでもいいねという話をしていました。

Pocket