Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


ImageGlitchEffect_Featured

Aujourd’hui, nous voulons vous montrer comment créer un petit effet de bruit expérimental sur une image. L’effet est activé par Animations CSS et le Chemin du clip Biens. Cette technique utilise plusieurs calques d’image, chacun avec un chemin de clip, un mode de fusion et une traduction appliqués. Il a été inspiré par la technologie utilisée sur le Côté haut-parleur la conférence 404.

Veuillez noter que cet effet est très expérimental. Nous utilisons plusieurs propriétés qui ne fonctionnent pas dans les anciens navigateurs. La propriété Clip-Path est n’est pas pris en charge dans IE ou Edge.

Nous utilisons également Variables CSS pour définir certaines propriétés qui facilitent l’ajustement de l’effet.

Dissoudre l’effet

En recherchant sur le Web une implémentation de pannes conviviale et facile, nous sommes tombés sur cette question sur Reddit. Quelqu’un a demandé comment l’effet de pépin s’était déclenché sur l’ordinateur Page de la liste des conférenciers la conférence 404. L’effet de pépin a été obtenu en utilisant une animation CSS sur une pile de trois images identiques. Les animations consistent en une animation en évolution rapide Propriété du clip sur toutes les couches sauf la première. De plus, les couches bougent légèrement. Donc, ce que nous voyons, ce sont des tranches d’image, légèrement décalées et en mouvement constant.

Nous voulions l’expérimenter et recréer l’effet avec ça Chemin du clip Propriété à la place. Bien qu’il prenne moins en charge les navigateurs (cela ne fonctionne pas dans IE ou Edge), il permet une utilisation plus flexible car nous pouvons utiliser des pourcentages et les appliquer à des éléments qui ne sont pas nécessairement positionnés de manière absolue.

Combinez l’effet avec Modes de fusion d’arrière-plannous permet de créer des effets d’image intéressants.

Cela crée une pile d’images avec chaque image superposée animant son chemin de clip dans des tailles aléatoires. Nous allons utiliser un lot de 5 images:

<div class="glitch glitch--style-1">
	<div class="glitch__img"></div>
	<div class="glitch__img"></div>
	<div class="glitch__img"></div>
	<div class="glitch__img"></div>
	<div class="glitch__img"></div>
</div>

Jetons un coup d’œil aux principaux styles de l’effet de survol que vous pouvez voir dans la dernière démo. Notez que nous avons déjà défini certaines variables, mais celles-ci devraient être explicites:

.glitch {
	position: relative;
	width: var(--glitch-width);
	max-width: 400px;
	height: var(--glitch-height);
	max-height: calc(400px * 1.25);
	overflow: hidden;
	margin: 0 auto;
}

.glitch:hover {
	cursor: pointer;
}

.glitch__img {
	position: absolute;
	top: calc(-1 * var(--gap-vertical));
	left: calc(-1 * var(--gap-horizontal));
	width: calc(100% + var(--gap-horizontal) * 2);
	height: calc(100% + var(--gap-vertical) * 2);
	background: url(../img/1.jpg) no-repeat 50% 0;
	background-color: var(--blend-color-1);
	background-size: cover;
	background-blend-mode: var(--blend-mode-1);
}

Nous ne voulons pas que les côtés soient coupés, nous nous assurons donc que les dimensions de l’image tiennent compte de l’écart, c’est-à-dire du mouvement.

Ensuite, nous définissons les couleurs d’arrière-plan et les modes de fusion pour chaque calque:

/* Set the background colors for the glitch images*/
.glitch__img:nth-child(2) {
	background-color: var(--blend-color-2);
	background-blend-mode: var(--blend-mode-2);
}

.glitch__img:nth-child(3) {
	background-color: var(--blend-color-3);
	background-blend-mode: var(--blend-mode-3);
}

.glitch__img:nth-child(4) {
	background-color: var(--blend-color-4);
	background-blend-mode: var(--blend-mode-4);
}

.glitch__img:nth-child(5) {
	background-color: var(--blend-color-5);
	background-blend-mode: var(--blend-mode-5);
}

Comme il s’agit d’un effet de survol, nous voulons que tous les calques sauf le premier soient masqués par défaut:


.glitch__img:nth-child(n+2) {
	opacity: 0;
}

En survolant, nous montrons alors tous les niveaux:


.glitch:hover .glitch__img:nth-child(n+2) {
	opacity: 1;
}

Nous appliquons également les animations et une transformation à chaque calque:


.glitch:hover .glitch__img:nth-child(2) {
	transform: translate3d(var(--gap-horizontal),0,0);
	animation: glitch-anim-1-horizontal var(--time-anim) infinite linear alternate;
}

.glitch:hover > .glitch__img:nth-child(3) {
	transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
	animation: glitch-anim-2-horizontal var(--time-anim) infinite linear alternate;
}

.glitch:hover > .glitch__img:nth-child(4) {
	transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
	animation: glitch-anim-3-horizontal var(--time-anim) infinite linear alternate;
}

/* Hover flash animation on last image */
.glitch:hover > .glitch__img:nth-child(5) {
	animation: glitch-anim-flash 0.5s steps(1,end) infinite;
}

le calc(-1 * var(--gap-horizontal)) Fondamentalement, nous pouvons définir une valeur négative pour une variable particulière.

Consultez cette visualisation au ralenti pour voir ce qui se passe sous le capot (ce GIF est assez gros, le chargement peut donc prendre un certain temps):

glitchvisualisation2

Le dernier calque clignote et ne bouge que légèrement tandis que les autres sont également coupés par un chemin de clip.

Regardons l’une des animations pour définir le chemin du clip:

@keyframes glitch-anim-1-horizontal {
	0% { 
		-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
		clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
	}
	10% {
		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
	}
	20% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
	}
	30% {
		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
	}
	40% {
		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
	}
	50% {
		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
	}
	60% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
	}
	70% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	80% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	90% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	100% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
	}
}

Les tranches passent de minuscules à légèrement plus grandes et rien, de sorte qu’une «pause» reste sur certaines images, puis elles recommencent à partir d’une position différente.

Un excellent outil pour visualiser les chemins de clip est Clippy par Bennett Feely.

L’animation finale est un simple éclair de niveau final:

@keyframes glitch-anim-flash {
	0% { 
		opacity: 0.2; 
		transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
	}
	33%, 100% { 
		opacity: 0;
		transform: translate3d(0,0,0);
	}
}

Ceci est particulièrement intéressant lorsque vous appliquez un mode de fusion de superposition avec une couleur assortie.

Notez que nous pouvons également appliquer cet effet aux éléments de texte. Découvrez les démos pour les voir en action!

Et c’est tout! Nous espérons que vous avez trouvé l’inspiration dans cette petite expérience.

Références et crédits

Retour sur 2017: récapitulatif des ressources Codrops



Source link

Recent Posts