Effect on jQuery

Asked

Viewed 1,254 times

2

How to make an effect in jQuery, that when using SCROLL the Divs and the elements appear in fadein, as in this site: http://www.neotokio.it/

  • 1

    Have you tried copying the source code from the site itself? Javascript is always visible, no?

3 answers

4


Something like that? Example in Jsfiddle

$(window).scroll(function () {

        /* checar a localização dos elementos */
        $('.imagem').each(function (i) {

            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* se o objeto estiver completamente "scrollado" */
            /* pra dentro da janela, fazer o fade in */
            if (bottom_of_window > bottom_of_object) {

                $(this).animate({
                    'opacity': '1'
                }, 500);

            }

        });

    });

Remember to set the opacity of the objects you want to fade in to 0.

  • Thank you was basically that.

  • @If you are satisfied with the answer, please mark it as accepted.

2

The Superscrollorama, a plugin for jQuery, has what you need. Also, I could count at least 14 other effects for the scroll in their demo :-)

  • 4

    Do you have anything more relevant to answer? Replies only with links are not considered good quality here. http://meta.pt.stackoverflow.com/questions/42/queremos-respostas-que-contenham-somente-links

  • Sorry, but I didn’t reply only with the link. I just forgot to put it in the text.

  • 2

    It only has the important link. There is no relevant information about it. It does not say why it solves the problem of the questioner. How to use it, nothing. Just the link and a sentence telling the person to look there. This is not considered an answer here. Answers need to answer what the author asked for and have relevant content here. So it can be enjoyed by other people in the future.

  • 1

    Give an example of how to use this plugin for what the OP wants, and maybe people see your question with good eyes.

0

You can use the plugin jQuery.appear .

$('img[src]').appear(function(){
    $(this).show();
});

Browser other questions tagged

You are not signed in. Login or sign up in order to post.