Interactieve vormgeving portfolio

$(document).ready(function(){
	$('a[href=#top]').click(function(e){
		e.preventDefault();
		$('html, body').animate({scrollTop:0}, 'slow');
	});
});

Probeer dat eens, ik heb een e.preventDefault() toegevoegd, dit omdat wanneer er nu op de link geklikt wordt de pagina onmiddelijk naar boven wilt en daarna nog een animatie wilt vanaf de huidige 'scrollTop' naar de 0 (dus bovenkant).

Zet daarnaast ook alsjeblieft je code in een extern javascript document die je vervolgens kunt includen net zoals CSS bestanden.

Je kunt ook het volgende stukje code gebruiken om alle anchors met een # href soepel te laten scrollen naar de 'sectie' van het document wat in de 'href' attribuut vermeld wordt.

// Smooth scroll anchor
var $root = $('html, body');
$('a').click(function() {
	$root.animate({
		scrollTop: $( $.attr(this, 'href') ).offset().top
	}, 500);
	return false;
});

Eschwin Moerkerken op 04/02/2016 18:51:24

$(document).ready(function(){
	$('a[href=#top]').click(function(e){
		e.preventDefault();
		$('html, body').animate({scrollTop:0}, 'slow');
	});
});

Probeer dat eens, ik heb een e.preventDefault() toegevoegd, dit omdat wanneer er nu op de link geklikt wordt de pagina onmiddelijk naar boven wilt en daarna nog een animatie wilt vanaf de huidige 'scrollTop' naar de 0 (dus bovenkant).

Zet daarnaast ook alsjeblieft je code in een extern javascript document die je vervolgens kunt includen net zoals CSS bestanden.

Je kunt ook het volgende stukje code gebruiken om alle anchors met een # href soepel te laten scrollen naar de 'sectie' van het document wat in de 'href' attribuut vermeld wordt.

// Smooth scroll anchor
var $root = $('html, body');
$('a').click(function() {
	$root.animate({
		scrollTop: $( $.attr(this, 'href') ).offset().top
	}, 500);
	return false;
});

De eerste code heeft het opgelost. Dank je. :)

De afgelopen weken ben ik aan de slag gegaan met het vernieuwen van mijn website en wat heb wat nieuwe dingen bijgevoegd.

Zouden jullie opnieuwd feedback kunnen geven?

Nieuwe website: b e t a . youri s c h n e i d e r. c o m
Oude website: o l d . youri s c h n e i d e r. c o m

Ga voor de grap eens achterover gehangen in je bureaustoel zitten en probeer dan "Mijn naam is Youri Schneider" te lezen. Dan zullen er waarschijnlijk een van deze 2 dingen gebeuren: (a) je gaat vooroverbuigen om het te lezen of (b) je besluit al vrij snel dat je niet kan lezen.

Nu is (a) niet goed voor je lichaam en (b) zorgt ervoor dat je potentiële klanten/geïnteresseerden mist, omdat ze het opgeven. Dit ligt niet aan je kleur gebruik (contrast ratio is prima). Dit ligt echter wel aan je lettertype grootte en de regelafstand. Maak deze allebei wat groter (bijvoorbeeld gewoon 1em en line-height:1.4;). Aangezien je site wat breder is dan eerst is het helemaal niet erg om ook je tekst wat breder te maken. Bijv. width:625px; is nog steeds prima (dan heb je 87 karakters per regel, waarbij 60-90 als prettig lezen wordt ervaart).

Hetzelfde geld voor de tekst in de 4 blokjes eronder. Je lettertype is vrij condensed. Dit moet je voor de leesbaarheid een beetje combineren met wat meer line height (1.4 bijvoorbeeld) en wat grotere tekst. Een interresant artikel: https://ia.net/know-how/responsive-typography-the-basics

Je vaardigheden zijn nu een paar cirkels zonder tekst, ik neem aan dat hier iets mist?

Verder ziet ie er strak uit! Ik zou op je portfolio pagina overigens wel de animate van de "label" en het plaatje gelijk laten oplopen, deze zijn nu wat out-of-sync en dat vind ik een beetje storend werken.

Als je onderaan bij het contactformulier niks invult en op verzenden klikt dan is de lay-out erna helemaal verneukt.

Onder vaardigheden staan 5 afbeeldingen.. geen idee wat ze zeggen.

