Deze slimme truc brengt bezoekers terug wanneer ze weg Tab

Hoe vaak open je een artikel, schrap je een paar zinnen en klik je vervolgens weg om door een ander tabblad te bladeren? Ik ben hier dagelijks schuldig aan. Het is niet zo eenvoudig om de aandacht van een bezoeker te trekken en daarom kan het Do not Go-script zo waardevol zijn.

Door dit script aan uw pagina toe te voegen, kunt u het favicon en de paginatitel van uw site automatisch bijwerken wanneer de pagina momenteel niet wordt bekeken.

Je kunt hier een live demo zien en die is vrij eenvoudig. Open de pagina in uw browser en ga naar een ander tabblad. Binnen enkele seconden verandert het favicon van de pagina, samen met de titel .

Dit gebeurt allemaal dynamisch, met behulp van JavaScript, dus alles verandert weer als de pagina weer actief is. Zoals je je kunt voorstellen is dit script heel eenvoudig in te stellen .

Het vereist drie instellingen :

1. Titel - de nieuwe paginatitel
2. Favicon - de nieuwe favicon-URL
3. Time-out - totale vertraging (in seconden) nadat de gebruiker is weggegaan voordat hij de overstap heeft gemaakt

Let op de enige vereiste waarde is de titel. U kunt het favicon op dezelfde manier verlaten en u kunt ervoor kiezen om de time-out helemaal over te slaan, zodat de titelbalk onmiddellijk verandert.

Hier is een codevoorbeeld van hoe de installatie eruit ziet.

 dontGo ({title: 'Alternatieve titeltekst hier!', faviconSrc: 'path / to / Alternative / favicon.ico', time-out: 5000 // 5 seconden}); 

Het instellen van het Do not Go-script kan niet eenvoudiger. Het is beschikbaar via npm, Bower en Yarn, en het wordt ook gehost op de GitHub CDN, rechtstreeks uit de hoofdrepo getrokken.

Dit leuke script kan een geweldige manier zijn om lezers terug te lokken naar uw site en uiteindelijk de bouncepercentages te verlagen . Ga voor meer informatie naar de hoofdrepos van GitHub en blader door de documentatie.

Hoe speel je geanimeerde GIF's onClick

De geanimeerde GIF is een populaire manier om een ​​ontwerpconcept te visualiseren (hier is een voorbeeld van hoe we het deden voor de postteksteffecten gemaakt met CSS) of om een ​​korte videoclip te laten zien. Maar als je er te veel hebt op dezelfde pagina, zal dit de focus van je gebruiker afleiden. Voor p

(Technische en ontwerptips)

Meng je eigen CSS-gradiënten met deze gratis web-app

Elke webontwerper moet bekend zijn met CSS3-gradiënten . Ze bestaan ​​al jaren en ze worden breed ondersteund door alle grote browsers.En nu kunt u met gratis web-apps zoals Blend CSS3-gradiënten maken met de visuele editors van de browser . U kunt kiezen tussen lineaire en radiale verlopen terwijl u knutselt met kleuren om te mengen.De ee

(Technische en ontwerptips)