[해피CGI][cgimall] Scroll with light (CSS only)

스크롤을 통하여 글자가 보이는 효과입니다.
코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다.

HTML

<main>   <div class="scrollbar"></div>   <div class="container">     <p>       In the enchanted world of frontend development, pixels and code guide your design journey. Entranced by the dance of colors, shapes unfold on the digital canvas. Every line of code is a spell, weaving functionality and aesthetics into an immersive digital tale.</p>     <p>       In the enchanted world of frontend development, pixels and code guide your design journey. Entranced by the dance of colors, shapes unfold on the digital canvas. Every line of code is a spell, weaving functionality and aesthetics into an immersive digital tale.</p>     <p>       In the enchanted world of frontend development, pixels and code guide your design journey. Entranced by the dance of colors, shapes unfold on the digital canvas. Every line of code is a spell, weaving functionality and aesthetics into an immersive digital tale.</p>     <p>       In the enchanted world of frontend development, pixels and code guide your design journey. Entranced by the dance of colors, shapes unfold on the digital canvas. Every line of code is a spell, weaving functionality and aesthetics into an immersive digital tale.</p>   </div> </main>

CSS

@property --scroll-y-position {   syntax: "<percentage>";   initial-value: -10%;   inherits: false; } @property --reflection-y-position {   syntax: "<percentage>";   initial-value: -50%;   inherits: false; } @property --scrollbar-color {   syntax: "<color>";   inherits: false;   initial-value: transparent; } @property --opacity-1 {   syntax: "<number>";   inherits: false;   initial-value: 0.1; } @property --opacity-2 {   syntax: "<number>";   inherits: false;   initial-value: 0.1; } @property --opacity-3 {   syntax: "<number>";   inherits: false;   initial-value: 0.1; } @property --opacity-4 {   syntax: "<number>";   inherits: false;   initial-value: 0.1; }   @property --text-offset-1 {   syntax: "<number>";   inherits: false;   initial-value: 10; } @property --text-offset-2 {   syntax: "<number>";   inherits: false;   initial-value: 10; } @property --text-offset-3 {   syntax: "<number>";   inherits: false;   initial-value: 10; } @property --text-offset-4 {   syntax: "<number>";   inherits: false;   initial-value: 10; } html::-webkit-scrollbar {   display: none; } body {   margin: 0;   background: black;   height: 900px;   font-family: sans-serif; } .scrollbar {   width: 4px;   height: 100%;   background-color: var(--scrollbar-color);   background-image: radial-gradient(     circle at 0% var(--scroll-y-position),     rgb(112, 153, 255) 0%,     rgba(56, 106, 249, 0.79135) 10px,     rgba(10, 76, 242, 0.53) 20px,     rgba(255, 255, 255, 0) 40px,     rgba(49, 49, 49, 0) 100%   );   animation: on-scrolling both linear;   animation-timeline: scroll();   animation-range: 10vh; }   .container {   width: 350px;   height: 100%;   background: linear-gradient(     132deg,     rgba(255, 255, 255, 0.09) 0%,     rgba(238, 238, 238, 0.03) 20%,     rgba(202, 202, 202, 0.04) 70%,     rgba(171, 171, 171, 0.02) 100%   );   border: solid rgba(255, 255, 255, 0.06) 1px;   margin-left: 15px;   position: relative; } .container::before, .container::after {   content: "";   position: absolute;   top: 0;   left: 0;   display: block;   width: 100%;   height: 100%;   background: linear-gradient(     180deg,     rgba(10, 76, 242, 0) 0%,     rgba(10, 76, 242, 0.75203) 38.288288288288285%,     rgb(77, 127, 255) 50.9132179054054%,     rgba(10, 76, 242, 0.75248) 63.06306306306306%,     rgba(10, 76, 242, 0) 100%   );   background-repeat: no-repeat;   background-position-y: var(--reflection-y-position);   animation: on-scrolling both linear;   animation-timeline: scroll();   animation-range: 10vh; } .container::before {   background-size: 1px 150px;   filter: blur(1px); } .container::after {   background-size: 10px 150px;   filter: blur(10px); }   main {   width: 100%;   height: 100%;   display: flex;   justify-content: center;   align-items: center;   margin-top: 40vh;   padding-bottom: 40vh; }   p {   background-image: linear-gradient(     270deg,     rgba(255, 255, 255, 0.4) 0%,     rgba(255, 255, 255, 0.9) 90%,     rgb(191, 209, 255) 100%   );   background-clip: text;   -webkit-background-clip: text;   color: transparent;   padding: 20px;   line-height: 1.5em;   --opacity-1: 0.1;   --opacity-2: 0.1;   --opacity-3: 0.1;   --opacity-4: 0.1;   --text-offset-1: 10;   --text-offset-2: 10;   --text-offset-3: 10;   --text-offset-4: 10;   animation: on-scrolling both linear;   animation-timeline: scroll();   animation-range: 10vh; }   p:nth-child(1) {   opacity: var(--opacity-1);   transform: translateY(calc(var(--text-offset-1) * 1px)); } p:nth-child(2) {   opacity: var(--opacity-2);   transform: translateY(calc(var(--text-offset-2) * 1px)); } p:nth-child(3) {   opacity: var(--opacity-3);   transform: translateY(calc(var(--text-offset-3) * 1px)); } p:nth-child(4) {   opacity: var(--opacity-4);   transform: translateY(calc(var(--text-offset-4) * 1px)); }   @keyframes on-scrolling {   0% {     --scroll-y-position: -10%;     --reflection-y-position: -22%;   }   1% {     --scrollbar-color: rgba(255, 255, 255, 0.1);   }   25% {     --opacity-1: 1;     --opacity-2: 0.1;     --opacity-3: 0.1;     --opacity-4: 0.1;       --text-offset-1: 0;     --text-offset-2: 10;     --text-offset-3: 10;     --text-offset-4: 10;   }   50% {     --scroll-y-position: 50%;     --reflection-y-position: 50%;     --opacity-1: 0.1;     --opacity-2: 1;     --opacity-3: 0.1;     --opacity-4: 0.1;       --text-offset-1: 10;     --text-offset-2: 0;     --text-offset-3: 10;     --text-offset-4: 10;   }   60% {     --opacity-1: 0.1;     --opacity-2: 0.1;     --opacity-3: 1;     --opacity-4: 0.1;       --text-offset-1: 10;     --text-offset-2: 10;     --text-offset-3: 0;     --text-offset-4: 10;   }   90% {     --opacity-1: 0.1;     --opacity-2: 0.1;     --opacity-3: 0.1;     --opacity-4: 1;       --text-offset-1: 10;     --text-offset-2: 10;     --text-offset-3: 10;     --text-offset-4: 0;   }   100% {     --text-offset-1: 10;     --text-offset-2: 10;     --text-offset-3: 10;     --text-offset-4: 10;     --opacity-1: 0.1;     --opacity-2: 0.1;     --opacity-3: 0.1;     --opacity-4: 0.1;     --scroll-y-position: 105%;     --reflection-y-position: 115%;     --scrollbar-color: rgba(255, 255, 255, 0.1);   } }