Follow us on the instagram please do share and follow , like us to get the more content of this kind. The code for the above reel is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Propose</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" type="image/jpg" href="heart.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<div class="position-absolute top-50 start-50 translate-middle">
<div id="parentElement">
<div class="d-flex justify-content-center">
<lottie-player src="https://assets10.lottiefiles.com/private_files/lf30_mywfoph1.json" background="transparent"
speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
</div>
<h1>Will you be my GF🥰?</h1>
<div class="d-flex justify-content-center">
<button onclick="propose()" class="btn btn-primary">Yes!</button> <br>
<button onclick="propose()" class="btn btn-primary">Of Course, Yes!</button>
</div>
</div>
<div class="position-absolute top-50 start-50 translate-middle" id="showMessage">
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_utsfwa3k.json" background="transparent"
speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
<h1 class="ml6">
<span class="text-wrapper">
<span class="letters">I Love you!</span>
</span>
</h1>
</div>
</div>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
</body>
</html>
const parentElement = document.getElementById("parentElement");
const showMassage = document.getElementById("showMassage");
const changeColor = document.body.style;
propose = () => {
parentElement.style.display = "none";
showMessage.style.display = "block";
changeColor.background =
"linear-gradient(116.82deg, #ff94e7 0%, #27cbff 100%)";
};
var textWrapper = document.querySelector(".ml6 .letters");
textWrapper.innerHTML = textWrapper.textContent.replace(
/\S/g,
"$&"
);
anime
.timeline({ loop: true })
.add({
targets: ".ml6 .letter",
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 50 * i,
})
.add({
targets: ".ml6",
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000,
});
Top comments (0)