javascript - 如何在滚动上移动元素?
问题描述
我对 HTML 和 CSS 有点陌生,我查找的所有答案都对我不起作用和/或我不理解它们。有人可以帮我吗?当您滚动时,我想将左三角形向左移动,将右三角形向右移动,但我已经很卡住了。谢谢!
body {
margin: 0px;
padding: 0px;
background: #181818;
font-family: sans-serif;
overflow-x: hidden;
}
#triangle1 {
position: absolute;
width: 0;
height: 0;
border-top: 15vh solid transparent;
border-bottom: 15vh solid transparent;
border-left: 15vh solid #484848;
top: 25%;
left: 42.5%;
z-index: -2;
}
#triangle2 {
position: absolute;
width: 0;
height: 0;
border-top: 15vh solid transparent;
border-bottom: 15vh solid transparent;
border-left: 15vh solid #383838;
top: 25%;
left: 47.5%;
z-index: -2;
}
#triangle3 {
position: absolute;
width: 0;
height: 0;
border-top: 15vh solid transparent;
border-bottom: 15vh solid transparent;
border-left: 15vh solid #282828;
top: 25%;
left: 52.5%;
z-index: -2;
}
a.sd {
font-size: 20px;
color: rgba(255, 255, 255, 0.2);
display: block;
position: absolute;
top: 60%;
width: 100%;
text-align: center;
}
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
</head>
<body>
<div id=triangle1></div>
<div id=triangle2></div>
<div id=triangle3></div>
<a class=sd>Scroll Down</a>
</body>
</html>
解决方案
您需要使用 JavaScript 来计算这些三角形的位置。我已经根据滚动页面的百分比来计算位置。
let tri1 = document.querySelector("#triangle1");
let tri3 = document.querySelector("#triangle3");
let tri1XInitial = tri1.getBoundingClientRect().x;
let tri3XInitial = tri3.getBoundingClientRect().x;
window.addEventListener("scroll", function(e) {
let total = $(document).height();
let current = window.scrollY;
let per = (current / total)
tri1.style.left = -(tri1XInitial * per * 1.25) + tri1XInitial + "px";
tri3.style.left = (tri3XInitial * per) + tri3XInitial + "px";
});
body {
margin: 0px;
padding: 0px;
background: #181818;
font-family: sans-serif;
overflow-x: hidden;
height: 500vh;
}
.container {
position: fixed; /*Optional: For Demo Purposes*/
width: 100vw;
height: 100vh;
}
#triangle1 {
position: absolute;
width: 0;
height: 0;
border-top: 15vh solid transparent;
border-bottom: 15vh solid transparent;
border-left: 15vh solid #484848;
top: 25%;
left: 42.5%;
z-index: -2;
}
#triangle2 {
position: absolute;
width: 0;
height: 0;
border-top: 15vh solid transparent;
border-bottom: 15vh solid transparent;
border-left: 15vh solid #383838;
top: 25%;
left: 47.5%;
z-index: -2;
}
#triangle3 {
position: absolute;
width: 0;
height: 0;
border-top: 15vh solid transparent;
border-bottom: 15vh solid transparent;
border-left: 15vh solid #282828;
top: 25%;
left: 52.5%;
z-index: -2;
}
a.sd {
font-size: 20px;
color: rgba(255, 255, 255, 0.2);
display: block;
position: absolute;
top: 60%;
width: 100%;
text-align: center;
}
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
</head>
<body>
<div class="container">
<div id="triangle1"></div>
<div id="triangle2"></div>
<div id="triangle3"></div>
<a class=sd>Scroll Down</a>
</div>
</body>
</html>
您还可以通过这些三角形设置一些行驶距离。
let tri1 = document.querySelector("#triangle1");
let tri3 = document.querySelector("#triangle3");
let dist = 100;
let tri1XInitial = tri1.getBoundingClientRect().x;
let tri3XInitial = tri3.getBoundingClientRect().x;
window.addEventListener("scroll", function(e) {
let total = $(document).height();
let current = window.scrollY;
let per = (current / total)
tri1.style.left = -(dist * per * 1.25) + tri1XInitial + "px";
tri3.style.left = (dist * per) + tri3XInitial + "px";
});
body {
margin: 0px;
padding: 0px;
background: #181818;
font-family: sans-serif;
overflow-x: hidden;
height: 500vh;
}
.container {
position: fixed; /*Optional: For Demo Purposes*/
width: 100vw;
height: 100vh;
}
#triangle1 {
position: absolute;
width: 0;
height: 0;
border-top: 15vh solid transparent;
border-bottom: 15vh solid transparent;
border-left: 15vh solid #484848;
top: 25%;
left: 42.5%;
z-index: -2;
}
#triangle2 {
position: absolute;
width: 0;
height: 0;
border-top: 15vh solid transparent;
border-bottom: 15vh solid transparent;
border-left: 15vh solid #383838;
top: 25%;
left: 47.5%;
z-index: -2;
}
#triangle3 {
position: absolute;
width: 0;
height: 0;
border-top: 15vh solid transparent;
border-bottom: 15vh solid transparent;
border-left: 15vh solid #282828;
top: 25%;
left: 52.5%;
z-index: -2;
}
a.sd {
font-size: 20px;
color: rgba(255, 255, 255, 0.2);
display: block;
position: absolute;
top: 60%;
width: 100%;
text-align: center;
}
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
</head>
<body>
<div class="container">
<div id="triangle1"></div>
<div id="triangle2"></div>
<div id="triangle3"></div>
<a class=sd>Scroll Down</a>
</div>
</body>
</html>
推荐阅读
- amazon-web-services - 知道如何共享资源的管理
- haskell - 如何创建遵循特定序列的无限整数列表?
- css - 多次单击对象时如何删除蓝色背景?
- node.js - NYC mocha 覆盖了我的 nodejs 代码中的所有文件,除了函数
- php - PHP array_walk_recursive 替换错误值
- sql - “字段列表”MySQL中的未知列“ValidationRequired”
- javascript - 使用 AJAX 将 Javascript 数组传递给 PHP
- android - AAPT:错误:意外元素
在发现 我尝试克隆要运行的 github 示例项目,但由于此错误而无法运行 - java - 将变量传递给 Runnable 在下一行设为 null 之前为 null
- angular - 角度变化检测是否发生在服务中?