Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

kyhaus

Circle Member
  • Content Count

    1
  • Joined

  • Last visited

  1. Hi vinamrakokane, I've had the exact same issue but found a way to crack it, and yes Justin's resource is superb! Here's the Javascript code I've used and had great success with - there's a few modifications! 1) Firstly, leave the code in the header as noted in your question above, and delete code from elsewhere 2) Add class="slideUp" to the code of any element you wish to animate on the page. i.e. <div id="#elementname" class="slideUp"></div> 3) Replace 'slideUp' with 'slideLeft', 'slideRight' etc. Refer to Justin's page for all references. 4) In custom CSS, add "visibility: hidden;" to the style of the element you wish to animate (It will disappear temporarily!) 5) Add a code block anywhere on the specific page you wish to animate on, and set it to Markdown. 6) Add the following code to the block: <script> $(window).scroll(function () { $('#elementname').each(function () { var topOfWindow = $(window).scrollTop(), bottomOfWindow = topOfWindow + $(window).height(); var imagePos = $(this).offset().top; if(imagePos <= bottomOfWindow-100 && imagePos >= topOfWindow-250){ $(this).addClass('slideUp'); }else{ $(this).removeClass('slideUp'); } }); }); </script> 7) Change the reveal settings for the elements by tweaking the -100 and -250 (can be changed to +400, etc) depending on when you'd like to see them, but these settings worked for me. 8) Add the same script for each element, changing the ref ID, and keep all within the same script brackets. 9) Chaching!
×
×
  • Create New...