{"id":255402,"date":"2023-04-29T12:25:00","date_gmt":"2023-04-29T09:25:00","guid":{"rendered":"https:\/\/inform.click\/15-fantastici-effetti-con-js-e-css3\/"},"modified":"2023-04-29T12:25:00","modified_gmt":"2023-04-29T09:25:00","slug":"15-fantastici-effetti-con-js-e-css3","status":"publish","type":"post","link":"https:\/\/inform.click\/it\/15-fantastici-effetti-con-js-e-css3\/","title":{"rendered":"15 fantastici effetti con JS e CSS3"},"content":{"rendered":"<p>\n  Salve designer, siete arrivati \u200b\u200bal punto in cui il vostro cervello si rifiuta pi\u00f9 di funzionare?\n<\/p>\n<p>\n  Se hai e stai cercando idee per far diventare i siti web la prossima grande novit\u00e0 dopo A Song of Fire and Ice (serie Game of Thrones per la popolazione che non legge libri) senza scervellarti, dai un'occhiata a questi 15 CSS3 effetti che abbiamo raccolto per te.\n<\/p>\n<p>\n  Dai tutorial alle offerte, ti offriamo 15 fantastici effetti che trasformeranno i siti web da blah a wow!\n<\/p>\n<h4>\n  Effetto parallasse<br \/>\n<\/h4>\n<p>\n  Hai sfogliato il sito web <a href=\"https:\/\/ihatetomatoes.net\/happy-25th-birthday-game-boy\/\" target=\"_blank\" rel=\"noopener\">di ihatetomatoes<\/a> che celebra i 25 anni del Nintendo Game Boy? Dove hai anche avuto modo di giocare a Tetris?\n<\/p>\n<p>\n  O forse hai sfogliato il sito Web <a href=\"http:\/\/uk.rimmellondon.com\/\" target=\"_blank\" rel=\"noopener\">di Rimmel<\/a> sbalordito dalla brillantezza con cui gli articoli si stagliano su uno sfondo colorato di modelli?\n<\/p>\n<p>\n  L'effetto 3D che sembra essere di gran moda nella progettazione ora \u00e8 tecnicamente chiamato effetto parallasse. I designer adorano giocare con questi, ma devi essere sottile e strategico in quanto pu\u00f2 ritorcersi contro e finire per creare un pasticcio confuso.\n<\/p>\n<p>\n  L'effetto Parallax o lo scorrimento Parallax \u00e8 il risultato del caricamento dello sfondo a una velocit\u00e0 inferiore rispetto al primo piano, creando un aspetto pi\u00f9 3D. Sembra un sacco di lavoro? Non per qualcuno che lavora in modo intelligente, ottieni un tema Parallax completamente rifinito gi\u00e0 su <a href=\"http:\/\/demos.cyberchimps.com\/parallaxpro\/\" target=\"_blank\" rel=\"noopener\">Cyberchimps<\/a>.\n<\/p>\n<h4>\n  Effetto Ken Burns<br \/>\n<\/h4>\n<p>\n  Il regista di documentari ha aperto la strada al concetto di panoramica e zoom in un'immagine statica. Il grafico ha utilizzato questo effetto in abbondanza e potresti averlo trovato anche su molti siti web.\n<\/p>\n<p>\n  L'effetto non solo guida i bulbi oculari, letteralmente, dove vuoi che sia messa a fuoco, ma aggiunge anche un tocco di intensit\u00e0 a un'immagine. Ricordi di aver guardato un film in cui una vecchia fotografia \u00e8 stata proiettata sullo schermo e il narratore parla di qualcosa nell'immagine, mentre l'inquadratura si sposta lentamente e si ingrandisce su quel soggetto?\n<\/p>\n<p>\n  <a href=\"https:\/\/slidedeck.com\/lens-examples\/pf\/1337\/\" target=\"_blank\" rel=\"noopener\">L'effetto Ken Burns<\/a> \u00e8 diventato piuttosto popolare e giustamente in quanto d\u00e0 un lifting istantaneo a qualsiasi sito web noioso.\n<\/p>\n<h4>\n  Menu di navigazione semicircolare<br \/>\n<\/h4>\n<p>\n  Non devi fare di tutto per cambiare l'aspetto del tuo sito web. A volte basta eliminare l'opzione degli uomini vecchi e noiosi pu\u00f2 aiutare.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-6382397e28fdf.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-6382397e28fdf.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Al suo posto, scegli un'elegante opzione di navigazione circolare o semicircolare che aiuta a mostrare una serie di opzioni di menu. Alcuni designer lo includono solo per i pulsanti di condivisione sui social media, ma rimarrai sorpreso dalla sua versatilit\u00e0.\n<\/p>\n<p>\n  Dalle ovvie icone di condivisione della console musicale e dei social media, al menu principale e alle icone del profilo, ci sono molti modi per sfruttarlo.\n<\/p>\n<p>\n  Non vuoi scervellarti creando questo effetto CSS3 da zero? Prendine uno in <a href=\"http:\/\/dealfuel.com\/seller\/circular-menu-free\/\" target=\"_blank\" rel=\"noopener\">omaggio da DealFuel<\/a>.\n<\/p>\n<h4>\n  Mostra\/Nascondi pannello Login<br \/>\n<\/h4>\n<p>\n  I pannelli scorrevoli sono comunemente usati in questi giorni, ma principalmente per alleggerire il carico di troppe schede. Non abbastanza designer sperimentano il potenziale di questa opzione, perch\u00e9 i pannelli scorrevoli possono essere utili in tanti modi.\n<\/p>\n<p>\n  Mostra gli argomenti dei contenuti, crea un aspetto ordinato, aumenta l'estetica o semplicemente sii diverso dai siti web progettati in modo convenzionale. Il pannello di accesso Mostra\/Nascondi \u00e8 un must per ogni sito Web WordPress, offre una panoramica della dashboard con pi\u00f9 opzioni di menu una volta effettuato l'accesso. Scopri di pi\u00f9 su questo pannello <a href=\"http:\/\/web-kreation.com\/wordpress\/add-a-showhide-login-panel-to-your-wordpress-theme-using-mootools\/\" target=\"_blank\" rel=\"noopener\">qui<\/a>.\n<\/p>\n<h4>\n  Modulo di accesso al dispositivo di scorrimento<br \/>\n<\/h4>\n<p>\n  Un'altra opzione del pannello di accesso che scorre per rivelare pi\u00f9 contenuti \u00e8 un'ottima mossa quando si desidera che gli abbonati inseriscano un po' pi\u00f9 di informazioni oltre all'indirizzo e-mail e al nome, ma allo stesso tempo non si vuole sopraffarli.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-6382397fb16b5.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-6382397fb16b5.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Riducendo anche lo spazio, dai <a href=\"https:\/\/d2o0t5hpnwv4c1.cloudfront.net\/041_TopPanelWithJquery\/demo\/index.html\" target=\"_blank\" rel=\"noopener\">un'occhiata a questo<\/a>, poich\u00e9 sarebbe utile quando crei siti Web a tema minimalista.\n<\/p>\n<h4>\n  Nastri 3D ed effetti 3D<br \/>\n<\/h4>\n<p>\n  Se sei ancora intimidito dall'effetto Parallax e temi di sbagliare, inizia in piccolo. Usa nastri 3D, diverse sfumature e ombre per creare un'illusione generale di profondit\u00e0 nel tuo sito web, rendendo cos\u00ec un effetto 3D.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-63823981a7c0f.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-63823981a7c0f.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  I nastri 3D di per s\u00e9 sembrano assolutamente sorprendenti. Usalo per evidenziare una parte del sito Web o su un documento di certificazione ufficiale che desideri pubblicare, aumenterebbe l'aspetto visivo complessivo della pagina.\n<\/p>\n<p>\n  Sapere come creare l'effetto usando CSS3 su <a href=\"http:\/\/www.pvmgarage.com\/2010\/01\/how-to-create-depth-and-nice-3d-ribbons-only-using-css3\/\" target=\"_blank\" rel=\"noopener\">pvmgarage<\/a>.\n<\/p>\n<h4>\n  Effetto coprente<br \/>\n<\/h4>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-63823983b9e92.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-63823983b9e92.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Prevalentemente utilizzato su siti Web basati su libri, hai sicuramente visto questo effetto sul tuo Mac o dispositivo Apple quando hai sfogliato le immagini. L'effetto Coverflow mette in mostra una serie di elementi, come le copertine dei libri, dove puoi quindi scorrere verso sinistra o verso destra per visualizzare la copertina, ottenere alcuni dettagli pop-up e selezionarli.\n<\/p>\n<p>\n  Sembra interessante? Vorresti implementarlo in un progetto? Se s\u00ec, allora sfoglia sicuramente questo <a href=\"http:\/\/ariya.ofilabs.com\/2014\/01\/javascript-kinetic-scrolling-part-5-cover-flow-effect.html\" target=\"_blank\" rel=\"noopener\">pezzo<\/a>.\n<\/p>\n<h4>\n  Transizioni CSS3<br \/>\n<\/h4>\n<p>\n  I designer che giocano in modo intelligente piuttosto che duro sanno che non ci vuole molto per aggiungere mojo al tuo sito web, un cambio di tema qui, alcuni elementi ombra e ombra l\u00ec e puoi effettivamente trasformare la tua pagina. Un altro modo per farlo \u00e8 animare il contenuto della tua pagina attraverso le transizioni CSS3.\n<\/p>\n<p>\n  Dalla spaziatura delle lettere all'ombra del testo, gioca tutto ci\u00f2 che ti piace per vedere cosa si adatta meglio. Inoltre, ecco un fantastico <a href=\"http:\/\/www.designrazor.net\/free-css3-transition-effects-download\/\" target=\"_blank\" rel=\"noopener\">omaggio<\/a> che comprende una gamma completa di effetti di transizione.\n<\/p>\n<h4>\n  Animazione CSS3 a tema neve<br \/>\n<\/h4>\n<p>\n  Stai ancora vacillando per i postumi delle festivit\u00e0 natalizie? <a href=\"https:\/\/codepen.io\/NickyCDK\/pen\/AIonk\" target=\"_blank\" rel=\"noopener\">Le animazioni CSS3 a tema neve<\/a> non solo hanno un tocco festivo, ma funzionano anche molto bene per alcuni siti Web come quello di un marchio di gelati.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-63823985a04b8.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-63823985a04b8.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  \u00c8 veloce e facile da usare e pu\u00f2 cambiare l'aspetto del tuo sito Web o della pagina del tuo blog per completare un tema o una stagione.\n<\/p>\n<h4>\n  Animazione<br \/>\n<\/h4>\n<p>\n  Le animazioni possono fare miracoli per i siti Web, anche se sono fatte in modo sottile. Attira l'attenzione e aiuta anche con le conversioni poich\u00e9 l'attenzione \u00e8 rivolta all'invito all'azione.\n<\/p>\n<p>\n  O semplicemente, aggiunge al valore nominale di una pagina se non altro. <a href=\"http:\/\/club.wpeka.com\/\" target=\"_blank\" rel=\"noopener\">Ecco<\/a> alcuni fantastici effetti di animazione speciali che puoi provare.\n<\/p>\n<h4>\n  Effetto tipografico<br \/>\n<\/h4>\n<p>\n  Probabilmente hai visto quei post di citazione di Instagram con l'aspetto del testo de-bossed? Questo \u00e8 l'aspetto dell'effetto Letterpress e sta diventando molto popolare anche nel web design.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-638239873daad.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-638239873daad.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Questo ha un aspetto dattiloscritto inverso, ma mostra un aspetto elegante ed elegante. Decisamente consigliato se la tua \u00e8 una pubblicazione online o un blog. Inoltre, se vuoi dare un tocco di professionalit\u00e0 senza andare a fare tutto il C-suite, questo sarebbe d'aiuto. Ecco un tutorial su come utilizzare l' <a href=\"http:\/\/line25.com\/tutorials\/create-a-letterpress-effect-with-css-text-shadow\" target=\"_blank\" rel=\"noopener\">effetto letterpress con CSS3<\/a>.\n<\/p>\n<h4>\n  Cerchio che gira<br \/>\n<\/h4>\n<p>\n  Una piccola informazione non solo non ha mai fatto male a nessuno, ma potrebbe anche essere l'USP del sito web. Un sito Web come quello che genera fatti casuali ad ogni aggiornamento potrebbe essere trasformato in una sorta di galleria con immagini con una piccola maniglia, che quando si fa clic si apre per mostrare alcune curiosit\u00e0 divertenti.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-6382398904386.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-6382398904386.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Ma anche nei normali siti Web, un cerchio rotante \u00e8 molto importante. Comprime le informazioni, quindi non hai una pagina brulicante di testo. E ha anche una fantastica sensazione 3D. Ecco un tutorial su <a href=\"http:\/\/tympanus.net\/codrops\/2012\/07\/20\/3d-flipping-circle-with-css3-and-jquery\/\" target=\"_blank\" rel=\"noopener\">come creare un cerchio rotante<\/a>.\n<\/p>\n<h4>\n  Mega Men\u00f9<br \/>\n<\/h4>\n<p>\n  Probabilmente li hai visti sui siti di e-commerce in cui molte categorie devono essere inserite direttamente nella pagina di destinazione ma senza creare una barra dei menu affollata.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-6382398aa2779.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-6382398aa2779.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  L'opzione Mega Menu \u00e8 anche un must per il settore dell'istruzione, hai un sito web universitario che mostra tutti i corsi principali, le informazioni sull'ammissione, i risultati degli studenti e molto altro?\n<\/p>\n<p>\n  Il Mega Menu pu\u00f2 aiutare a eliminare il disordine, creare un'opzione della barra dei menu pi\u00f9 nitida e pi\u00f9 elegante e non confondere i lettori facendo clic sull'opzione sbagliata a causa di opzioni di menu pi\u00f9 lunghe e confuse. Puoi anche fare un ottimo affare prendendo <a href=\"http:\/\/dealfuel.com\/seller\/responsive-mega-menu-free\/\" target=\"_blank\" rel=\"noopener\">Mega Menu<\/a> reattivo gratuitamente.\n<\/p>\n<h4>\n  Galleria della fisarmonica<br \/>\n<\/h4>\n<p>\n  Ci sono due modi per mantenere i lettori coinvolti sul tuo sito, mettere in risalto contenuti potenti e attirare la loro attenzione su detti contenuti potenti. Una pagina statica pu\u00f2 catturare l'attenzione del lettore, ma qualcosa di interattivo come una galleria a fisarmonica catturer\u00e0 l'attenzione del lettore.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-6382398c4391e.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-6382398c4391e.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Le gallerie a fisarmonica, sia che tu scelga di mostrare il tuo miglior pezzo del portfolio o di attirare l'attenzione sul tuo prodotto pi\u00f9 venduto, funzioneranno sempre. Hai solo 6 secondi per attirare l'attenzione del lettore e tenerlo sulla pagina, usa la galleria Accordion per attirare e mantenere la sua attenzione sul tuo sito web molto pi\u00f9 a lungo. Ecco un ottimo <a href=\"http:\/\/dealfuel.com\/seller\/free-accordion-gallery\/\" target=\"_blank\" rel=\"noopener\">plug-in Adattabile per Accordion Gallery<\/a> che puoi ottenere gratuitamente.\n<\/p>\n<h4>\n  Scatola luminosa<br \/>\n<\/h4>\n<p>\n  Quanto \u00e8 importante una galleria a griglia? Se sei un fotografo, un artista o semplicemente un blogger, potrebbe significare il tuo prossimo grande concerto.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-6382398e26968.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-257190-6382398e26968.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Una galleria a griglia mette in mostra tutti i tuoi pezzi migliori! Dallo straordinario scatto del tramonto in cima a una collina a quell'intenso ritratto di strada, stupiscili, spargi la voce o semplicemente inducili a vincere un contratto, una galleria a griglia potrebbe essere il tuo miglior curriculum per il futuro.\n<\/p>\n<p>\n  Come designer, questo \u00e8 qualcosa che non dovresti considerare solo per il lavoro del tuo cliente, ma anche per il tuo sito web. Porta il tuo lavoro a sostenere per te e garantisci la tua abilit\u00e0 creativa, una galleria a griglia vale il suo peso in oro.\n<\/p>\n<p>\n  Ma lo ottieni per niente in questo <a href=\"http:\/\/dealfuel.com\/seller\/free-jquery-grid\/\" target=\"_blank\" rel=\"noopener\">affare<\/a>, quindi vai a prenderlo ora!\n<\/p>\n<p>\n  Quale di questi consiglieresti ad un amico?\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fonte di registrazione: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2016\/03\/03\/stunning-js-css3-effects\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Salve designer, siete arrivati \u200b\u200bal punto in cui il vostro cervello si rifiuta pi\u00f9 di funzionare? Se hai e stai cercando idee per far diventare i siti web la prossima grande novit\u00e0 dopo A Song of Fire and Ice (serie Game of Thrones per la popolazione che non legge libri) senza scervellarti, dai un&#8217;occhiata a questi 15 CSS3 effetti che abbiamo raccolto per te. Dai tutorial alle offerte, ti offriamo 15 fantastici effetti che trasformeranno i siti web da blah a wow! Effetto parallasse Hai sfogliato il sito web di ihatetomatoes che celebra i 25 anni del Nintendo Game Boy? Dove \u2026<\/p>\n","protected":false},"author":1,"featured_media":176486,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[69,225,56,147],"tags":[],"class_list":["post-255402","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-7","category-libri-di-testo","category-web-e-wordpress","category-web-suggerimenti-e-trucchi"],"_links":{"self":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts\/255402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/comments?post=255402"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts\/255402\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/media\/176486"}],"wp:attachment":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/media?parent=255402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/categories?post=255402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/tags?post=255402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}