MAGLR BLOG / 11 April 2018

Breng diepte in je interactieve pagina

Voorafgaand aan een aantal grote updates die er begin mei aan zitten te komen hebben we toch al het een en ander ge-update binnen de Maglr Pro editor. Naast een serie van kleinere bug fixes hier een korte uitleg van leuke nieuwe functionaliteiten die handig zijn om te weten. 

Het instellen van het ‘Mouse move’ effect

De ‘Mouse move’ animatie is via het effecten paneel toe te passen op een groep of element. Wat het effect simpelweg doet is de beweging van je muis overbrengen op het element. 



Via de instellingen van het effect kan je ervoor kiezen hoe het element moet reageren op de muisbeweging. Op zowel de horizontale of veritcale as kan je met de slider een positieve of negatieve waarde ingeven. Positief beweegt met de muis mee, negatief tegen de muis in. 

Creëer een idee van diepte

Om diepte te creëren dien je dit effect op meerdere overlappende elementen toe te passen. Je wilt het idee geven dat sommige elementen dichtbij zijn en andere ver weg. Dit kan je doen door de elementen verschillende snelheden in de ‘Mouse move’ instellingen mee te geven. 

Doe je dit bij bijvoorbeeld vier elementen, dan dan geef je de bovenste laag een setting van 0,3, de tweede laag 0,25, de derde 0,2, etc. De voorgrond beweegt dan sneller op basis van je muisbeweging dan de achtergrond. 

Je bepaalt natuurlijk zelf de richting of de elementen enkel horizontaal of ook verticaal kunnen bewegen. Het is even proberen, maar al snel zie je de mogelijkheden die dit effect kan bieden.

Op tablet en mobiel zonder muis
Devices zonder muis zijn in veel gevallen voorzien met een Gyro sensor. Moderne devices laten we hier dan ook op reageren. In plaats van van de muisbeweging zie je de elementen op basis van de beweging van je device verplaatsen. Dit effect werkt op dit moment nog enkel op desktop. 

De nieuwe mask animatie

Eigenlijk een hele eenvoudige, maar zeer subtiele animatie. De mask animatie lijkt op een normale move, het grote verschil is alleen dat het element niet helemaal vanuit de kantlijn van de pagina komt, maar uit het gemaskeerde kader van het element zelf.

De mask animatie kent net zoals de ‘move animatie’ meerdere startpunten en is te gebruiken voor in & uitgaande animaties. Een groep of element waar een mask animatie op is toegepast blijft ook na het animeren gemaskeerd. Dit effect zie je dan ook terug bij bijvoorbeeld een ‘Grow’ of ‘Mouse move’ effect. Alles wat buiten het kader van het element komt wordt gemaskeerd / afgesneden.

Uitbreiding in de video instellingen

We hebben een aanpassing gemaakt in zowel de Youtube als Vimeo player. Het is nu mogelijk om een video te starten op een bepaalde tijd, bijvoorbeeld op 00:09 sec in plaats van het begin van de video. 

Hierin kan je nu ook aangeven wat de gewenste kwaliteit is. Geschikt voor achtergrond video’s die misschien sneller moeten starten en daarvoor op lagere kwaliteit kunnen draaien. 


 

Nieuwe link optie: Scroll to element

Het is bij meerdere verticale scenes al mogelijk om naar een specifieke scene te linken. Op lange longpages (met uiteraard veel content en subhoofdstukken) kan je nu ook naar een specifiek element op deze longpage linken. 

Deze optie is goed te combineren met een sticky scene die transparant over een longpage heen ligt. In de sticky scene is zo een menu te bouwen, waar na het aanklikken van het menu item de pagina naar het desbetreffende onderdeel scrollt.

Maak zelf een social share button

Een veelgestelde vraag was de mogelijkheid om zelf social knoppen in een pagina te maken. We hebben nu dan ook een nieuwe link optie aan de dropdown toegevoegd ‘Social’.

Je kan naar eigen wens op een button, foto of shape een link instellen. Deze buttons dien je zelf vorm te geven. Hier kan je kiezen voor de bekende netwerken als Facebook / Twitter / Pinterest en Linkedin. Zodra een gebruiker de knop aanklikt wordt de deelfunctie voor die betreffende pagina geactiveerd. 

De tekst die hier wordt meegestuurd kan je zelf instellen. Dit doe je binnen de SEO instellingen van je publicatie of apart per pagina bij de specifieke SEO pagina instellingen. Let wel op, eenmaal een keer gedeeld kan het een aantal uur duren voordat het sociaal netwerk de nieuwe wijzigingen ziet.