Hallo,

Ik ben met de webite bezig en ik wil alle dingen op 1 pagina hebben.
Ik heb een menu en nu wil ik als ik op een menu balk klik dat hij naar beneden scrolt ik heb al vanalles geprobeerd maar het lukt maar niet.

Groetjes,

Matthijs
Dat was mij nog niet bekend, heb ik weer wat geleerd ;-)
Nu nog een uitzoeken hoe je vervolgens smooth kan scrollen met CSS naar dat element.
Bijvoorbeeld met Ceaser maak je in een handomdraai de CSS-code voor een animatie-effect. Als je de "easing" instelt op een curve, bijvoorbeeld "ease-in-out", oogt dat zelfs bijna biologisch verantwoord natuurlijk.
Bedankt!

Ik heb de css code maar aan wat moet ik die koppelen? aan de #portfolio?

Koppel de CSS-code aan de HTML-elementen die je een animatie wilt meegeven. Als je de CSS-code in body {...} gebruikt, wordt alles geanimeerd, maar je kunt mooiere effecten bereiken door alleen bepaalde HTML-elementen, klassen of ID's een animatie mee te geven. Gewoon mee spelen.
Ik heb hem aan de * en de html en de body elements geprobeerd maar maar hij doet het niet
>> maar hij doet het niet

Wie doet wat niet en wat doet wat wel?
De animatie doet het niet
Wat is je code nu? En die CSS3 animatie doet het niet in verouderde browsers.
 -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
   -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
     -o-transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
        transition: all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */

-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
        transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */

Reageren