<style>
.services-fadeText-container {
text-align: center;
line-height: 1;
margin: 0;
padding: 0;
margin-bottom: -50px;
}
.services-fadeText {
font-size: 4.5vw;
display: inline-block;
line-height: 1;
margin: 0;
padding: 0;
}
@media screen and (max-width: 768px) {
.services-fadeText {
font-size: 7vw;
}
.services-fadeText-container {
margin-bottom: -40px;
}
}
@media screen and (max-width: 480px) {
.services-fadeText {
font-size: 10vw;
}
.services-fadeText-container {
margin-bottom: -30px;
}
}
.services-fadeText span {
opacity: 0;
display: inline-block;
filter: blur(10px);
}
.services-fadeText span.animate {
animation: servicesFadeInBlur 0.4s ease-out forwards;
}
@keyframes servicesFadeInBlur {
0% {
opacity: 0;
transform: translateY(5px);
filter: blur(10px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
</style>
<div class="services-fadeText-container">
<div class="services-fadeText" id="services-animatedText"></div>
</div>
<script>
// 텍스트 초기화 함수
function initServicesText() {
const text = "Our Services";
const container = document.getElementById('services-animatedText');
if (!container) return;
container.innerHTML = '';
for(let i = 0; i < text.length; i++) {
const span = document.createElement('span');
if(text[i] === ' ') {
span.innerHTML = ' ';
} else {
span.textContent = text[i];
}
container.appendChild(span);
}
}
// 애니메이션 시작 함수
function startServicesAnimation() {
const spans = document.querySelectorAll('#services-animatedText span');
spans.forEach((span, i) => {
setTimeout(() => {
span.classList.add('animate');
}, i * 50);
});
}
// 애니메이션 리셋 함수
function resetServicesAnimation() {
const spans = document.querySelectorAll('#services-animatedText span');
spans.forEach(span => span.classList.remove('animate'));
}
// 애니메이션 초기화 및 시작 함수
function initAndAnimateServices() {
resetServicesAnimation();
setTimeout(() => {
initServicesText();
startServicesAnimation();
}, 10);
}
// 요소가 뷰포트 안에 있는지 확인하는 함수
function isServicesElementInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
// 스크롤 이벤트 핸들러
let isServicesAnimating = false;
function handleServicesScroll() {
const container = document.querySelector('.services-fadeText-container');
if (!container || isServicesAnimating) return;
if (isServicesElementInViewport(container)) {
isServicesAnimating = true;
initAndAnimateServices();
setTimeout(() => {
isServicesAnimating = false;
}, 1000);
}
}
// 페이지 로드 시 실행
document.addEventListener('DOMContentLoaded', function() {
initAndAnimateServices(); // 초기 실행
// 스크롤 이벤트 리스너 등록
window.addEventListener('scroll', handleServicesScroll, { passive: true });
// Intersection Observer 설정
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !isServicesAnimating) {
isServicesAnimating = true;
initAndAnimateServices();
setTimeout(() => {
isServicesAnimating = false;
}, 1000);
}
});
},
{
threshold: 0.5,
rootMargin: '0px'
}
);
// 컨테이너 관찰 시작
const container = document.querySelector('.services-fadeText-container');
if (container) {
observer.observe(container);
}
});
// 로고 클릭 이벤트 처리 (수정된 부분)
document.addEventListener('click', function(e) {
const logoLink = e.target.closest('a[href="/"]');
if (logoLink) {
e.preventDefault();
if (window.location.pathname !== '/') {
history.pushState({}, '', '/');
// DOM 업데이트를 위한 지연 추가
setTimeout(() => {
const container = document.querySelector('.services-fadeText-container');
if (container) {
isServicesAnimating = false; // 애니메이션 상태 초기화
initServicesText(); // 텍스트 초기화
requestAnimationFrame(() => {
startServicesAnimation(); // 애니메이션 시작
});
}
}, 100); // DOM 업데이트를 위한 충분한 시간 대기
}
}
});
// URL 변경 감지 (수정된 부분)
let lastUrl = location.href;
new MutationObserver(() => {
const url = location.href;
if (url !== lastUrl) {
lastUrl = url;
if (url === window.location.origin + '/' || url === '/') {
setTimeout(() => {
const container = document.querySelector('.services-fadeText-container');
if (container) {
isServicesAnimating = false;
initServicesText();
requestAnimationFrame(() => {
startServicesAnimation();
});
}
}, 100);
}
}
}).observe(document, {subtree: true, childList: true});
</script>
<span class="responsive-text">쇼핑몰의 품격을 높이는 맞춤형 디자인으로, 당신의 비즈니스에 특별한 가치를 더합니다</span>
<style>
.responsive-text {
font-size: 1.5vw; /* 데스크톱 기본 크기 */
}
/* 태블릿 크기 */
@media screen and (max-width: 768px) {
.responsive-text {
font-size: 2.5vw;
}
}
/* 모바일 크기 */
@media screen and (max-width: 480px) {
.responsive-text {
font-size: 4vw;
}
}
</style>
