CSS

Question

这个项目是Chinhododo在GitHub上的Persona 5 Fusion计算器的分支。它的目的是帮助我练习我的Web UI开发技能。

当前项目有两个背景图片。第一个图像是city.png，是加载页面时首先看到的。

当用户向下滚动时，第二个图像将出现在视口中。这张图片是Akira.png。

此外，当用户滚动时，会出现一个包含文本＆＃34; Test Text＆＃34;的div。我试图将此div放在页面的右侧。这是背景的黑色面。目前，div显示在左上角，最终位于网页的导航栏中。

为了引起对这个元素的注意，我正在使用AOS Javascript库。

我尝试按照answer中的说明操作，但结果最终破坏了视差效果。

我遵循了关于如何在w3schools上创建Parallax网页的教程。

这是我的project on GitHub

CSS

    .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>

Answer 1

我找到了解决问题的方法。这是缺少的东西。

我需要将position属性应用于我想要移动的div。我认为绝对定位最符合我的预期目标。

然后我使用margin属性将div移动到正确的位置。

如何在不同视口中的视差网页中定位元素？

CSS

HTML

1 个答案: