文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将元素放在视差网页中不同的视图中？

问如何将元素放在视差网页中不同的视图中？
EN

Stack Overflow用户

提问于 2017-07-31 23:54:55

回答 1查看 584关注 0票数 0

本项目是Chinhododo在GitHub上的角色5融合计算器的一个分支。它的目的是帮助我实践我的网络用户界面开发技能。

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

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

另外，当用户滚动时，有一个带有文本“Text”的div。我正在尝试将这个div定位到页面的右侧。这是背景的黑暗面。当前，div出现在左上角，并最终出现在网页的导航栏中。

为了提请注意这个元素，我正在使用AOS Javascript库。

我试着遵循这个回答中的指令，但是结果最终破坏了视差效应。

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

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

javascript

html

css

web

parallax

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-06 20:28:40

我找到了解决问题的办法。这是丢失的东西。

我需要将这个位置属性应用到我想要移动的div上。我决定绝对的定位是最适合我的目标。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45426968

复制

相似问题

问如何将元素放在视差网页中不同的视图中？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将元素放在视差网页中不同的视图中？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将元素放在视差网页中不同的视图中？
EN