Как сделать плавное появление объектов на лендинге?

Question

Nikita Titov @Giottox

HTML
CSS

Как сделать плавное появление объектов на лендинге?

Всем привет, много где видел такой эффект, но не знаю как он называется.
В общем, когда заходишь на сайт, все объекте на сайте (текст, картинки в основном) плавно появляются когда я на него захожу. А также когда крутишь его вниз, происходит такой же эффект. Как будто текст на сайте был невидим, а когда ты крутишь его вниз, он появляется.

В общем, объяснять я толком не горазд, я очень надеюсь что вы поняли меня.

Вопрос задан более трёх лет назад
11077 просмотров

Комментировать

Подписаться 32 Оценить Комментировать

Answer 1 · 2015-09-10 12:31:04

При прокрутке - можно воспользоваться очень простым скриптом

<script type="text/javascript">
$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('#ten-hidden').addClass("sticky");
  }
  else{
    $('#ten-hidden').removeClass("sticky");
  }
if ($(this).scrollTop() > 1){  
    $('#sanremo-logo').addClass("sticky");
  }
  else{
    $('#sanremo-logo').removeClass("sticky");
  }
});
</script>

Этот скрипт добавляет class "sticky" элементу с id "sanremo-logo", пример - sanremo-pizza.com появление тени при прокрутке страницы на 1 пиксель, скорость появления можно задать на css transition: all 0.3s;

Как сделать плавное появление объектов на лендинге?

Войдите на сайт