10 Effets « Waouh » pour Développeurs en Herbe

10 Effets « Waouh » pour Développeurs en Herbe

Accueil Blog 10 Effets « Waouh » pour Développeurs en Herbe

Le CSS (Cascading Style Sheets) est un langage de style puissant qui permet aux développeurs web de créer des conceptions visuelles étonnantes.
La bonne nouvelle, c’est qu’avec un peu de patience et de bon sens, le CSS est finalement à la portée de tous.

Il offre une variété d’effets, sans limite de personnalisation, que vous pouvez intégrer dans vos pages. Que vous soyez débutant ou jeune développeur front-end, voici 10 effets « waouh » que vous pouvez facilement implémenter.

Pour toutes questions ou besoin d’accompagnement, écrivez-moi 😊

1. Animation de texte en « glitch »

L’animation de texte en style « glitch » donne à vos titres et textes un aspect défaillant qui peut rappeller des écrans de télé brouillés, ou une touche rétro / futuriste à votre site web (question de perception…)

Pour jouer l’animation en continue, ajouter infinite à la ligne animation de la class .glitch-text

Impulz


body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: sans-serif;
overflow: hidden;
}

.glitch-text {
font-size: 3em;
color: #fff;
letter-spacing: 5px;
position: relative;
animation: glitch 7s infinite;
}


@keyframes glitch {
0% {transform: skew(0deg); text-shadow: none;}
25% {transform: skew(-5deg);
text-shadow: 2px 2px 0 #ED6673, -2px -2px 0 #00f3ff;}
50% {transform: skew(5deg); text-shadow: -2px -2px 0 #ED6673, 2px 2px 0 #00f3ff;}
75% {transform: skew(-3deg);text-shadow: 2px 2px 0 #ED6673, -2px -2px 0 #00f3ff;}
100% {transform: skew(2deg);text-shadow: -2px -2px 0 #ED6673, 2px 2px 0 #00f3ff;}
}

2. Texte en cours d’écriture

Simulez l’écriture en direct avec l’effet de texte « typewriter ». Cela donne l’impression que le texte est en train d’être tapé, idéal pour raconter des histoires ou mettre en avant des fonctionnalités.

Pour jouer l’animation en continue, ajouter infinite à la ligne animation de la class .glitch-text

Le CSS c’est la vie…

.typewriter-text {
width: 0;
overflow: hidden;
animation: typing 3s steps(40, end);
}

@keyframes typing {
from { width: 0; }
to { width: 100%; }
}

Ou un effet typing…

Le CSS c’est

Ici, l’ajout d’un code Javascript est nécessaire pour jouer l’animation. Insérez <script src= » » rel= »noreferrer noopener »>https://cdn.jsdelivr.net/npm/typed.js@2.0.12″></script>
après la balise <head> ainsi que ce script avant la balise </body>

const words = [« incroyable », « addictif », « la vie »];
const wordElement = document.getElementById(« changing-word »);
let wordIndex = 0;
function changeWord() {
wordElement.textContent = words[wordIndex];
wordIndex = (wordIndex + 1) % words.length;
}

const options = {
strings: words,
typeSpeed: 100,
backSpeed: 50,
startDelay: 1000,
showCursor: false,
onComplete: changeWord,
loop: true,
};
const typed = new Typed(« #changing-word », options);

.text-container {
display: flex;
align-items: left;
justify-content: left;
height: 300px;
}

#rotating-text {
font-size: 16px;
color: #333;
font-weight: bold;
}

#changing-word {
color:#ED6673;
}

3. Menu de navigation animé

Ajoutez une touche d’interactivité à votre menu de navigation avec des transitions fluides et des animations au survol. Cela rendra la navigation plus agréable pour vos visiteurs.

.menu {
padding: 10px 0;
}

.menu ul {
list-style: none;
padding: 0;
text-align: left;
}

.menu li {
display: inline;
margin: 0 20px;
}

.menu a {
text-decoration: none;
color: #2F3556;
transition: color 0.3s, transform 0.3s;
padding: 5px;
}

.menu a:hover {
color: #ED6673;
font-weight: bold;
box-shadow: 0 4px 0 #ff5733;
transform: scale(1.3);
}

4. Survol d’Image en 3D

Transformez des images 2D en éléments 3D interactifs en utilisant des propriétés CSS telles que transform et perspective.

Votre Image

.image-3d {
transform-style: preserve-3d;
perspective: 800px;
transition: transform 0.5s;
}

.image-3d:hover {
transform: rotateY(45deg);
}

5. Effet de Défilement Parallaxe

Le défilement parallaxe donne une profondeur visuelle à votre site web en faisant bouger différents éléments à des vitesses distinctes lors du scrolling. Idéal pour vos landing pages.

Je mettrais le lien ici lorsque j’aurais finalisé ma landing page avec effet de défilement parallaxe.

.parallax-container {
perspective: 1px;
overflow-x: hidden;
overflow-y: auto;
}

.parallax-layer {
transform: translateZ(-1px) scale(2);
background-image: url(‘votre-image.jpg’);
background-size: cover;
background-position: center;
height: 100vh;
}

6. Boutons en 3D

Personnalisez vos boutons / Call To Action avec des effets d’ombre et de changement de couleur au passage souris.

.button-3d {
background: #ED6673;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
transition: all 0.2s;
cursor: pointer;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

.button-3d:hover {
background: #2F3556;
transform: translateY(3px);
}

7. Effet de boîte en mouvement

Animez n’importe quel type de conteneur pour créer des mises en page dynamiques. Vous pouvez les faire pivoter, rebondir ou changer de taille au survol. Mes deux exemples n’affichent rien mais il est possible d’y ajouter du texte, une image…

.gradient-background {
background: linear-gradient(90deg, #ED6673, #F6B86D, #2F3556);
background-size: 200% 200%;
animation: gradient 7s linear infinite;
width: 100%;
border-radius: 20px;
height: 450px;
}

@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 100% 50%;
}
}

9. Bouton de Chargement dans une forme personnalisée

Au lieu du traditionnel cercle de chargement, créez un bouton de la forme de votre choix qui tourne pour indiquer que quelque chose est en cours.

.loader {
border: 5px solid #ED6673;
border-top: 5px solid #fff;
border-radius: 50%; /* Dans mon exemple, il est à 20% */
width: 40px;
height: 40px;
margin: 10px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

10. Effet de Glissement de Texte

Animez le texte pour qu'il apparaisse et disparaisse au passage souris. Cela peut être utilisé pour afficher l'auteur d'une citation, une source ou une info bulle comme dans mon exemple.

Passez la souris sur l'icone :

Le CSS c'est la vie

.info-bubble {
position: relative;
display: inline-block;
margin:60px;
}

.info-trigger {
display: inline;
cursor: pointer;
position: relative;
}

.info-content {
display: none;
position: absolute;
background: #2F3556;
color: #ffff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 15px;
margin:40px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
z-index: 1;
transition: transform 0.3s;
width: auto;
white-space: nowrap;
}

.info-trigger:hover + .info-content {
display: block;
transform: translateY(-100%);
}