Kodsnuttar för interaktionsdesignern

Då jag tidigare drev och arbetade på en webbyrå har jag kodat en del i mina dagar. Ofta tycker jag att det kan gå snabbare att snickra ihop en klickbar prototyp i HTML än att bygga den i exempelvis Axure. Eftersom vissa designelement är återkommande har jag sett till att spara dessa som lättillgängliga kodsnuttar.

Dessa tänkte jag dela med mig av.

Ankarlänkar med animation

Om man vill skapa ankarlänkar, dvs. länkar till olika sektioner inom samma sida, kan det vara trevligt med en liten animation. Det är inte bara en visuell förstärkning, utan även ett kognitivt stöd då användaren uppfattar var vi tar vägen.

Upplägget i HTML-filen är att man har några sektioner vars ID sammanfaller med respektive ankarlänk. Till exempel har vi länken <a href="#section-2">Section 2</a> som skrollar till <div id="section-2>.

Ett exempel på hur det kan se ut ser du här: demo.uxd.nu/anchor-scroll/

jQuery-koden hittar du här:

$('a').click(function(e){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 800);
    e.preventDefault();
});

Ladda ner demon i Zip-format

Se åt vilket håll man scrollar

På senare tid har jag arbetat mycket med artikelsidor där man vill dölja sidhuvudet när man scrollar nedåt, för att sedan visa det när man scrollar upp. Detta är vanligt på mobila sidor där skärmytan är begränsad. För det har jag använt en lyssnare som sätter olika klasser på sidhuvudet beroende på vilket håll jag scrollar. Sedan använder jag CSS för att dölja (eller krympa) sidhuvudet.

Ett exempel på detta hittar du här: http://demo.uxd.nu/scroll-listen/

Med en kodsnutt lägger jag på (och tar bort) klassen hidden på sidhuvudet. Kodsnutten ser ut såhär:

var lastScroll = 0;

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();

    if (scrollTop > lastScroll) {
        $('header').addClass('hidden');
    } else {
        $('header').removeClass('hidden');
    }

    lastScroll = scrollTop;
});

Sedan kan jag ändra positionen på mitt sidhuvud med CSS.

Ladda ner demon i Zip-format

Låt dig inspireras

Det finns många bra inspirationskällor för design på nätet. Men när det gäller just kodprototyper så rekommenderar jag att kolla in CodePen. Här finns en uppsjö av snygga lösningar, där man får se HTML, CSS och JS.