Een van de "heetste" technieken op het web van vandaag is parallax scrollen. We zijn allemaal naar die sites geweest waar je het scrollwiel op je muis draait en de inhoud op de pagina beweegt op en neer of over de pagina terwijl je het muiswiel draait.
Voor degenen die nieuw zijn op het gebied van webontwerp en grafisch ontwerp, kan deze techniek buitengewoon moeilijk te bereiken zijn vanwege de vereiste hoeveelheid CSS.
Als dat je beschrijft, zijn er een aantal toepassingen die mogelijk een beroep doen op grafische artiesten. Ze gebruiken in principe een vertrouwde paginalay-outbenadering van webpagina's, wat betekent dat er weinig of geen codering is. Een applicatie die echt op de voorgrond staat, is Adobe Muse.
Het werk van grafische professionals met Muse is best verbazingwekkend en je kunt een voorproefje zien van wat je kunt doen door de Muse te bezoeken Site of The Day . Hoewel webprofessionals Muse eerder als een soort 'opwindspeeltje' beschouwen, wordt het ook door ontwerpers gebruikt om mobiele en webprototypes te maken die uiteindelijk aan de ontwikkelaars in hun team worden doorgegeven.
Een techniek die ongelooflijk gemakkelijk te bereiken is met Muse is parallax-scrollen en, als je de voltooide versie van de oefening wilt zien. Wanneer u het muiswiel van uw muis beweegt, lijkt de tekst op de pagina omhoog of omlaag te gaan en worden de afbeeldingen gewijzigd.
Laten we beginnen.
01 van 07Maak een webpagina
Wanneer u Muse start, klikt u op Nieuwe site link. Dit opent de Nieuwe site-eigenschappen. Dit project zal worden ontworpen voor een desktoptoepassing en u kunt het selecteren in de Oorspronkelijke lay-out pop-down menu. U kunt ook de waarden instellen voor het aantal kolommen, rugmarge, marges en opvulling. In dit geval waren we hier niet erg bezorgd over en klikten eenvoudigweg OK.
Formatteer de pagina
Wanneer u de site-eigenschappen instelt en erop klikt OK je bent meegenomen naar wat genoemd wordt Plan uitzicht. Er is een Huis pagina bovenaan en a Hoofdpagina onderaan het venster. We hadden maar één pagina nodig. Om naar de ontwerpweergave te gaan, hebben we dubbel geklikt op de startpagina die de interface heeft geopend.
Aan de linkerkant zijn een paar basishulpmiddelen en aan de rechterkant staan verschillende panelen die worden gebruikt om de inhoud op de pagina te manipuleren. Bovenaan staan de eigenschappen, die op de pagina kunnen worden toegepast, of alles wat op de pagina is geselecteerd. In dit geval wilden we een zwarte achtergrond hebben. Om dit te bereiken, klikken we op de Browser vullen kleuren-chip en kies zwart uit de kleurkiezer.
03 van 07Tekst aan de pagina toevoegen
De volgende stap is om wat tekst aan de pagina toe te voegen. We hebben de Text Tool en tekende een tekstvak. We hebben het woord "Welkom" ingevoerd en in de eigenschappen de tekst ingesteld op Arial, 120 pixels wit. Midden uitgelijnd.
We schakelden vervolgens over naar het gereedschap Selecteren, klikten op het tekstvak en stelden het in Y positie tot 168 pixels vanaf de bovenkant. Met het tekstvak nog steeds geselecteerd, hebben we het Lijn het paneel uit en lijnt het tekstvak uit naar het midden.
Uiteindelijk, met het tekstvak geselecteerd, hielden we de Option / Alt en Verschuiving toetsen en vier kopieën van het tekstvak gemaakt. We hebben de tekst en de Y-positie van elk exemplaar gewijzigd in:
- Aan, 871
- Afbeeldingen, 1621
- Software, 2371
Zoals u zult zien, wordt de pagina bij het instellen van de locatie van elk tekstvak aangepast aan de locatie van de tekst.
04 van 07Tijdelijke plaatsaanduidingen toevoegen
De volgende stap is om afbeeldingen tussen de tekstblokken te plaatsen.
De eerste stap is het selecteren van Rechthoekgereedschap en teken onze een doos die zich uitstrekt van de ene kant van de pagina naar de andere. Als de rechthoek is geselecteerd, stellen we de rechthoek in hoogte tot 250 pixels en zijn Y-positie tot 425 pixels. Het plan is om ze altijd uit te strekken of samen te trekken tot de paginabreedte om het browservenster van een gebruiker te ondersteunen. Om dit te bereiken hebben we geklikt op de 100% breedte knop in de eigenschappen. Wat dit doet is de X-waarde grijs maken en ervoor zorgen dat de afbeelding altijd 100% van de viewport-breedte in een browser is.
05 van 07Afbeeldingen toevoegen aan tijdelijke beeldaanduidingen
Met de geselecteerde rechthoek hebben we op de knop geklikt Fill-link - niet de Color Chip - en klikte op de Imagiër inkt om een afbeelding toe te voegen aan de rechthoek. In de fitting gebied, hebben we geselecteerd Schaal om passend te maken en klikte op de centrale handgreep in de Positie gebied om ervoor te zorgen dat het beeld wordt geschaald vanuit het midden van de afbeelding.
Vervolgens hebben we de Option / Alt-Shift-drag techniek om een kopie van de afbeelding te maken tussen de eerste twee tekstblokken, opende het vulpaneel en verwisselde de afbeelding voor een andere. We hebben dit ook voor de resterende twee afbeeldingen gedaan.
Als de afbeeldingen zijn geplaatst, is het tijd om de beweging toe te voegen.
06 van 07Voeg Parallax-scrollen toe
Er zijn een aantal manieren om parallax-scrollen toe te voegen in Adobe Muse. We zullen je een eenvoudige manier laten zien om het te doen.
Klik met het vulvenster open op Blader door het tabblad en, wanneer het opent, klik op Motion checkbox.
Je zult waarden zien voor Eerste en Final Motion. Deze bepalen hoe snel de afbeelding beweegt ten opzichte van het scrollwiel. Een waarde van 1,5 verplaatst bijvoorbeeld de afbeelding 1,5 keer sneller dan het wiel. We gebruikten een waarde van 0 om de afbeeldingen op hun plaats te vergrendelen.
De Horizontale en verticale pijlen bepaal de richting van de beweging.Als de waarden 0 zijn, wijken de afbeeldingen niet af, ongeacht op welke pijl u klikt.
De middelste waarde – Sleutelpositie - toont het punt waar de beelden beginnen te bewegen. De lijn boven de afbeelding begint, voor deze afbeelding, 325 pixels vanaf de bovenkant van de pagina. Wanneer de schuif die waarde bereikt, begint het beeld te bewegen. U kunt deze waarde wijzigen door deze in het dialoogvenster te wijzigen of door op het punt boven aan de regel omhoog of omlaag te klikken en te slepen.
Herhaal dit voor de andere afbeeldingen op de pagina.
07 van 07Browsertest
Op dit punt waren we klaar. Het eerste dat we deden, om voor de hand liggende redenen, was om te selecteren Bestand> Site opslaan. Voor browsertests hebben we eenvoudigweg geselecteerd Bestand> Voorbeeldpagina in browser. Hierdoor werd de standaardbrowser van onze computer geopend en bij het openen van de pagina begonnen we te scrollen.
