Webleb - कोड स्निपेट्स - एसवीजी मॉर्फिंग एनीमेशन

HTML

<!DOCTYPE html>

<head>

<title>SVG Morphing Animation</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Arial', sans-serif;

background: #111;

color: white;

overflow-x: hidden;

}

.hero {

height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

position: relative;

overflow: hidden;

}

.hero-content {

text-align: center;

z-index: 10;

padding: 0 20px;

max-width: 800px;

}

h1 {

font-size: 3.5rem;

margin-bottom: 1rem;

background: linear-gradient(45deg, #ff8a00, #e52e71);

-webkit-background-clip: text;

background-clip: text;

color: transparent;

}

p {

font-size: 1.2rem;

margin-bottom: 2rem;

opacity: 0.9;

}

.btn {

display: inline-block;

padding: 12px 30px;

background: linear-gradient(45deg, #ff8a00, #e52e71);

color: white;

text-decoration: none;

border-radius: 50px;

font-weight: bold;

transition: transform 0.3s, box-shadow 0.3s;

box-shadow: 0 4px 15px rgba(255, 138, 0, 0.4);

}

.btn:hover {

transform: translateY(-3px);

box-shadow: 0 6px 20px rgba(255, 138, 0, 0.6);

}

.morph-container {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

}

.morph-shape {

position: absolute;

width: 100%;

height: 100%;

fill: url(#gradient);

opacity: 0.8;

}

.photo-grid {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-template-rows: repeat(3, 1fr);

z-index: 0;

}

.photo {

background-size: cover;

background-position: center;

opacity: 0.7;

transition: opacity 0.5s;

}

.photo:hover {

opacity: 1;

}

.features {

padding: 100px 20px;

max-width: 1200px;

margin: 0 auto;

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 40px;

}

.feature-card {

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

border-radius: 20px;

padding: 30px;

transition: transform 0.5s;

}

.feature-card:hover {

transform: translateY(-10px);

}

.feature-card h3 {

font-size: 1.5rem;

margin-bottom: 15px;

color: #ff8a00;

}

@media (max-width: 768px) {

h1 {

font-size: 2.5rem;

}

p {

font-size: 1rem;

}

.photo-grid {

grid-template-columns: repeat(2, 1fr);

grid-template-rows: repeat(4, 1fr);

}

@media (max-width: 480px) {

h1 {

font-size: 2rem;

}

.photo-grid {

grid-template-columns: 1fr;

grid-template-rows: repeat(6, 1fr);

}

.features {

grid-template-columns: 1fr;

}

</style>

</head>

<body>

<h1>Amazing SVG Morphing</h1>

<p>Experience the power of SVG animations combined with beautiful royalty-free photography</p>

<a href="#" class="btn">Explore More</a>

</div>

</div>

<defs>

</linearGradient>

</defs>

</svg>

</div>

</section>

<h3>SVG Morphing</h3>

<p>Experience smooth shape-shifting animations powered by SVG and JavaScript. Our morphing effects are lightweight and work across all modern browsers.</p>

</div>

<h3>Royalty-Free Photos</h3>

<p>All images are sourced from Unsplash, completely free to use for both personal and commercial projects without attribution required.</p>

</div>

<h3>Responsive Design</h3>

<p>Fully responsive layout that adapts to any screen size, from mobile phones to large desktop displays.</p>

</div>

</section>

// SVG Morphing Animation

const morphShape = document.querySelector('.morph-shape');

const paths = [

'M0,0 L100,0 L100,100 Q50,80 0,100 Z',

'M0,0 L100,0 L100,80 Q50,100 0,80 Z',

'M0,20 L100,0 L100,100 Q50,70 0,100 Z',

'M0,0 L100,20 L100,100 Q50,90 0,80 Z',

'M0,10 L100,0 L90,100 Q50,95 10,100 Z'

];

let currentPath = 0;

function morphAnimation() {

currentPath = (currentPath + 1) % paths.length;

morphShape.setAttribute('d', paths[currentPath]);

// Random timing for more organic feel

const delay = 2000 + Math.random() * 1000;

setTimeout(morphAnimation, delay);

}

// Start animation after a short delay

setTimeout(morphAnimation, 1000);

// Parallax effect for photos

document.addEventListener('mousemove', (e) => {

const x = e.clientX / window.innerWidth;

const y = e.clientY / window.innerHeight;

const photos = document.querySelectorAll('.photo');

photos.forEach((photo, index) => {

const xOffset = (x - 0.5) * 20;

const yOffset = (y - 0.5) * 20;

const delay = index * 0.1;

photo.style.transform = `translate(${xOffset}px, ${yOffset}px)`;

photo.style.transitionDelay = `${delay}s`;

});

// Intersection Observer for feature cards

const featureCards = document.querySelectorAll('.feature-card');

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.style.opacity = 1;

entry.target.style.transform = 'translateY(0)';

}

});

}, { threshold: 0.1 });

featureCards.forEach(card => {

card.style.opacity = 0;

card.style.transform = 'translateY(20px)';

card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';

observer.observe(card);

});

</script>

</body>

</html>

एसवीजी मॉर्फिंग एनीमेशन

अनुशंसित

सरल नेविगेशन बार

CSS ग्रिड एनीमेशन उदाहरण

उत्पाद कार्ड की दुकान

HTML

CSS

JS

अनुशंसित

सरल नेविगेशन बार

CSS ग्रिड एनीमेशन उदाहरण

उत्पाद कार्ड की दुकान

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS