Задержка появления на прокрутке

Я пытаюсь добиться эффекта, как на этом сайте: http://pollenlondon.com/antiques-boutiques/
У меня есть эффект пральмакса для работы, но я не могу понять, как немного замедлить показ содержимого. Я ищу решение, которое не зависит от плагина, например skrollr.

скрипку: 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"); 
});

Я действительно новичок в этом и был бы очень рад за любого рода помощь !!

источник

2015-01-22 Schwesi

вам потребуется немного Javacript для достижения Это. Но я не вижу javascript в вашем вопросе? Вы что-то пробовали? – giorgio

Подсказка: используйте [.scrollTop()] (http://api.jquery.com/scrolltop/) – giorgio

Нет, я ничего не пробовал, потому что не могу писать javascript! – Schwesi

Взгляните на этот сайт: http://www.justinaguilar.com/animations/scrolling.html

Вот инструкции с этого сайта о том, как анимировать объект на свитке:

Добавить JQuery в <head> элемент веб-страницы:

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

Добавьте это перед тегом </body>, чтобы вызвать анимацию, когда пользователь прокручивает элемент:

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

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

Замените .wrapper с идентификатором или классом элемента, который вы хотите анимировать. Замените slideUp на класс анимации.

400 представляет пространство между элементом и верхней частью экрана. Анимация активируется, когда элемент находится в 400 пикселей от верхней части экрана. Увеличьте это число, чтобы активировать анимацию раньше.

Вот класс slideUp (также с этого сайта):

.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/ (в этом примере используется таймер вместо прокрутки для простоты)

источник

2015-01-22 14:24:03

Ничего себе !!! Большое вам спасибо за ваш ответ! Именно то, что я искал !! – Schwesi

Несомненно! Здесь он реализован с вашей скрипкой: http: // jsfiddle.net/1kj1j63o/5/важно отметить: использовать видимость: скрытый здесь вместо отображения: нет, хотя вы можете использовать код вместо использования, если вы предпочитаете это по какой-то причине –

Вы должны спросить деньги за это Джо;) – giorgio

Задержка появления на прокрутке

ответ

Смежные вопросы