me-suzy · April 21, 2025 20:53
diff --git a/efecte.html b/efecte.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Family Photo Animation</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #000;
        }
        
        .container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .photo-container {
            position: relative;
            width: 80%;
            height: 80%;
            overflow: hidden;
        }
        
        .photo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('family-hugging.jpg');
            background-size: cover;
            background-position: center;
        }
        
        .overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.7) 100%);
            opacity: 0;
        }
        
        .text {
            position: absolute;
            bottom: 40px;
            left: 0;
            width: 100%;
            text-align: center;
            color: white;
            font-family: Arial, sans-serif;
            font-size: 24px;
            opacity: 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
 </head>
 <body>
    <div class="container">
        <div class="photo-container">
            <div class="photo" id="photo"></div>
            <div class="overlay" id="overlay"></div>
            <div class="text" id="text">Momentele prețioase ale familiei rămân pentru totdeauna în inimile noastre</div>
        </div>
    </div>

    <script>
        // Asigură-te că imaginea se încarcă înainte de a începe animația
        window.onload = function() {
            // Creăm o cronologie de animație
            const tl = gsap.timeline();
            
            // Efect 1: Zoom lent apropiindu-se de familie
            tl.to("#photo", {
                duration: 3,
                scale: 1.2,
                backgroundPosition: "center 40%",
                ease: "power1.inOut"
            });
            
            // Efect 2: Apariția overlay-ului și a textului
            tl.to("#overlay", {
                duration: 1,
                opacity: 1,
                ease: "power1.inOut"
            }, "-=1");
            
            tl.to("#text", {
                duration: 1.5,
                opacity: 1,
                y: -20,
                ease: "power2.out"
            }, "-=0.8");
            
            // Efect 3: Pan lent către partea dreaptă
            tl.to("#photo", {
                duration: 3,
                backgroundPosition: "60% 40%", 
                ease: "none"
            }, "-=0.5");
            
            // Efect 4: Zoom ușor pentru a evidenția expresiile faciale
            tl.to("#photo", {
                duration: 3,
                scale: 1.35,
                ease: "power1.inOut"
            }, "-=1");
            
            // Schimbarea textului
            tl.to("#text", {
                duration: 0.5,
                opacity: 0,
                onComplete: function() {
                    document.getElementById("text").innerHTML = "Iubirea este cea mai puternică legătură";
                }
            }, "-=0.5");
            
            tl.to("#text", {
                duration: 1,
                opacity: 1,
                ease: "power2.out"
            });
            
            // Aplicăm filtru de strălucire pentru efect AI-like
            tl.to("#photo", {
                duration: 2,
                filter: "brightness(1.1) contrast(1.05) saturate(1.15)",
                ease: "power1.inOut"
            }, "-=2");
        };
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Family Photo Animation</title>
	<style>
	body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #000;
	}

	.container {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.photo-container {
	position: relative;
	width: 80%;
	height: 80%;
	overflow: hidden;
	}

	.photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('family-hugging.jpg');
	background-size: cover;
	background-position: center;
	}

	.overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.7) 100%);
	opacity: 0;
	}

	.text {
	position: absolute;
	bottom: 40px;
	left: 0;
	width: 100%;
	text-align: center;
	color: white;
	font-family: Arial, sans-serif;
	font-size: 24px;
	opacity: 0;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
	}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
	</head>
	<body>
	<div class="container">
	<div class="photo-container">
	<div class="photo" id="photo"></div>
	<div class="overlay" id="overlay"></div>
	<div class="text" id="text">Momentele prețioase ale familiei rămân pentru totdeauna în inimile noastre</div>
	</div>
	</div>

	<script>
	// Asigură-te că imaginea se încarcă înainte de a începe animația
	window.onload = function() {
	// Creăm o cronologie de animație
	const tl = gsap.timeline();

	// Efect 1: Zoom lent apropiindu-se de familie
	tl.to("#photo", {
	duration: 3,
	scale: 1.2,
	backgroundPosition: "center 40%",
	ease: "power1.inOut"
	});

	// Efect 2: Apariția overlay-ului și a textului
	tl.to("#overlay", {
	duration: 1,
	opacity: 1,
	ease: "power1.inOut"
	}, "-=1");

	tl.to("#text", {
	duration: 1.5,
	opacity: 1,
	y: -20,
	ease: "power2.out"
	}, "-=0.8");

	// Efect 3: Pan lent către partea dreaptă
	tl.to("#photo", {
	duration: 3,
	backgroundPosition: "60% 40%",
	ease: "none"
	}, "-=0.5");

	// Efect 4: Zoom ușor pentru a evidenția expresiile faciale
	tl.to("#photo", {
	duration: 3,
	scale: 1.35,
	ease: "power1.inOut"
	}, "-=1");

	// Schimbarea textului
	tl.to("#text", {
	duration: 0.5,
	opacity: 0,
	onComplete: function() {
	document.getElementById("text").innerHTML = "Iubirea este cea mai puternică legătură";
	}
	}, "-=0.5");

	tl.to("#text", {
	duration: 1,
	opacity: 1,
	ease: "power2.out"
	});

	// Aplicăm filtru de strălucire pentru efect AI-like
	tl.to("#photo", {
	duration: 2,
	filter: "brightness(1.1) contrast(1.05) saturate(1.15)",
	ease: "power1.inOut"
	}, "-=2");
	};
	</script>
	</body>
	</html>