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. Verloop overgangen zijn alleen voor de show, maar ze pakken nogal een stoot!

Met Granim.js kunt u aangepaste overgangen in overgangen in kleur van een volledige kleur maken die er goed uitzien en naadloos aansluiten bij elke website.

Je vindt een aantal 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 bij het aanpakken van verloopovergangen. 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 het is gebouwd op vanilla-JavaScript, zodat het naast jQuery of een andere JS-bibliotheek kan worden gebruikt.

granim.js bestand granim.js op uw pagina om aan de slag te gaan. Je kunt een kopie van GitHub downloaden of een kopie van een live CDN.

Hier is een eenvoudig codevoorbeeld uit de GitHub-repo:

Het kan veel ingewikkelder worden, dus je moet echt in de voorbeelden duiken om meer te leren. Onder elk voorbeeld vindt u codefragmenten, zodat u overgangen met overgangen voor afbeeldingsachtergronden en zelfs afbeeldingsmaskers kunt maken .

De afbeeldingsmaskers kunnen worden gebruikt voor een logo, bijvoorbeeld een PNG-afbeelding, die achter een verloop wordt verborgen. Hiermee kunt u een JS-geanimeerd logo maken waarbij het verloop langzaam over de tekst heen en weer gaat .

Merk op dat dit voorbeeld veel JS / CSS-code in beslag neemt, 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 raadplegen voor meer informatie.

Het is een vrij kleine bibliotheek, dus er zijn niet veel dingen om mis te gaan of moeten worden bijgewerkt. Dit maakt Granim.js tot een betrouwbare oplossing voor elke kleine of grote site.

Ga naar de releases-pagina op GitHub om een ​​kopie te downloaden of pak een kopie van het .js bestand rechtstreeks bij cdnjs. En om de bron te bekijken op een live-voorbeeld, neem een ​​kijkje in deze CodePen-demo gemaakt door Jonathan Schneider.