7 Coola HTML-effekter som någon kan lägga till på deras hemsida

Du vill ha din hemsida Hur man gör en hemsida: För nybörjare Hur man gör en hemsida: För nybörjare Idag ska jag styra dig genom processen att göra en komplett webbplats från början. Oroa dig inte om det här låter svårt. Jag leder dig igenom det hela steget. Läs mer för att se fantastiskt ut, men dina webbutvecklingsfärdigheter saknas?

Förtvivlan inte! Du behöver inte veta CSS Lär dig HTML och CSS med dessa steg för steg-handledning Lär dig HTML och CSS med dessa steg för steg-handledningar Nyfiken om HTML, CSS och JavaScript? Om du tycker att du har en förmåga att lära dig hur man skapar webbplatser från början - här är några bra steg-för-steg-tutorials värda att försöka. Läs mer eller PHP för att bygga en fancy webbplats. Några bra gamla HTML 5 steg för att förstå grundläggande HTML-kod 5 steg för att förstå grundläggande HTML-kod Läs mer och veta hur man kopierar och klistrar kommer att göra.

Vi har sammanställt 7 gratis HTML-effektmallar. De kommer att förbättra webbplatsens funktionalitet och användarupplevelse, samtidigt som banken inte bryts. Och de kan innehålla några CSS och PHP också.

Kanske är en av dessa vad du letat efter.

1. Parallax Effekt

Du har nog sett Parallax-effekten Hur man skapar en Parallax-skrivbordsunderlägg med regnmätare Hur man skapar en Parallax-skrivbordsunderlägg med regnemätare Om du vill ha en levande animerad skrivbordsunderlägg, kolla in Rainmeter! Här visar vi hur du skapar en unik parallell effekt för din Windows-skrivbordsbakgrund. Läs mer i fancy magazine-stil online artiklar. När du rullar ner en artikelartikel visas bakgrundsbilden för att bläddra i en annan takt. När du anger ett annat avsnitt i artikeln ändras bakgrundsbilden. Det är en cool effekt som lägger till visuellt djup i innehållet.

Eftersom detta inte är en ren HTML-effekt kan vi bara erbjuda animerade GIF-filer för att visa utdata.

Nedan ser du en grundläggande version av Parallax-effekten. en textruta rör sig över en statisk bakgrundsbild när du bläddrar.

Du kan spela med effekten och kopiera koden för ovanstående enkla Parallax-rullningseffekt från W3Schools.

I sin mest sofistikerade version är denna effekt en kombination av HTML, CSS och JS.

Fortsätt och hämta koderna för ovanstående Header / Footer Parallax-effekt från CodePen.

2. Scrollable Text Box

Det här är ett enkelt men användbart HTML-element som låter dig packa långa utdrag av text till ett kompakt format. På så vis tar det inte upp hela platsen på sidan.

HTML-ingång:

Output demo:

Din text kommer att visas här. Och du kan bläddra ner för att gå igenom allt. Du behöver bara lägga till en tillräcklig mängd text för att göra scrollbars-showen. Det är självklart inte tillräckligt, o låt oss anta att vi har lite mer att säga. Så småningom kommer rullbalkarna att vara till nytta. Det är allt! :)

Du kan spela med färgerna och storleken på textrutan så att den passar dina behov.

Om du vill ha något lite mer avancerat kan du också hämta koden för en anpassningsbar kommentarfält från Quackit. De erbjuder flera mallar, men du kan också använda deras redaktör för att manuellt ändra och teset (kör) din anpassade kod.

3. Markera Text

Med en enkel HTML-tagg kan du lägga till massor av effekter på din text eller bilder. Observera att inte alla arbetar på alla webbläsare. De som nämns här fungerar i Google Chrome, Microsoft Edge och Mozilla Firefox.

Inmatning:

Din markerade text här.

Output demo:

Din markerade text här.

4. Lägg till bakgrundsbild till text

På samma sätt kan du ändra färgen på din text eller lägga till en bakgrundsbild. Den här blir bara väldigt spännande om din text har en stor storlek, varför jag också ökade teckensnittstorleken.

