Una delle tecniche più "calde" oggi sul web è lo scrolling della parallasse. Siamo stati tutti su quei siti in cui ruotate la rotellina del mouse e il contenuto della pagina si sposta su e giù o attraverso la pagina mentre ruotate la rotellina del mouse.
Per chi è nuovo al web design e alla progettazione grafica, questa tecnica può essere estremamente difficile da raggiungere a causa della quantità di CSS richiesta.
Se questo ti descrive, ci sono un certo numero di applicazioni che possono semplicemente interessare gli artisti grafici. Fondamentalmente usano un approccio al layout di pagina familiare alle pagine web, il che significa che non c'è molto, se non del caso, nella codifica. Un'applicazione che è davvero entrata in risalto è Adobe Muse.
Il lavoro svolto dai professionisti della grafica che utilizzano Muse è abbastanza sorprendente e puoi vedere un campione di ciò che puoi fare visitando la Musa Sito del giorno . Anche se i professionisti del web tendono a considerare Muse come una sorta di "giocattolo a molla", è anche utilizzato dai designer per creare prototipi di dispositivi mobili e web che alla fine verranno distribuiti agli sviluppatori nel loro team.
Una tecnica che è incredibilmente facile da realizzare con Muse è lo scrolling della parallasse e, se vuoi vedere la versione completa dell'esercizio. Quando si rotola la rotellina del mouse, il testo sembra muoversi verso l'alto o verso il basso nella pagina e le immagini cambiano.
Iniziamo.
01 di 07Crea una pagina Web
Quando lanci Muse, fai clic sul pulsante Nuovo sito collegamento. Questo aprirà il Nuove proprietà del sito. Questo progetto sarà progettato per un'applicazione desktop e puoi selezionarlo nel Layout iniziale menu a discesa. È inoltre possibile impostare i valori per il numero di colonne, larghezza di gronda, margini e riempimento. In questo caso, non eravamo molto interessati a questo e semplicemente cliccato ok.
Formattare la pagina
Quando imposti le proprietà del sito e fai clic su ok sei stato portato a ciò che viene chiamato Piano vista. C'è un Casa pagina in alto e a Pagina principale nella parte inferiore della finestra. Abbiamo solo bisogno di una pagina. Per arrivare a Design View, abbiamo fatto doppio clic sulla Home page che ha aperto l'interfaccia.
Sulla sinistra ci sono alcuni strumenti di base e sulla destra ci sono una varietà di pannelli usati per manipolare il contenuto della pagina. Lungo la parte superiore sono le proprietà, che possono essere applicate alla pagina, o qualsiasi cosa selezionata nella pagina. In questo caso, volevamo avere uno sfondo nero. Per fare ciò, clicchiamo su Riempimento del browser chip colore e ha scelto il nero dal Selettore colore.
03 di 07Aggiungi testo alla pagina
Il prossimo passo è aggiungere del testo alla pagina. Abbiamo selezionato il Strumento di testo e tirò fuori una casella di testo. Abbiamo inserito la parola "Benvenuto" e, nelle Proprietà, imposta il testo a Arial, 120 pixel bianco. Centro allineato.
Quindi passiamo allo strumento Selezione, clicchiamo sulla casella di testo e ne impostiamo la sua Posizione Y su 168 pixel dall'alto. Con la casella di testo ancora selezionata, abbiamo aperto il Allinea pannello e allineata la casella di testo al centro.
Infine, con la casella di testo selezionata, abbiamo tenuto premuto il tasto Opzione / Alt e Cambio chiavi e fatto quattro copie della casella di testo. Abbiamo modificato il testo e la posizione Y di ogni copia in:
- A, 871
- Grafica, 1621
- Software, 2371
Noterai che, quando imposti la posizione di ciascuna casella di testo, la pagina viene ridimensionata per adattarsi alla posizione del testo.
04 di 07Aggiungi segnaposti immagine
Il prossimo passo è mettere le immagini tra i blocchi di testo.
Il primo passo è selezionare il Strumento rettangolo e disegna la nostra scatola che si estende da un lato all'altro della pagina. Con il rettangolo selezionato, ne impostiamo il suo altezza a 250 pixel e la sua Posizione Y su 425 pixel. Il piano è di farli allungare o contrarre sempre alla larghezza della pagina per adattarsi alla finestra del browser di un utente. Per fare ciò, abbiamo fatto clic su Larghezza al 100% pulsante nelle Proprietà. Ciò che fa è oscurare il valore X e garantire che l'immagine sia sempre al 100% della larghezza della finestra in un browser.
05 di 07Aggiungi immagini ai segnaposto delle immagini
Con il rettangolo selezionato abbiamo fatto clic su Riempi link - non il Chip colori - e fatto clic sull'Imago inchiostro per aggiungere un'immagine al rettangolo. Nel adattamento area, abbiamo selezionato Scala per adattarsi e fatto clic su impugnatura centrale nel Posizione area per garantire che l'immagine venga ridimensionata dal centro dell'immagine.
Successivamente, abbiamo usato il Opzione / Alt-Maiusc tecnica per creare una copia dell'immagine tra i primi due blocchi di testo, aprire il pannello Riempi e scambiare l'immagine con un'altra. Lo abbiamo fatto anche per le restanti due immagini.
Con le immagini in atto, è il momento di aggiungere il movimento.
06 di 07Aggiungi Parallax Scrolling
Esistono diversi modi per aggiungere lo scrolling della parallasse in Adobe Muse. Vi mostreremo un modo semplice per farlo.
Con il pannello Riempimento aperto, fare clic su Scorri la scheda e, quando si apre, fare clic su Casella di controllo movimento.
Vedrai valori per Iniziale e Moto finale. Questi determinano la velocità con cui l'immagine si sposta rispetto alla rotella di scorrimento. Ad esempio, un valore di 1.5 sposterà l'immagine 1,5 volte più velocemente rispetto alla ruota. Abbiamo usato il valore 0 per bloccare le immagini in posizione.
Il Frecce orizzontali e verticali determinare la direzione del movimento.Se i valori sono 0, le immagini non si sposteranno a prescindere dalla freccia selezionata.
Il valore medio – Posizione chiave - mostra il punto in cui le immagini iniziano a muoversi. La linea sopra l'immagine inizia, per questa immagine, a 325 pixel dalla parte superiore della pagina. Quando lo scroll raggiunge quel valore, l'immagine inizia a muoversi. È possibile modificare questo valore modificandolo nella finestra di dialogo o facendo clic e trascinando il punto nella parte superiore della linea verso l'alto o verso il basso.
Ripeti questo per le altre immagini sulla pagina.
07 di 07Test del browser
A questo punto, eravamo finiti. La prima cosa che abbiamo fatto, per ovvi motivi, era selezionare File> Salva sito. Al test del browser, abbiamo semplicemente selezionato File> Anteprima della pagina nel browser. Questo ha aperto il browser predefinito del nostro computer e, quando la pagina è stata aperta, abbiamo iniziato a scorrere.
