Webleb - Snippets de Código - Animação de transformação SVG

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>

Animação de transformação SVG

Recomendado

Trecho de animação de carregamento CSS

Animação de alternância de triângulo CSS

Zara Larsson

HTML

CSS

JS

Recomendado

Trecho de animação de carregamento CSS

Animação de alternância de triângulo CSS

Zara Larsson

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS