Love Letter

Developer
Joo Vctor De Oliveira Santos
Size
3,237 Kb
Views
36,432
  1. Love Letter Previews
  2. Love Letter HTML Codes
  3. Love Letter CSS Codes
  4. Love Letter JS Codes

How do I make an love letter?

What is a love letter? How do you make a love letter? This script and codes were developed by Joo Vctor De Oliveira Santos on 27 August 2022, Saturday.

Love Letter Previews
IQ Test

Love Letter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Love Letter</title> <link href='https://fonts.googleapis.com/css?family=Hind' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<label>	<div class="heart">	<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/Love_Heart_SVG.svg"></img>	</div>	<input id="messageState" type="checkbox" style="display:none"/>	</label>	<div class="message">	<h1>Hi, my love</h1>	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui ante, venenatis et neque eget, volutpat auctor sem. Phasellus molestie magna quis justo pharetra aliquet. Curabitur tempor efficitur nisl a euismod. Mauris tincidunt lorem vel quam aliquam	tincidunt. Nullam sed convallis neque, sit amet scelerisque odio. Proin eu lectus et felis convallis dapibus. Vestibulum facilisis, magna non rutrum gravida, urna ipsum ornare enim, at venenatis sem risus nec est. Mauris enim tortor, rutrum vestibulum	cursus eu, efficitur a elit. In maximus mattis euismod. Sed tempus arcu in ultricies condimentum. Vestibulum eu elit quis sapien pulvinar lacinia vitae sit amet augue. Cras massa dolor, egestas sit amet turpis porta, euismod cursus ex. Pellentesque	luctus diam eget eros suscipit semper. Sed elementum porta placerat. Cras vulputate justo eros. Aliquam fermentum arcu sed lacus tristique aliquet.</p>	</div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Love Letter - Script Codes CSS Codes

h1,
p {	font-family: 'Hind', sans-serif;
}
p{	text-indent: 50px;
}
h1 {	font-weight: 200;
}
body {	margin: 0px;
}
.container {	position: relative;	width: 100%;	height: 100vh;	overflow: hidden;
}
.heart {	position: absolute;	left: 50%;	top: 50%;	text-align: center;	transform: translate(-50%, -50%);	transiton: transform 2s;	z-index: 1;
}
.heart > img {	width: 50px;	height: auto;
}
.message {	padding: 20px;	background-color: #eee;	min-width: 400px;	height: 75%;	position: absolute;	left: 50%;	top: 50%;	transform: translate(-50%, -50%);	z-index: 0;	overflow: hidden;	animation-name: openmsg;	animation-duration: 2s;	animation-timing-function: linear;	animation-play-state: paused;	animation-fill-mode: forwards;	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);	border-radius: 5px;
}
.heart > img:hover {	animation-name: beat;	animation-duration: 2s;	animation-timing-function: ease-in-out;	animation-iteration-count: infinite;	animation-play-state: running;
}
#messageState {}
@keyframes beat {	0% {	width: 50px;	}	25% {	width: 58px;	}	30% {	width: 50px;	}	50% {	width: 45px;	}	60% {	width: 50px;	}	75% {	width: 58px;	}	100% {	width: 50px;	}
}
@keyframes openmsg {	0% {	height: 0px;	padding: 0px 20px;	}	100% {	height: 75%;	padding: 20px 20px;	}
}
@keyframes heartMove {	0% {	top: 50%	}	100% {	top: 85%;	transform: translate(-50%, 0);	}
}
.openNor {	animation-direction: normal;	animation-play-state: running;
}
.closeNor {	animation-direction: reverse;	animation-play-state: running;
}
.no-anim {	animation: none;
}
.closed {	height: 0px;	padding: 0px 20px;
}
.bottom {	bottom: 5px;
}
.openHer {	animation-name: heartMove;	animation-duration: 2s;	animation-timing-function: linear;	animation-play-state: running;	animation-fill-mode: forwards;
}
.closeHer {	animation-name: heartMove;	animation-duration: 2s;	animation-timing-function: linear;	animation-play-state: running;	animation-direction: reverse;	animation-fill-mode: forwards;
}
.beating > img {	animation-name: beat;	animation-duration: 2s;	animation-timing-function: ease-in-out;	animation-iteration-count: infinite;	animation-play-state: running;
}
.openedHer {	top: 85%;	transform: translate(-50%, 0);
}

Love Letter - Script Codes JS Codes

$("#messageState").on("change", (x) => {	$(".message").removeClass("openNor").removeClass("closeNor");	if ($("#messageState").is(":checked")) {	$(".message").removeClass("closed").removeClass("no-anim").addClass("openNor");	$(".heart").removeClass("closeHer").removeClass("openedHer").addClass("openHer");	$(".container").stop().animate({"backgroundColor": "#f48fb1"}, 2000);	console.log("Abrindo");	} else {	$(".message").removeClass("no-anim").addClass("closeNor");	$(".heart").removeClass("openHer").removeClass("openedHer").addClass("closeHer");	$(".container").stop().animate({"backgroundColor": "#fce4ec"}, 2000);	console.log("fechando");	}
});
$(".message").on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {	console.log("Animation End");	if ($(".message").hasClass("closeNor"))	$(".message").addClass("closed");	$(".message").removeClass("openNor").removeClass("closeNor").addClass("no-anim");
});
$(".heart").on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {	console.log("Animation End");	if (!$(".heart").hasClass("closeHer"))	$(".heart").addClass("openedHer").addClass("beating");	else	$(".heart").addClass("no-anim").removeClass("beating");	$(".heart").removeClass("openHer").removeClass("closeHer");
});
Love Letter - Script Codes
Love Letter - Script Codes
Home Page Home
Developer Joo Vctor De Oliveira Santos
Username jvhti
Uploaded August 27, 2022
Rating 3
Size 3,237 Kb
Views 36,432
Do you need developer help for Love Letter?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joo Vctor De Oliveira Santos (jvhti) Script Codes
Name
Simon Game
Youtube Random Video With Cover Image
Local Weather
A Pen by Joo Vctor de Oliveira Santos
Wikipedia Viewer
Portfolio Flat
Random Quote Machine
Tic Tac Toe Game
Pomodoro
Personal Portfolio
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!