Taalfouten ook: 'eerste half van 2017 klaar' .

Wouter J op 27/02/2016 19:50:41

Ga voor de grap eens achterover gehangen in je bureaustoel zitten en probeer dan "Mijn naam is Youri Schneider" te lezen. Dan zullen er waarschijnlijk een van deze 2 dingen gebeuren: (a) je gaat vooroverbuigen om het te lezen of (b) je besluit al vrij snel dat je niet kan lezen.

Nu is (a) niet goed voor je lichaam en (b) zorgt ervoor dat je potentiële klanten/geïnteresseerden mist, omdat ze het opgeven. Dit ligt niet aan je kleur gebruik (contrast ratio is prima). Dit ligt echter wel aan je lettertype grootte en de regelafstand. Maak deze allebei wat groter (bijvoorbeeld gewoon 1em en line-height:1.4;). Aangezien je site wat breder is dan eerst is het helemaal niet erg om ook je tekst wat breder te maken. Bijv. width:625px; is nog steeds prima (dan heb je 87 karakters per regel, waarbij 60-90 als prettig lezen wordt ervaart).

Hetzelfde geld voor de tekst in de 4 blokjes eronder. Je lettertype is vrij condensed. Dit moet je voor de leesbaarheid een beetje combineren met wat meer line height (1.4 bijvoorbeeld) en wat grotere tekst. Een interresant artikel: https://ia.net/know-how/responsive-typography-the-basics

Je vaardigheden zijn nu een paar cirkels zonder tekst, ik neem aan dat hier iets mist?

Verder ziet ie er strak uit! Ik zou op je portfolio pagina overigens wel de animate van de "label" en het plaatje gelijk laten oplopen, deze zijn nu wat out-of-sync en dat vind ik een beetje storend werken.

Bedankt voor je reactie Wouter.

Ik ben het met je eens dat de tekst wat lastig te lezen was en heb deze vergroot en een line-height toegevoegd van 1.4em. Ook de breedte heb ik verhoogt en dat ziet er een stuk beter uit. Wel heb ik het wat subtieler aangepast dan jij voorstelde, omdat het er niet echt goed uitzag. De spatiëring heb ik ook aangepast bij de tekst onder 'interesses', zodat dit minder compact is en beter leesbaar wordt.

De cirkels onder vaardigheden worden gegenereerd door een jQuery plugin, ik heb namelijk geen idee hoe ik dat zou moeten maken. Het is de bedoeling dat daar dezelfde tekst in komt te staan als bij de oude website, echter is dat me tot op heden nog niet gelukt.

L deB op 27/02/2016 22:56:32

Als je onderaan bij het contactformulier niks invult en op verzenden klikt dan is de lay-out erna helemaal verneukt.

Onder vaardigheden staan 5 afbeeldingen.. geen idee wat ze zeggen.

Taalfouten ook: 'eerste half van 2017 klaar' .

Klopt, die pagina werk ik pas bij wanneer de andere pagina's zijn zoals ik wil, anders blijf ik bezig met aanpassen.

Taalfout heb ik verbetert.

Bijgewerkte versie staat online

Iedereen hierboven nogmaals dank voor de hulp. Inmiddels zijn we alweer bijna een jaar verder sinds mijn laatste reactie en ik ben dan ook hard bezig geweest met een veel betere versie. Op die nieuwe versie zou ik graag weer feedback willen ontvangen. De site is nog niet helemaal af, ik wil dan ook vooral feedback over de pagina's die in het menu staan. Doorklikpagina's die niet in het menu staan werken nog niet, evenals het contactformulier en de buttons om die te bereiken (op de homepage). Hij is overigens ook nog niet respsonsive.

Om een goede vergelijking te geven van mijn vooruitgang, plaats ik ook de link naar de oude versie:

oude versie
nieuwe versie

Alvast bedankt.

Ps: omdat deze nog niet zover naar beneden geduwd was, dacht ik dat in hetzelfde topic plaatsen wel zou worden gewaardeerd.

Ondanks dat hij niet responsive is, zou je voortaan rekening willen houden met schermen die niet Full HD zijn? Verder ziet het er wel netjes uit. Je zou een lettertype van Google Fonts kunnen gebruiken en misschien "fade" bij een hover op je Case afbeeldingen.