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

Question

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

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

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

此外，当用户滚动时，会出现带有文本 "Test Text" 的 div。我试图将此 div 定位到页面的右侧。这是背景的黑色面。当前 div 出现在左上角并最终出现在网页的导航栏中。

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

我尝试按照此中的说明进行操作，但结果却破坏了视差效果。

我遵循了有关如何在 w3schools 上创建视差网页的教程。

这是我的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

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

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

然后我使用边距属性将 div 向下移动到正确的位置。

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

How can I position elements in a parallax webpage in the different viewports?

html

javascript

css

parallax

web

CSS

HTML