HTML / Javascript Multiple scroll effect?

By ChrisBean

It might be a little bit tricky to understand what I’m trying to achieve so I try to describe it as simple as possible for me:

I want to use a slight variation of the iMac scrolling effect with 2 elements on a website. A fullwidth video and fullwidth picture laying on top of each other. I want to “connect” them via a scroll effect.

It starts with the fullwidth video, displayed at 100% of the screen (no zooming on the video) upon scrolling I want the video to become smaller (or to fade out) until it completely disappears then revealing the picture beneath that is displays at roughly 300% of it’s original size (zooming takes place here) at the start, resizing to 100% of it’s original size once the scrolling is finished.

(For a better understanding: it’s supposed to like like it’s zoomed out of the eye. Pretty much the reversed version of this https://www.youtube.com/watch?v=0vnA_KIojLg but much shorter)

I’ve already managed to combine video and picture using 3 CSS elements to arrange them, pretty much like the original:
https://jsfiddle.net/o3sno3b8/4/

.video {
  height: 100%;
  width: 100%;
  margin: 1340px auto 100px;
}
.mac {
  height: 613px;
  width: 764px;
  margin: 1340px auto 100px;
  background: white url("http://www.crispin-m.de/opener.jpg") no-repeat 0 0;
  -webkit-background-size: 764px 613px;
  background-size: 764px 613px;
  backface-visibility: hidden;
}
.mac.intro {
  position: fixed;
  width: 2548px;
  z-index: 9999;
  height: 2052px;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  margin: 0;
  top: 0;
  left: 50%;
  margin-top: -300px;
  margin-left: -1274px;
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
}

I do however struggle with getting video and picture to fullscreen size and initializing the scaling down (and thus disappearing) of the video as well as having the picture started at (roughly) 300%.

Does anyone have a piece of advice for me on this? Or even better: a more simply solution than what I pieced together?

Source: Stack Overflow

    

Share it with your friends!

    Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/19/9652219/html/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273