Kundpresentationer är en populär webbplatsfunktion. De ger trovärdighet till ett företag och skapar en känsla av förtroende. Om dina andra kunder älskar dig så mycket, kanske jag också!
Som ett roligt experiment, idag kommer vi att sätta upp för att skapa en cool liten citatsektion som roterar mellan flera olika citat med endast CSS. Under vägen lär vi oss allt om hur vi planerar och skapar flera stegs keyframe-sekvenser. Låt oss börja.
HTML
För att starta detta projekt måste vi bestämma strukturen i vårt citat. Ett kundcitat kommer vanligtvis att ha tre bitar av text: kundens namn, varifrån de är och vad de sa.
Med detta i åtanke kan vi skapa en citatbehållare som har tre olika delar. Rubriknamnet kommer att innehålla kundens namn, det lilla elementet kommer antagligen att innehålla namnet på det företag som kunden är från eller någon annan relaterad information, och stycket med innehålla citattexten.
Eftersom vi använde tre olika element behöver vi inte ha några extra krokar och vi borde enkelt kunna rikta in varje del av citatet i vår CSS. Som en sidotal valde jag godtyckligt en h3 här helt enkelt eftersom h1 och h2 brukar användas för andra ändamål. Gärna ändra det till vad du vill.
Nu när vi har strukturerat oss, är det dags att expandera det i tre olika citat. För att visa upp mångsidigheten i detta projekt bestämde jag mig för att fylla min text med de sista orden från några kända personer. Lite morbid, men som en platshållare gör det!
Starter CSS
När du har skrivit ut din HTML, hoppa över till din CSS och ange något som liknar koden nedan. I grunden ställde jag ett intressant bakgrundsmönster och definierade behållaren som håller citaten.
Citat Styles
Därefter är det dags att utforma citationstecken. Jag använde absolut positionering här så att alla tre citat kommer att rymma samma utrymme. Som standard skapar de en vertikal stack men vi vill inte ha det alls. I vår färdiga produkt kommer ett citat att blekna ut, då kommer en annan att tona in. Därför vill vi att de ska vara på samma plats.
Jag ställer också opaciteten till noll så att alla citat kommer att döljas som standard. Opacitet är en udda egenskap som verkligen är en huvudvärk att arbeta med. Vi pratar lite om det här lite senare. Saken att notera är att du inte ser någonting med opacitet på noll så du vill tillfälligt kommentera denna del medan du stämmer med citatdelen.
Citat Text Stilar
Nu när vi har den allmänna citatbehållaren stilad, är det dags att fånga varje textstycke och utforma den individuellt. För den här demoen gör vi texten snygg och stor så sätt h3 till 55px och den lilla till 18px, använd sedan Helvetica för fontfamiljen.
Vår uppgift med stycket är mycket mer komplex. Vi behöver inte bara ställa in den i en låda, vi måste ta bort den från stapeln och hålla den till höger om det andra innehållet.
För att göra detta ska vi göra ett antal saker så jag har delat mina stilar för detta i tre olika steg (visas nedan).
För det första steget hanterade jag isningen? eller vanliga visuella saker. Jag gjorde bakgrunden vit, ställa in teckensnittet och justerade texten till mitten. Därefter hanterade jag positionen och storleken på den aktuella rutan genom användning av en del stoppning och absolut positionering. Jag avslutade allt detta med en valfri gränserad radie som rundar våra hörn av fint.
Avstämning
Om vi kontrollerar våra framsteg genom att se till att ett citat är synligt ser vi ganska bra ut! Vår citat sitter dock i en vanlig gammal låda. Vi saknar den lilla triangeln som gör att den ser ut som en talbubbla.
Lägga till triangeln
För att lägga till i den lilla triangeln måste vi vända sig till: efter pseudoelementet. I grund och botten skapar vi ett tomt element, placerar det på vänster sida och tillämpar lite knepig gränssvoodoo.
Som du kan se ger det oss effekten att vi ska gå, ganska snyggt eh?
Animate That Sucka
Nu när vi har visat vår visuella styling och positionering uteställt, är det dags att komma fram till ett sätt att tona ut ett citat och dyka upp i en annan och upprepa denna process på en oändlig loop. Vi kan och bör använda jQuery, men idag försöker vi räkna ut det med ren CSS så vi vänder oss till keyframe-animationer.
Jag kommer att vara brutalt ärlig här, jag gör den här typen av saker nästan varje dag och det tog mig alltid för alltid att räkna ut den korrekta sekvensen som ska användas för att göra keyframerna blekna in och ut vid rätt tidpunkt. Jag föll och föll och höll med obehagliga överlappningar och resultat som inte alls var vad jag ville ha.
Jag berättar för det här så att du vet att du inte är ensam om du fortfarande befinner dig att slå väggar som är svåra att övervinna. Så småningom fick jag min långsamma hjärna att omsluta konceptet.
Jag är en visuell tänkare så jag gjorde ett grovt diagram för att se hur allting fungerar. I grund och botten vill vi stapla dessa animationer så att endast ett citat är synligt vid varje given tillfälle. För att dra av det kommer vi att skapa en trettio sekunders animation och dela den i tre delar. De första och sista delarna har en opacitet av noll och den andra delen kommer att ha en opacitet av en.
Som du kan se behöver vi fördröja den andra animationens starttid med tio sekunder och den tredje animationens starttid med tjugo sekunder. På det här sättet, om du ritar en vertikal linje vid någon punkt i diagrammet, visas inte mer än ett citat samtidigt.
Nu när jag implementerade detta tyckte jag inte hur länge det tog citaten att blekna in och ut. Jag vill ha en snabb tona in, en lång sikt och en snabb uttonning. För att göra detta behöver vi helt enkelt lägga till några fler nyckelbilder. Här är sekvensen jag kom med:
Vi behöver bara konfigurera en sekvens, men vi tillämpar den på de tre separata citaten på tre olika sätt. I grund och botten är den enda skillnaden fördröjningsvärdet, vilket gör att animationen väntar några sekunder före början.
Det är allt det finns! När sidan laddas, kommer det första citatet att blekna in, sedan blekna ut när andra citatet kommer in (och så vidare).
Webbläsarkompatibilitet
Vid det här tillfället skriker du förmodligen på din datorskärm att jag är en idiot som bara använder Webkit-prefix. Sannerligen gjorde jag bara detta för att hålla sakerna förståeligt. Nu när vi alla har bestämt oss kan vi använda vår goda gamla vän Prefixr för att utöka den. När vi gör det här är den jätte bit av kod som spottar ut:
Som jag nämnde tidigare är vår användning av opacitetsegenskapen lite misstänkt eftersom opacitetstöd är en röra. Lyckligtvis tar Prefixr ledningen på detta och försöker se till att vår kod är grundad för att fungera på så många webbläsare som möjligt. Tyvärr går det lite överbord genom att sätta in alla dessa filteregenskaper där de inte nödvändigtvis behövs, så det kan vara en bra idé att rengöra vissa.
Selectivizr
Vi använde några avancerade väljare i handledningen, så medan vi är med på webbläsarstöd, borde jag påpeka att du måste lägga till Selectivizr och jQuery i ditt projekt för att se till att äldre webbläsare förstår dessa.
Keyframe Support
Här är kickern, vi har gått igenom allt detta för att se till att vi har maxat ut vårt webbläsarsupport på väljare och opacitet, men i slutändan kommer IE fortfarande att vägra att spela med varandra eftersom det inte finns någon keyframe-support förrän IE 10 .
Självklart kommer JavaScript att vara svaret här om du ska använda det här i den verkliga världen. Du kan antingen göra det hela i JS eller helt enkelt använda det som backup för webbläsare som inte stöder nyckelbilder.
demo
Här är live-demo. Var noga med att vänta ett tag när du startar det, kom ihåg att hela animeringen tar trettio sekunder!
demo: Klicka här för att starta
Slutsats
Keyframes har kommit långt sedan de bara stöddes av Webkit-webbläsare. Men kom ihåg att på grund av vår gamla vän IE, är de fortfarande mer i riken med? Kul att leka med? än något du borde satsa på för viktiga projekt.
Lämna en kommentar nedan och låt oss veta om du haft denna handledning och hur du skulle förbättra det!