我在他们自己的div中有6个Vimeo iframe。我想为它们添加视差效果，以便每个视频滚动到另一个视频。因此，按相反顺序 - 第6个视频将滚动到第5个视频，第5个视频将滚动到第4个，依此类推 - 直到第1个视频。
我正在使用这个与图像一起使用的代码，但是我不能让它在div上工作。
<script>
var yPos, vid;
function parallax () {
yPos = window.pageYOffset;
vid = document.getElementsByClassName("vid2")
vid.style.top = yPos * 0.4 + "px";
}
window.addEventListener("scroll", parallax);
</script>
以下是代码的其余部分。
<!doctype html>
<html>
<head>
<style>
html {
padding: 0;
}
body {
font-family: lato, sans-serif;
text-rendering: geometricPrecision;
text-rendering: optimizeLegibility;
margin:0;
font-style: normal;
font-weight: 300;
height: auto;
width: 100%;
/*background-color: grey;*/
}
#about {
}
/*This section isfor the header section that includes the header itself, my h1 text logo, the nav bar and the top social buttons*/
#offset {
position:fixed;
top:0;
text-align:center;
width: 100%;
color: black;
padding: 10px;
z-index:9999;
}
#progressBar {
background-color: black;
height: 7px;
width:0;
position:fixed;
top:0;
left:0;
max-width:100%;
z-index:20001;
}
header {
/*background-color: hsla(359,70%,46%,1.00);*/
position: fixed;
width: 100%;
height: 0%;
z-index: 20000;
}
/*This h1 is in the header section and the h1 has an ID=logo and is in 2 sections, id=bgdr and id=creative.*/
h1 {
/*background-color: orange;*/
font-size: 4em;
text-align: justify;
color: black;
position: fixed;
left: 40px;
top:0px;
}
#logo {
line-height: 30px;
font-size: 4.em;
font-weight:100;
text-align: justify;
letter-spacing: 0.1em;
}
/*#bgdr and #creative IDs are part of the h1 (#logo). They are in 2 IDs so that I can adjust the BGDR and creative text independantly*/
#bgdr {
text-align: justify;
font-weight:100;
}
#creative {
font-size: 0.6em;
text-align: justify;
letter-spacing: 0.28em;
padding-left: 4px;
font-weight:100;
}
/* the "a" selector is followed by "link, visited and hover" to animate the states of menu/text links throughout the page/site*/
a:link {
color: hsla(0,0%,0%,1.00);
-webkit-transition: color 0.5s ease-out;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
transition: color 0.5s;
text-decoration:none;
font-weight:300;
}
a:visited {
color: hsla(0,0%,0%,1.00);
}
a:hover {
color: hsla(0,0%,72%,1.00);
}
a:active {
font-weight: 800;
}
/*the ul, li, and .nav control the top nav menu. The ul is the table, il are the cells. (front page, about, contact, etc.)*/
ul {
/*background-color: blue;*/
display:block;
position:fixed;
top:75px;
right:30px;
padding: 0em;
font-size: 1.15em;
float: right;
}
li {
float: right;
display: block;
width: inherit;
margin-left: 3em;
}
/*This is a class for my social buttons that are just below the menu (not large buttons at the bottom of the page*/
.social {
position: absolute;
bottom: auto;
display: block;
width: 11em;
right: 30px;
padding-top: 2px;
padding-left: 2px;
padding-bottom: 1px;
top: 170px;
}
/*h2=page name e.g. About h3=Sound/music/web h4=long version*/
h2, h3, h4 {
text-align: center;
}
/*h2 is the title of each page eg "ABOUT"*/
h2 {
font-size: 3em;
position: relative;
font-style: normal;
font-weight: 200;
top: -40px;
}
h2 #homeH2 {
position:relative;
top: 200px;
}
h4 {
font-weight:300;
font-size:1.4em
}
h2+p {
text-align:center;
}
/*web text*/
p {
font-size: 1.1em;
text-align: justify;
font-weight:300;
}
main {
position: relative;
top: 240px;
width: 100%;
margin-top: -5em;
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
padding-bottom: 5px;
}
footer {
display:block;
position:absolute;
width: 415px;
left:35%;
top: 325%;
margin-bottom:20px;
}
</style>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title >BGDR creative</title>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<!--<script>var __adobewebfontsappname__="dreamweaver"</script>-->
<script src="http://use.edgefonts.net/lato:n1,i1,n3,i3,n4,i4,n7,i7,n9,i9:all.js" type="text/javascript"> </script>
</head>
<div id="progressBar" data-0="width: 0%" data-end="width: 100%" ></div>
<div id="offset">10</div>
<body id="about">
<header>
<!-- h1 is a text logo (i need to check to see having a h1 text logo is ok)-->
<h1 id="logo" role="button">
<a href="../../Dreamweaver /Pages/Home.html" title="Back to the front page" role="link">
<span id="bgdr">
BGDR
</span>
<br>
<span id="creative">
creative
</span>
</a>
</h1>
<!-- navigation menu-->
<nav id="nav" role="navigation" align="right">
<ul>
<li><a href="Contact.html" title="Contact Me" rel="next">CONTACT </a> </li>
<li><a href="Blog.html" title="A blog of my work and musings" rel="next">BLOG </a> </li>
<li><a href="CV.html" title="CV" rel="next">CV </a> </li>
<li><a href="Visual.html" title="Film and Animation" rel="next">VISUAL</a></li>
<li><a href="Sound.html" title="Sound" rel="next">SOUND </a></li>
<li><a href="About.html" title="About BGDR" rel="next">ABOUT </a> </li>
<li ><a href="Home.html" title="Go Home" rel="next">FRONT PAGE </a> </li>
</ul>
</nav>
<br>
</header>
<!--Below is the "main" content of the page, which includes the about section-->
<main role="main">
<section role="application">
<h3 class="centerText">Moving Image</h3>
<p class="centerText">These videos are all graphics and film that I created or helped create.</p>
<div class="vid1">
<iframe src="https://player.vimeo.com/video/137215594?color=ffffff&title=0&byline=0" width="100%" height="700" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="vid2">
<iframe src="https://player.vimeo.com/video/136115302?color=ffffff&title=0&byline=0" width="100%" height="700" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="vid3">
<iframe src="https://player.vimeo.com/video/136065794?color=ffffff&title=0&byline=0" width="100%" height="700" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="vid4">
<iframe src="https://player.vimeo.com/video/134271788?color=ffffff&title=0&byline=0" width="100%" height="700" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="vid5">
<iframe src="https://player.vimeo.com/video/98621690?color=ffffff&title=0&byline=0" width="100%" height="700" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="vid6">
<iframe src="https://player.vimeo.com/video/136049986?color=ffffff&title=0&byline=0" width="100%" height="700" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</section>
</main>
<footer role="contentinfo">
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="../js/skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init({
render: function(data) {
//Log the current scroll position.
//console.log(data.curTop);
$("#offset").text(data.curTop);
}
});
</script>
<script>
var yPos, vid;
function parallax () {
yPos = window.pageYOffset;
vid = document.getElementsByClassName("vid2")
vid.style.top = yPos * 0.4 + "px";
}
window.addEventListener("scroll", parallax);
</script>
</body>
</html>