我正在做一个单一的项目，我对这一切都很陌生，所以要温柔。
我有3个部分 - 简历部分，我喜欢的部分和图像部分。虽然也有页眉和页脚，但不需要包含在视差中。
我已经尝试了JS和CSS实现/教程来尝试使用我自己的标记的视差效果无济于事。任何人都可以帮助我吗？
下面是页面'html和css（我试图只包括相关CSS。
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<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>
<!--Below are the social netowrking buttons with <a> tags to link externally-->
<section class="social" role="button" align="right">
<a href="https://twitter.com/sambegdouri" title="Tweet Me!" target="_blank">
<img src="../../BGDR creative/Assests/Icons/twitter.svg" alt="Twitter" width="40" height="40">
</a>
<a href="../../Dreamweaver /Pages/..." title="Facebook Page" target="_blank">
<img src="../../BGDR creative/Assests/Icons/facebook.svg" name="Facebook" alt="Facebook" width="40" height="40">
</a>
<a href="https://instagram.com/sambegdouri/" title="My Insta Feed" target="_blank">
<img src="../../BGDR creative/Assests/Icons/Insta2.png" height="40" width="40" alt="Instagram">
</a><a href="https://uk.linkedin.com/in/sambegdouri" title="My Linkedin Profile" target="_blank"><img src="../../BGDR creative/Assests/Icons/linkedin.svg" height="40" width="40" alt="Linkedin"></a></section>
</header>
<div id="wholePage">
<main role="main">
<h2>CIRRICULUM VITAE</h2>
<section role="contentinfo">
<div id="tableGroup">
<table id="workTable">
<tr class="skillsTabHeight">
<th colspan="2"><img src="../Assests/CV icons/work.svg" alt="Experience" width="10%" height="10%"></th>
</tr>
<tr>
<th colspan="2" ><h3 class="headerCell">EXPERIENCE</h3></th>
</tr>
<tr class="tableAlign">
<td>
Nulabug
</td>
<td>
April 2015
</td>
</tr>
<tr class="tableAlign">
<td>
Areia Creations
</td>
<td>
2014 - April 2015
</td>
</tr>
<tr class="tableAlign">
<td>
Animation Workshop
</td>
<td>
Feburary 2013 - May 2013
</td>
</tr>
<tr class="tableAlign">
<td>
SBS MTV
</td>
<td>
April 2012
</td>
</tr>
</table>
<table id="eduTable">
<tr class="skillsTabHeight">
<th colspan="2"><img src="../Assests/CV icons/Education.svg" alt="Education" width="80%" height="80%"></th>
</tr>
<tr>
<th colspan="2"><h3 class="headerCell">EDUCATION</h3></th>
</tr>
<tr class="tableAlign">
<td>
Bath Spa University
</td>
<td>
October 2010 - Present
</td>
</tr>
<tr class="tableAlign">
<td>
Bible College of Wales
</td>
<td>
September 2008 - July 2009
</td>
</tr>
<tr class="tableAlign">
<td>
New College
</td>
<td>
September 2006 - July 20108
</td>
</tr>
</table>
<table id="otherTable">
<tr class="otherTableCenter">
<th colspan="3"><h3 class="headerCell">Other Experience</h3></th>
</tr>
<tr class="otherTableCenter">
<td>
<img src="../Assests/CV icons/1Pencil.svg" alt="Teaching" height="80%" width="80%">
</td>
<td>
<img src="../Assests/CV icons/Dollarbag.svg" alt="Banking" height="80%" width="80%">
</td>
<td>
<img src="../Assests/CV icons/Chart.svg" alt="Sales" height="80%" width="80%">
</td>
</tr>
<tr class="otherTableCenter">
<td>
Teaching
</td>
<td>
Banking
</td>
<td>
Sales
</td>
</tr>
<tr class="otherTableCenter">
<td>
<img src="../Assests/CV icons/cap.svg" alt="Youth" height="50%" width="50%">
</td>
<td>
<img src="../Assests/CV icons/Moviecam.svg" alt="Film" height="80%" width="80%">
</td>
<td>
<img src="../Assests/CV icons/Musickeyboard.svg" alt="Musician" height="80%" width="80%">
</td>
</tr>
<tr class="otherTableCenter">
<td>
Youth Work
</td>
<td>
Film
</td>
<td>
Musician
</td>
</tr>
</table>
<aside role="tablist">
<table id="skillsTable">
<tr>
<th colspan="2"><img src="../Assests/CV icons/spanner.svg" alt="Skills" height="90%" width="90%" class="centerIcon"></th>
</tr>
<tr>
<th colspan="2" >
<h3 class="headerCell">Skills</h3>
</th>
</tr>
<tr class="skillsTabHeight">
<td>DAWs</td>
<td><div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
</td>
</tr>
<tr class="skillsTabHeight">
<td>Audition</td>
<td><div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"></div>
</td>
</tr>
<tr class="skillsTabHeight">
<td>After Effects</td>
<td><div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"></div>
</td>
</tr>
<tr class="skillsTabHeight">
<td>Premiere Pro</td>
<td><div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"></div>
</td>
</tr>
<tr class="skillsTabHeight">
<td>Illustrator</td>
<td><div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"></div>
<div class="circleStroke"></div>
<div class="circleStroke"></div>
</td>
</tr>
<tr class="skillsTabHeight">
<td>HTML/CSS/JS</td>
<td><div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"></div>
<div class="circleStroke"></div>
</td>
</tr>
<tr class="skillsTabHeight">
<td>Edge/Muse</td>
<td><div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"></div>
<div class="circleStroke"></div>
<div class="circleStroke"></div>
</td>
</tr>
<tr class="skillsTabHeight">
<td>Cinema 4D</td>
<td><div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"></div>
<div class="circleStroke"></div>
<div class="circleStroke"></div>
</td>
</tr>
<tr class="blankRow"></tr>
<tr>
<th colspan="2"><img src="../Assests/CV icons/speech.svg" alt="Languages" width="10%" height="10%" class="centerIcon"></th>
</tr>
<tr>
<th colspan="2"><h3 class="headerCell">Languages</h3></th>
</tr>
<tr class="skillsTabHeight">
<td>English</td>
<td><div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
</td>
</tr>
<tr class="skillsTabHeight">
<td>Français</td>
<td><div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"></div>
<div class="circleStroke"></div>
</td>
</tr>
<tr class="skillsTabHeight">
<td>한국어</td>
<td><div class="circleStroke"><span class="circleFill"></span></div>
<div class="circleStroke"></div>
<div class="circleStroke"></div>
<div class="circleStroke"></div>
<div class="circleStroke"></div>
</td>
</tr>
</table>
</aside>
<aside>
<table id="profileTable">
<tr>
<th colspan="2">
<img src="../Assests/CV icons/face.svg" alt="me" width="20%" height="25%" class="centerIcon">
</th>
</tr>
<tr>
<th>
<h3 class="headerCell">PROFILE</h3>
</th>
</tr>
<tr>
<td>
<p>Currently working in Korea and am seeking employment in visual multimedia/UI. I have multimedia (sound/(moving) image) experience professionally, and continue working on personal projects. I consider myself an individual who has a friendly disposition; a type of guy who talks about new ideas. I delight in new cultures and practices. A proficient speaker of French and currently learning Korean. I enjoy learning new creative software (see below) to make something cool. I like going out and taking photos. And my favourite music is liquid Drum and Bass. Lastly, I am an Oxford comma kind-of-guy.</p>
</td>
</tr>
</table>
</aside>
</div>
</section>
<section role="contentinfo">
<div id="sectionTwoScroll"
data-bottom="opacity: 0; transform: scale(0.5)"
data--100-bottom="opacity:1; transform: scale(1)"
data--100-top="opacity:0"
data-top="opacity:1">
<h2 class="scrollSectionText1" >
My Wife & I</h2>
</div>
<img src="../Assests/Pics/Somi and ME - Hanok.jpg" alt="Somi and I in a Hanok" id="samWifeImg">
</section>
<section>
<div id="sectionThreeScroll" >
<div data-bottom="opacity: 0; transform: scale(0.5)"
data--100-bottom="opacity:1; transform: scale(1)"
data--50-top="opacity:0"
data-top="opacity:1">
<h2 class="scrollSectionText1">
STUFF I LIKE
</h2>
</div>
<div data-bottom="opacity: 0; transform: scale(0.5)"
data--100-bottom="opacity:1; transform: scale(1)"
data--600-top="opacity:0"
data-top="opacity:1">
<table id="likeTable">
<tr class="likeTableRow">
<td class="likeTableCol">
<img src="../Assests/CV icons/Coffeemaker.svg" alt="Coffee" height="100%" width="100%">
</td>
<td class="likeTableCol">
<img src="../Assests/CV icons/Compactcam.svg" alt="Photography" height="100%" width="100%">
</td>
<td class="likeTableCol">
<img src="../Assests/CV icons/Drums.svg" alt="Drum" height="100%" width="100%">
</td>
<td class="likeTableCol">
<img src="../Assests/CV icons/Moviescene.svg" alt="Film" height="100%" width="100%">
</td>
</tr>
<tr class="likeTableRow">
<td class="likeTableCol">
COFFEE
</td>
<td class="likeTableCol">
PHOTOGRAPHY
</td>
<td class="likeTableCol">
DRUMS
</td>
<td class="likeTableCol">
FILMS
</td>
</tr>
<tr class="blankRow"></tr>
<tr class="likeTableRow">
<td>
<img src="../Assests/CV icons/DJ.svg" alt="DJ" height="100%" width="100%">
</td>
<td class="likeTableCol">
<img src="../Assests/CV icons/Education.svg" alt="Learning" height="100%" width="100%">
</td>
<td class="likeTableCol">
<img src="../Assests/CV icons/Rainumbrella.svg" alt="Rain" height="100%" width="100%">
</td>
<td class="likeTableCol">
<img src="../Assests/CV icons/Teabag.svg" alt="Tea" height="100%" width="100%">
</td>
</tr>
<tr class="likeTableRow">
<td>
MIXING
</td>
<td class="likeTableCol">
LEARNING
</td>
<td class="likeTableCol">
RAIN
</td>
<td class="likeTableCol">
TEA
</td>
</tr>
<tr class="blankRow"></tr>
<tr class="likeTableRow">
<td class="likeTableCol">
<img src="../Assests/CV icons/Piano.svg" alt="Piano" height="100%" width="100%">
</td>
<td class="likeTableCol">
<img src="../Assests/CV icons/Musickeyboard.svg" alt="Midi Controler" height="100%" width="100%">
</td>
<td class="likeTableCol">
<img src="../Assests/CV icons/Speakers.svg" alt="Speaker" height="100%" width="100%">
</td>
<td class="likeTableCol">
<img src="../Assests/CV icons/Browserscript.svg" alt="Web Development" height="100%" width="100%">
</td>
</tr>
<tr class="likeTableRow" >
<td class="likeTableCol">
MUSIC (playing)
</td>
<td class="likeTableCol">
MUSIC (production)
</td>
<td class="likeTableCol">
SOUND
</td>
<td class="likeTableCol">
WEB
</td>
</tr>
</table>
</div>
</div>
</section>
</main>
<footer id="footerCV" role="contentinfo">
<a href="https://twitter.com/sambegdouri" title="Tweet Me!" target="_blank"><img src="../Assests/Icons/twitter.svg" height="64" width="64" alt="Twitter"></a>
<a href="..." title="Facebook Page" target="_blank"><img src="../Assests/Icons/facebook.svg" name="Facebook" alt="Facebook" height="64" width="64"></a>
<a href="https://instagram.com/sambegdouri/" title="My Insta Feed" target="_blank"><img src="../Assests/Icons/Insta2.png" height="64" width="64" alt="Instagram"></a>
<a href="https://uk.linkedin.com/in/sambegdouri" title="My Linkedin Profile" target="_blank"><img src="../Assests/Icons/linkedin.svg" height="64" width="64" alt="Linkedin"></a>
</footer>
</div>
<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>
</body>
</html>
CSS
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;*/
}
#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;
}
main {
position: relative;
top: 240px;
width: 100%;
margin-top: -5em;
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
}
#footerCV {
background-color:white;
margin:auto 0;
top: 2200px;
clear:both;
z-index:5000;
}
.blankRow {
height: 45px;
}
#likeTable {
position:relative;
top: 150px;
width:80%;
margin-left: 10%;
}
.likeTableRow {
margin:50px;
}
.likeTableCol {
width:200px;
}
#tableGroup{
position:fixed;
display:block;
top:200px;
width:100%;
margin:auto;
}
#skillsTable {
position: absolute;
table-layout:fixed;
display: compact;
width: 25%;
text-align: left;
margin-left: 20px;
top: 22%;
}
.skillsTabHeight {
height:35px;
}
#workTable {
position: absolute;
table-layout: fixed;
display: compact;
width: 40%;
text-align: center;
top: 25%;
left: 30%;
}
#eduTable {
position: absolute;
table-layout: fixed;
display: compact;
width: 40%;
text-align: center;
top: 214px;
left: 30%;
}
#otherTable {
position: absolute;
table-layout: fixed;
display: compact;
width: 40%;
text-align: center;
top: 385px;
left: 30%;
}
#profileTable {
position:absolute;
float:right;
left: 73%;
max-width: 26%;
}
.tableAlign {
text-align: left;
vertical-align: central;
}
th .centerIcon{
display: block;
margin-left: auto;
margin-right: auto;
}
.headerCell {
line-height: 0px;
margin-top:9px;
margin-bottom:9px;
}
/*.headerCell {
position: inherit;
vertical-align:top;
height: 1px;
text-height:1px;
text-align: center;
}*/
logoCol {
float: right;
}
.circleFill {
margin: -1px;
float: left;
border-radius: 100%;
width: 14px;
height: 14px;
background-color: black;
-webkit-animation: circleFill; /* Safari 4+ */
-moz-animation: circleFill;
-o-animation: circleFill; /* Opera 12+ */
animation: circleFill;
animation-duration: 5s;
}
.circleStroke {
margin:2px;
float:left;
background-color: rgba(204, 0, 102, 0);
border: 3px solid #333;
height: 10px;
width: 10px;
-moz-border-radius:20px;
-webkit-border-radius: 20px;
}
@-webkit-keyframes circleFill {
0% { opacity:0.0 ; }
100% { opacity: 1.0; }
}
#mePic {
position: relative;
background-position: center;
left: 0%;
top:0%;
opacity:1.0;
}
#samWifeImg {
position: absolute;
display:block;
margin:0;
max-width:100%;
top: 1255px;
}
/*This is a div that is a container for the stuff I like section*/
#sectionThreeScroll{
position: absolute;
margin:auto;
height:750px;
width:100%;
text-align:center;
top: 650px;
z-index:2000;
background-color:white;
}
/*This is a div that is a container for the h2 of Me and my wife at a Hanokmal*/
#sectionTwoScroll{
position: absolute;
margin:auto;
left: 42%;
text-align:center;
top: 1600px;
z-index:3000;
}
/*This is a h2 class for the h2 text that says "My Wife & I" AND "STUFF I LIKE"*/
.scrollSectionText1 {
position: relative;
top: 75px;
font-size: 3em;
text-align:center;
color: black ;
}
.centerIcon {
position:inherit;
display: block;
right:50%;
}
答案 0 :(得分：0)
我没有在代码中看到对任何视差javascript资源的引用？
有不同的视差插件可以创建不同类型的视差效果。这是我喜欢使用的一个，我认为是您正在寻找的： http://pixelcog.github.io/parallax.js
它非常易于使用。只需下载插件并将其包含在您的项目中。确保在jquery包括之后引用它。
<script src="/path/to/parallax.js"></script>
然后添加data-parallax =＆＃34;滚动＆＃34;到想要产生视差效果的部分，并使用data-image-src =＆＃34; /path/to/image.jpg"来指定图像。
您希望确保您使用的图像比其显示的部分更大（高度），因为它以与页面/文档不同的速率滚动。