CODEWITHSUNDEEP
jquery
Mateusz Winnicki
Mateusz Winnicki

Reputation: 151

Fade in element when div starts

I don't exactly know how to name it, I would like to know how could I make function to fadeIn or whatever, when div wrapper starts to show. To be more clear I am think about something like that link

As you can see when you scroll down, the elements are sliding up. So I have tried with offset of a certain div , after one is passed off then function triggers, but its not responsive option, on different resolutions it doesn't trigger on the same time.

If you look the link I provided, whether resolution I have this works the same.

So my questions are:

  1. Am I doing something wrong with css , so it doesn't trigger well with offset ?
  2. ( I think scrollTop and pixels is not good here, because not responsive option for that) there is other/better way to do that than offset ?
  3. Maybe instead of passing off and element is there a way to trigger function after 'div' starts?

Thanks for help !

Edited: this is simple fiddle of how it works. When you are on top of specific div, then it shows. However when you change your resolution, or just minimize browser, the image is already shown while you see the red background

Upvotes: 0

Views: 102

Answers (1)

Ionică Bizău
Ionică Bizău

Reputation: 113345

It would be very easy to do this with jQuery .animate() function. You just need to animate opacity and top properties.

Consider the following CSS:

.test {
    background: red;
    height: 300px;
    width: 200px;
    padding: 10px;
    font-family: Arial;
    font-size: 50px;
    text-align: center;
    color: white;
    position: absolute;
    top: 100px;
    opacity: 0;
    border-bottom: 10px solid darkred;
}

and this HTML:

<div class="test">
    <strong>Hello World!</strong>
</div>

Then you can do this:

$(".test").animate({
    top: 10,
    opacity: 1
}, 1000);

JSFIDDLE

Upvotes: 1

Related Questions