nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Rellax.js - Gratis Parallax-functies met behulp van Vanilla JavaScript

Parallax scrollen ziet er ongelooflijk uit als het goed is gedaan. Het is geen functie die u op elke website wilt hebben, maar voor creatieve sites en bestemmingspagina's trekken parallaxelementen snel de aandacht .

Er zijn tal van gratis JavaScript-bibliotheken voor geanimeerde scrolling-effecten, maar velen zijn opgeblazen of gewoon te complex voor sommige mensen.

Dat is waarom ik Rellax.js aanbevelen voor uw parallaxbehoeften. Het is een gratis open source plug-in die is gebouwd op vanilla JavaScript, dus het heeft geen afhankelijkheden .

Standaard vereist dit slechts een eenvoudige functieaanroep om de parallaxklasse toe te wijzen aan pagina-elementen. Vervolgens blijven deze elementen tijdens het scrollen vast en bewegen ze mee met het gezichtspunt van de gebruiker.

U kunt deze elementen aanpassen om dichterbij, verder weg of achter pagina-elementen te verschijnen. Dit creëert de illusie van diepte op de pagina en het werkt allemaal via één eenvoudige JavaScript-bibliotheek.

Alle broncode van Rellax is gratis beschikbaar op GitHub als je een kopie wilt downloaden.

De hele installatie gebruikt een enkele JS-functie die is gericht op de .rellax- klasse, zoals:

 var rellax = new Rellax ('. rellax'); 

Merk op dat je vrijwel elke klasse kunt gebruiken die je wilt, maar de voorbeeld-demo gebruikt .rellax omwille van de eenvoud.

Vanaf hier wikkelt u uw parallax-elementen in een div in met de .rellax klasse en stelt u het snelheidskenmerk in . Dit werkt via het custom data-rellax-speed waarbij waarden van -10 tot +10 worden geaccepteerd.

Hier is een voorbeeldfragment van de HTML op de demopagina:

Ik ben extra traag en soepel

U kunt ook elementen op de pagina centreren en de elementposities via CSS aanpassen .

Rellax vertelt u niet hoe u de pagina moet structureren of hoe u CSS-elementen op uw pagina moet definiëren. Het enige dat het doet is een natuurlijk parallax-scrolleffect creëren met pure JavaScript. Hoe u dit gebruikt, is geheel aan u.

Als u een live demo wilt bekijken, neemt u een kijkje op de hoofdsite of bladert u door de GitHub-repo. Dit omvat enige documentatie, samen met koppelingen naar live websites met behulp van Rellax.js.

En het beste van alles is dat het team voortdurend bereid is om pull-aanvragen in te dienen, dus als je problemen opmerkt of suggesties hebt voor functies, stuur dan een snel bericht naar het team.

110+ Google Nu spraakopdrachten die u kunt gebruiken

110+ Google Nu spraakopdrachten die u kunt gebruiken

Google Nu is het antwoord van Google op Siri. Het is een slimme, virtuele, spraakgestuurde persoonlijke assistent, ontwikkeld door de zoekgigant en fungeert als een handige toevoeging aan de pure Android-ervaring . Het integreert goed met de services van Google om u te voorzien van updates en andere informatie volgens uw voorkeuren

(Technische en ontwerptips)

20 geweldige geanimeerde laders en spinners

20 geweldige geanimeerde laders en spinners

De internetverbinding wordt steeds sneller, maar van tijd tot tijd zijn er nog enkele momenten waarop we moeten wachten op het laden van een webpagina. Ontwerpers doen hun best om uw wachttijd leuk en pijnloos te maken met behulp van verschillende creatieve geanimeerde laders .Laders laten zien dat het proces bezig is

(Technische en ontwerptips)