Fotogalerijen zijn een favoriete bestemming op de meeste websites. En in veel gevallen is het misschien het beste om die afbeeldingsgalerijen blij en statisch te houden, door de afbeeldingen hun magie te laten werken.
Maar voeg er een schuifpuzzeleffect aan toe een afbeeldingengalerij (zoals we in deze tutorial zullen doen), kan een verfrissende toets geven aan een tijdloze klassieker.
In deze zelfstudie laten we u zien hoe u een eenvoudige lay-out kunt bouwen die een afbeeldingengalerij onthult met een schuifpuzzel-scrolleffect op Divi.
De sleutel is om te begrijpen hoe de grootte van de afbeeldingen zich verhoudt tot de verticale en horizontale offsetwaarden van elk scrolleffect om de afbeelding precies één punt te verplaatsen. Maar als het klaar is, is het resulterende bewegingseffect helder en nauwkeurig, omdat het geleidelijk een galerij met afbeeldingen op een unieke manier verzamelt en onthult.
Mogelijk resultaat
Hier is een overzicht van de lay-out van de afbeeldingengalerij met het schuifpuzzel-scroleffect dat we in deze zelfstudie gaan creëren.
De koptekstsectie maken
Laten we om te beginnen een snelle koptekstsectie maken die de gebruiker vertelt om door de pagina te scrollen om de galerij te bekijken en met de geweldige scroll-effecten.
Voeg een rij toe
Voeg een rij van één kolom toe aan het standaardgedeelte.
Voeg een tekstmodule toe
Voeg binnen de kolom / rij een nieuwe tekstmodule toe.
Werk in de tekstinstellingen de inhoud van de body bij met het volgende:
<h1>Image Gallery</h1>
Instellingen tekstmodule
Werk op het tabblad Ontwerp het tekstontwerp als volgt bij:
- Titellettertype: Roboto
- Gewicht van titellettertype: vet
- Titellettertype titel: TT
- Uitlijning koptekst: gecentreerd
- Koptekstgrootte: 50px (desktop), 40px (tablet en telefoon)
- Titelletterafstand: 4px
Voeg een Blurb-modulepictogram toe
Zodra de tekst op zijn plaats zit, voegt u een nieuwe presentatietekstmodule toe onder de tekstmodule.
Verwijder vervolgens alle titel en tekst uit de standaardinhoud en selecteer om het pictogram met de pijl omlaag te gebruiken.
Instellingen voor presentatietekst
Werk vervolgens de presentatietekstinstellingen bij met een nieuwe kleur en een herhalende dia-animatie.
- Pictogramkleur: # ffb500
- Animatiestijl: dia
- Animatierichting: naar beneden
- Animatie-intensiteit: 20%
- Animatie herhalen: loop
Sectie opvulling
Om de sectie ruimte te geven om te scrollen, werkt u de opvulling als volgt bij:
- Vulling: 20vh hierboven, 50vh hieronder
Hier gebruiken we de lengte-eenheid vh die relatief is aan de hoogte van het browservenster, zodat de afstand consistent in alle browsergroottes past.
Creëren van een afbeeldingengalerij met scroll-effecten
Nu ons koptekstgedeelte compleet is, zijn we klaar om de eigenlijke afbeeldingengalerij te bouwen met de schuifpuzzel-scrolleffecten. De hele galerij zal bestaan uit drie rijen van 4 afbeeldingen / kolommen in elke rij om een totaal van 12 afbeeldingen te maken. U kunt echter gemakkelijk meer lijnen en afbeeldingen aan de lay-out toevoegen als deze eenmaal is voltooid.
De sectie en de lijn maken
Voeg een nieuw gedeelte toe
Laten we beginnen met het toevoegen van een nieuwe reguliere sectie onder de titelsectie.
Voeg een rij toe
Voeg vervolgens een rij met vier kolommen toe aan de sectie.
Lijn instellingen
Werk onder de lijninstellingen het volgende bij:
- Dakgootbreedte: 1
- Breedte: 100%
- Maximale breedte: 1200 px (desktop), 600 px (tablet), 300 px (telefoon)
Hoe lijnbreedte de afbeeldingsgrootte bepaalt
De breedte van de rij is erg belangrijk voor dit ontwerp, omdat dit de breedte van elk van de vier kolommen bepaalt. Zodra we de rugmarge op 1 hebben ingesteld, is er geen marge meer tussen de afbeeldingen.
En wanneer we de maximale breedte instellen op 1200px, maakt de indeling met vier kolommen elk van de kolommen / afbeeldingen precies 300px breed (1200px / 4 = 300px).
Omdat elk van de afbeeldingen vierkant is, weten we ook dat de hoogte van elke afbeelding ook 300 pixels zal zijn. We hoeven het niet zo te houden als we dat niet willen.
We kunnen er bijvoorbeeld ook voor kiezen om een indeling met drie kolommen te hebben met afbeeldingen van 400 x 400 pixels. Het kennen van de breedte (300px) en hoogte (ook 300px) van de afbeelding zal de sleutel zijn om later het scrolleffect te creëren.
Afbeeldingen toevoegen
Afbeelding toevoegen 1
Afbeelding 1 Scroll-effecten
Verband tussen afbeeldingsgrootte en verschuiving van scrolleffecten
Wanneer u het verticale en horizontale scrolleffect gebruikt, is het belangrijk om te begrijpen wat de ingevoerde numerieke waarde vertegenwoordigt. In dit voorbeeld hebben we een startoffset verticale verplaatsing van -3. Deze -3 is eigenlijk -300px (of 300px naar beneden), wat de breedte van de afbeelding is.
De offset bereikt dan 0 (de thuispositie) wanneer de gebruiker scrollt. Dit is wat het scroleffect creëert dat de afbeelding naar precies één blok / frame verplaatst. Horizontale beweging begint bij 3 (300 pixels vanaf de rechterkant) en stopt in de standaardpositie. Deze twee effecten worden gecombineerd om een uniek tweedelig scrolleffect te creëren.
Afbeelding toevoegen 2
Nadat de scrolleffecten aan de afbeelding zijn toegevoegd 1. Voeg een nieuwe afbeelding toe aan kolom 2.
We laten deze statische afbeelding achter zonder enig scrolleffect.
Afbeelding toevoegen 3
Voeg vervolgens nog een afbeeldingsmodule toe aan kolom 3 en update de module met een nieuwe afbeelding.
Afbeelding 3 Scroll-effecten
Werk onder Afbeeldingsinstellingen de volgende scrolleffecten bij:
Onder het tabblad Horizontale beweging ...
- Activeer horizontale beweging: JA
- Start offset: -3 (op 0% van het venster)
- Gemiddelde verschuiving: 0 (bij 15% van viewport)
- Einde offset: 0 (bij 100% van viewport)
Afbeelding toevoegen 4
Kopieer afbeelding 1 en plak deze in kolom 4 om de laatste afbeelding te maken.
Upload een nieuwe afbeelding in de afbeeldingsinstellingen.
Afbeelding 4 Scroll-effecten
Werk vervolgens de volgende scrolleffecten bij:
Onder het tabblad Verticale beweging ...
- Activeer verticale beweging: JA
- Start offset: 3 (op 0% van het venster)
- Gemiddelde offset: 0 (bij 15% -28% van viewport)
- Einde offset: 0 (bij 40% van viewport)
Onder het tabblad Horizontale beweging ...
- Activeer horizontale beweging: JA
- Start offset: 3 (op 0% van het venster)
- Gemiddelde verschuiving: 3 (bij 28% van viewport)
- Einde offset: 0 (bij 40% van viewport)
Dubbele regel
Nu de afbeeldingseffecten zijn uitgevoerd voor de eerste rij, hoeven we alleen nog maar de rij te dupliceren om meer afbeeldingen en de bijbehorende schuifeffecten te maken. Laten we voor dit voorbeeld de rij twee keer dupliceren om in totaal drie rijen te maken.
Vervang en rangschik afbeeldingen indien nodig
Vervolgens kunnen we de afbeeldingen verplaatsen met de functie slepen en neerzetten waar we maar willen. Hier kunt u creatief worden en zien hoe de bewegende beelden zullen scrollen. En als de afbeeldingen eenmaal op hun plaats zijn, kunt u de inhoud van de afbeeldingenmodule vervangen door nieuwe afbeeldingen die voldoen aan de behoeften van de Site web.
Laatste aanpassingen
Sectiezichtbaarheid
Omdat onze afbeeldingen zich waarschijnlijk buiten het gedeelte / venster zullen uitstrekken, laten we de overloop verbergen om het een beetje op te ruimen. Open sectie-instellingen en werk het volgende bij:
- Horizontale overloop: verborgen
- Verticale overloop: verborgen
Sectie opvulling
We willen dat het verticale scroll-effect van de bovenste afbeelding (die zich uitstrekt boven de sectie) zichtbaar blijft ondanks de verborgen overloop. Dus laten we opvulling aan de boven- en onderkant toevoegen gelijk aan de hoogte van de afbeelding (300 pixels).
Resultaat tot nu toe
Op dit moment kunnen we hier stoppen als u het galerijontwerp wilt behouden zonder enige ruimte tussen de afbeeldingen. Hier is hoe het resultaat er tot nu toe uitziet. Merk op hoe de afbeeldingen verticaal en horizontaal precies één blok / frame bewegen.
Ruimte toevoegen tussen afbeeldingen
Omdat we de rugmarge op 1 zetten, hebben we geen marge meer tussen onze kolommen of afbeeldingen. Om een vergelijkbare afstand te creëren, kunnen we opvulling aan elk frame toevoegen.
Hierdoor kunnen we de tussenruimte creëren die we nodig hebben zonder de functionaliteit van de scrolleffecten in gevaar te brengen. Dit is mogelijk omdat het toevoegen van opvulling aan de afbeelding de breedte of hoogte van de afbeeldingscontainer niet vergroot. U kunt ook een soortgelijk effect hebben door ook randen te gebruiken.
Afbeelding 1 Vulling
Open de instellingen in afbeelding 1 en werk het volgende bij:
- Opvulling: 10 pixels bovenaan, 10 pixels onderaan, 10 pixels links, 10 pixels rechts
Breid de vulling uit tot alle afbeeldingen
Klik voordat u opslaat met de rechtermuisknop op de opvuloptie en selecteer "Opvulling uitbreiden". Klik in het pop-upvenster Stijlen uitbreiden op de knop Uitbreiden om deze vulling uit te breiden naar alle afbeeldingen op de pagina.
Eindresultaat
Hier is het resultaat van al het werk dat we tot nu toe hebben gedaan.
Final gedachten
Het schuifpuzzel-scroleffect dat in dit artikel wordt beschreven, geeft ons meer dan een uniek ontwerp voor een afbeeldingengalerij. Het wijst er ook op dat horizontale en verticale bewegingsoffsets kunnen worden gebruikt voor nauwkeurigere scrolleffecten.
Voel je vrij om verschillende variaties van deze lay-out te verkennen door de offsets te wijzigen en de locaties van de afbeeldingen door elkaar te halen.
U kunt ook het aantal kolommen wijzigen, zolang u begrijpt hoe de kolom- / afbeeldingsgrootte zal veranderen en vervolgens hoe u de scrolleffectoffsets kunt bijwerken met de bijbehorende waarde.
Enkele aanbevolen bronnen
Deze vind je vast wel ressources interessant omdat je er ook fotogalerijen mee kunt maken op je WordPress blog.
- 10 plug-ins om fotogalerijen op WordPress te maken
- Een fotogalerij maken met de Envira-plug-in
- 5 WordPress plug-ins om fotogalerijen te maken
- Hoe de afbeeldingengalerij-module op Divi te gebruiken
