✨ Ajout effet typing sur la page d'accueil (#74)

✨ Ajout effet typing sur la page d'accueil

Author: Ahhj93

static/css/keyframes.css

@@ -58,4 +58,33 @@
 	100% {
 		transform: translateY(-100%);
 	}
-}
+}
+
+@keyframes animation {
+	11.1%, 22.2% {
+		content: "faciles et rapides";
+		width: 14ch;
+	}
+	33.3% {
+		width: 0ch;
+	}
+	44.4%, 55.5% {
+		content: "savoureuses et rapides";
+		width: 19ch;
+	}
+	66.6% {
+		width: 0ch;
+	}
+	77.7%, 88.8% {
+		content: "délicieuses et rapides";
+		width: 17.5ch;
+	}
+	100% {
+		width: 0ch;
+	}
+}
+@keyframes blinking {
+	100% {
+		opacity: 0;
+	}
+}

static/css/style.css

@@ -94,10 +94,6 @@ main h2 {
 
 footer {
 	display: flex;
-	/* Use Flexbox */
-	/* position: fixed;
-  bottom: 0;
-  left: 0; */
 	padding: 16px;
 	box-sizing: border-box;
 	margin-left: 20px;
@@ -540,6 +536,48 @@ nav span {
 	transition-delay: 0.4s;
 }
 
+.typing-effect-content  {
+	margin-left: 10%;
+	margin-right: 10%;
+	display: flex;
+	justify-content: center;
+	text-align: center !important;
+}
+
+.typing-effect-content  h3 {
+	position: relative;
+	overflow: hidden;
+	color: white;
+	font-size: 25px;
+	margin: 0;
+}
+
+.typing-effect-content  h2 {
+	color: white;
+	font-size: 25px;
+	margin: 0;
+}
+
+.typing-effect-content  h3::after {
+	content: "faciles et rapides";
+	display: inline-block;
+	animation: animation 20s steps(20) infinite;
+	width: 0ch;
+	color: var(--purple);
+	white-space: nowrap;
+}
+
+.typing-effect-content  h3::before {
+	display: inline-block;
+	content: "";
+	width: 2px;
+	height: 100%;
+	background-color: white;
+	position: absolute;
+	right: 0;
+	animation: blinking .4s linear alternate infinite;
+}
+
 /* Media Query - Leave this line at the end */
 @media only screen and (max-width: 768px) {
 	header {
@@ -599,10 +637,20 @@ nav span {
 		margin-right: 5%;
 	}
 
+	.content h3 {
+		margin-left: 5%;
+		margin-right: 5%;
+		font-size: 20px;
+	}
+
 	.grid-item-text {
 		font-size: 30px;
 	}
 
+	.typing-effect-content  h3 {
+		font-size: 20px;
+	}
+
 	footer .liens {
 		margin-top: 0px;
 	}

template/accueil.tpl

@@ -70,8 +70,11 @@
     </nav>
 
 	<main>
-		<div class="content" style="padding-bottom: 30px">
-			<h3>Des recettes de cuisine faciles et rapides</h3>
+		<div class="description">
+		<div class="content"><h3>Des recettes de cuisine </h3></div>
+		<div class="typing-effect-content " style="padding-bottom: 30px">
+			<h3></h3>
+		</div>
 		</div>
 
 		<div class="grid-container">