Maak mooie overgangen overgangen met Granim.js

Webdesign zit vol met schoonheid en aangenaam interface-ontwerp. Sommige functies zijn functioneel, andere zijn alleen voor de show. Overgangen van overgangen zijn uitsluitend voor de show maar ze pakken nogal een stoot!

Met Granim.js, je kunt bouwen aangepaste overgangen in overgangen in kleur dat ziet er glad uit en sluit mooi aan bij elke website.

Je kunt vinden een stel aangepaste voorbeelden op de hoofdvoorbeeldenpagina met veel verschillende stijlen, van eenvoudige overgangen tot meer complexe animaties met achtergrondafbeeldingen.

Granim is de enige JS-bibliotheek die ik ken overgangsovergangen aanpakken. Dit is een vraag waar ik me altijd al over heb afgevraagd en nooit echt een goed antwoord heb gevonden. Granim is de perfecte oplossing en dat is het ook gebouwd op vanilla JavaScript, zodat het naast jQuery of een andere JS-bibliotheek kan worden uitgevoerd.

Net laat de granim.js bestand op uw pagina starten. Je kunt een kopie downloaden van GitHub of een kopie van een live CDN.

hier is een eenvoudig codevoorbeeld van de repito van GitHub:

Het kan veel ingewikkelder worden dan dit, dus je zou het echt moeten doen graven in de voorbeelden meer leren. U zult vinden codefragmenten onder elk voorbeeld dus je kunt het maak verloopovergangen voor afbeeldingsachtergronden en zelfs afbeeldingsmaskers.

De afbeeldingsmaskers kunnen worden gebruikt voor een logo, bijvoorbeeld een PNG-afbeelding, die achter een verloop wordt verborgen. Hiermee kun je maken een JS-geanimeerd logo waar het verloop langzaam overgangen door de tekst heen.

Merk op dat dit voorbeeld neemt veel van JS / CSS-code dus het is geen eenvoudige implementatie.

Maar hoe meer u met Granim oefent, hoe eenvoudiger het is om het in te stellen en aan te passen. En omdat dit de enige echte online transitiebibliotheek is, is dit de absoluut beste oplossing voor elk project.

De bibliotheek is nog steeds semi-frequent bijgewerkt, zodat u het tabblad met problemen kunt bekijken voor meer informatie.

Haar een vrij kleine bibliotheek er zijn dus niet teveel dingen om verkeerd te gaan of moeten worden bijgewerkt. Dit maakt Granim.js tot een betrouwbare oplossing voor elke kleine of grote site.

Naar download een kopie bezoek de pagina met releases op GitHub of neem een ​​kopie van de .js bestand rechtstreeks van cdnjs. En naar bekijk de bron op een levend voorbeeld Neem een ​​kijkje in deze CodePen-demo gemaakt door Jonathan Schneider.