Какую либу использовать для плавного появления блоков из за сетки(есть прмер)?

Question

[Alice777]

Вот пример, может у кого то есть пример либ?
https://32mars.com/en/about

Answer 1

[xxvxx]

scrollmagic.io/examples/advanced/animate_css.html
https://github.com/janpaepke/ScrollMagic

похожий пример не видел, но это лекго сделать, на div ставишь overflow: hidden; внутрь него кладешь содержимое и дальше можно в ручную можно https://daneden.github.io/animate.css/ ставишь анимацию при скролле на содержимое чтобы выезжало

div{
     width: 100px;
    height: auto;
  overflow: hidden;
  
}
p{
      left: 50px;
    position: relative;
}

<div ><p>fwefwefwfwefwef fwefwefwfwefwef fwefwefwfwefwef fwefwefwfwefwef fwefwefwfwefwef fwefwefwfwefwef fwefwefwfwefwef</p></div>

Comments

[Alice777]

это само собой, спасибо, но тут еше важно как решить вопрос с анимацией при скроле?

[xxvxx]

Alice777, вставил ссылки на скролл анимацию

[Alice777]

Спасибо, но этот массивный скролл мэджик уместно использовать? Там удобно что все привязывается к триггер элементу(и в мобильном варианте благодаря этому все сработает там где нужно), а , например, в этом коде

$(window).scroll(function(){
if ( $(this).scrollTop() > el.offset().top - 200 ) {
el.addClass('animation_car8');
}
});

все связано с пикселями, поэтому в адаптивном варианте возникнут проблемы.

Можно ли этот вопрос решить без целой либы скролл маджик?

[xxvxx]

Alice777, да в мобильном варианте все будет работать правильно

Answer 2

[kulaeff]

Тут либа и не нужна. Делаете блок с overflow: hidden, в нем блок с текстом у которого transform: translate(-100%, 0). Затем когда надо показать текст делаете transform: translate(0, 0). Ну и не забыть transition, чтобы текст плавно выезжал. Ну, а если все же нужна либа, то можно использовать тот же $.animate или GSAP.

Comments

[Alice777]

это само собой, спасибо, но тут еше важно как решить вопрос с анимацией при скроле?

[kulaeff]

Alice777, отслеживайте scrollTop следующей секции, которую нужно анимировать и точно так же играете с transform: translate.

Answer 3

[Валерий Алексеев]

Как правильно написали выше — overflow:hidden контейнеру.

Для анимации элементов внутри контейнера при скролле используйте WOW.js — он в связке с Animate.css применяет плавные анимации ко всему, что нужно.

mynameismatthieu.com/WOW

Comments

[xxvxx]

WOW.js пользовался им, если много анимации сайт начинает лагать (делал миниатюры товаров появляющихся при скролле)
но в освоении он проще

[Валерий Алексеев]

Тогда вручную вешать события на скролл и использовать — GSAP, производительность анимации в итоге выходит выше, чем при использовании CSS анимаций. Но тут сами библиотеки веса добавляют.