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


Afbeeldingen zoomen als medium

Het blogplatform Medium maakt gebruik van een zoomeffect op maat op hun blogpagina's. Wanneer de gebruiker op een afbeelding klikt, zoomt deze automatisch uit naar een groter formaat.

Het is een geweldig effect en zeker uniek voor Medium, maar het was nooit iets dat gemakkelijk kon worden gekopieerd.

Nu, met het MediumLightbox- script, is het eenvoudiger dan ooit. Dit JS-script is licht van gewicht en eenvoudig toe te voegen aan elke website of blog.

Als je wilt zien hoe dit werkt, kun je de live demopagina bezoeken die wordt gehost door maker Davide Calignano.

Hij spendeerde een tijdje aan het vastleggen van het exacte overgangs- en aangepaste animatie-effect om een ​​spiegelbeeld te creëren van de beeldzoom van Medium . De hele bibliotheek is geschreven in pure JavaScript, dus het is niet afhankelijk van scripts van derden, zoals jQuery.

U moet een kleine JS kennen om het in te stellen, maar u hoeft zeker geen expert te zijn.

Elke afbeelding kan gegevens- * -kenmerken opnemen voor het instellen van de volledige hoogte en breedte, die allemaal dynamisch uit de lightbox-plug-in worden getrokken . De setup-code is heel eenvoudig en het kan de afbeeldingen zelf targeten, of containers zoals de

element .

Hier is het enkele codefragment dat u nodig hebt om de plug-in te laten werken:

 MediumLightbox ( 'figure.zoom-effect'); 

Binnen de functie geef je een selector door voor alle elementen (bijv

) met de klasse .zoom-effect . Deze klasse is specifiek gedefinieerd in de MediumLightbox-stylesheet, dus het is het beste om dit ook op uw pagina te gebruiken.

En zodra u klaar bent, bent u klaar!

In het gebied met pagina-inhoud kunt u alle afbeeldingen omzetten in een
tag met deze klasse. Ze krijgen automatisch dit geliefde middelgroot klik-naar-zoom-effect voor zowel desktop- als mobiele gebruikers .

Ga naar de hoofdrepos van GitHub om een ​​kopie van dit script te downloaden en aan de slag te gaan. Hier vindt u ook documentatie samen met codefragmenten die u kunt kopiëren om snel te kunnen instellen.

Maak draagbare apps (werkt zonder installatie) met behulp van Cameyo

Maak draagbare apps (werkt zonder installatie) met behulp van Cameyo

Draagbare apps zijn de applicaties die rechtstreeks op een Windows-systeem worden uitgevoerd zonder installatie . Dit maakt het mogelijk om deze apps op een flashstation te dragen en ze te gebruiken op elk Windows-systeem, op kantoor, in uw schoollab of in een openbaar cybercafé. En als het gaat om draagbare apps, vind ik Cameyo de beste tool daarvoor.

(Technische en ontwerptips)

ECMAScript 6 - 10 Fantastische nieuwe functies

ECMAScript 6 - 10 Fantastische nieuwe functies

Wist u dat JavaScript (samen met JScript en ActionScript) een implementatie is van een client-side scriptspecificatie voor algemene doeleinden, genaamd ECMAScript? Om deze vervelende definitie een beetje aantrekkelijker te maken, kunnen we zeggen dat ECMAScript (of officieel ECMA-262) de standaard is die bepaalt hoe we JavaScript gebruiken en wat we ermee kunnen bereiken

(Technische en ontwerptips)