Question

理解我想要实现的目标可能有点棘手，所以我试着尽可能简单地描述它：

我想在网站上使用2个元素的iMac滚动效果的略微变化。全宽视频和全宽图片相互叠加。我想＆＃34; connect＆＃34;他们通过滚动效果。

从全屏视频开始，在滚动时显示在屏幕的100％处（视频没有缩放）我希望视频变小（或淡出）直到它完全消失然后显示下面的图片是在开始时以大约300％的原始尺寸（在此处进行缩放）显示，一旦滚动完成，将其大小调整为其原始尺寸的100％。

（为了更好地理解：它应该看起来像是缩小了眼睛。这个https://www.youtube.com/watch?v=0vnA_KIojLg的反转版本，但更短了）

我已经设法使用3个CSS元素组合视频和图片来安排它们，非常像原版： 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%;
}

然而，我确实努力让视频和图片达到全屏大小，并初始化视频的缩小（从而消失）以及图片以（大约）300％开始。

有人对我有这方面的建议吗？或者甚至更好：比我拼凑的更简单的解决方案？

HTML / Javascript多个滚动效果？

0 个答案: