{"id":228153,"date":"2022-09-27T16:18:00","date_gmt":"2022-09-27T13:18:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228153"},"modified":"2022-11-09T04:29:12","modified_gmt":"2022-11-09T01:29:12","slug":"grandi-transizioni-di-pagina-css-che-puoi-utilizzare-oggi-sul-tuo-sito-web","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/grandi-transizioni-di-pagina-css-che-puoi-utilizzare-oggi-sul-tuo-sito-web\/","title":{"rendered":"Grandi transizioni di pagina CSS che puoi utilizzare oggi sul tuo sito web\u00a0"},"content":{"rendered":"\n

Le animazioni CSS si riferiscono a quelle animazioni utilizzate per manipolare ed enfatizzare gli elementi HTML con l’uso di CSS, cio\u00e8 con poco o nessun JavaScript e certamente senza bisogno di Flash.<\/p>\n

Come molti designer sanno, l’uso di JavaScript e Flash per le animazioni pu\u00f2 consumare risorse inutilmente e, nel caso di Flash, non \u00e8 molto sicuro.<\/p>\n

Le transizioni di pagina CSS sono transizioni animate tra le pagine che vengono utilizzate per dare ai siti Web quel tocco in pi\u00f9 che li distingue come di prim’ordine e degni di una buona navigazione. E se applicati correttamente, possono non solo dare un senso di vivacit\u00e0 ma anche aiutare molto nella navigazione.<\/p>\n

Questo articolo creato dal nostro team di wpDataTables (il miglior plugin per tabelle di WordPress<\/a>) tratter\u00e0 ci\u00f2 che devi sapere sulle transizioni delle pagine CSS e su come funzionano, oltre a elencare alcune delle migliori che puoi utilizzare in questo momento. Scorri verso il basso per saperne di pi\u00f9.<\/p>\n

L’importanza di aggiungere transizioni di pagina CSS<\/h2>\n

Anche se pu\u00f2 sembrare che l’ animazione<\/a> non abbia molta importanza durante la creazione di un sito Web animato<\/a> o, almeno, non tanto quanto la reattivit\u00e0 e l’usabilit\u00e0 di base del sito, la verit\u00e0 \u00e8 che l’animazione pu\u00f2 fare la differenza tra un sito Web di successo e coinvolgente. sito e una noia totale.<\/p>\n

Le transizioni di pagina rappresentano una pratica spesso trascurata nel web design, ed \u00e8 un peccato considerando l’impatto che hanno. Possono cambiare l’intera sensazione di un sito Web e l’esperienza che i visitatori hanno con esso<\/a>.<\/p>\n

Molti designer tendono a evitare le animazioni perch\u00e9 credono di essere mangiatori di risorse che trascineranno solo il sito Web e lo renderanno lento. Ci\u00f2 accade solo se le animazioni non vengono implementate correttamente, ed \u00e8 qui che le transizioni delle pagine CSS cambiano il gioco.<\/p>\n

Sono modi creativi ed efficienti per aggiungere animazioni fluide al tuo sito web. CSS \u00e8 un potente strumento che pu\u00f2 aiutare un sito web a costruire la sua personalit\u00e0, e di seguito troverai un elenco di esempi che dovrebbero ispirarti a utilizzare le transizioni di pagina CSS per il tuo sito:<\/p>\n

Esempi di transizioni di pagina CSS<\/h2>\n

Fantastico layout con transizioni di pagina fantasiose e menu fuori tela<\/h3>\n

\"Grandi<\/a><\/p>\n

Questo layout di transizione della pagina Web \u00e8 stato creato da NikolayTalanov e sembra buono solo a schermo intero su un grande desktop. L’idea originale \u00e8 stata implementata nel canvas HTML5, ma Nikolay l’ha abilmente adattata a una versione CSS.<\/p>\n

Le transizioni delle pagine CSS sembrano ottime, ma lo svantaggio \u00e8 che gli utenti possono sperimentare alcuni blocchi che si agitano o scompaiono se i valori z-index del tuo sito non sono configurati correttamente.<\/p>\n

folio.transizioni<\/strong><\/h3>\n

\"Grandi<\/a><\/p>\n

Questa transizione di pagina \u00e8 stata creata e lanciata da Foliodot ed \u00e8 una delle preferite sul mercato. Ha una pagina pronta all’uso e transizioni di sezione semplicemente bellissime. Starebbero benissimo su qualsiasi sito Web, indipendentemente dal tipo.<\/p>\n

Impaginazione e layout con div di sfondo ritagliati<\/strong><\/h3>\n

\"Grandi<\/a><\/p>\n

Nikolai Talanov ha inventato una delle migliori transizioni di pagina CSS che vedrai l\u00e0 fuori. Talanov ha realizzato questo concetto tenendo presente che molte persone usano le loro tastiere per navigare su un sito, semplicemente cliccando su e gi\u00f9.<\/p>\n

Le transizioni di pagina funzionano bene in questo modo e sono anche piuttosto reattive. Ci sono anche alcuni problemi di prestazioni, per\u00f2. All’inizio il contenuto tende a caricarsi pi\u00f9 lentamente e gli utenti potrebbero riscontrare problemi quando aprono una pagina con tonnellate di contenuti.<\/p>\n

Transizioni del cursore<\/strong><\/h3>\n

\"Grandi<\/a><\/p>\n

MirkoZoric ha creato queste transizioni di pagina CSS esplorando lo stile Swiper. Usa il popolare effetto di parallasse e gioca con i filtri per ottenere un effetto sorprendente.<\/p>\n

Transizione lecca-lecca<\/strong><\/h3>\n

\"Grandi<\/a><\/p>\n

Lollipop, come Jeff McCarthy ha chiamato la sua transizione di pagina, \u00e8 simile all’aspetto grafico di Android 5.0. La transizione di pagina imita l’animazione del cassetto\/cartella di Android 5.0 Lollipop che utilizza un effetto circolare simile a un lecca-lecca.<\/p>\n

contesto<\/strong><\/h3>\n

\"Grandi<\/a><\/p>\n

Kontext \u00e8 stato creato da Hakim El Hattab ed \u00e8 piuttosto semplice: \u00e8 una transizione di cambio di contesto che sottolinea che il contesto della pagina \u00e8 cambiato. Probabilmente sei abituato a questo tipo di transizione se hai utilizzato un dispositivo che esegue iOS.<\/p>\n

Fantastico layout con animazione concatenata complessa<\/strong><\/h3>\n

\"Grandi<\/a><\/p>\n

Un altro di NikolayTelanov, questa transizione di pagina si basa sul prototipo del sito web satellitare<\/a> ed \u00e8 creata aggiungendo 2 classi con JavaScript e un semplice passaggio del mouse. Questa \u00e8 una funzione demo e ha animazioni concatenate.<\/p>\n

\u00c8 una transizione reattiva che \u00e8 anche facile da mantenere in termini di SCSS.<\/p>\n

Ehi, lo sapevi che anche i dati possono essere belli?<\/h3>\n

wpDataTables<\/a> pu\u00f2 farlo in questo modo. C’\u00e8 una buona ragione per cui \u00e8 il plug-in WordPress n. 1 per la creazione di tabelle e grafici reattivi.<\/p>\n

\"Grandi<\/a><\/p>\n

Un vero esempio di wpDataTables in natura<\/p>\n

Ed \u00e8 davvero facile fare qualcosa del genere:<\/p>\n

    \n
  1. Fornisci i dati della tabella<\/li>\n
  2. Configuralo e personalizzalo<\/li>\n
  3. Pubblicalo in un post o in una pagina<\/li>\n<\/ol>\n

    E non \u00e8 solo bello, ma anche pratico. Puoi creare tabelle di grandi dimensioni con un massimo di milioni di righe<\/a>, oppure puoi utilizzare filtri e ricerche avanzate<\/a>, oppure puoi scatenarti e renderlo modificabile<\/a>.<\/p>\n

    "S\u00ec, ma mi piace troppo Excel e non c’\u00e8 niente di simile sui siti Web". S\u00ec, s\u00ec. Puoi utilizzare la formattazione condizionale<\/a> come in Excel o Fogli Google.<\/p>\n

    Ti ho detto che puoi creare grafici anche<\/a> con i tuoi dati? E questa \u00e8 solo una piccola parte. Ci sono molte altre funzionalit\u00e0<\/a> per te.<\/p>\n

    Transizioni di testo simili a Uber<\/strong><\/h3>\n

    \"Grandi<\/a><\/p>\n

    Nicolas Engler ha creato queste traduzioni che assomigliano a quelle che puoi vedere su Uber. Passano da una diapositiva all’altra in modo molto fluido e sono perfetti per interfacce semplici.<\/p>\n

    Carosello 3D diviso<\/strong><\/h3>\n

    \"Grandi<\/a><\/p>\n

    Come suggerisce il nome, Paul Noble ha avuto un’idea interessante che utilizza lo schema a carosello, solo che si basa su una transizione del pannello diviso in diverse dimensioni dell’albero. Questo \u00e8 sicuramente uno degli stili di transizione delle pagine CSS pi\u00f9 utilizzati.<\/p>\n

    Effetto di rivelazione di pagine multistrato fittizie<\/strong><\/h3>\n

    \"Grandi<\/a><\/p>\n

    Mehmet Burak Erman \u00e8 il creatore di questo bellissimo effetto di rivelazione della pagina. \u00c8 stato costruito in uno stile multistrato, con l’aiuto di HTML, CSS e JavaScript. Attualmente, la transizione di pagina \u00e8 compatibile con Chrome, Firefox, Opera e Safari.<\/p>\n

    Transizione pagina Tiles (CSS)<\/strong><\/h3>\n

    \"Grandi<\/a><\/p>\n

    Milan Ricoul ha creato questa transizione della pagina delle tessere utilizzando CSS e ha ottenuto davvero un grande riconoscimento. Milan lo ha creato utilizzando la classica combinazione HTML, CSS e JavaScript ed \u00e8 compatibile, come quello di Mehmet Erman, con la maggior parte dei browser.<\/p>\n

    Pagina di transizione dell’articolo<\/strong><\/h3>\n

    \"Grandi<\/a><\/p>\n

    Questa \u00e8 una delle transizioni di pagina CSS create da Muna. Inizialmente \u00e8 stato ispirato da ReAlign 2 sul sito Web Dribble utilizzando CSS, ma \u00e8 anche basato su HTML e JavaScript. Rispetto ad altre transizioni di pagina sul Web, questo \u00e8 compatibile anche con Microsoft Edge.<\/p>\n

    Semplice transizione di pagina<\/strong><\/h3>\n

    \"Grandi<\/a><\/p>\n

    Non c’\u00e8 molto da dire su questa transizione di pagina: \u00e8 esattamente come viene chiamata: semplice. \u00c8 stato creato da ktsn ed \u00e8 basato su HTML-Pug, CSS\/SCSS e JavaScript con vue.js. Dovresti provarlo se stai cercando qualcosa di semplice ma impressionante.<\/p>\n

    Rivela l’animazione del contenuto (e il menu)<\/strong><\/h3>\n

    \"Grandi<\/a><\/p>\n

    Tobias Glaus \u00e8 il creatore di questo semplice contenuto e animazione del menu. Si basa su un semplice effetto di rivelazione, ma \u00e8 efficace come dovrebbe essere. Se vuoi solo una transizione di pagina CSS di base con quello stile di rivelazione di classe, questa \u00e8 una delle tue scelte migliori.<\/p>\n

    Espansione dell’effetto di transizione della pagina delle carte<\/strong><\/h3>\n

    \"Grandi<\/a><\/p>\n

    Questo \u00e8 un pezzo di codice su cui Rachel Smith sta ancora lavorando, ma ha un grande potenziale. Non \u00e8 pronto per essere utilizzato come transizione completata, ma il suo creatore l’ha offerto per il test. Dopo il completamento, la transizione sar\u00e0 utilizzabile su pi\u00f9 browser e accessibile da tutte le piattaforme.<\/p>\n

    Transizioni di pagina<\/strong><\/h3>\n

    \"Grandi<\/a><\/p>\n

    Questo \u00e8 il progetto di MergimUjkani e la transizione consiste in una semplice schermata con pulsanti\/menu per navigare. Se ricordi come si spegnevano i vecchi televisori riducendo le dimensioni dello schermo in una linea sottile, sai gi\u00e0 come appare questa transizione.<\/p>\n

    Coloro che hanno bisogno di transizioni di pagina CSS vintage dovrebbero provare questo.<\/p>\n

    Passaggio da miniatura a schermo intero<\/strong><\/h3>\n

    \"Grandi<\/a><\/p>\n

    Questa transizione senza interruzioni da una miniatura a una pagina a schermo intero \u00e8 un must assoluto. Steve Gardner ha utilizzato animazioni CSS e Angular per metterlo insieme. Usandolo, puoi espandere qualsiasi miniatura in uno sfondo a grandezza naturale.<\/p>\n

    Caricatore di transizione di pagina<\/strong><\/h3>\n

    \"Grandi<\/a><\/p>\n

    ArsenZbidniakov ha ideato questo concetto di pre-caricatore che pu\u00f2 essere utilizzato ogni volta che si apre una nuova pagina su un sito web. Consiste in un caricatore circolare SVG che ha un effetto morphing aggiunto.<\/p>\n

    Questa transizione di pagina CSS funzionerebbe bene su siti Web visionari con molti contenuti multimediali.<\/p>\n

    Menu CSS di navigazione di una pagina<\/strong><\/h3>\n

    \"Grandi<\/a><\/p>\n

    Alberto Hartzet ha creato questo menu CSS<\/a> di navigazione di una pagina che include alcune sezioni e transizioni CSS pure. \u00c8 adatto per siti Web, portfolio e altri siti pi\u00f9 semplici che funzionano bene con un design di una pagina.<\/p>\n

    Reagisci alle transizioni di pagina animate<\/strong><\/h3>\n

    \"Grandi<\/a><\/p>\n

    Sarah Drasner ha creato una piccola demo per queste transizioni di pagina CSS. Lo ha creato usando GreenSock e SVG. Le transizioni di pagina in React funzionano senza intoppi e hanno un bell’aspetto allo stesso tempo, quindi vai avanti e provalo.<\/p>\n

    Transizione del design dei materiali<\/h3>\n

    \"Grandi<\/a><\/p>\n

    Sia lo stile che l’animazione di questa transizione sono realizzati interamente in CSS da David Marland. Funziona senza intoppi e contiene alcuni JavaScript per aggiungere classi. La transizione pu\u00f2 essere sospesa fino alla sostituzione del contenuto. Questa \u00e8 un’animazione in due fasi.<\/p>\n

    Pure CSS Navigazione verticale di una pagina<\/h3>\n

    \"Grandi<\/a><\/p>\n

    L’ultimo nel nostro elenco di transizioni di pagina CSS, questa pura transizione di navigazione verticale CSS di Alberto Hartzet ha un layout classico per i siti Web di una pagina. Ancora una volta, la transizione \u00e8 molto semplice ma aggiunge un bel tocco al sito web.<\/p>\n

    Considerazioni finali su queste transizioni di pagina CSS<\/h3>\n

    C’\u00e8 molta concorrenza per stare al passo con le tendenze in questo settore, quindi non c’\u00e8 da stupirsi perch\u00e9 decidere qualcosa di semplice come una transizione di pagina sia cos\u00ec difficile.<\/p>\n

    Le transizioni di pagina CSS ti offrono un modo semplice in cui puoi animare il tuo sito Web senza farlo caricare lentamente. Inoltre, promuove un aspetto pi\u00f9 fresco e aggiunge quel tocco di professionalit\u00e0 a qualsiasi sito web.<\/p>\n

    Le transizioni delle pagine CSS hanno fatto molta strada negli ultimi due anni e gli utenti dovrebbero trarne vantaggio per migliorare la loro UX e mantenere gli utenti felici facendo clic o scorrendo.<\/p>\n

    Se ti \u00e8 piaciuto leggere questo articolo sulle transizioni di pagina CSS, dovresti dare un’occhiata a questo sugli effetti di bagliore del testo CSS .<\/a><\/p>\n

    Abbiamo anche scritto di alcuni argomenti correlati come il menu mobile CSS<\/a>, la casella di ricerca HTML<\/a>, la galleria di immagini<\/a> CSS, l’editor<\/a> CSS e gli effetti al passaggio del mouse delle immagini CSS<\/a>.<\/p>\n

    Fonte di registrazione: wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

    Le transizioni delle pagine CSS hanno fatto molta strada negli ultimi due anni e gli utenti dovrebbero trarne vantaggio per migliorare la loro UX e mantenere gli utenti felici<\/p>\n","protected":false},"author":1,"featured_media":181788,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[918,896,907,751,720,844,865],"tags":[1168],"class_list":["post-228153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-codice","category-css-6","category-open-source-projektmanagement-3","category-sviluppatore","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/228153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=228153"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/228153\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/181788"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=228153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=228153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=228153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}