Catégories : CSS

Comment créer un effet glitch en CSS (image et SVG) ?

Dans cet article, nous allons voir comment créer un effet de glitch en CSS.

Enfin pas tout à fait, car nous allons avoir besoin de SASS, un langage de style comme le CSS, qui permet d’ajouter des éléments de programmation comme les conditions, les boucles, etc. Je vous recommande très fortement son apprentissage si vous n’en avez jamais fait !

 

Créer un effet glitch sur une image

1. La base

La base sur laquelle nous allons travailler, une simple div, et un background-image :


<div class="img"></div>


.img {
  position: relative;
  width: 400px;
  height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(https://www.codeur.com/tuto/wp-content/uploads/2021/12/travel-landscape-01.jpg);
}

2. Pseudo-éléments

On crée 2 pseudo-éléments &:before et &:after, en position: absolute, ayant les même propriétés :


&:before,
&:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 400px;
  height: 300px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

3. Leur spécificités

Chaque pseudo-éléments se différencie de l’autre :


&:before {
  left: -6px;
  animation: glitch-effect 2s infinite linear alternate-reverse;
  background-image: url(https://www.codeur.com/tuto/wp-content/uploads/2021/12/travel-landscape-01-rose.jpg);
}
&:after {
  left: 6px;
  animation: glitch-effect 3s infinite linear alternate-reverse;
  background-image: url(https://www.codeur.com/tuto/wp-content/uploads/2021/12/travel-landscape-01-blue.jpg);
}

Vous aurez besoin de votre image sous 2 autres versions :

 

À lire aussi : Comment créer un calque opaque sur des photos au passage de la souris ?

4. Clip animation

A l’aide de SASS et de la boucle @for, on crée des keyframes avec la propriété clip pour animer notre effet glitch :


$steps: 17;
@keyframes glitch-effect{
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip: rect(random(300) + px, 400px, random(300) + px, 0);
    }
  }
}

A noter que clip doit spécifier la taille de notre image.

See the Pen
Glitch on CodePen.

Créer un effet glitch sur un fichier SVG

1. La base HTML

Comme pour l’image, nous allons utiliser 3 versions de notre SVG, cependant ici pas besoin de pseudo-éléments :


<div class="svgWrap">
    <svg class="svgWrap__text">
        <use xlink:href="#svgGlitch"></use>
    </svg>
    <svg class="svgWrap__text">
        <use xlink:href="#svgGlitch"></use>
    </svg>
    <svg class="svgWrap__text">
        <use xlink:href="#svgGlitch"></use>
    </svg>
</div>

Voici le template du SVG utilisé dans notre exemple :


<svg id="svgGlitch" class="none" width="270" height="76" viewBox="0 0 270 76" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.84 38.288C0.84 49.488 4.376 58.48 11.448 65.264C18.52 72.048 27.64 75.44 38.808 75.44C45.048 75.44 50.536 74.224 55.272 71.792C60.04 69.328 63.64 66.56 66.072 63.488L61.176 59.552C58.936 62.624 55.944 65.04 52.2 66.8C48.488 68.56 44.28 69.44 39.576 69.44C30.392 69.44 23.176 66.4 17.928 60.32C12.712 54.24 10.072 46.512 10.008 37.136C9.944 27.888 12.408 20.656 17.4 15.44C22.392 10.192 29.256 7.568 37.992 7.568C41.288 7.568 44.584 8.032 47.88 8.96C51.208 9.888 53.976 11.232 56.184 12.992L61.032 7.376C58.088 5.328 54.584 3.76 50.52 2.672C46.456 1.584 42.248 1.04 37.896 1.04C27.112 1.04 18.232 4.656 11.256 11.888C4.312 19.12 0.84 27.92 0.84 38.288ZM48.312 47.216L57.864 48.896V65.648L66.072 63.488V48.896L72.36 47.216V42.416H48.312V47.216ZM53.016 10.4L55.896 24.032H61.368V2.62399H56.376L53.016 10.4ZM76.5855 74H100.106V70.16L92.5215 68.48L92.4255 48.704L92.5215 1.952L91.4175 0.463997L89.6415 0.367998L75.4335 1.99999V6.512L84.3615 7.952L84.4575 48.704L84.3615 68.48L76.5855 70.16V74ZM107.009 74H130.817V70.16L123.233 68.48L123.137 48.704L123.473 27.872L122.369 26H120.113L106.769 27.632V32.144L114.833 33.584L115.169 48.704L115.073 68.48L107.009 70.16V74ZM112.865 9.824C112.865 11.584 113.409 13.008 114.497 14.096C115.617 15.184 117.089 15.728 118.913 15.728C120.865 15.728 122.353 15.216 123.377 14.192C124.433 13.168 124.961 11.712 124.961 9.824C124.961 8.064 124.401 6.64 123.281 5.55199C122.193 4.464 120.737 3.92 118.913 3.92C116.961 3.92 115.457 4.432 114.401 5.456C113.377 6.48 112.865 7.936 112.865 9.824ZM134.737 32.144L142.561 32.72V48.704L142.225 66.176C142.225 69.056 142.737 71.152 143.761 72.464C144.817 73.744 146.577 74.384 149.041 74.384L160.225 72.608V68.768H153.409L151.057 66.032L150.625 48.704L151.441 19.28L149.857 17.36H147.601C146.545 19.344 145.073 21.488 143.185 23.792C141.329 26.096 138.513 27.696 134.737 28.592V32.144ZM148.801 32.144H161.329V27.248H148.993L148.801 32.144ZM166.385 51.2C166.385 58.304 168.577 64.064 172.961 68.48C177.377 72.864 182.913 75.056 189.569 75.056C195.265 75.056 199.665 74.048 202.769 72.032C205.873 69.984 208.177 67.952 209.681 65.936L207.233 63.056C205.473 64.688 203.457 66.064 201.185 67.184C198.913 68.272 196.113 68.816 192.785 68.816C187.793 68.816 183.585 67.136 180.161 63.776C176.769 60.384 175.057 55.872 175.025 50.24C174.993 43.68 176.385 38.72 179.201 35.36C182.017 31.968 185.377 30.272 189.281 30.272C192.193 30.272 194.657 30.944 196.673 32.288C198.689 33.6 199.841 35.2 200.129 37.088L205.937 31.184C204.177 29.168 201.921 27.632 199.169 26.576C196.417 25.488 193.121 24.944 189.281 24.944C183.137 24.944 177.777 27.472 173.201 32.528C168.657 37.584 166.385 43.808 166.385 51.2ZM199.313 33.2L201.377 42.944H206.129V25.904H201.761L199.313 33.2ZM215.617 74H237.217V70.16L230.593 68.48L230.497 48.704L230.593 1.904L229.249 0.367998H227.713L214.465 1.99999V6.512L222.433 7.952L222.529 48.704L222.433 68.48L215.617 70.16V74ZM230.353 39.44C231.985 36.912 234.113 35.024 236.737 33.776C239.393 32.496 242.001 31.856 244.561 31.856C247.601 31.856 249.937 32.736 251.569 34.496C253.201 36.224 254.017 38.144 254.017 40.256V48.704L253.921 68.48L246.337 70.16V74H269.185V70.16L262.081 68.48L261.841 48.704C261.841 48.704 261.873 47.568 261.937 45.296C262.033 43.024 262.081 40.704 262.081 38.336C262.081 34.176 260.833 30.912 258.337 28.544C255.873 26.144 252.177 24.944 247.249 24.944C243.345 24.944 239.633 26 236.113 28.112C232.625 30.224 230.161 32.864 228.721 36.032L230.353 39.44Z" />
</svg>

2. Le CSS

On définit la taille des SVG :


.svgWrap {
  position: relative;
  width: 270px;
  height: 76px;
}
.svgWrap__text {
  position: absolute;
  top: 0;
  left: 0;
  fill: #fff;
  background: #000;
  width: 270px;
  height: 76px;
}

Comme pour l’image, chaque élément a son propre style, mais on utilise le sélecteur &:nth-child à la place :


&:nth-child(2),
&:nth-child(3) {
  clip: rect(0, 0, 0, 0); 
}
&:nth-child(2) {
  fill: #fffafa;
  left: -2px;
  animation: svg-glitch-effect 2s infinite linear alternate-reverse;
}
&:nth-child(3) {
  fill: #f5f5f5;
  left: 2px;
  animation: svg-glitch-effect 3s infinite linear alternate-reverse;
}

Pour les SVG, on utilise la propriété CSS fill à la place de spécifier d’autres images.

2. Animation

Et on termine par animer tout ça, comme dans l’exemple des images, avec la boucle @for et la propriété clip :


$steps: 20;
@keyframes svg-glitch-effect{
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip: rect(random(75) + px, 270px, random(75) + px, 0);
    }
  }
}

See the Pen
Glitch 2
on CodePen.

Vous n’arrivez pas à créer votre effet glitch comme vous l’imaginiez ? Des intégrateurs web de Codeur.com peuvent vous aider ! Postez votre projet gratuitement pour recevoir leurs devis.

Partager
Tags : Tuto
28 février 2022

Tutoriels similaires

Les derniers tutos

Comment scraper un site avec Chat GPT 4 ?

Comment générer des images avec ChatGPT-4 ?

Comment créer votre chatbot sur ChatGPT en 4 étapes ?

Comment s’abonner à Chat GPT Plus ?

Comment créer un compte Chat GPT ?

Comment créer un compte Google Play pour développeur ?