Dans cette veille collaborative, on prend de la hauteur et on vous partage tous les mois les inspirations de notre équipe, les pistes de réflexions, les idées nouvelles, mais aussi nos trucs et astuces sur l’UX, l’UI et le développement web.
Site Internet
Somefolk est le portefolio du directeur artistique, designer et développeur créatif Jason Harvey. La direction artistique nous plaît particulièrement avec un choix original de couleurs, des illustrations et des animations très bien faîtes.
Ressource
Une ressource sympa pour connaître la façon dont les constructeurs automobiles pensent leurs interfaces !
Dataviz
Earthquakes of the 20th Century
On a revu passer cette dataviz qui nous interpelle toujours autant. C’est impressionnant de pouvoir aussi bien distinguer les plaques tectoniques.
Site Internet
Un site sur l’alphabet ukrainien très bien fait, qui nous raconte une histoire au scroll, avec des animations bien pensées.
Ressource
Des collections de textures pour des créations graphiques.
Ressource
Des nouveaux mockups, gratuits ou payants, il y en a pour tous les goûts.
Réalité Augmentée
La Poste Suisse et les étudiant.es du Bachelor Design Graphique et du Bachelor Media & Interaction Design de l’ECAL créent un timbre-poste réalisé à partir d’une intelligence artificielle. Ils nous plongent dans un univers fantastique !
Dev Tips du mois
L’événement « animationend »
L’événement « animationend » en JavaScript est déclenché lorsqu’une animation CSS se termine. Cela peut être utile pour déclencher des actions ou des fonctions JavaScript une fois qu’une animation est terminée. Voici un petit exemple pour illustrer son utilisation :
codepen: https://codepen.io/Olivier-Bretaud/pen/LYMdxze?editors=1011
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de l'événement "animationend" en JavaScript</title>
<style>
body {
margin: 0px;
height: 100%;
overflow: hidden;
}
.slider {
width: 100%;
height: 100%;
}
.img {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.active {
animation-duration: 5s;
animation-name: zoomIn;
z-index: 1
}
@keyframes zoomIn {
from {
transform: scale(1.1);
}
to {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="slider">
<div class="img">
<img src="https://images.unsplash.com/photo-1624267439301-8147fff1a23d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3132&q=80" alt="image-1"
class="active"
/>
<img src="https://images.unsplash.com/photo-1495277493816-4c359911b7f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3565&q=80" alt="image-2"
/>
<img src="https://images.unsplash.com/photo-1602347615074-470b2dd82bcb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3457&q=80" alt="image-3"
/>
</div>
</div>
<script>
let activeIndex = 0;
// Index de notre image avec la class "active";
const animations = document.getElementsByTagName("img")
const images = Array.from(animations);
// Sélectionnez les éléments "img" et ajoutez un gestionnaire d'événement "animationend" à ces éléments
images.forEach((el) => {
el.addEventListener("animationend", () => {
// Cette fonction sera exécutée lorsque l'animation se terminera
if(activeIndex === images.length - 1) {
// si il s'agit de la dernière image on reviens à la première image
activeIndex = 0;
} else {
activeIndex++;
}
// On change nos classes poour relancer l'animation.
el.classList.remove("active");
images[activeIndex].classList.add("active");
});
});
</script>
</body>
</html>Langage du code : HTML, XML (xml)Dans cet exemple, nous avons une image avec une animation CSS sur l’échelle de l’élément. Lorsque l’animation se termine, l’événement « animationend » est déclenché, et nous utilisons un gestionnaire d’événement pour supprimer la classe de l’animation à notre élément actif et l’ajouté à notre prochain élément.
Cela montre comment vous pouvez utiliser l’événement « animationend » pour déclencher des actions JavaScript à la fin d’une animation CSS, ce qui peut être utile pour créer des animations interactives dans vos applications web.
