En poursuivant votre navigation sur le site, vous acceptez l’utilisation de cookies pour : [vous identifier / personnaliser votre expérience]. Cliquez ici Pour en savoir plus.

Script CSS : Effet de glitch

...

ConnexionSe connecterInscriptionS'inscrire
Script mis à jour le 16/12/14

Description du script CSS :

Effet de glitch sur du texte

Droits d'utilisations de ce script CSS :

Je peux revendre ce script
Je peux l'utiliser plusieurs fois
Je peux l'utiliser pour mes clients
Je peux modifier ce script
Je dois citer l'auteur du script
<audio src="http://upload.wikimedia.org/wikipedia/commons/archive/6/66/20110423224358%21Whitenoisesound.ogg" autoplay loop></audio><div class="glitch"><span>HELLO WORLD!</span></div>/*CSS*/@import url(http://fonts.googleapis.com/css?family=Roboto:100,300);body {  overflow: hidden;}@-moz-keyframes glitch {  0% {    -moz-transform: skew(-18deg);    transform: skew(-18deg);  }  5.55556% {    -moz-transform: skew(70deg);    transform: skew(70deg);  }  11.11111% {    -moz-transform: skew(57deg);    transform: skew(57deg);  }  16.66667% {    -moz-transform: skew(-2deg);    transform: skew(-2deg);  }  22.22222% {    -moz-transform: skew(-60deg);    transform: skew(-60deg);  }  27.77778% {    -moz-transform: skew(8deg);    transform: skew(8deg);  }  33.33333% {    -moz-transform: skew(-75deg);    transform: skew(-75deg);  }  38.88889% {    -moz-transform: skew(13deg);    transform: skew(13deg);  }  44.44444% {    -moz-transform: skew(3deg);    transform: skew(3deg);  }  50% {    -moz-transform: skew(-4deg);    transform: skew(-4deg);  }  55.55556% {    -moz-transform: skew(-15deg);    transform: skew(-15deg);  }  61.11111% {    -moz-transform: skew(-15deg);    transform: skew(-15deg);  }  66.66667% {    -moz-transform: skew(-3deg);    transform: skew(-3deg);  }  72.22222% {    -moz-transform: skew(75deg);    transform: skew(75deg);  }  77.77778% {    -moz-transform: skew(-67deg);    transform: skew(-67deg);  }  83.33333% {    -moz-transform: skew(-61deg);    transform: skew(-61deg);  }  88.88889% {    -moz-transform: skew(46deg);    transform: skew(46deg);  }  94.44444% {    -moz-transform: skew(35deg);    transform: skew(35deg);  }}@-webkit-keyframes glitch {  0% {    -webkit-transform: skew(-11deg);    transform: skew(-11deg);  }  5.55556% {    -webkit-transform: skew(-21deg);    transform: skew(-21deg);  }  11.11111% {    -webkit-transform: skew(-24deg);    transform: skew(-24deg);  }  16.66667% {    -webkit-transform: skew(-36deg);    transform: skew(-36deg);  }  22.22222% {    -webkit-transform: skew(44deg);    transform: skew(44deg);  }  27.77778% {    -webkit-transform: skew(68deg);    transform: skew(68deg);  }  33.33333% {    -webkit-transform: skew(-72deg);    transform: skew(-72deg);  }  38.88889% {    -webkit-transform: skew(-28deg);    transform: skew(-28deg);  }  44.44444% {    -webkit-transform: skew(-28deg);    transform: skew(-28deg);  }  50% {    -webkit-transform: skew(6deg);    transform: skew(6deg);  }  55.55556% {    -webkit-transform: skew(36deg);    transform: skew(36deg);  }  61.11111% {    -webkit-transform: skew(37deg);    transform: skew(37deg);  }  66.66667% {    -webkit-transform: skew(-61deg);    transform: skew(-61deg);  }  72.22222% {    -webkit-transform: skew(78deg);    transform: skew(78deg);  }  77.77778% {    -webkit-transform: skew(56deg);    transform: skew(56deg);  }  83.33333% {    -webkit-transform: skew(40deg);    transform: skew(40deg);  }  88.88889% {    -webkit-transform: skew(70deg);    transform: skew(70deg);  }  94.44444% {    -webkit-transform: skew(-46deg);    transform: skew(-46deg);  }}@keyframes glitch {  0% {    -moz-transform: skew(-7deg);    -ms-transform: skew(-7deg);    -webkit-transform: skew(-7deg);    transform: skew(-7deg);  }  5.55556% {    -moz-transform: skew(-26deg);    -ms-transform: skew(-26deg);    -webkit-transform: skew(-26deg);    transform: skew(-26deg);  }  11.11111% {    -moz-transform: skew(-47deg);    -ms-transform: skew(-47deg);    -webkit-transform: skew(-47deg);    transform: skew(-47deg);  }  16.66667% {    -moz-transform: skew(-76deg);    -ms-transform: skew(-76deg);    -webkit-transform: skew(-76deg);    transform: skew(-76deg);  }  22.22222% {    -moz-transform: skew(-20deg);    -ms-transform: skew(-20deg);    -webkit-transform: skew(-20deg);    transform: skew(-20deg);  }  27.77778% {    -moz-transform: skew(-43deg);    -ms-transform: skew(-43deg);    -webkit-transform: skew(-43deg);    transform: skew(-43deg);  }  33.33333% {    -moz-transform: skew(28deg);    -ms-transform: skew(28deg);    -webkit-transform: skew(28deg);    transform: skew(28deg);  }  38.88889% {    -moz-transform: skew(-45deg);    -ms-transform: skew(-45deg);    -webkit-transform: skew(-45deg);    transform: skew(-45deg);  }  44.44444% {    -moz-transform: skew(70deg);    -ms-transform: skew(70deg);    -webkit-transform: skew(70deg);    transform: skew(70deg);  }  50% {    -moz-transform: skew(-15deg);    -ms-transform: skew(-15deg);    -webkit-transform: skew(-15deg);    transform: skew(-15deg);  }  55.55556% {    -moz-transform: skew(-47deg);    -ms-transform: skew(-47deg);    -webkit-transform: skew(-47deg);    transform: skew(-47deg);  }  61.11111% {    -moz-transform: skew(7deg);    -ms-transform: skew(7deg);    -webkit-transform: skew(7deg);    transform: skew(7deg);  }  66.66667% {    -moz-transform: skew(-38deg);    -ms-transform: skew(-38deg);    -webkit-transform: skew(-38deg);    transform: skew(-38deg);  }  72.22222% {    -moz-transform: skew(36deg);    -ms-transform: skew(36deg);    -webkit-transform: skew(36deg);    transform: skew(36deg);  }  77.77778% {    -moz-transform: skew(56deg);    -ms-transform: skew(56deg);    -webkit-transform: skew(56deg);    transform: skew(56deg);  }  83.33333% {    -moz-transform: skew(25deg);    -ms-transform: skew(25deg);    -webkit-transform: skew(25deg);    transform: skew(25deg);  }  88.88889% {    -moz-transform: skew(-61deg);    -ms-transform: skew(-61deg);    -webkit-transform: skew(-61deg);    transform: skew(-61deg);  }  94.44444% {    -moz-transform: skew(-58deg);    -ms-transform: skew(-58deg);    -webkit-transform: skew(-58deg);    transform: skew(-58deg);  }}@-moz-keyframes noise {  0% {    background-position: -37px 25px;  }  10% {    background-position: 95px -84px;  }  20% {    background-position: 49px 48px;  }  30% {    background-position: -9px 97px;  }  40% {    background-position: 18px -96px;  }  50% {    background-position: -90px -56px;  }  60% {    background-position: 5px 86px;  }  70% {    background-position: -4px 36px;  }  80% {    background-position: -3px 86px;  }  90% {    background-position: 25px -26px;  }}@-webkit-keyframes noise {  0% {    background-position: 39px 74px;  }  10% {    background-position: 61px -55px;  }  20% {    background-position: -49px -84px;  }  30% {    background-position: 1px 69px;  }  40% {    background-position: 44px -50px;  }  50% {    background-position: 32px 73px;  }  60% {    background-position: -14px -53px;  }  70% {    background-position: 89px 58px;  }  80% {    background-position: -30px 23px;  }  90% {    background-position: -62px 15px;  }}@keyframes noise {  0% {    background-position: -10px 58px;  }  10% {    background-position: 39px 58px;  }  20% {    background-position: 64px -99px;  }  30% {    background-position: 95px -52px;  }  40% {    background-position: 19px -38px;  }  50% {    background-position: -55px -98px;  }  60% {    background-position: -68px -66px;  }  70% {    background-position: -54px 67px;  }  80% {    background-position: 73px -47px;  }  90% {    background-position: -96px -65px;  }}@-moz-keyframes bar {  0% {    height: 121px;    top: 2%;    opacity: 0.25;  }  10% {    height: 299px;    top: 72%;    opacity: 0.12;  }  20% {    height: 376px;    top: 4%;    opacity: 0.73;  }  30% {    height: 182px;    top: 66%;    opacity: 0.48;  }  40% {    height: 548px;    top: 56%;    opacity: 0.28;  }  50% {    height: 417px;    top: 67%;    opacity: 0.51;  }  60% {    height: 482px;    top: 19%;    opacity: 0.09;  }  70% {    height: 563px;    top: 100%;    opacity: 0.02;  }  80% {    height: 189px;    top: 38%;    opacity: 0.35;  }  90% {    height: 404px;    top: 34%;    opacity: 0.31;  }}@-webkit-keyframes bar {  0% {    height: 247px;    top: 10%;    opacity: 0.07;  }  10% {    height: 445px;    top: 66%;    opacity: 0.27;  }  20% {    height: 123px;    top: 40%;    opacity: 0.11;  }  30% {    height: 215px;    top: 85%;    opacity: 0.05;  }  40% {    height: 369px;    top: 85%;    opacity: 0.64;  }  50% {    height: 54px;    top: 52%;    opacity: 0.68;  }  60% {    height: 620px;    top: 86%;    opacity: 0.33;  }  70% {    height: 482px;    top: 2%;    opacity: 0.44;  }  80% {    height: 415px;    top: 6%;    opacity: 0.03;  }  90% {    height: 255px;    top: 6%;    opacity: 0.02;  }}@keyframes bar {  0% {    height: 510px;    top: 1%;    opacity: 0.78;  }  10% {    height: 449px;    top: 77%;    opacity: 0.57;  }  20% {    height: 419px;    top: 39%;    opacity: 0.51;  }  30% {    height: 239px;    top: 56%;    opacity: 0.33;  }  40% {    height: 269px;    top: 7%;    opacity: 0.77;  }  50% {    height: 577px;    top: 43%;    opacity: 0.5;  }  60% {    height: 246px;    top: 10%;    opacity: 0.13;  }  70% {    height: 158px;    top: 24%;    opacity: 0.26;  }  80% {    height: 432px;    top: 29%;    opacity: 0.52;  }  90% {    height: 520px;    top: 61%;    opacity: 0.29;  }}.glitch {  position: absolute;  left: 0;  top: 0;  right: 0;  bottom: 0;  color: #fff;  text-align: center;  text-transform: uppercase;  font: 35px "Roboto", helvetica, sans-serif;  font-font-weight: 100;  letter-spacing: 0.3em;  background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);  text-shadow: 2px 0 1px #f6050a, -2px 0 1px #1cf2f2;  -moz-animation: noise 0.3s infinite;  -webkit-animation: noise 0.3s infinite;  animation: noise 0.3s infinite;}.glitch:before {  content: "";  display: inline-block;  vertical-align: middle;  height: 100%;}.glitch:after {  content: "";  display: block;  position: absolute;  left: 0;  right: 0;  background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);  -moz-animation: bar 0.5s infinite;  -webkit-animation: bar 0.5s infinite;  animation: bar 0.5s infinite;}.glitch span {  display: inline-block;  vertical-align: middle;  position: relative;  z-index: 1;  -moz-animation: glitch 3s infinite alternate;  -webkit-animation: glitch 3s infinite alternate;  animation: glitch 3s infinite alternate;}

Animation de glitch sur texte

16/12/14 : Première version du script

Questions posées fréquemment
Vous trouverez un bouton "signaler" en haut à droite de cette fiche pour avertir le créateur d'un problème.
Demande de support

Vous rencontrez une difficulté ou avez besoin d'informations supplémentaires sur le script ? N'hésitez pas à contacter l'auteur en cliquant sur le bouton ci-dessous :

GwenWeb

Inscrit le : 24 Septembre 2014

Intérêt : non-renseigné

Voir son profil >>

Nombre de visites du script : 985

Moyenne de visites des scripts : 13


Prix de vente moyen d'un script : 3 euros

// Commentaires sur ce script CSS :

Veuillez vous inscrire et/ou vous connecter pour laisser un commentaire

Il n'y a pas encore de commentaire sur ce script.
Essayez-le et soyez le premier à laisser votre avis !

Basile : Mascotte chez 1script.frSITE EN TEST PUBLIQUE :
Bonjour, je vous rappelle que le site est en phase de test. En savoir plus ?
Script par GwenWeb
Autres scripts du même membre GRATUIT

PARTAGER CE SCRIPT

Twitter Facebook Google Plus Linkedin email

SECTIONS / CATEGORIES

NEWSLETTER : S'ABONNER

BASIL VOUS EXPLIQUE TOUT

Découvrez 1script.fr en vidéo

SUIVEZ 1SCRIPT.FR

ACCÈS