html : 애니메이션 효과, 특정 텍스트 자주색으로 형광펜 칠하듯이 보여주기
2024. 8. 22. 13:39
애니메이션 효과를 통해 특정 텍스트가 자주색으로 형광펜 칠하듯이 보여지는 효과를 구현하기 위해 HTML, CSS, 그리고 JavaScript를 사용해야 합니다. 다음은 이를 구현하는 방법입니다.
CSS 코드
스크롤이 내려오면 애니메이션이 작동하도록 하기 위해 CSS에서 @keyframes를 사용해 애니메이션을 정의하고, JavaScript로 스크롤 이벤트를 감지하여 애니메이션을 트리거합니다.
JavaScript 코드
스크롤 이벤트를 감지하여 애니메이션을 트리거하는 JavaScript 코드를 추가합니다.
종합된 코드
위의 HTML, CSS, JavaScript 코드를 종합하여 페이지에 적용할 수 있습니다. 전체 코드는 다음과 같습니다.
이 코드를 사용하면 페이지가 스크롤될 때 .on 클래스가 적용된 텍스트에 애니메이션이 적용되어 자주색 형광펜 효과가 나타납니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Animation</title>
<style>
.on {
position: relative;
display: inline-block;
}
.on::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(138, 43, 226, 0.3); /* 자주색 형광펜 색상 */
transform: scaleX(0);
transform-origin: left;
transition: transform 1s ease;
}
.on.active::after {
transform: scaleX(1);
}
</style>
</head>
<body>
<p class="editor-p read" data-break-type="text">③<strong class="on">자기신체사고·자동차상해</strong>는 둘 중 하나를 선택해야 해요. 일단 둘 다 본인 또는 가족이 다쳤을 때 보상받을 수 있다는 공통점이 있어요. 차이점은 자기신체사고의 경우 부상 및 후유장해 시 가입한도액 내에서 상해(장해)급수에 따라 정해진 금액을 보상받고, 자동차상해는 상해(장해)급수와 상관없이 전액 치료비와 함께 장례비·위자료 등을 보상받을 수 있어요. 당연히 자동차상해의 보상 범위가 넓기 때문에 보험료가 비싸지만 차액이 1년에 2만 원 안팎 수준인 만큼 저는<strong class="on"> 자동차상해(사망 1억 원/부상 3,000만 원)를 선택</strong>했어요. </p>
<script>
document.addEventListener('scroll', function() {
const elements = document.querySelectorAll('.on');
elements.forEach(function(element) {
const rect = element.getBoundingClientRect();
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
if (rect.top <= windowHeight && rect.bottom >= 0) {
element.classList.add('active');
}
});
});
</script>
</body>
</html>
참고사이트
https://www.hankookilbo.com/News/Read/A2023022121320005833
"싼 줄 알았더니 제일 비싸"... 자동차보험 '호구' 벗어나는 법 | 한국일보
자동차를 보유한 분이라면 이런 문자메시지 다들 받아 보셨죠? 저 역시 올해로 만 4년째 이용 중인 자동차보험의 갱신주기가 돌아왔다는 통보를
www.hankookilbo.com
'프로그래밍 > HTML' 카테고리의 다른 글
| html : froala Editor 사용하여 콘텐츠 작성 및 미리보기 설정하기 (4) | 2024.09.11 |
|---|---|
| html_css : 마우스 우클릭 방지와 텍스트 드래그 방지를 구현 (Prevent right-clicking and dragging text) (0) | 2024.08.29 |
| image, xml, javascript, css, font 파일을 base64 로 치환하여 html 적용해 보기 (0) | 2024.08.15 |
| [JS] google calendar 와 outlook live 일정 추가하기 (2) | 2023.12.21 |
| 텍스트, 기존 이미지 또는 이모티콘으로 파비콘 무료 생성 (온라인) favicon.io (2) | 2023.10.18 |