我被困在一个任务上，试图在this网站上重新创建效果（大约下降了三分之一），并以此作为我的英雄，我得到了缩放效果，可以在我的视频和图像上使用，但是我在使它响应时遇到问题，无法找到有关此操作的任何信息。这是我的代码：
// scale wrap of video and image 2 1 from 0.25
$(window).bind('scroll', function() {
$(".scrllvid__wrap")
.css("transform", `scale(${1 - $(window).scrollTop() / 3000})`);
});
// unfix container and force correct scale of wrap
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.scrllvid').offset().top + $('.scrllvid').outerHeight() - window.innerHeight) {
$('.scrllvid__container').addClass("scrllvid__container--unfixed");
$('.scrllvid__wrap').addClass("scrllvid__wrap--scaled");
$('nav').fadeIn();
} else {
$('.scrllvid__container').removeClass("scrllvid__container--unfixed");
$('.scrllvid__wrap').removeClass("scrllvid__wrap--scaled");
$('nav').fadeOut();
}
});
// fadeout title at 50% scroll
$(window).bind('scroll', function() {
if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.5){
$('.scrllvid__title--wrap').addClass("scrllvid__title--wrap--opacityoff");
} else {
$('.scrllvid__title--wrap').removeClass("scrllvid__title--wrap--opacityoff");
}
});.scrllvid {
position: relative;
height: 400vh;
background-color: #000000; }
.scrllvid__container {
position: fixed;
z-index: 1;
width: 100%;
height: 100vh;
overflow: hidden; }
.scrllvid__container--unfixed {
position: absolute;
bottom: 0;
width: 100%; }
.scrllvid__wrap {
-webkit-transition: scale .05s;
transition: scale .05s;
width: 100%;
height: 100%; }
.scrllvid__wrap--scaled {
-webkit-transform: scale(0.25) !important;
transform: scale(0.25) !important; }
.scrllvid__background {
width: 100%;
height: auto;
-webkit-transform: scale(4.4);
transform: scale(4.4); }
.scrllvid__video {
position: relative;
display: block; }
.scrllvid__video--scalable {
position: relative; }
.scrllvid__video--video {
position: absolute;
width: 100%;
opacity: 0.8; }
.scrllvid__title--wrap {
display: none;
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: opacity 1s;
transition: opacity 1s; }
.scrllvid__title--wrap--opacityoff {
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s; }
.scrllvid__logo {
max-width: 10em;
margin-bottom: 1em; }
.scrllvid__icon {
margin-top: 3em; }
@-webkit-keyframes scroll {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
30% {
-webkit-transform: translateY(60px);
transform: translateY(60px); } }
@keyframes scroll {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
30% {
-webkit-transform: translateY(60px);
transform: translateY(60px); } }
.scrllvid__icon svg #wheel {
-webkit-animation: scroll ease 2s infinite;
animation: scroll ease 2s infinite; }
.scrllvid__icon svg {
margin: 0 auto;
display: block; }
.scrllvid__icon p {
font-family: 'Indie Flower', cursive;
color: #ffffff; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header class="scrllvid">
<div class="scrllvid__container">
<div class="scrllvid__wrap">
<div class="scrllvid__video">
<div class="scrllvid__video--scalable">
<div>
<video class="scrllvid__video--video" playsinline muted autoplay="">
<source src="http://tekeye.uk/html/images/Joren_Falls_Izu_Japan.mp4" type="video/mp4"/>
Video not supported.
</video>
</div>
<div class="scrllvid__title--wrap">
<div class="scrllvid__icon">
<svg width="40px" height="64px" viewBox="0 0 247 390" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<path id="wheel" d="M123.359,79.775l0,72.843" style="fill:none;stroke:#fff;stroke-width:20px;"/>
<path id="mouse" d="M236.717,123.359c0,-62.565 -50.794,-113.359 -113.358,-113.359c-62.565,0 -113.359,50.794 -113.359,113.359l0,143.237c0,62.565 50.794,113.359 113.359,113.359c62.564,0 113.358,-50.794 113.358,-113.359l0,-143.237Z" style="fill:none;stroke:#fff;stroke-width:20px;"/>
</svg>
<p class="h2">Scroll down</p>
</div>
</div>
</div>
</div>
<img class="scrllvid__background" src="https://i.imgur.com/aBPNSS4.png">
</div>
</div>
</header>
<main class="content">
<section>
<div class="row">
<div class="small-12 columns">
<h1>TESTING</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget eleifend felis. Nam vitae mi luctus, sagittis odio et, hendrerit nisi. Suspendisse placerat cursus elementum. Fusce vel sollicitudin metus. Nullam venenatis, mauris id lacinia sodales, urna erat condimentum felis, in ultrices sem nulla id urna. Nam a convallis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget eleifend felis. Nam vitae mi luctus, sagittis odio et, hendrerit nisi. Suspendisse placerat cursus elementum. Fusce vel sollicitudin metus. Nullam venenatis, mauris id lacinia sodales, urna erat condimentum felis, in ultrices sem nulla id urna. Nam a convallis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<h1>TESTING</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget eleifend felis. Nam vitae mi luctus, sagittis odio et, hendrerit nisi. Suspendisse placerat cursus elementum. Fusce vel sollicitudin metus. Nullam venenatis, mauris id lacinia sodales, urna erat condimentum felis, in ultrices sem nulla id urna. Nam a convallis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget eleifend felis. Nam vitae mi luctus, sagittis odio et, hendrerit nisi. Suspendisse placerat cursus elementum. Fusce vel sollicitudin metus. Nullam venenatis, mauris id lacinia sodales, urna erat condimentum felis, in ultrices sem nulla id urna. Nam a convallis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<h1>TESTING</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget eleifend felis. Nam vitae mi luctus, sagittis odio et, hendrerit nisi. Suspendisse placerat cursus elementum. Fusce vel sollicitudin metus. Nullam venenatis, mauris id lacinia sodales, urna erat condimentum felis, in ultrices sem nulla id urna. Nam a convallis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget eleifend felis. Nam vitae mi luctus, sagittis odio et, hendrerit nisi. Suspendisse placerat cursus elementum. Fusce vel sollicitudin metus. Nullam venenatis, mauris id lacinia sodales, urna erat condimentum felis, in ultrices sem nulla id urna. Nam a convallis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
</div>
</section>
</main>
my fiddle。如果有人有任何解决方案，将不胜感激。