MacBookのアレをサクッと書いてみた

これやりたい

Macbook Animation Gif

これです。 スクロール量に応じてMacbookがアニメーションされるやつです。

どうやって実装しているかの技術調査でサクッと書いてみました。 仕組みは以外にも単純でしたが本当に目からウロコがでました。ともかくサンプルコードを見てください。

ざっくり書いただけ、内容はダメダメなのでご了承ください。 書きなぐりなので、誰か綺麗に書いてください。

あと、サンプルを試すときはMacbookのサイトからmp4ファイルをダウンロードしておいてください。

MacBook

サンプル

app.js
1
2
3
4
5
6
7
8
9
10
$(function(){
  var video = $('.macbook_movie').get(0);
  $(window).scroll(function(){
      var topPos = $(window).scrollTop();
      var maxHeight = 5000;
      var maxVideoTime = 6;
      video.currentTime = maxVideotime / maxHeight * topPos;
      $('.macbook_movie').css({'top': topPos + 'px'});
  });
});
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="style.css" media="all">
</head>
<body>
  <div class="video_area">
      <video class="macbook_movie" type="video/mp4" src="macbook.mp4"></video>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="app.js"></script>
</body>
</html>
style.css
1
2
3
4
5
6
7
8
9
.video_area {
  position: relative;
  height: 5000px;
}

.macbook_movie {
  position: absolute;
  top: 0;
}

ざっくりした解説


mp4ファイルをスクロール量に応じてコマ送りで再生している。ということでした。 あとは要素の位置を変更しているだけなのかな??

実際のAppleのサイトでは、アニメーション(Videoの再生)が完了されるまで画面自体はスクロールされない。 等の差異は有りますが、ざっくり仕組みを知ることが出来ました。

皆さんもこの仕組みを試してみてください。