我有两个问题。
如果有人可以提供帮助，我会非常感激.. !!
$(document).ready(function() {
//Smooth scrolling - - - - - - - - - - - -
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - 500
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
/*
parallax background - - - - - - - - -
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$(".header").mousemove(function(e) {
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1 - 25;
var newvalueY = height * pageY * -1 - 50;
$('.header').css("background-position", newvalueX + "px " + newvalueY + "px");
});
*/
//Navbar - - - - - - - - - - - - - - -
var menuItemsContainer = $(".js-fadeIn-right")
var menuItems = menuItemsContainer.find('li')
var length = menuItems.length
for (var i = 0; i < length; i++) {
(function() {
var j = i;
var delay = 200 * (j + 1)
setTimeout(function() {
$(menuItems[j]).addClass('fadeIn-right')
}, delay)
}())
}
})
var fadeInScroll = (function(win, doc) {
var sections = [];
var elSections;
var settings = {
fadeInOffset: 100 // How far into the page it should be, before fading in
}
var sel = {
section: '.js-section',
header: '.js-header',
copy: '.js-copy'
};
var activeClass = 'is-active';
var events = {
scroll: 'scroll'
}
init();
function init() {
getSectionFromTopofPage();
bindEvents()
}
function getSectionFromTopofPage() {
elSections = doc.querySelectorAll(sel.section);
var lenSections = elSections.length;
for (var i = 0; i < lenSections; i++) {
sections.push({
offset: elSections[i].offsetTop,
element: elSections[i]
});
}
}
function getWindowHeight() {
return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
}
function bindEvents() {
var windowHeight = getWindowHeight();
window.addEventListener(events.scroll, function(e) {
for (var i = 0; i < sections.length; i++) {
if ((window.pageYOffset + windowHeight - settings.fadeInOffset) > sections[i].offset) {
var headerEl = sections[i].element.querySelector(sel.header);
var copyEl = sections[i].element.querySelector(sel.copy);
headerEl.classList.add(activeClass);
copyEl.classList.add(activeClass);
}
}
})
}
})(window, window.document);/*----- IMPORT -----*/
@import url(/css/keyframes.css);
@import url(/css/navbar.css);
@import url(/css/footer.css);
@import url(/css/header.css);
@import url(/css/buttons.css);
/*----- IMPORT -----*/
a {
color: orange;
text-decoration-line: none;
font-size: 20px;
transition: color 0.1 ease;
}
a:hover {
color: black;
text-decoration-line: none;
}
.content-wrapper a {
color: orange;
text-decoration-line: none;
transition: color 1s ease;
font-size: 16px;
}
w .content-wrapper a:hover {
color: black;
text-decoration-line: none;
}
.image {
border-radius: 49%;
float: right;
z-index: 98;
max-width: 100%;
}
html {
margin: 0;
padding: 0;
}
body {
background-color: #F1F1F1;
margin: 0;
padding 0;
font-family: 'Merriweather', serif;
display: block;
}
.intro1 {
font-weight: bold;
margin-bottom: 10px;
}
.intro2 {
font-weight: bold;
margin-top: 10px;
}
p {
margin-top 0px;
margin-bottom: 50px;
color: #666666;
margin-right: 10px;
}
h3 {
margin-top: 20px;
margin-bottom: 0px;
}
#container {
max-width: 1200px;
width: 100%;
min-height: 1000px;
background-color: white;
margin: 80px auto;
margin-top: 0px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 10px;
}
.content-wrapper {
padding: 8%;
padding-top: 20px;
line-height: 2;
font-family: 'Roboto', sans-serif;
}
h3 {
font-family: 'Anton', sans-serif;
letter-spacing: 5px;
font-size: 30px;
padding-bottom: 0px;
margin: 0 0px;
}
.footer {
color: #87848D;
text-align: center;
padding-bottom: 5px;
}
.info-block {
transition: all 1.5s ease;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
}
s .info-block .js-header {
width: 50%;
opacity: 0;
transition: all 2.5s ease;
-webkit-transform: translate3d(-100px, 0, 0);
-moz-transform: translate3d(-100px, 0, 0);
-ms-transform: translate3d(-100px, 0, 0);
-o-transform: translate3d(-100px, 0, 0);
transform: translate3d(-100px, 0, 0);
}
.info-block .js-copy {
opacity: 0;
transition: all 2.5s ease;
-webkit-transform: translate3d(100px, 0, 0);
-moz-transform: translate3d(100px, 0, 0);
-ms-transform: translate3d(100px, 0, 0);
-o-transform: translate3d(100px, 0, 0);
transform: translate3d(100px, 0, 0);
}
.info-block .js-copy.is-active,
.info-block .js-header.is-active {
opacity: 1;
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-ms-transform: translate3d(0px, 0, 0);
-o-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
/*--- header ---*/
/*---- HEADER ----*/
.header {
color: white;
width: 100%;
font-size: 50px;
text-align: center;
text-shadow: 4px 4px #000;
padding: 0px 0;
margin-top: 0px;
font-family: sans-serif;
/* background-image: url(/images/amsterdam.jpg) -25px -50px; */
background-size: calc(100% + 50px);
background-repeat: no-repeat;
transform-style: preserve-3d;
}
.sub-header {
padding-top: 0px;
font-size: 30px;
color: white;
text-align: center;
text-shadow: 2px 2px #000;
letter-spacing: normal;
}
.header img {
width: 100%;
transform: translateZ(-1px) scale(2);
}
.header h2 h4 {
position: relative;
}
body {
margin: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
perspective: 1px;
position: relative;
}
html {
overflow: hidden;
}<!DOCTYPE html>
<html>
<head>
<link href="/css/main.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display" rel="stylesheet">
<link href="/images/Png/r.png" rel="icon">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>RubensWebsite</title>
</head>
<body>
<div class="menu">
<div class="js-fadeIn-right">
<ul>
<li>
<a href="#About-Me">About Me</a>
</li>
<li>
<a href="#What-Do-I-Do">What do I do</a>
</li>
<li>
<a href="#How-I-Work">How I Work</a>
</li>
<li>
<a href="#Projects">Projects</a>
</li>
<li>
<a href="#Who-I-Work-With">Who I work with</a>
</li>
<li>
<a href="#Experiences">Experiences</a>
</li>
<li>
<a href="#Contact">Contact</a>
</li>
</ul>
</div>
</div>
<div class="header" id="header">
<img src="images/Header_Images/amsterdam.jpg">
<h2 class="fadeIn-up">Ruben Nijhuis</h2>
<h4 class="sub-header fadeIn-down">"A Front-End Developer"</h4>
</div>
<div id="container">
<div class="content-wrapper">
<div class="about-me">
<h3 class="fadeIn-left-normal" id="About-Me">About me</h3>
<!-- <img class="image fadeIn" src="/images/Paragraph_Images/thinking.jpeg" width="300" height="300"> -->
<p class="fadeIn-right intro1" style="column-count: 1">
15 years old, addicted to programming, loves hugs and is available for your project.<br> Always on the look for improving my own website, design and decision making.<br> I have an unique perspective on web-design and management.<br> Because
I believe in coding the website myself instead of using pre-made templates.<br> The client wants a unique and new website, so why would you give them a pre-made design?
<p class="fadeIn-right intro2" style="comlumn-count: 1">
My dream is to go to this awesome place called Silicon Valley, <br> and to work for a big design company someday.<br> If you need a front-end-developer or looking for an eager intern.<br> Than have a look at this website.</p>
</div>
<div class="what-do-i-do info-block js-section">
<!--<img class="image" src="/images/Paragraph_Images/coding.jpg" width="200" height="200"> -->
<h3 class=" js-header" id="What-Do-I-Do">What do I do</h3>
<p class=" info-block__copy js-copy" style="column-count: 1">
I work as a front-end developer (if you don't know what that is go to this <a href="https://skillcrush.com/2016/02/11/skills-to-become-a-front-end-developer/" target="_blank">page</a>)<br> I develop interactive websites and can refresh your
current site.<br> But I also like making the site interactive for the users of the website. Interested?<br> Take a gander at my projects.</p>
</div>
<div class="info-block js-section">
<h3 class=" js-header" id="How-I-Work">How I work</h3>
<p class=" info-block__copy js-copy" style="column-count: 1">
Solo or group, I can work.<br> My preference does go to group projects. </p>
</div>
<div class="projects info-block js-section">
<h3 class=" js-header" id="Projects">Projects</h3>
<p class=" info-block__copy js-copy" style="column-count: 1">
These are some projects that I have worked on over the last couple years.<br> These can vary from small games to huge websites.<br> It took me a lot of time and effort to make and finish these, even a short peek would also be appreciated.<br> (The projects tab still needs to be added...<br> I should tell the developer this... oh wait)</p>
</div>
<div class="info-block js-section">
<h3 class=" js-header" id="Who-I-Work-With">Who I work with</h3>
<p class=" info-block__copy js-copy" style="column-count: 1">
</p>
</div>
<div class="Experiences info-block js-section" id="Experiences">
<h3 class=" js-header" id="Who-I-work-with">Experiences</h3>
<p class=" info-block__copy js-copy" style="column-count: 1">Over the last couple years I've done internships at several companies.<br> These include</p>
</div>
<div class="links info-block" id="inspiration">
<h3>Just some cool websites</h3>
<h5>No description needed</h5>
<ul class="websites">
<li>
<a href="https://www.sirinlabs.com/" target="_blank">Sirinlabs</a>
</li>
<li>
<a href="https://www.awwwards.com/" target="_blank">Awwwards</a>
</li>
<li>
<a href="https://thefwa.com/awards/page/1/" target="_blank">TheFwa</a>
</li>
<li>
<a href="https://dribbble.com/" target="_blank">Dribbble</a>
</li>
</ul>
</div>
</div>
<hr>
<div class="footer" id="footer">
<p id="Contact" class="e-mail">You won't believe it, you can send emails!</p>
<br>
<div class="button">
<a class="button-extenal-link" href="mailto:rubennijhuis@rubenswebsite.com?subject=Contact">e-mail</a>
</div>
<p class="instagram">Btw there's Instagram nowaydays.</p>
<br>
<div>
<a class="button-extenal-link" href="https://www.instagram.com/ruben_n_pics/" target="_blank">Instagram</a>
</div>
<div class="coffee">
<p>Don't buy me a coffee. I.. I don't like it.</p>
</div>
<p>@2017</p>
</div>
</div>
<div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="js/script.js" type="text/javascript">
</script>
</div>
</body>
</html>
答案 0 :(得分：0)
你的图像类的z-index设置为98.如果你在添加视差之前或之后添加了这个，我不是肯定的，所以这可能不是问题，但尝试在z上设置z-index您正在淡入高于98的z-index的文本，以使其显示在图像上方。
希望这有帮助！
答案 1 :(得分：0)
有你，你现在有这样的标题：
<div class="header" id="header">
<img src="images/Header_Images/amsterdam.jpg">
<h2 class="fadeIn-up">Ruben Nijhuis</h2>
<h4 class="sub-header fadeIn-down">"A Front-End Developer"</h4>
</div>
你的CSS是：
.header img {
width: 100%;
transform: translateZ(-1px) scale(2);
}
尝试将标题内容包装在div中，然后通过CSS应用背景图像。尝试使你的html标题看起来像这样：
<div class="header" id="header">
<div class="banner">
<h2 class="fadeIn-up">Ruben Nijhuis</h2>
<h4 class="sub-header fadeIn-down">"A Front-End Developer"</h4>
</div>
</div>
尝试将这些样式添加到CSS中，以便为图像应用视差背景，并使横幅高度达到100％，以匹配主标题的高度：
.header .banner {
height: 100%;
margin: 0;
padding: 0;
background: url('/images/Header_Images/amsterdam.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
这应该将您的图像应用为“背景”，横幅div中的所有内容都应显示在顶部！我希望这次解决方案对你有用：P！