jquery - Elements with "scroll to top" effect on home page -

jquery - Elements with "scroll to top" effect on home page -

i have elements appear/disappear @ border of screen when scrolled (hideme). can animate them problem beginning, @ page load. can not same effect @ page load... if can help how it.

html

<div class="section" id="home"> <div class="avatar"><img src="uploads/avatar2.jpg" alt="il avatar" /></div> <img class="signature" src="uploads/signature.png" alt="sign" /> <div class="intro">this text...</div> </div>

jquery

<script type="text/javascript"> $(document).ready(function() { $('body').hide(); $('.avatar').css('opacity',0); $('.avatar img').css('width','0vw','height','0vw','margin-left','50%','margin-top','50%'); $('.intro').css('opacity',0,'margin-top','20%'); $('.signature').css('opacity',0,'top','75%'); //calling jpreloader $('body').jpreloader({ showsplash: false, showpercentage: true, loadervpos: '10%', autoclose: true, }, function() { //callback function $('body').fadein(50); }); // scroll effect function visiblehideme(){ $('#home').each(function(){ var half_of_object = $(this).offset().top + ($(this).outerheight()/4); var top_of_window = $(window).scrolltop(); var bottom_of_window = $(window).scrolltop() + $(window).height(); if(half_of_object < top_of_window) { $('.avatar').delay(700).css({'opacity':'0'}); $('.avatar img').delay(800).css({'margin-top':'50%','margin-left':'50%','width':'0vw','height':'0vw'}); $('.intro').css({'opacity':'0','margin-top':'20%'}); $('.signature').delay(1000).css({'opacity':'0','top':'75%'}); } if (half_of_object > bottom_of_window){ $('.avatar').delay(700).css({'opacity':'0'}); $('.avatar img').delay(800).css({'margin-top':'50%','margin-left':'50%','width':'0vw','height':'0vw'}); $('.intro').css({'opacity':'0','margin-top':'20%'}); $('.signature').delay(1000).css({'opacity':'0','top':'75%'}); } else if(half_of_object > top_of_window && half_of_object < bottom_of_window){ $('.avatar').delay(700).css({'opacity':'1'}); $('.avatar img').delay(800).css({'margin-top':'0%','margin-left':'0%','width':'25vw','height':'25vw'}); $('.intro').css({'opacity':'1','margin-top':'5%'}); $('.signature').delay(1000).css({'opacity':'1','top':'60%'}); } }); } visiblehideme(); $(window).scroll(function(){ visiblehideme(); }); }); </script>

css

#home { min-height: 100vh; } #home .intro { opacity: 0; position: relative; margin-left: 25%; margin-top: 20%; width: 65%; text-align: left; } #home .avatar { opacity: 0; position: absolute; left: 7%; top: 35%; width: 350px; width: 25vw; height: 350px; height: 25vw; } #home .avatar img { position: relative; width: 0px; width: 0vw; height: 0px; height: 0vw; margin-left: 50%; margin-top: 50%; border: 5px solid rgba(0,0,0,0.5); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #home .signature { opacity: 0; position: absolute; left: 70%; top: 75%; width: 200px; height: 124px; }

in above case, page loads normal opacity animation, elements not @ scrolling @ screen edge.

if add together callback function animation (just after "body" fade in), elements appear first normal opacity animation, animation... talking next additional codes :

$('.avatar').animate({'opacity':1}, 600, 'easeincirc'); $('.avatar img').delay(100).animate({'width':'25vw','height':'25vw','margin-left':'0%','margin-top':'0%'}, 700, 'easeoutbounce'); $('.intro').delay(500).animate({'opacity':1,'margin-top':'5%'}, 600, 'easeincirc'); $('.signature').delay(800).animate({'opacity':1,'top':'60%'}, 800, 'easeincirc');

on live here : http://photography.igorlaszlo.com/test2.html if can help me...

i checked live link you've provided , assume want no avatar/text/signature shown when page loads have fade in, similar effect when scroll top after scrolling downwards far plenty them vanish.

i'd start edit css files , hence initial styling match final animation state when elements hidden: edit: true

then phone call code show them when document ready: edit: s done calling visiblehideme();

edit: however, there pre-loader rocking around , there's timing problem. remove phone call visiblehideme(); document.ready , rather add together jpreloader's callback:

//calling jpreloader $('body').jpreloader({ showsplash: false, showpercentage: true, loadervpos: '10%', autoclose: true, }, function() { //callback function $('body').fadein(50, visibilehideme); //callback after body finished fading $('#menu-bttn span').text('show menu'); });

jquery css scroll opacity