Spaces:
Running
Running
File size: 3,218 Bytes
c262010 196faa4 c262010 a146d83 c262010 5261cce a146d83 c262010 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
class BackgroundClouds extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
overflow: hidden;
background: linear-gradient(135deg, var(--sky-gradient-start), var(--sky-gradient-end));
animation: sky-pulse 30s ease infinite;
background-size: 200% 200%;
}
@keyframes sky-pulse {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.bg-cloud {
position: absolute;
background: white;
border-radius: 50%;
opacity: 0.4;
filter: blur(5px);
animation: float 20s linear infinite;
}
.bg-cloud::before, .bg-cloud::after {
content: '';
position: absolute;
background: white;
border-radius: 50%;
}
@keyframes float {
0% { transform: translateX(0) translateY(0); }
25% { transform: translateX(5%) translateY(-3%); }
50% { transform: translateX(10%) translateY(0); }
75% { transform: translateX(5%) translateY(3%); }
100% { transform: translateX(0) translateY(0); }
}
</style>
<div id="clouds-container"></div>
`;
this.createClouds();
}
createClouds() {
const container = this.shadowRoot.getElementById('clouds-container');
const width = window.innerWidth;
const height = window.innerHeight;
for (let i = 0; i < 20; i++) {
const cloud = document.createElement('div');
const size = Math.random() * 150 + 50;
const opacity = Math.random() * 0.5 + 0.1;
const left = Math.random() * width;
const top = Math.random() * height;
const duration = Math.random() * 30 + 30;
cloud.className = 'bg-cloud';
cloud.style.width = `${size}px`;
cloud.style.height = `${size * 0.6}px`;
cloud.style.left = `${left}px`;
cloud.style.top = `${top}px`;
cloud.style.opacity = opacity;
cloud.style.animationDuration = `${duration}s`;
cloud.style.animationDelay = `${Math.random() * 20}s`;
container.appendChild(cloud);
}
}
}
customElements.define('background-clouds', BackgroundClouds); |