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.

Prachtige foto's van Jupiter door NASA's Juno-ruimtevaartuig

Prachtige foto's van Jupiter door NASA's Juno-ruimtevaartuig

NASA's Juno-sonde was hard aan het werk in een baan om Jupiter, de grootste planeet in het zonnestelsel, nadat hij op 4 juli 2016 op de planeet was aangekomen. Sindsdien heeft de sonde foto's van de talloze cyclonen en stormen van de planeet kunnen vastleggen .Eerder dit jaar resulteerde Juno's flyby over Jupiter in een reeks foto 's met een blauw getint gebied op de planeet dat bedekt is met cyclonen

(Technische en ontwerptips)

Maak opvallende en interactieve animaties gemakkelijk met Animatron

Maak opvallende en interactieve animaties gemakkelijk met Animatron

Mensen houden meer van bewegende objecten dan van statische eenvoudige objecten. Dat is waarom video's en animaties zo'n hit zijn . Als je de twee vergelijkt, is animatie effectiever met een eenvoudig bewegend object: het is licht in zowel de grootte als de bandbreedte .In webdesign is het maken van een heel eenvoudige animatie heel eenvoudig

(Technische en ontwerptips)