Circle Scroll

HTML _CSS

Circle Scroll

HiroDaegu 2022. 11. 5. 00:44

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>SCROLL CIRCLE</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
</head>
<body>
    <section>
        <div class="sec sec1"><h2>Magic</h2></div>
        <div class="sec sec2"><h2>Magic</h2></div>
        <h2>Magic</h2>
    </section>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 200vh;
}

section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #333;
}

section .sec {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
}

section .sec.sec1 {
    background-color: #B0FF54;
    clip-path: circle(200px at 0 0);
}

section .sec.sec2 {
    background-color: #03A6F4;
    clip-path: circle(200px at 100% 100%);
}

section h2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    color: #FFF;
    font-size: 18em;
}

section .sec.sec1 h2 {
    color: transparent;
    -webkit-text-stroke: 5px #333;
}

section .sec.sec2 h2 {
    color: #333;
    -webkit-text-stroke: 5px #FFF;
}

let sec1 = document.querySelector(".sec1");
let sec2 = document.querySelector(".sec2");

window.addEventListener("scroll", function () {
  let val = window.scrollY;
  sec1.style.clipPath = `circle(${val * 1.15}px at 0 0)`;
  sec2.style.clipPath = `circle(${val * 0.85}px at 100% 100%)`;
});

728x90

LIST