Как сделать такой эффект на сайте?

Question

[edu30151]

Подскажите как сделать такой эффект как на сайте prodaktica.com ? Чтоб колонки постоянно крутились двигались непрерывно(плавно). Может есть какой плагин который можно под это заточить или подскажите в какую сторону смотреть, что почитать.
Спасибо.

Comments

[Алексей]

Это у них самописный похоже, вот файл скрипта prodaktica.com/wp-content/themes/prodakt/js/base.js

[Anton Filippov]

не дай будда попасть на такой сайт

Answer 1

[Егор Чеботарев]

Можно через js

У тебя 4 колонки, каждая из которых имеет примерно следующий вид:

<div class="overflow" style="overflow:hidden; height:800px;">
	
	<div class="scroll" style="height:100%;">
		
		<div class="item"></div>
		
	</div>
	
</div>

.overflow - div в котором прокручивается карусель
.scroll - div в котором содержаться фото. Имеет высоту равную сумме высот фото и отступов. Желательно вычислять как .item.clientHeight, перебрав все фото через for и не забыв прибавить отступы.

.scroll можно установить в position:absolute и изменять top через js и перемещая ушедшие за экран item в конец через replaceChild

Реализация подобного функционала
https://learn.javascript.ru/task/carousel

Comments

[edu30151]

А как сделать чтоб колонки постоянно крутились?? Они же не по слайдам крутятся...

[Егор Чеботарев]

RequesrAnimationFrame()