-1

I'm a little new to HTML and CSS and all the answers I looked up haven't worked for me and/or I didn't understand them. Could someone help me out here? I want to move the left triangle to the left and the right triangle to the right when you scroll and I've been quite stuck. Thank you!

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>

jsfiddle

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
clos
  • 15
  • 1
  • 6

1 Answers1

2

You need to use JavaScript to calculate the positions of those triangles. I have calc the position based on percentage of page is scrolled.

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>

You can also set some distance to travel, by these triangles.

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>
TechySharnav
  • 4,869
  • 2
  • 11
  • 29