当前项目有两个背景图像。第一个图像是城市。png,是加载页面时看到的第一件事。
此外,当用户滚动时,还有一个div,其文本为“Test text”。我正在尝试将这个div定位到页面的右侧。这是背景的黑色部分。目前,div出现在左上角,并在网页的导航栏中结束。
为了引起大家对这个元素的注意,我使用了AOS Javascript库。
我试着按照这本书中的说明去做
answer
我学习了如何在W3学校创建视差网页的教程。
project on GitHub
.testDiv{
width: 5%;
height: 5%;
left: 50%; //Notice how this does not move the div left 50%
background-color: white;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Guillotine</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="earwig_factory.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="arrowBounce.css" type="text/css">
<link rel="stylesheet" type="text/css" href="GuillotineStyle.css">
<script>
$(document).ready(function () {
AOS.init();
AOS.refreshHard(); //optional
});
$(window).scroll(function(){
if($(document).scrollTop() > 25){
$('.arrow').fadeOut("fast");
}
if($(document).scrollTop() < 25){
$('.arrow').fadeIn("fast");
}
});
</script>
</head>
<body class="scrollbar-6">
<div>
<nav class="header-nav">
<ul class="inline-list">
<a href="GuillotineIndex.html" title="Persona" style=" font-size: 24px; font-family: earwig_factoryletters;">Persona</a>
%nbsp
<a href="GuillotineIndex.html" title="Skills" style=" font-size: 24px;font-family: earwig_factoryletters">Skills </a>
%nbsp
<a href="GuillotineIndex.html" title="Settings" style=" font-size: 24px;font-family: earwig_factoryletters">Settings</a>
</ul>
</nav>
</div>
<div class="parallax">
</div>
<div class="caption">
<span class="border">Scroll Down</span>
<div class="arrow bounce"></div>
</div>
<div class="parallax bgimg">
<div class="testDiv" data-aos="fade-right">
<p style="font-family: earwig_factoryregular; color: black">Test Text</p>
</div>
</div>
</body>
</html>
