"enable-effect" only when the Articles are visible

fritzk

Hello,

I am using "enable-effect" in combination with "xLayout - Departments" to let Articles of various categories flow in smoothly.

"The effect" is starting right after the page loads. Is there a way to start it at the time the Articles come into the focus on scrolling??

Here is an example where you could see what I mean:
http://neu2.gaw.at/en/career-media/jobs-en.html

You will not see the effect at the first place - if you scroll down, and reload via F5 you will see it. (but that is not what I want)

The second part of the Question is: can I enable "the effect" for other Type of Modules?

I display many Modules with:
{loadposition the-position}

Example: http://neu2.gaw.at/en/industrial-plants-overview/industrial_plants_interactive_paper.html

Do I have a chance to have "the effect" also there? (smootly let come in the hotspot Module, like we have it in your example on the ja-healthcare main site: the more you scroll down, the more modules flow in)

Thank you for suggestions!

saguaros

fritzk

Hi,

You will need to bind the 'ja-inview' class to the section that you want to have that kind of animation, also the 'ja-animate' class

You can see the declartion in JS file of template: root/templates/ja_healthcare/js/script.js

  // Add Inview
  $(window).ready(function () {
    if($('.enable-effect').length > 0) {
      $('.section-wrap > div,.t3-sl-1,.blog.blog-department,div.categories-list').bind('inview', function(event, visible) {
        if (visible) {
          $(this).addClass('ja-inview');
        }
      });
    }
  });

For the hotspot, I got your point but it will require heavy customization here.

Regards

fritzk

Hello saguaros,

Thank you, that helped me to understand it a little bit more! (and maybe I can apply it to another part)

But it does not change the fact that the effect starts before it is "really" visible. It seems to start right after the page is reloaded.

I will have to make the Headers of all Pages a little bit higher in future (designer decision) and so the effect will never be seen, because at the time that the user scrolls down, the effect has gone.

maybe there is some solution for that?

Regards Fritz

saguaros

fritzk

Thought that it will require a bit customization on JS as at this moment, the content will appear when you scroll the page in appropriate section on a page.

Regards