Search code examples
jqueryhtmlcssparallax

Delay appearance on scroll

I am trying to achieve an effect like on this website: http://pollenlondon.com/antiques-boutiques/
I got a prallax effect to work but I cannot figure out how to delay the showing up of the content a little bit. I am searching for a solution, which does not depend on a plugin, like skrollr.

The fiddle: http://jsfiddle.net/1kj1j63o/4/

HTML

<section class="module content">
    <div class="wrapper">
        <h2>Some text</h2>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
    </div>
</section>

<section class="module parallax parallax-1">
    <div class="wrapper">   
    </div><!-- /.wrapper -->
</section>

<section class="module content">
    <div class="wrapper">
        <h2>This part is supposed to show up with an effect</h2>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
    </div>
</section>

CSS

section.module.content {
    padding: 100px 0 50px 0;
    min-height: 600px;
    font-family: Arial;
}
section.module.content.parallax {
    height: 400px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

section.module.content.parallax-1 {
    margin-top: 300px;
    height: 700px;
    background-image: url('https://ununsplash.imgix.net/uploads/141319062591093cefc09/ad50c1f0?q=75&fm=jpg&s=a356dd61ff3da2269124bcd12a303b7e');
}

.wrapper-effect {
    display: none;
}

jquery

$(function(){
    $('.wrapper-effect').scrollTop(300px).css("display":"block");
});

I am really new to this and would be very happy for any kind of help!!

Solution

  • Take a look at this website: http://www.justinaguilar.com/animations/scrolling.html

    Here are the instructions from that site on how to animate an object on scroll:

    Add jQuery to the <head> element of your webpage:

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    Add this before the </body> tag to trigger the animation when the user scrolls to the element:

    <script>
    $(window).scroll(function() {
        $('.wrapper').each(function(){
        var pos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
            if (pos < topOfWindow+400) {
                $(this).addClass("slideUp");
            }
        });
    });
</script>

    Replace .wrapper with the ID or class of the element you want animated. Replace slideUp with an animation class.

    400 represents the space between the element and the top of the screen. The animation activates when the element is 400px from the top of the screen. Increase this number to make the animaton activate sooner.

    Here's the slideUp class (also from that website):

    .slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;    

animation-duration: 1s; 
-webkit-animation-duration: 1s;

animation-timing-function: ease;    
-webkit-animation-timing-function: ease;

visibility: visible !important;
}
@keyframes slideUp {
0% {
    transform: translateY(100%);
}
50%{
    transform: translateY(-8%);
}
65%{
    transform: translateY(4%);
}
80%{
    transform: translateY(-4%);
}
95%{
    transform: translateY(2%);
}           
100% {
    transform: translateY(0%);
}   
}

@-webkit-keyframes slideUp {
0% {
    -webkit-transform: translateY(100%);
}
50%{
    -webkit-transform: translateY(-8%);
}
65%{
    -webkit-transform: translateY(4%);
}
80%{
    -webkit-transform: translateY(-4%);
}
95%{
    -webkit-transform: translateY(2%);
}           
100% {
    -webkit-transform: translateY(0%);
}   
}

    Fiddle: http://jsfiddle.net/g5gjwm3v/ (this example uses a timer instead of scroll for simplicity)