Webleb - UI Elements - SVG Morphing animation

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

JS

SVG Morphing animation

Recommended