Inmatning:

MakeUseOf presenterar ...

Observera att du också kan lägga till stil och teckensnitt till en tagg för samma effekt, plus fet text.

Output demo:

MakeUseOf presenterar ...

5. Lägg till Titelverktygstips

En titelverktygstip kommer upp när du rullar med musen över en bit av “manipuleras” text eller bild. Du känner till dessa från bilder eller länkad text. Så här kan du lägga till den här till vanlig text.

Inmatning:

Flytta musen över mig!

Output demo:

Flytta musen över mig!

6. Gör rullning eller fallande text

När du söker efter “markerings html” På Google hittar du lite påskägg. Se sökresultatet för rullande sökresultat? Det är en effekt som skapas av den nu föråldrade markeringsmarkeringen. Medan denna HTML-funktion har avlägsnats, stödjer den flesta webbläsare fortfarande det.

Inmatning:

Gör det bläddra, älskling!

Output demo:

Gör det bläddra, älskling!

Du kan lägga till ytterligare attribut för att styra rullningsbeteendet, bakgrundsfärgen, riktningen, höjden och mer. Dessa effekter kan bli ganska irriterande om du överdriver det.

För en cool fallande text effekt, gå till Quackit igen och kopiera deras mycket anpassade markeringskod.

7. Lägg till en switchmeny

De mest spännande HTML-effekterna är dynamiska HTML-effekter. Men de är ofta scriptbaserade. Här är en effekt för menyer som jag har kommit för att älska. Det är lite mer komplicerat än din HTML-tagg för att det fungerar med ett stilark och skript. Fördelen är att du inte behöver ladda upp en CSS eller skriptfil för att få den att fungera, du kan plantera all nödvändig information i avsnitt på din webbplats.

Inmatning:

Lägg till följande kod i avsnitt på din sida:

Och den här koden går vart du vill att den dynamiska menyn ska visas.

ämnen

- Webbläsare / Addons

- Web Apps

- Hur-Tips

- Cool programvara

… och mer!

Personalförfattare

- Karl Gechlik

- Tina

- Varun Kashyap

… och mer!

Diverse

- Handla om

- Kontakta

- Arkiv

- varning

Output demo:

Tyvärr kan vi inte visa denna effekt här. Men den ursprungliga källan, Dynamic Drive, har en fungerande kopia av denna dynamiska HTML-effekt.

Bonus: Tableizer!

Om du vill visa ett kalkylblad på din webbplats, låt Tableizer! omvandla dina data till en HTML-tabell. Klistra in de rada data från Excel, Google Doc eller något annat kalkylblad i respektive fält, tweak the tabellalternativ, och klicka Tabellera det! för att få HTML-utmatningen.

Nu kan du kopiera HTML-koden och lägga till den på din webbplats. Överväg att redigera bakgrundsfärgerna så att det ser mycket svalare ut.

Även om detta inte är en HTML-effekt, är det ganska praktiskt.

Vilken effekt väljer du??

Vi har visat dig sju (oftast) HTML-effekter som du kan använda för att förbättra din webbplats. Vissa är grundläggande, andra kommer med klockor och visselpipor. Alla är lätta att genomföra.

För mer taggar idéer, besök HTML godis Om du är intresserad av dynamisk HTML, kolla in Dynamic Drive för massor av otroliga skript. Gå till Quackit för mer rena HTML-koder.

Om du vill gå djupare och skriva din egen HTML, börja med dessa enkla att lära och enkla HTML-kod exempel. Och när du är redo för HTML5, har vi täckt dig också.

Slutligen, när du utvecklar din webbplats, behåll sidans hastighet 7 sätt att göra din webbplats eller blogg ladda snabbare för besökare 7 sätt att göra din webbplats eller blogg ladda snabbare för besökare Här är några bästa tips för att påskynda din webbplats och se till att dina besökare håller fast. Läs mer i åtanke.

Utforska mer om: HTML, webbutveckling, verktyg för webbansvariga.