8 fantastici effetti HTML che chiunque può aggiungere al proprio sito Web

23 Dicembre 2019

Vuoi che il tuo sito web sia fantastico, ma le tue capacità di sviluppo web sono carenti?

Non disperare! Non devi conoscere CSS o PHP per creare un sito di fantasia con effetti fantastici. Faranno alcuni semplici tag HTML e sapere come copiare e incollare.

Per iniziare con alcuni fantastici effetti html, abbiamo compilato questi modelli di codice effetto HTML gratuiti. Miglioreranno la funzionalità e l'esperienza utente del tuo sito, senza rompere la banca. Sebbene siano principalmente effetti HTML, possono contenere anche alcuni CSS e PHP.

1. Fantastico effetto di parallasse

Probabilmente hai visto l'effetto Parallax utilizzato sui siti Web con annunci online. Mentre scorri verso il basso un articolo, l'immagine di sfondo sembra scorrere a un ritmo diverso o viene visualizzata una pubblicità. Forse l'immagine di sfondo cambia mentre visiti diverse parti del sito. È un effetto interessante che aggiunge profondità visiva al contenuto e ideale anche se non capisci il codice HTML di base .

Poiché questo non è un puro effetto HTML, possiamo solo offrire GIF animate per dimostrare l'output.

Sotto vedrai una versione base dell'effetto Parallax; una casella di testo si sposta su un'immagine di sfondo statica durante lo scorrimento.

Puoi giocare con l'effetto e copiare il codice per il semplice effetto di scorrimento Parallax sopra riportato da W3Schools .

Nella sua versione più sofisticata, questo effetto è una combinazione di HTML, CSS e JS.

Vai avanti e recupera i codici per l' effetto Parallax intestazione / piè di pagina sopra da CodePen .

2. Codice della casella di commento HTML scorrevole

Questo è un elemento HTML semplice ma utile che ti consente di comprimere lunghi frammenti di testo in un formato compatto. In questo modo non occupa l'intero spazio sulla pagina.

Input HTML:

 <div >Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :)</div>

Demo di output:

Mettere del testo in questa casella ti permetterà di vedere quanto può estendersi fino a quando eventualmente le barre di scorrimento dovrebbero mostrare, permettendoti di scorrere il testo. Questo è tutto! 🙂

Puoi giocare con i colori e le dimensioni della casella di testo per adattarla alle tue esigenze.

Se desideri qualcosa di un po 'più elaborato, puoi anche recuperare il codice per una casella di commento personalizzabile da Quackit . Offrono diversi modelli, ma puoi anche utilizzare il loro editor per modificare e testare (eseguire) manualmente il tuo codice personalizzato.

3. Evidenzia testo

Con un semplice tag HTML  puoi aggiungere un sacco di fantastici effetti al tuo testo o alle tue immagini. Nota che non tutti funzionano su tutti i browser. Quelli menzionati qui funzionano in Google Chrome, Microsoft Edge e Mozilla Firefox.

Questo effetto di testo HTML evidenzia il testo tra i   .

Ingresso:

 <span >Your highlighted text here.</span>

Demo di output:

4. Aggiungi l'immagine di sfondo al testo

Allo stesso modo, puoi cambiare il colore del tuo testo o aggiungere un'immagine di sfondo. Questo sembra fantastico se la dimensione del carattere del testo è più grande.

Ingresso:

 <span >MakeUseOf presents...</span>

Lo stesso effetto si ottiene aggiungendo gli elementi di stile e carattere al testo in un tag  .

Demo di output:

5. Aggiungi descrizione comando

Viene visualizzata una descrizione comandi del titolo quando si scorre con il mouse su un pezzo di testo o immagine "manipolato". Li conosci da immagini, testo collegato o voci di menu nelle app desktop. Ecco come aggiungere una descrizione comandi al testo semplice.

Ingresso:

 <span title="See, this is the tooltip. :)">Move your mouse over me!</span>

Demo di output:

6. Fai scorrere o cadere il testo

Quando cerchi "marquee html" su Google, scoprirai un piccolo uovo di Pasqua. Vedi il conteggio dei risultati della ricerca a scorrimento in alto? Questo è un effetto creato dal tag tendone ormai obsoleto. Sebbene questa funzione HTML sia stata deprecata, la maggior parte dei browser la supporta ancora.

Ingresso:

 <marquee>I wanna scroll with it, baby!</marquee>

Demo di output:

È possibile aggiungere ulteriori attributi per controllare il comportamento di scorrimento, il colore di sfondo, la direzione, l'altezza e altro. Questi effetti possono diventare abbastanza irritanti se lo esageri.

Per un effetto di testo in caduta libera, vai di nuovo su Quackit e copia il loro codice di selezione altamente personalizzato.

7. Aggiungi un menu Switch

Gli effetti HTML più interessanti sono effetti HTML dinamici. Tuttavia, sono spe
sso basati su script. Ecco un effetto per i menu che concorderai sembra molto fluido. sono venuto ad adorare.

