시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > CSS > 기타효과 > Scroll with light (CSS only) 상세정보
사이트등록
클라우드태그
javascript
PHP
html
ASP
mysql
css
mobile
jquery
image
占쌨댐옙
slide
占쏙옙占쏙옙占쏙옙트
메뉴
현재접속자 새로고침
Scroll with light (CSS only)
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기
소스분류 기타효과
다운로드 횟수 6 회
간단설명 CSS만 사용하여 스크롤 시 글자가 보이는빛 효과
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
홈페이지바로가기 소스다운로드 데모 미리보기 스크랩하기
 

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

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);
  }
}
 

네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 68718241 보이는 도배방지키를 입력하세요.