Startpagina » Toolkit » Scroll en animeer uw pagina gemakkelijk met Force.js

    Scroll en animeer uw pagina gemakkelijk met Force.js

    Webanimatie is gemakkelijker dan ooit tevoren met pure CSS3-animaties de norm worden. Maar, JavaScript is nog steeds ongelooflijk waardevol en het is een van de weinige betrouwbare talen voor technische animaties.

    De Force.js-bibliotheek is een gratis opensource-script dat rond is gebouwd dynamische pagina-animaties.

    U kunt scroll-jumpanimaties maken binnen de pagina zelf, of je kunt elementen animeren rond de pagina. Beide zijn even eenvoudig in te stellen en de bibliotheek heeft heel veel functies.

    Force.js standaard vertrouwt op CSS-overgangen wanneer mogelijk. Deze werk in alle moderne browsers en de code is een stuk eenvoudiger, plus het biedt bredere ondersteuning voor gebruikers die JavaScript niet toestaan.

    De bibliotheek gebruikt een natuurlijke fallback-methode met JavaScript-code, dus het is ook veilig voor oudere browsers.

    En Force.js is een vanillebibliotheek, dus het vereist geen afhankelijkheden zoals jQuery. Maar als je van jQuery houdt, kun je die syntaxis over Force uitvoeren en het werkt nog steeds prima. Geweldig voor veelzijdigheid met verschillende websites.

    De twee grote animatietechnieken zijn sprongen en moves. U bepaalt waar het element naartoe beweegt, hoe snel het beweegt en over welke typen versnellingsmethoden.

    De bibliotheek heeft ook een heleboel aangepaste opties je kunt tweaken voor nog meer controle over de animaties. Jij kan bewerk de ankerlinkdoelen en instellen welke versoepelingen je nodig hebt-zelfs als u verschillende verlichtingen op dezelfde pagina wilt!

    Alle documentatie is beschikbaar op GitHub, samen met de bestanden.

    Of, als u npm / Bower verkiest, kunt u bestanden rechtstreeks ophalen op die manier. Dat moet je gewoon doen inclusief die force.js het dossier in je header en je bent klaar om te gaan.

    Ik raad ook aan de documentatie te doorzoeken omdat deze vol is voorbeelden voor de springen() en bewegen () methoden.

    Zij allebei neem argumenten voor tijd, verlichting en positie, dus het is cruciaal om te begrijpen hoe deze werken. Hoewel je, als je dit eenmaal onder de knie hebt, nooit meer terugkijkt omdat het de perfecte lichtgewicht animatiebibliotheek is voor elk project.