0

My JavaScript currently looks like this:

    $(document).ready(function () {

    /* Every time the window is scrolled ... */
    $(window).scroll(function () {

        /* Check the location of each desired element */
        $('.hideme').each(function (i) {

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

            /* If the object is completely visible in the window, fade it it */
            if (bottom_of_window > bottom_of_object) {

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

            }

        });

    });

});

And that works to fade an element in when i scroll to it. However, I'm trying to get the same effect that you can see on a lot of wrapbootstrap websites where the items also move into place. Does this take a long time? Would it be an easy fix to my code??

Here is an example of what i'm trying to get: http://wrapbootstrap.com/preview/WB0T75386

See how things move into place and fade in? Looks so nice.

becca
  • 720
  • 1
  • 9
  • 24
  • [**check this question**](http://stackoverflow.com/questions/3045852/triggering-jquery-event-when-an-element-appears-on-screen) let the object with `opacity:0` plus `left:0` and then add a class with `opacity:1` and `left: 50px` when the element appears on the screen (using a css transition plus the plugin on the link's answer) – L777 Apr 08 '16 at 17:00

1 Answers1

0

an Example how to do this with css, you need JS only to trigger the fade in. Ive renamed .hideme to .faded_out in my code, since this fits better it's purpose

$(document).ready(function () {

    /* Every time the window is scrolled ... */
    $(window).scroll(function () {
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* get the ones that are still faded out but should get visible */
        $('.faded_out').filter(function() {
            return bottom_of_window > $(this).offset().top + $(this).outerHeight();
        }).removeClass('faded_out');
    });
});

in the dom

<div class="faded_out fade_in fade_in_from_right" > ... </div>

and in the css, commented on the meaning of each particular class

/* I am an element that is fading in */
.fade_in {
    opacity: 1;
    transform: none;
    transition: opacity linear 500ms, transform ease 500ms;
}

/* 
    this is the style I am fading in 
    by fading from this style, back to the defaults in .fade_in
*/
.faded_out.fade_in_from_right {
    opacity: 0;
    transform: translateX(50px);
}
Thomas
  • 3,513
  • 1
  • 13
  • 10
  • Thank you thomas! How does this work in mobile? IS there anything that needs to be changed? And what would you do to make it translate in from the left?? – becca Apr 08 '16 at 17:11
  • first: I had a bug there, `translate(50px)` should be either `translateX(50px)` or `translate(50px, 0)`. Then css `transform` and `translate` and a few other things, sometimes still have to be namespaced (like `-moz-translate`), this may be more common in the mobile world. To fade in from the left you simply have to change the sign of the value `-50px` – Thomas Apr 08 '16 at 17:27
  • thank you! Still trying to check on mobile - I don't have a test environment as of yet. Any chance someone else has tested this mobile? I noticed other websites with the similar effect dont have any transformations... Just not sure how i would take them out for mobile? Would that be using medias? – becca Apr 08 '16 at 17:37
  • not this particular one, but I have already built mobile pages using CSS transitions and translations. Using sass or compass and their mixins for stuff like the namespacing, and to avoid repeating myself all over the place. The only reason I go to JS for animations, is when an Animation REALLY has to work, when it is like the main feature, not just some effect. (And even then, jquery.animate() is not always a good choice) – Thomas Apr 08 '16 at 19:04