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

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

https://ift.tt/2XleygX

/* 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;

 

    // Override defaults

    if (opts) {

      for (var opt in opts) {

        this[opt] = opts[opt];

      }

    }

  };

 

  var targetScrollPos;

 

  _Scrolleo.prototype = {

    init: function() {

      var self = this;

      this.wrapper = document.querySelectorAll(this.wrapperEl);

 

      // get the location of the top of the page

      targetScrollPos = window.pageYOffset;

      Array.prototype.forEach.call(this.wrapper, function(wr) {

        // Set the pixelsPerSecond to the full duration of the video if nothing was set in the options

        if (self.secondsPerScreen === null) {

          self.wrapper[0].addEventListener(“loadedmetadata”, function() {

            self.secondsPerScreen = self.wrapper[0].duration;

            //recalculate values on video with new pixelsPerSecond

            self.distanceToTop = getElemDistanceToTop(elem);

            self.offsetFromTop = getOffsetFromTop(self.distanceToTop);

            self.pixelsPerSecond = getPixelsPerSecond();

          });

        }

 

        self.pixelsPerSecond = null;

        self.scrollPos = null;

        self.currentTime = null;

        self.offsetFromTop = null;

        self.distanceToTop = null;

 

        // https://ift.tt/q1Lb2u

        // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

        (function() {

          var lastTime = 0;

          var vendors = [“ms”, “moz”, “webkit”, “o”];

          for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {

            window.requestAnimationFrame = window[vendors[x] + “RequestAnimationFrame”];

            window.cancelAnimationFrame = window[vendors[x] + “CancelAnimationFrame”] || window[vendors[x] + “CancelRequestAnimationFrame”];

          }

          if (!window.requestAnimationFrame)

            window.requestAnimationFrame = function(callback, element) {

              var currTime = new Date().getTime();

              var timeToCall = Math.max(0, 16 (currTime lastTime));

              var id = window.setTimeout(function() {

                callback(currTime + timeToCall);

              }, timeToCall);

              lastTime = currTime + timeToCall;

              return id;

            };

          if (!window.cancelAnimationFrame)

            window.cancelAnimationFrame = function(id) {

              clearTimeout(id);

            };

        })();

 

        // requestAnim shim layer by Paul Irish

        window.requestAnimFrame = (function() {

          return (

            window.requestAnimationFrame ||

            window.webkitRequestAnimationFrame ||

            window.mozRequestAnimationFrame ||

            window.oRequestAnimationFrame ||

            window.msRequestAnimationFrame ||

            function(/* function */ callback, /* DOMElement */ element) {

              window.setTimeout(callback, 1000 / 60);

            }

          );

        })();

 

        // Define functions to be used by Scrolleo

        var getElemDistanceToTop = function(elem) {

            //https://ift.tt/375PCP5

            var location = 0;

            if (elem.offsetParent) {

              do {

                location += elem.offsetTop;

                elem = elem.offsetParent;

              } while (elem);

            }

            return location >= 0 ? location : 0;

          },

          getOffsetFromTop = function(distanceToTop) {

            var offset = distanceToTop window.innerHeight + self.additionalOffset;

            return offset >= 0 ? offset : 0;

          },

          getPixelsPerSecond = function() {

            var pixelsPerSecond = (window.innerHeight + self.wrapper[0].clientHeight) / self.secondsPerScreen;

            return pixelsPerSecond >= 0 ? pixelsPerSecond : 0;

          },

          scrollHandler = function() {

            targetScrollPos = window.pageYOffset;

          },

          resizeHandler = function() {

            //recalculate values on resize

            self.distanceToTop = getElemDistanceToTop(elem);

            self.offsetFromTop = getOffsetFromTop(self.distanceToTop);

            self.pixelsPerSecond = getPixelsPerSecond();

          },

          scrollControl = function() {

            //what to do when scrolling

            self.scrollPos += (targetScrollPos self.offsetFromTop self.scrollPos) * self.acceleration;

            self.currentTime = self.scrollPos / self.pixelsPerSecond; //convert scrollPos from pixels to seconds to set self.currentTime

            self.wrapper[0].currentTime = self.currentTime;

            self.wrapper[0].pause();

          };

 

        // Get an element’s distance from the top of the page

        var elem = self.wrapper[0];

 

        // Calulate the initial size, distance, and offset of each scrolleo video

        self.distanceToTop = getElemDistanceToTop(elem);

        self.offsetFromTop = getOffsetFromTop(self.distanceToTop);

        self.pixelsPerSecond = getPixelsPerSecond();

 

        self.scrollPos = targetScrollPos self.offsetFromTop;

 

        wr.pause();

 

        // Use requestAnimationFrame to ensure the video is updating when the browser is ready

        window.requestAnimFrame(function render() {

          window.requestAnimFrame(render);

          // Only kickoff scrollControl if the scrollPos of element hasn’t reached targetScrollPos

          if (Math.round(self.scrollPos + self.offsetFromTop) != targetScrollPos) {

            scrollControl();

          }

        });

 

        window.addEventListener(“scroll”, scrollHandler, false);

        window.addEventListener(“resize”, resizeHandler, false);

      });

    }

  };

  window.Scrolleo = _Scrolleo;

})(window, document);

 

// Setup video 1

var scrolleo1 = new Scrolleo({

  acceleration: 0.08, // 1 = instant, 0 = never

  secondsPerScreen: 6, // Defaults to video duration

  additionalOffset: 100, // Positive starts the video later, negative starts earlier. default starts when top of video hits bottom of the screen

  wrapperEl: “#scrolleo-1” // id of the video you want to control

});

scrolleo1.init();

 

// Setup Video 2

var scrolleo2 = new Scrolleo({

  wrapperEl: “#scrolleo-2”

});

scrolleo2.init();

@memo

webデザイン

https://ift.tt/32SZmbW
via コリス https://coliss.com

November 15, 2019 at 09:26AM https://ift.tt/32SZmbW

Follow me!