Senior Frontend Developer | JavaScript, React, HTML & CSS

Twenty Twenty — инструмент для создания визуальных различий



Начать работать с ним легко, просто поместите два изображения в контейнер. Первое изображение будет слева, а второе справа. Вот пример контейнера:

<div id="container1">

  <img src="sample-before.png">

  <img src="sample-after.png">

</div>

Затем нужно вызвать twentytwenty() в этом контейнере после загрузки изображений.

$(window).load(function() {

  $("#container1").twentytwenty();

});

Теперь пользователь может менять одно изображение на другое ползунком. Документация и скачивание доступны по ссылке: zurb.com/playground/twentytwenty