È un po 'più complicato del tuo tag HTML medio perché funziona con un foglio di stile e script. Il vantaggio è che non è necessario caricare un file CSS o di script per farlo funzionare. Invece, incolla il codice nella sezione <head> del tuo sito web.

Ingresso:

Aggiungi il seguente codice nella sezione <head> della tua pagina:

 <style type="text/css"> .menutitle{ cursor:pointer; margin-bottom: 5px; background-color:#ECECFF; color:#000000; width:140px; padding:2px; text-align:center; font-weight:bold; /*/*/border:1px solid #000000;/* */ }.submenu{ margin-bottom: 0.5em; } </style><script type="text/javascript">/*********************************************** * Switch Menu script- by Martial B of http://getElementById.com/ * Modified by Dynamic Drive for format & NS4/IE4 compatibility * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc) var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page onlyif (document.getElementById){ //DynamicDrive.com change document.write('<style type="text/css">n') document.write('.submenu{display: none;}n') document.write('</style>n') }function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change if(el.style.display != "block"){ //DynamicDrive.com change for (var i=0; i<ar.length; i++){ if (ar[i].className=="submenu") //DynamicDrive.com change ar[i].style.display = "none"; } el.style.display = "block"; }else{ el.style.display = "none"; } } }function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; }function onloadfunction(){ if (persistmenu=="yes"){ var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=get_cookie(cookiename) if (cookievalue!="") document.getElementById(cookievalue).style.display="block" } }function savemenustate(){ var inc=1, blockid="" while (document.getElementById("sub"+inc)){ if (document.getElementById("sub"+inc).style.display=="block"){ blockid="sub"+inc break } inc++ } var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid document.cookie=cookiename+"="+cookievalue }if (window.addEventListener) window.addEventListener("load", onloadfunction, false) else if (window.attachEvent) window.attachEvent("onload", onloadfunction) else if (document.getElementById) window.onload=onloadfunctionif (persistmenu=="yes" && document.getElementById) window.onunload=savemenustate</script>

E questo codice va dove vuoi che appaia il menu dinamico.

 <!-- Keep all menus within masterdiv--> <div id="masterdiv"><div onclick="SwitchMenu('sub1')">Topics</div> <span id="sub1"> - <a href="//www.makeuseof.com/service/browser">Browsers/Addons</a><br> - <a href="//www.makeuseof.com/service/web_based">Web Apps</a><br> - <a href="//www.makeuseof.com/service/how-to">How-To Tips</a><br> - <a href="//www.makeuseof.com/service/applications">Cool Software</a><br> ...and more! </span><div onclick="SwitchMenu('sub2')">Staff Writers</div> <span id="sub2"> - <a href="//tecnobabele.com/author/karl-l-gechlik/">Karl Gechlik</a><br> - <a href="//tecnobabele.com/author/tinsie/">Tina</a><br> - <a href="//tecnobabele.com/author/varunkashyap/">Varun Kashyap</a><br> ...and more! </span><div onclick="SwitchMenu('sub3')">Miscellaneous</div> <span id="sub3"> - <a href="//www.makeuseof.com/about/">About</a><br> - <a href="//www.makeuseof.com/contact">Contact</a><br> - <a href="//www.makeuseof.com/archives-2">Archives</a><br> - <a href="//www.makeuseof.com/disclaimer">Disclaimer</a><br> </span></div>

Demo di output:

Sfortunatamente, non possiamo dimostrare questo effetto qui. Ma l'origine originale, Dynamic Drive , presenta una copia funzionante di questo effetto HTML dinamico.

8. Ottieni un foglio di calcolo HTML con Tableizer

Se vuoi mostrare un foglio di calcolo sul tuo sito, lascia che Tableizer! trasforma i tuoi dati in una tabella HTML. Basta incollare i dati grezzi da Excel, Google Doc o qualsiasi altro foglio di calcolo nello strumento di conversione su tableizer.journalistopia.com . Modifica le opzioni della tabella , quindi fai clic su Tableize It! per ricevere l'output HTML.

Fai clic su Copia HTML negli Appunti per copiare il codice HTML e aggiungerlo al tuo sito web. Prendi in considerazione la modifica dei colori di sfondo per renderlo molto più fresco.

Anche se questo non è davvero un effetto HTML, è abbastanza utile.

Altri fantastici effetti HTML

La potenza di HTML, CSS e JavaScript offre opzioni potenzialmente illimitate per incredibili effetti di testo sul tuo sito web. Voglio di più?

HTML Goodies ti dà grandi idee per i tag  .
Dynamic Drive ha molti incredibili script HTML dinamici.
Quackit offre fantastici effetti di testo in puro HTML.

Ti abbiamo mostrato otto (principalmente) effetti HTML che puoi utilizzare per migliorare il tuo sito web. Alcuni sono di base, altri sono dotati di campane e fischietti. Tutti sono facili da implementare.

Se desideri approfondire e scrivere il tuo codice HTML, inizia con questi esempi di codice HTML facili da imparare e semplici .

Leggi l'articolo completo: 8 fantastici effetti HTML che chiunque può aggiungere al proprio sito Web