2019年11月15日(金)
Appleの商品ページに使用されているスクロールに合わせて動画を再生するエフェクトを実装するスクリプト -Scrolleo
/* Scrolleo - make your video scroll with inertia
* MIT License - by Mark Teater
*/
(function(window, document, undefined) {
"use strict";
var _Scrolleo = function(opts) {
// Defaults
this.acceleration = 0.08; //1 is fastest, 0 is slowest, 0.08 is default
this.secondsPerScreen = null; //Set this to the length of the video. "1" is 1 second.
this.additionalOffset = 0; //Add or subtract pixels to when the video will start. "10" means that the video will start 10px earlier.
this.wrapperEl = null;
// ...
author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
JavaScript:filter()を使って配列内の重複要素を削除・取得したり、2つの配列から共通要素を取得する方法
NEXT ›
素敵な配色本を見つけた!イメージにぴったりな配色が必ず見つかる -配色デザインインスピレーションブック 2
関連記事
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『Appleの商品ページに使用されているスクロールに合わせて動画を再生するエフェクトを実装するスクリプト -Scrolleo』についてまとめています。
この記事は特にjavascript・アニメーションについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。