The Halloween-uutiskirje otti kausiluonteisesti pelottavan käänteen. Sähköpostitiimimme loi upean hullun sähköpostin käyttämällä häiriötä animaatioitakaikki luotu CSS:llä.
Lue, kuinka minä loi tämän CSS-häiriöefektin.
Tilaa lisää sähköpostitemppuja ja herkkuja
Pidä sähköpostimarkkinoinnin, suunnittelun ja kehityksen tietotaito tuoreena uutiskirjeidemme avulla – mukaan lukien “yllätys ja ilo” -hetket, kuten lokakuun uutiskirjeemme.
Opetusohjelma: CSS-häiriöefekti sähköpostissa
Häiriö on kaikki CSS-animaatio avainkehyksiä käyttäen, joten se toimii hyvinkin vain selainikkunassa tai Applen tai iOS:n sähköpostissa. Erinomainen progressiivisiin parannuksiin, ei niin hyvä, jos tilaajasi avautuvat enimmäkseen Näkymät tai Gmail.
Animaatio on sama kuvalle ja tekstille. Molemmissa tapauksissa loin kaksoisversiot kuvasta/tekstistä käyttämällä :before ja :after pseudo-luokkia ja animoin sitten nämä versiot. Aloitetaan kuvasta, lisäsin kuvan a tausta divissä, jotta voisin leikkiä sen kanssa. Sitten lisäsin kuvan uudelleen -tunnisteeseen, jotta se näkyisi siellä, missä animaatiota ei tueta. Lisäsin myös koon ja muodon diviin. CSS:
.glitch-image {
max-width: 560px;
min-height: 250px;
width: 100%;
height: auto;
}
.image {
background: url('https://campaigns.litmus.com/_email/2022/October/2022-10-Newlsetter/202210_mod2.png') no-repeat center center;
background-size: 100% 100%;
}
Ja kuvan html:
<div class="glitch-image image">
<img src="https://campaigns.litmus.com/_email/2022/October/2022-10-Newlsetter/202210_mod2.png" width="560" height="250" alt="A spooky hotel being watched over by the Litmus Live logo in the moon." style="width: 100%; max-width: 560px; height: auto;" /></a>
</div>
Lisäsin toisen kääredivin tuon häiriökuvan ympärille. Lisäsin ylivuoto:hiddenin kääreeseen, joten divin ulkopuolelle mennyt häiriö ei tullut näkyviin. Halusin kuviin TV-ruudun tyyppisen häiriön, jossa kaikki tapahtuu määrätyssä tilassa.
.glitch-wrapper {
max-width: 560px;
min-height: 250px;
width: 100%;
height: auto;
position: relative;
overflow: hidden;
}
Ja kuvan html:
<div class="glitch-wrapper">
<div class="glitch-image image">
<img src="https://campaigns.litmus.com/_email/2022/October/2022-10-Newlsetter/202210_mod2.png" width="560" height="250" alt="A spooky hotel being watched over by the Litmus Live logo in the moon." style="width: 100%; max-width: 560px; height: auto;" /></a>
</div>
</div>
Lisäsin tekstiin data-text -attribuutin HTML-tekstin ympärille:
<h2><span class="glitch-text" data-text="How to Create Clickable Phone Numbers with HTML in Emails">How to Create Clickable Phone Numbers with HTML in Emails</span></h2>
Minun piti lisätä sen ympärille ariaa tehdäkseni sitä enemmän saatavilla, muuten päädyin siihen, että näytönlukijat lukisivat myös :before- ja :aff-sisällön. Joten lopullisessa versiossa h2:ssa oli aria-merkki, joka kertoi näytönlukulaisille, mitä lukea, ja aria-piilotettu jänneväliin, joka piilotti varsinaisen kopion:
<h2 aria-label="How to Create Clickable Phone Numbers with HTML in Emails"><span class="glitch-text" data-text="How to Create Clickable Phone Numbers with HTML in Emails" aria-hidden="true"><a rel="noopener" target="_blank" href="https://www.litmus.com/blog/html-clickable-phone-number-in-email/?utm_content=headline">How to Create Clickable Phone Numbers with HTML in Emails</a></span></h2>
Käytin näytönlukuohjelmaa Lakmus sähköpostin testaus nähdäkseni miltä se kuulostaisi – ja se toimi täydellisesti.
Ok, nyt kun olemme saaneet perustan, alamme rakentaa pseudo-luokkia. Kuvassa niiden sisällössä ei ole mitään, mutta ne perivät taustakuvan:
.glitch-image:after, .glitch-image:before {
content: "";
background: inherit;
}
Tekstin sisältönä näytin data-text-attribuuttia ja varmistin, että se oli samanvärinen kuin teksti:
.glitch-text:before, .glitch-text:after {
color: #262524;
content: attr(data-text);
}
Tässä vaiheessa meillä on kolme versiota kuvasta ja kolme versiota tekstistä. Meidän on pinottava ne päällekkäin, jotta voimme lopulta piilottaa, näyttää ja liikkua “ennen” ja “jälkeen sisältöä” luodaksemme CSS-häiriöefektin. Käytämme siis absoluuttista paikannusta pseudoluokan sisällön sijoittamiseksi alkuperäisen päälle.
.glitch-image:after, .glitch-image:before {
content: "";
background: inherit;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Tekstiin lisäsin absoluuttisen sijoituksen. Jouduin myös lisäämään tekstiin asemointia varmistaakseni, että kaikki on pinottu oikein, ja jonkin verran kohdistusta ja leveyttä pseudoluokan sisältöön varmistaakseni, että se on linjassa todellisen tekstin kanssa. Tämä oli CSS jotta saan tämän kaiken kohdakkain:
.glitch-text:before, .glitch-text:after {
color: #262524;
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
}
.glitch-text {
position: relative;
display: grid;
grid-template-columns: 1fr;
}
Hauska tosiasia: Kun teksti oli lyhyempi eikä kattanut koko leveyttä, huomasin, että minun oli lisättävä teksti-align:center ja width:100% varmistaakseni, että se todella päätyi sisällön päälle. Koska minulla oli vain yksi tällainen otsikko, tein erityisluokan vain tälle otsikolle.
.text-glitch-a:before, .text-glitch-a:after { text-align: center; width: 100%; }
Jos huomaat, että pseudoluokkasi sisältö ei sijoitu oikein, voit yrittää lisätä sen. Tämä antaa meille kaksi elementtiä, joita animoimme. Nyt voit lisätä animaatioita.
Pohjimmiltaan aiomme luoda suorakaiteen muotoisen leikepolun lisäsisällöstä, joka liikkuu ylös ja alas ja piilotetaan/näytetään eri kohdissa animaation aikana. Koska suorakulmiot ovat suoraan sisällön päällä, siirsin animaation aikana sisältöä hieman vasemmalle. Käytin kahta muunnelmaa samasta animaatiosta (yksi ennen sisältöä ja toinen jälkisisällölle), joten sisältö tekisi kaksi eri asiaa, kun häiriö tapahtui.
Miten päädyin näihin tiettyihin kohtiin? Halusin suorakulmion liikkuvan melko nopeasti luodakseen välkkymistä, joten tiesin haluavani animaatiopisteiden olevan lähellä toisiaan. Mutta en myöskään halunnut hukuttaa ketään, joten halusin, että häiriöiden väliin jää hyvä tila. Joten animaatio menee vain 25 prosenttiin ja pysyy staattisena sen jälkeen. Suorakulmiot ovat useilla eri välein. Animaatio CSS näytti tältä:
@keyframes glitch-anim {
0%, 25.1% { clip-path: polygon(0 0, 0 0, 0 0, 0 0); left: 2px; }
5% { clip-path: polygon(0 80%, 100% 80%, 100% 70%, 0 70%); left: 4px; }
9% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); left: 7px; }
10% { clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); left: 6px; }
15% { clip-path: polygon(0 40%, 100% 40%, 100% 30%; 0 30%); left: 5px; }
19% { clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%); left: 7px; }
20% { clip-path: polygon(0 60%, 100% 60%, 100% 50%, 0 50%); left: 4px; }
25% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); left: 5px; }
}
@keyframes glitch-anim-2 {
0%, 25.1% { clip-path: polygon(0 0, 0 0, 0 0, 0 0); left: -2px; }
3% { clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%); left: -7px; }
7% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); left: -3px; }
8% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); left: -7px; }
12% { clip-path: polygon(0 40%, 100% 40%, 100% 50%; 0 50%); left: -4px; }
16% { clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%); left: -6px; }
17% { clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); left: -5px; }
25% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); left: -7px; }
}
Nyt käytämme animaatiota sisältöön tuodaksemme kaiken yhteen. Ensin määritämme animaatiot eri sisältöihin:
.glitch-text:before, .glitch-image:before {
animation-name: glitch-anim;
}
.glitch-text:after, .glitch-image:after {
animation-name: glitch-anim-2;
}
Sitten otimme käyttöön animaatioasetukset. Tässä tapauksessa en hyväksy, että ne ovat samat “ennen” ja “jälkeen” -sisällölle, joten ryhmittelen ne kaikki yhteen:
.glitch-image:after, .glitch-image:before, .glitch-text:before, .glitch-text:after {
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
Tein tekstin kestoa pidemmäksi kuin kuvan kesto, koska pidempi kesto näytti paremmalta tekstissä. Tässä viimeinen CSS-osio animaatiota varten:
.glitch-text:before, .glitch-text:after {
animation-duration: 3s;
animation-delay: 0s;
}
.glitch-image:before, .glitch-image:after {
animation-duration: 7s;
}
.image:after, .image:before {
animation-delay: 0s;
}
Kun tein tämän uutiskirjeessä, asetin kuvat eri viiveillä, jotta häiriöt eivät tapahtuisi yhtä aikaa. Halusin varmistaa, että jos joku vieritti ja näkisi yhden animaation, hän näkisi silti virheen yhdessä kuvista.
Viimeiset pikkupalat, jotka lisäsin, olivat optimointi mobiililaitteille, Tumma tilaja alennettu liike:
@media screen and (max-width:600px) {
.glitch-wrapper, .glitch-image {
min-height: 140px;
}
}
@media (prefers-reduced-motion) {
.glitch:before, .glitch:after, .glitch-text:before, .glitch-text:after {
animation-name: none;
}
}
@media (prefers-color-scheme: dark) {
.glitch-text:before, .glitch-text:after {
color: #fdfdfd;
}
}
[data-ogsc] .glitch-text:before, [data-ogsc] .glitch-text:after {
color: #fdfdfd;
}
Laitoin kaiken CSS-tiedostoon ja isännöin sitä palvelimillemme, jotta se latautuisi vain Applen sähköpostiin ja iOS:iin. (Se auttoi siinä, että se näytti vain, missä sitä tuettiin). Törmäsin joihinkin häiriöihin, jotka eivät näkyneet oikein joissakin Litmus-sähköpostiohjelmissa, joten lisäsin kohdistusta poistaakseni sen kyseisistä asiakkaista. Se on jotain, joka sinun on tehtävä tapauskohtaisesti, kun aloitat testaus sen sähköpostiisi.
Varmista, että mallisi näkyvät oikein
Rikkinäiset sähköpostit johtavat vähemmän tuloksiin. Esikatsele sähköpostisi yli 100 sähköpostiohjelmassa, sovelluksessa ja laitteessa varmistaaksesi tuotemerkin ja virheetön tilaajakokemuksen. Joka kerta.
About the Author
