15 fantastici effetti con JS e CSS3
Salve designer, siete arrivati al punto in cui il vostro cervello si rifiuta più di funzionare?
Se hai e stai cercando idee per far diventare i siti web la prossima grande novità 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.
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 hai anche avuto modo di giocare a Tetris?
O forse hai sfogliato il sito Web di Rimmel sbalordito dalla brillantezza con cui gli articoli si stagliano su uno sfondo colorato di modelli?
L’effetto 3D che sembra essere di gran moda nella progettazione ora è tecnicamente chiamato effetto parallasse. I designer adorano giocare con questi, ma devi essere sottile e strategico in quanto può ritorcersi contro e finire per creare un pasticcio confuso.
L’effetto Parallax o lo scorrimento Parallax è il risultato del caricamento dello sfondo a una velocità inferiore rispetto al primo piano, creando un aspetto più 3D. Sembra un sacco di lavoro? Non per qualcuno che lavora in modo intelligente, ottieni un tema Parallax completamente rifinito già su Cyberchimps.
Effetto Ken Burns
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.
L’effetto non solo guida i bulbi oculari, letteralmente, dove vuoi che sia messa a fuoco, ma aggiunge anche un tocco di intensità a un’immagine. Ricordi di aver guardato un film in cui una vecchia fotografia è stata proiettata sullo schermo e il narratore parla di qualcosa nell’immagine, mentre l’inquadratura si sposta lentamente e si ingrandisce su quel soggetto?
L’effetto Ken Burns è diventato piuttosto popolare e giustamente in quanto dà un lifting istantaneo a qualsiasi sito web noioso.
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ò aiutare.
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à.
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.
Non vuoi scervellarti creando questo effetto CSS3 da zero? Prendine uno in omaggio da DealFuel.
Mostra/Nascondi pannello Login
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é i pannelli scorrevoli possono essere utili in tanti modi.
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 è un must per ogni sito Web WordPress, offre una panoramica della dashboard con più opzioni di menu una volta effettuato l’accesso. Scopri di più su questo pannello qui.
Modulo di accesso al dispositivo di scorrimento
Un’altra opzione del pannello di accesso che scorre per rivelare più contenuti è un’ottima mossa quando si desidera che gli abbonati inseriscano un po’ più di informazioni oltre all’indirizzo e-mail e al nome, ma allo stesso tempo non si vuole sopraffarli.
Riducendo anche lo spazio, dai un’occhiata a questo, poiché sarebbe utile quando crei siti Web a tema minimalista.
Nastri 3D ed effetti 3D
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à nel tuo sito web, rendendo così un effetto 3D.
I nastri 3D di per sé 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.
Sapere come creare l’effetto usando CSS3 su pvmgarage.
Effetto coprente
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.
Sembra interessante? Vorresti implementarlo in un progetto? Se sì, allora sfoglia sicuramente questo pezzo.
Transizioni CSS3
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ì e puoi effettivamente trasformare la tua pagina. Un altro modo per farlo è animare il contenuto della tua pagina attraverso le transizioni CSS3.
Dalla spaziatura delle lettere all’ombra del testo, gioca tutto ciò che ti piace per vedere cosa si adatta meglio. Inoltre, ecco un fantastico omaggio che comprende una gamma completa di effetti di transizione.
Animazione CSS3 a tema neve
Stai ancora vacillando per i postumi delle festività natalizie? Le animazioni CSS3 a tema neve non solo hanno un tocco festivo, ma funzionano anche molto bene per alcuni siti Web come quello di un marchio di gelati.
È veloce e facile da usare e può cambiare l’aspetto del tuo sito Web o della pagina del tuo blog per completare un tema o una stagione.
Animazione
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é l’attenzione è rivolta all’invito all’azione.
O semplicemente, aggiunge al valore nominale di una pagina se non altro. Ecco alcuni fantastici effetti di animazione speciali che puoi provare.
Effetto tipografico
Probabilmente hai visto quei post di citazione di Instagram con l’aspetto del testo de-bossed? Questo è l’aspetto dell’effetto Letterpress e sta diventando molto popolare anche nel web design.
Questo ha un aspetto dattiloscritto inverso, ma mostra un aspetto elegante ed elegante. Decisamente consigliato se la tua è una pubblicazione online o un blog. Inoltre, se vuoi dare un tocco di professionalità senza andare a fare tutto il C-suite, questo sarebbe d’aiuto. Ecco un tutorial su come utilizzare l’ effetto letterpress con CSS3.
Cerchio che gira
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à divertenti.
Ma anche nei normali siti Web, un cerchio rotante è molto importante. Comprime le informazioni, quindi non hai una pagina brulicante di testo. E ha anche una fantastica sensazione 3D. Ecco un tutorial su come creare un cerchio rotante.
Mega Menù
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.
L’opzione Mega Menu è 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?
Il Mega Menu può aiutare a eliminare il disordine, creare un’opzione della barra dei menu più nitida e più elegante e non confondere i lettori facendo clic sull’opzione sbagliata a causa di opzioni di menu più lunghe e confuse. Puoi anche fare un ottimo affare prendendo Mega Menu reattivo gratuitamente.
Galleria della fisarmonica
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ò catturare l’attenzione del lettore, ma qualcosa di interattivo come una galleria a fisarmonica catturerà l’attenzione del lettore.
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ù 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ù a lungo. Ecco un ottimo plug-in Adattabile per Accordion Gallery che puoi ottenere gratuitamente.
Scatola luminosa
Quanto è importante una galleria a griglia? Se sei un fotografo, un artista o semplicemente un blogger, potrebbe significare il tuo prossimo grande concerto.
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.
Come designer, questo è 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à creativa, una galleria a griglia vale il suo peso in oro.
Ma lo ottieni per niente in questo affare, quindi vai a prenderlo ora!
Quale di questi consiglieresti ad un amico?