Halloween si avvicina..devi realizzare un sito web in stile Halloween?

Mi è capitato molto spesso in questi anni di disegnare landing page in stile halloween e purtroppo facevo fatica a trovare qualcosa che facesse al caso mio.

Così ho deciso di realizzarci un tutorial..spero di esservi d’aiuto.

In questo tutorial realizzeremo insieme un animazione all’ingresso in stile parallax con Figma.

Avevo già pubblicato due tutorial per la creazione di pagine con effetto parallax con Adobe Xd (parallax auto animate con adobe xd e parallax auto animate in 5 min)

Alla fine del tutorial sarete in grado di creare questa landing page in stile Halloween e creare l’animazione di apertura.

Per prima scarica tutti gli assets utili per il tutorial

Scarica gli assets https://www.dropbox.com/scl/fo/v0kf9r…

Darkmode font download https://www.fontspace.com/darkmode-fo…

Pipistrello gif https://lottiefiles.com/35978-bat-hal…

Background vector file credit https://www.freepik.com/free-vector/h…

File audio

Credits 1 https://pixabay.com/music/scary-child…

Credits 2 https://pixabay.com/music/scary-child…

Capitoli:

00:00 Intro

00:47 Frame download degli assets

01:45 Prepariamo il frame e posizioniamo i layers

03:53 Inseriamo il title ed inseriamola nel frame

04:49 Creiamo la barra di navigazione

07:05 Inseriamo i pipistrelli

07:59 Duplichiamo i frame prima di prototipare

12:40 Animiamo i frame con la funzione prototype

13:16 Conclusioni

Iscriviti al canale se vuoi imparare ad utilizzare Figma e Adobe Xd come un PRO

The post Figma parallax animation – Halloween style first appeared on Webdesignerd.

Questo effetto è molto semplice e veloce da realizzare.

Ideale per animazioni di grande effetto con poche risorse.

Vuoi imparare a disegnare un sito web da zero?

Guarda il video corso gratuito che ho realizzato per te! -> Video corso di Web Design con Adobe Xd

The post Parallax Auto-Animate con Xd in meno di 5 min first appeared on Webdesignerd.