html - How do i make the content of the division appear when I scroll down -

html - How do i make the content of the division appear when I scroll down -

i take website example

http://paultrifa.com/envato/themeforest/scrolled/

i learning how create contents appear fading in when scroll down. can utilize animate.css help me fading in effects can't create load when scroll down.

everything loaded before scroll down. can please enlighten me on this? keen larn this.

what bind method window.scroll event, , when scroll hits specific values you'll trigger specific animations functions either animate contents on screen via jquery, or add together classes predefined css animations attached.

step 1, this)

$(document).ready(function() { var firstaniwaiting = true, secondaniwaiting = true, thirdaniwaiting = true, checkscroll = function() { var currentscroll = $(window).scrolltop(); if (currentscroll > 200 && firstaniwaiting) { firstaniwaiting = false; domyfirstani(); } else if (currentscroll > 1000 && secondaniwaiting) { secondaniwaiting = false; domysecondani(); } else if (currentscroll > 1500 && thirdaniwaiting) { thirdaniwaiting = false; domythirdani(); $(window).unbind(); } }; $(window).scroll(checkscroll); }

step 2, set css position values elements in pre-animated states (i.e. hidden, or whatever). if you're using classes to css3 animations, create sure include 'transition' value on native class (meaning, class on object , not class gets added later). sorta like:

.thingtoani1 { position: relative; top: -500px; left: 0; transition: top 0.5s; } .thingtoani1moveit { // class gets added later top: 0; }

step 3, create classes have position values post-animated states. (or) step 3, this)

var domyfirstani = function() { $('.thingtoanimate1').animate({ top: '20px', left: '100px' }, 200); $('.thingtoanimate2').animate({ top: '20px', left: '300px' }, 200); }

that's super rough, that'll started.

also, didn't double check myself if there's screwed up, leave comment , i'll update dumbness.

html css website transition fadein