Appleの商品ページに使用されているスクロールに合わせて動画を再生するエフェクトを実装するスクリプト -Scrolleo

Appleの新商品は商品自体にワクワクするだけでなく、商品の見せ方・ページのデザインに注目する人も多いと思います。

11/13に発表された16インチ MacBook Proの商品ページに使用されているようなスクロールに合わせて動画を再生するスクリプトを紹介します。
「こういうページにしてよ!」という時用にチェックしておきたいですね。

サイトのキャプチャ

参考: 16インチ MacBook Pro -Apple

LyftでモーショングラフィックスやWebサイトからUIアニメーションなどを手がけているMark Teater氏が開発中のスクリプトで、Appleで最近よく使用されているスクロールに合わせて動画を再生するエフェクトを再現するためのシンプルなプラグインです。実際の動作は、下記ページで楽しめます。
100pxのスクロールで、動画を6秒のみ再生します。

See the Pen
Scrolleo
by Mark Teater (@markteater)
on CodePen.

HTML

動画コンテンツを配置します。

JavaScript

requestAnimationFrameを使用し、複数のカスタムスクロールビデオを簡単に作成できます。
JavaScriptは、MITライセンスで利用できます。

下記をベースにした、とのことです。

サイトのキャプチャ

Scrolling controls for HTML5 video

sponsors

top of page

©2019 coliss