.page-header {
height: 100vh;
background-image: url(« /path/to/image.jpg »);
}

.page-header:after {
animation: grain 8s steps(10) infinite;
background-image: url(« /path/to/grainy/image.jpg »);
content: «  »;
height: 300%;
left: -50%;
opacity: 0.3;
position: fixed;
top: -100%;
width: 300%;
}

@keyframes grain {
0%, 100% { transform:translate(0, 0) }
10% { transform:translate(-5%, -10%) }
20% { transform:translate(-15%, 5%) }
30% { transform:translate(7%, -25%) }
40% { transform:translate(-5%, 25%) }
50% { transform:translate(-15%, 10%) }
60% { transform:translate(15%, 0%) }
70% { transform:translate(0%, 15%) }
80% { transform:translate(3%, 35%) }
90% { transform:translate(-10%, 10%) }
}

Avant garde, la police qui fait la différence…

POPPINS LOURD

Raleway
RALEWAY

Un texte défilant : nos valeurs, notre métier…

Raleway
RALEWAY

PERNEL MEDIAS Productions de fiction

Oswald clair
EN MAJUSCULES

Univers ultra Cdn normal
EN MAJUSCULES

Univers ultra Cdn thin
EN MAJUSCULES