Blog

 /*
 // 반짝임 효과:광고 주변에 반짝이는 효과를 줍니다.
 containerDiv.style.cssText += `
     position: relative;
     overflow: hidden;
 `;
 styleTag.textContent += `
     #photoda-div-${r}::before {
         content: '';
         position: absolute;
         top: -50%;
         left: -50%;
         width: 200%;
         height: 200%;
         background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
         animation: shine 3s infinite;
     }
     @keyframes shine {
         0% { transform: translateX(-100%); }
         100% { transform: translateX(100%); }
     }
 `;
 */
 /*
 //펄스 효과:광고가 주기적으로 살짝 커졌다 작아지는 효과
 adframe.style.cssText += `
     animation: pulse 2s infinite;
 `;
 styleTag.textContent += `
     @keyframes pulse {
         0% { transform: scale(1); }
         50% { transform: scale(1.05); }
         100% { transform: scale(1); }
     }
 `;
 */
 
// 애니메이션을 위한 스타일 추가
 adframe.style.cssText += `
     clip-path: inset(50% 0 50% 0);
     transition: clip-path 0.5s ease-out, filter 1s ease-out;
     background: transparent;
     filter: blur(5px);
 `;

 containerDiv.style.cssText += `
     transition: box-shadow 0.3s ease;
 `;
 

 // 애니메이션을 위한 CSS 규칙 추가
 styleTag.textContent += `
     @keyframes openBanner {
         0% {
             clip-path: inset(50% 0 50% 0);
             filter: blur(5px);
         }
         50% {
             clip-path: inset(25% 0 50% 0);
             filter: blur(3px);
         }
         100% {
             clip-path: inset(0 0 0 0);
             filter: blur(0);
         }
     }
 `;

 // 애니메이션 시작을 위한 타이머 설정
 setTimeout(() => {
     adframe.style.animation = 'openBanner 1s ease-out forwards';
     
     // 애니메이션 완료 후 그림자 효과 추가
     adframe.addEventListener('animationend', () => {
         containerDiv.style.boxShadow = '3px 3px 10px rgba(0,0,0,0.3)';
         adframe.style.filter = 'blur(0)';
     }, { once: true });
     
 }, 500); // 0.5초 후에 애니메이션 시작