비전공자 개발일기

Page Scroll Effect 본문

HTML _CSS

Page Scroll Effect

HiroDaegu 2022. 5. 26. 00:05
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PAGE SCROLL EFFECTS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <section>
    <p style="color: red;">SCROLL</p>
    <span class="curve">
      <img src="curve.png">
    </span>
  </section>
  <script>
    let scroll = document.querySelector(".curve");
    window.addEventListener("scroll", function() {
      let val = 1 + window.scrollY / 1200;
      scroll.style.transform = `scaleY(${val})`;
    })
  </script>
</body>
</html>
* {
  margin: 0 ;
  padding: 0;
}

body {
  background-color: #111;
  height: 200vh;
}

section {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #2abbff;
}

section p{
  font-size: 100px;
  color: #6667ab;
  text-align: center;
  position: absolute;
  top: 70%;
  left: 39%;
  z-index: 3;
}

section .curve {
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: -200px;
  transform-origin: top;
}

section .curve img {
  width: 100%;
  height: 100%;

}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

RANGE SLIDER  (0) 2022.05.29
Isometric Cards  (0) 2022.05.28
FILP CARD  (0) 2022.05.20
Isometric Menu Hover Effects  (0) 2022.05.19
Sprite Animation  (0) 2022.05.18
'HTML _CSS' Related Articles more