Javascript 如何为包含iframe的div添加视差效果？
我有6个Vimeo iframes都在他们自己的分区内。我想给它们添加一个视差效果，这样每个视频都可以在另一个视频上滚动。因此，以相反的顺序-第6个视频将滚动到第5个，第5个将滚动到第4个，依此类推-直到滚动到第1个视频 我正在使用这段代码来处理图像，但我无法让它处理divJavascript 如何为包含iframe的div添加视差效果？,javascript,html,iframe,parallax,Javascript,Html,Iframe,Parallax,我有6个Vimeo iframes都在他们自己的分区内。我想给它们添加一个视差效果，这样每个视频都可以在另一个视频上滚动。因此，以相反的顺序-第6个视频将滚动到第5个，第5个将滚动到第4个，依此类推-直到滚动到第1个视频 我正在使用这段代码来处理图像，但我无法让它处理div <script> var yPos, vid; function parallax () { yPos = window.pageYOffset; vid
<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>
var-yPos，vid；
函数视差（）{
yPos=window.pageYOffset；
vid=document.getElementsByClassName（“vid2”）
vid.style.top=yPos*0.4+“px”；
}
窗口。addEventListener（“滚动”，视差）；
<!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>
html{
填充：0；
}
身体{
字体系列：拉托，无衬线；
文本呈现：几何精度；
文本呈现：优化易读性；
保证金：0；
字体风格：普通；
字体大小：300；
高度：自动；
宽度：100%；
/*背景颜色：灰色*/
}
#关于{
}
/*此部分用于标题部分，其中包括标题本身、my h1文本徽标、导航栏和顶部社交按钮*/
#抵消{
位置：固定；
排名：0；
文本对齐：居中；
宽度：100%；
颜色：黑色；
填充：10px；
z指数：9999；
}
#进度条{
背景色：黑色；
高度：7px；
宽度：0；
位置：固定；
排名：0；
左：0；
最大宽度：100%；
z指数：20001；
}
标题{
/*背景色：hsla（359,70%，46%，1.00）*/
位置：固定；
宽度：100%；
身高：0%；
z指数：20000；
}
/*h1位于标题部分，h1有一个ID=logo，分为两个部分，ID=bgdr和ID=creative*/
h1{
/*背景颜色：橙色*/
字号：4em；
文本对齐：对齐；
颜色：黑色；
位置：固定；
左：40px；
顶部：0px；
}
#标志{
线高：30px；
字号：4.em；
字号：100；
文本对齐：对齐；
字母间距：0.1米；
}
/*#bgdr和#创意ID是h1（#徽标）的一部分。它们在两个ID中，因此我可以独立调整BGDR和创造性文本*/
#bgdr{
文本对齐：对齐；
字号：100；
}
#创意{
字号：0.6em；
文本对齐：对齐；
字母间距：0.28em；
左侧填充：4px；
字号：100；
}
/*“a”选择器后接“链接、访问和悬停”，以动画显示整个页面/站点中菜单/文本链接的状态*/
a:链接{
颜色：hsla（0,0%，0%，1.00）；
-webkit过渡：颜色0.5s缓变；
-moz过渡：颜色0.5s；
-o-过渡：颜色0.5s；
过渡：颜色0.5s；
文字装饰：无；
字体大小：300；
}
a:参观了{
颜色：hsla（0,0%，0%，1.00）；
}
a:悬停{
颜色：hsla（0,0%，72%，1.00）；
}
a:主动的{
字号：800；
}
/*ul、li和.nav控制顶部的nav菜单。ul是表格，il是单元格。（头版、关于、联系方式等）*/
保险商实验室{
/*背景颜色：蓝色*/
显示：块；
位置：固定；
顶部：75px；
右：30px；
填充：0em；
字号：1.15em；
浮动：对；
}
李{
浮动：对；
显示：块；
宽度：继承；
左边距：3em；
}
/*这是我的社交按钮的一个类，位于菜单下方（不是页面底部的大按钮）*/
.社会{
位置：绝对位置；
底部：自动；
显示：块；
宽度：11em；
右：30px；
垫顶：2件；
左侧填充：2px；
垫底：1px；
顶部：170px；
}
/*h2=页面名称，例如关于h3=声音/音乐/网络h4=长版本*/
h2，h3，h4{
文本对齐：居中；
}
/*h2是每页的标题，例如“关于”*/
氢{
字号：3em；
位置：相对位置；
字体风格：普通；
字号：200；
顶部：-40px；
}
h2#homeH2{
位置：相对位置；
顶部：200px；
}
h4{
字体大小：300；
字号：1.4em
}
h2+p{
文本对齐：居中；
}
/*网络文本*/
p{
字体大小：1.1米；
文本对齐：对齐；
字体大小：300；
}
主要{
位置：相对位置；
顶部：240px；
宽度：100%；
边缘顶部：-5em；
右边距：自动；
左边距：自动；
页边距底部：自动；
垫底：5px；
}
页脚{
显示：块；
位置：绝对位置；
宽度：415px；
左：35%；
最高：325%；
边缘底部：20px；
}
BGDR创意
var\uuuu adobebfontsappname=“dreamweaver”
10
运动图像
这些视频都是我创建或帮助创建的图形和电影
var s=skrollr.init({
渲染：函数（数据）{
//记录当前滚动位置。
//console.log（data.curTop）；
$（“#offset”）.text（data.curTop）；
}
});
var-yPos，vid；
函数视差（）{
yPos=window.pageYOffset；
vid=document.getElementsByClassName（“vid2”）
vid.style.top=yPos*0.4+“px”；
}
窗口。addEventListener（“滚动”，视差）；
样式，你需要对它们进行循环。请原谅。我对web开发相对较新。我不确定你的意思。我没有使用HTMLCollection@AlexanderO'Mara。document.GetElementsByCassName（“vid2”）
返回一个HTMLCollection
。您可能希望循环集合中的元素，以设置样式。