693 lines
23 KiB
JavaScript
693 lines
23 KiB
JavaScript
// Animated Hosting Banner Component with D3.js
|
|
function createAnimatedHostingBanner() {
|
|
const bannerId = 'hosting-banner-' + Date.now();
|
|
|
|
const bannerHTML = `
|
|
<div id="${bannerId}" class="animated-hosting-banner-wrapper">
|
|
<div class="animated-hosting-banner">
|
|
<div class="banner-background-animation">
|
|
<svg id="banner-svg-${bannerId}" width="100%" height="100%"></svg>
|
|
</div>
|
|
|
|
<div class="banner-content-container">
|
|
<div class="banner-left-section">
|
|
<div class="banner-icon-animated">
|
|
<svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M21 16V8C20.9996 7.64927 20.9071 7.30481 20.7315 7.00116C20.556 6.69751 20.3037 6.44536 20 6.27L13 2.27C12.696 2.09446 12.3511 2.00205 12 2.00205C11.6489 2.00205 11.304 2.09446 11 2.27L4 6.27C3.69626 6.44536 3.44398 6.69751 3.26846 7.00116C3.09294 7.30481 3.00036 7.64927 3 8V16C3.00036 16.3507 3.09294 16.6952 3.26846 16.9988C3.44398 17.3025 3.69626 17.5546 4 17.73L11 21.73C11.304 21.9055 11.6489 21.9979 12 21.9979C12.3511 21.9979 12.696 21.9055 13 21.73L20 17.73C20.3037 17.5546 20.556 17.3025 20.7315 16.9988C20.9071 16.6952 20.9996 16.3507 21 16Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M3.27 6.96L12 12.01L20.73 6.96" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M12 22.08V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="banner-center-section">
|
|
<h3 class="banner-headline">
|
|
<span class="banner-text-animate">Tu Odoo es Como un Ferrari con Motor de Fiat</span>
|
|
</h3>
|
|
<p class="banner-subheadline">
|
|
<span class="banner-metric">7 Ubicaciones Globales</span>
|
|
<span class="banner-separator">•</span>
|
|
<span class="banner-metric">IA Integrada</span>
|
|
<span class="banner-separator">•</span>
|
|
<span class="banner-metric">60 Días Garantía</span>
|
|
</p>
|
|
<div class="banner-features">
|
|
<div class="feature-badge">🚀 De Side Hustle a Imperio</div>
|
|
<div class="feature-badge">🤖 Agentes IA Multilingües</div>
|
|
<div class="feature-badge">🛡️ Migración Sin Drama</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="banner-right-section">
|
|
<div class="banner-transformation-text">
|
|
<span class="transformation-label">Deja de Sobrevivir</span>
|
|
<div class="transformation-action">
|
|
<span class="action-text">Empieza a</span>
|
|
<span class="action-highlight">ESCALAR</span>
|
|
</div>
|
|
</div>
|
|
<a href="https://ODOO4projects.com?utm_source=X5Y2I933&utm_medium=lph"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="banner-cta-button">
|
|
<span class="cta-text">Desbloquea Tu Potencial</span>
|
|
<svg class="cta-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</a>
|
|
<p class="banner-guarantee">Sin Riesgo • Sin Compromiso</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="banner-close-btn" onclick="closeAnimatedBanner('${bannerId}')" aria-label="Cerrar banner">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
|
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Add styles
|
|
const styles = `
|
|
<style>
|
|
.animated-hosting-banner-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 4rem 0 2rem;
|
|
padding: 0 1rem;
|
|
animation: bannerSlideUp 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
@keyframes bannerSlideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(50px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animated-hosting-banner {
|
|
position: relative;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
box-shadow:
|
|
0 20px 60px rgba(255, 107, 53, 0.3),
|
|
0 10px 30px rgba(0, 0, 0, 0.5),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.animated-hosting-banner::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg,
|
|
rgba(255, 107, 53, 0.15) 0%,
|
|
rgba(255, 138, 80, 0.1) 25%,
|
|
transparent 50%,
|
|
rgba(255, 107, 53, 0.05) 75%,
|
|
rgba(255, 138, 80, 0.15) 100%);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.banner-background-animation {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.3;
|
|
z-index: 0;
|
|
}
|
|
|
|
.banner-content-container {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 2rem 3rem;
|
|
gap: 2rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Left Section - Icon */
|
|
.banner-left-section {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.banner-icon-animated {
|
|
width: 80px;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #FF6B35 0%, #FF8A50 100%);
|
|
border-radius: 20px;
|
|
color: white;
|
|
animation: iconPulse 3s ease-in-out infinite;
|
|
box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
|
|
}
|
|
|
|
@keyframes iconPulse {
|
|
0%, 100% {
|
|
transform: scale(1) rotate(0deg);
|
|
box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
|
|
}
|
|
25% {
|
|
transform: scale(1.05) rotate(5deg);
|
|
box-shadow: 0 15px 40px rgba(255, 107, 53, 0.6);
|
|
}
|
|
50% {
|
|
transform: scale(1.1) rotate(-5deg);
|
|
box-shadow: 0 20px 50px rgba(255, 107, 53, 0.5);
|
|
}
|
|
75% {
|
|
transform: scale(1.05) rotate(3deg);
|
|
box-shadow: 0 15px 40px rgba(255, 107, 53, 0.6);
|
|
}
|
|
}
|
|
|
|
/* Center Section - Content */
|
|
.banner-center-section {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.banner-headline {
|
|
font-size: 1.75rem;
|
|
font-weight: 800;
|
|
color: #FFFFFF;
|
|
margin: 0 0 0.5rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.banner-text-animate {
|
|
background: linear-gradient(90deg, #FFFFFF, #FF6B35, #FFFFFF);
|
|
background-size: 200% auto;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: shimmer 3s linear infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
to {
|
|
background-position: 200% center;
|
|
}
|
|
}
|
|
|
|
.banner-subheadline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
color: #e0e0e0;
|
|
font-size: 0.95rem;
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
.banner-metric {
|
|
font-weight: 600;
|
|
color: #FF8A50;
|
|
animation: metricGlow 2s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes metricGlow {
|
|
from {
|
|
text-shadow: 0 0 5px rgba(255, 138, 80, 0.5);
|
|
}
|
|
to {
|
|
text-shadow: 0 0 15px rgba(255, 138, 80, 0.8);
|
|
}
|
|
}
|
|
|
|
.banner-separator {
|
|
color: #666;
|
|
}
|
|
|
|
.banner-features {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.feature-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.75rem;
|
|
background: rgba(255, 107, 53, 0.1);
|
|
border: 1px solid rgba(255, 107, 53, 0.3);
|
|
border-radius: 20px;
|
|
color: #FF8A50;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
animation: badgeFadeIn 0.5s ease-out backwards;
|
|
}
|
|
|
|
.feature-badge:nth-child(1) { animation-delay: 0.2s; }
|
|
.feature-badge:nth-child(2) { animation-delay: 0.4s; }
|
|
.feature-badge:nth-child(3) { animation-delay: 0.6s; }
|
|
|
|
@keyframes badgeFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Right Section - CTA */
|
|
.banner-right-section {
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.banner-transformation-text {
|
|
margin-bottom: 1.5rem;
|
|
animation: transformSlideIn 0.8s ease-out backwards;
|
|
animation-delay: 0.3s;
|
|
text-align: center;
|
|
}
|
|
|
|
@keyframes transformSlideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(30px) scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.transformation-label {
|
|
display: block;
|
|
color: #999;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.5rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.transformation-action {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.action-text {
|
|
color: #e0e0e0;
|
|
font-size: 1.2rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.action-highlight {
|
|
color: #FFFFFF;
|
|
font-size: 2.2rem;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
background: linear-gradient(90deg, #FF6B35, #FFD700, #FF6B35);
|
|
background-size: 200% auto;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: shimmerGold 3s linear infinite;
|
|
text-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
|
|
}
|
|
|
|
@keyframes shimmerGold {
|
|
to {
|
|
background-position: 200% center;
|
|
}
|
|
}
|
|
|
|
.banner-cta-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 1rem 2rem;
|
|
background: linear-gradient(135deg, #FF6B35 0%, #FF8A50 100%);
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 12px;
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow:
|
|
0 10px 25px rgba(255, 107, 53, 0.3),
|
|
0 5px 10px rgba(0, 0, 0, 0.2);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.banner-cta-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
|
|
transform: translate(-50%, -50%);
|
|
transition: width 0.6s, height 0.6s;
|
|
}
|
|
|
|
.banner-cta-button:hover::before {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
.banner-cta-button:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow:
|
|
0 15px 35px rgba(255, 107, 53, 0.4),
|
|
0 8px 15px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.cta-text {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cta-arrow {
|
|
position: relative;
|
|
z-index: 1;
|
|
animation: arrowMove 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes arrowMove {
|
|
0%, 100% {
|
|
transform: translateX(0);
|
|
}
|
|
50% {
|
|
transform: translateX(5px);
|
|
}
|
|
}
|
|
|
|
.banner-guarantee {
|
|
margin: 0.5rem 0 0;
|
|
color: #999;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.banner-close-btn {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 50%;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
color: #999;
|
|
transition: all 0.3s ease;
|
|
z-index: 10;
|
|
}
|
|
|
|
.banner-close-btn:hover {
|
|
background: rgba(255, 107, 53, 0.2);
|
|
border-color: rgba(255, 107, 53, 0.4);
|
|
color: #FF6B35;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 968px) {
|
|
.banner-content-container {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
.banner-icon-animated {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.banner-headline {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.banner-subheadline {
|
|
justify-content: center;
|
|
}
|
|
|
|
.banner-features {
|
|
justify-content: center;
|
|
}
|
|
|
|
.banner-right-section {
|
|
width: 100%;
|
|
}
|
|
|
|
.banner-cta-button {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.banner-headline {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.banner-subheadline {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.banner-separator {
|
|
display: none;
|
|
}
|
|
|
|
.feature-badge {
|
|
font-size: 0.75rem;
|
|
padding: 0.2rem 0.5rem;
|
|
}
|
|
|
|
.action-highlight {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.transformation-label {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
/* Hidden state */
|
|
.animated-hosting-banner-wrapper.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
`;
|
|
|
|
return styles + bannerHTML;
|
|
}
|
|
|
|
// Function to close the banner
|
|
function closeAnimatedBanner(bannerId) {
|
|
const banner = document.getElementById(bannerId);
|
|
if (banner) {
|
|
banner.style.animation = 'bannerSlideDown 0.5s ease-in forwards';
|
|
setTimeout(() => {
|
|
banner.classList.add('hidden');
|
|
localStorage.setItem('hostingBannerClosed', 'true');
|
|
localStorage.setItem('hostingBannerClosedDate', new Date().toISOString());
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
// Add slide down animation
|
|
const slideDownStyle = document.createElement('style');
|
|
slideDownStyle.textContent = `
|
|
@keyframes bannerSlideDown {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(50px);
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(slideDownStyle);
|
|
|
|
// Function to initialize D3.js animations
|
|
function initializeBannerAnimations(bannerId) {
|
|
// Only run if D3 is available
|
|
if (typeof d3 === 'undefined') {
|
|
console.log('D3.js not loaded, skipping animations');
|
|
return;
|
|
}
|
|
|
|
const svg = d3.select(`#banner-svg-${bannerId}`);
|
|
const width = 1200;
|
|
const height = 200;
|
|
|
|
svg.attr('viewBox', `0 0 ${width} ${height}`)
|
|
.attr('preserveAspectRatio', 'xMidYMid slice');
|
|
|
|
// Create animated particles
|
|
const particleCount = 30;
|
|
const particles = Array.from({length: particleCount}, (_, i) => ({
|
|
id: i,
|
|
x: Math.random() * width,
|
|
y: Math.random() * height,
|
|
r: Math.random() * 3 + 1,
|
|
dx: (Math.random() - 0.5) * 2,
|
|
dy: (Math.random() - 0.5) * 2,
|
|
opacity: Math.random() * 0.5 + 0.2
|
|
}));
|
|
|
|
// Add gradient definitions
|
|
const defs = svg.append('defs');
|
|
|
|
const gradient = defs.append('linearGradient')
|
|
.attr('id', `particle-gradient-${bannerId}`)
|
|
.attr('x1', '0%')
|
|
.attr('y1', '0%')
|
|
.attr('x2', '100%')
|
|
.attr('y2', '100%');
|
|
|
|
gradient.append('stop')
|
|
.attr('offset', '0%')
|
|
.style('stop-color', '#FF6B35')
|
|
.style('stop-opacity', 0.8);
|
|
|
|
gradient.append('stop')
|
|
.attr('offset', '100%')
|
|
.style('stop-color', '#FF8A50')
|
|
.style('stop-opacity', 0.4);
|
|
|
|
// Create particle elements
|
|
const particleElements = svg.selectAll('circle')
|
|
.data(particles)
|
|
.enter()
|
|
.append('circle')
|
|
.attr('cx', d => d.x)
|
|
.attr('cy', d => d.y)
|
|
.attr('r', d => d.r)
|
|
.attr('fill', `url(#particle-gradient-${bannerId})`)
|
|
.attr('opacity', d => d.opacity);
|
|
|
|
// Animate particles
|
|
function animateParticles() {
|
|
particles.forEach(p => {
|
|
p.x += p.dx;
|
|
p.y += p.dy;
|
|
|
|
// Wrap around edges
|
|
if (p.x < 0) p.x = width;
|
|
if (p.x > width) p.x = 0;
|
|
if (p.y < 0) p.y = height;
|
|
if (p.y > height) p.y = 0;
|
|
});
|
|
|
|
particleElements
|
|
.data(particles)
|
|
.attr('cx', d => d.x)
|
|
.attr('cy', d => d.y);
|
|
|
|
requestAnimationFrame(animateParticles);
|
|
}
|
|
|
|
animateParticles();
|
|
|
|
// Add connection lines between nearby particles
|
|
const connectionThreshold = 100;
|
|
|
|
function updateConnections() {
|
|
// Remove existing lines
|
|
svg.selectAll('line').remove();
|
|
|
|
// Add new connections
|
|
for (let i = 0; i < particles.length; i++) {
|
|
for (let j = i + 1; j < particles.length; j++) {
|
|
const dx = particles[i].x - particles[j].x;
|
|
const dy = particles[i].y - particles[j].y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance < connectionThreshold) {
|
|
const opacity = (1 - distance / connectionThreshold) * 0.2;
|
|
svg.append('line')
|
|
.attr('x1', particles[i].x)
|
|
.attr('y1', particles[i].y)
|
|
.attr('x2', particles[j].x)
|
|
.attr('y2', particles[j].y)
|
|
.attr('stroke', '#FF6B35')
|
|
.attr('stroke-width', 0.5)
|
|
.attr('opacity', opacity);
|
|
}
|
|
}
|
|
}
|
|
|
|
setTimeout(updateConnections, 100);
|
|
}
|
|
|
|
updateConnections();
|
|
}
|
|
|
|
// Check if banner should be shown
|
|
function shouldShowAnimatedBanner() {
|
|
const currentPath = window.location.pathname;
|
|
const isHostingPage = currentPath.includes('/odoo-hosting/');
|
|
const bannerClosed = localStorage.getItem('hostingBannerClosed');
|
|
const closedDate = localStorage.getItem('hostingBannerClosedDate');
|
|
|
|
// Reset after 24 hours
|
|
if (closedDate) {
|
|
const dayAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);
|
|
if (new Date(closedDate) < dayAgo) {
|
|
localStorage.removeItem('hostingBannerClosed');
|
|
localStorage.removeItem('hostingBannerClosedDate');
|
|
return isHostingPage;
|
|
}
|
|
}
|
|
|
|
return isHostingPage && bannerClosed !== 'true';
|
|
}
|
|
|
|
// Auto-initialize when DOM is ready
|
|
if (typeof window !== 'undefined') {
|
|
// Wait for DOM and D3 to be ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
setTimeout(() => {
|
|
const bannerId = 'hosting-banner-' + Date.now();
|
|
if (shouldShowAnimatedBanner()) {
|
|
initializeBannerAnimations(bannerId);
|
|
}
|
|
}, 100);
|
|
});
|
|
} else {
|
|
// DOM is already ready
|
|
setTimeout(() => {
|
|
const bannerId = 'hosting-banner-' + Date.now();
|
|
if (shouldShowAnimatedBanner()) {
|
|
initializeBannerAnimations(bannerId);
|
|
}
|
|
}, 100);
|
|
}
|
|
} |