Известная техника с простой, но элегантной реализацией
Вы наверняка видели технику наложения карт друг на друга во время прокрутки.
В этой статье мы узнаем, как сделать это самостоятельно с помощью чистого CSS (и немного JS для большей красоты) и убедимся, что это действительно очень просто.
Начиная с чистого CSS…
Я рекомендую для этого использовать Codepen, потому что нам нужно по одному файлу HTML, CSS и JS. Вот ручка с базовой разметкой и стилями. Есть контейнер для центрирования карт и два блока по 6 карт в каждом. Каждая карта имеет название и некоторый текст. Кроме того, есть базовые стили, поэтому наши карты выглядят красиво. Довольно просто.
Теперь мы можем прокручивать наши карты в окне результатов, но они точно не накладываются друг на друга. Как мы можем заставить их это сделать?
На самом деле, мы можем сделать базовое стекирование всего двумя строками CSS!
Теперь карты складываются, и — я не лгал — все, что мы сделали, это написали буквально две строки CSS! Как это возможно? Что такое position: sticky? Проще говоря, это означает, что элемент ведет себя нормально, пока не достигнет заданного смещения относительно своего ближайшего прокручивающегося предка, после чего он ведет себя так, как если бы он был зафиксирован. Самое приятное то, что липкий элемент всегда остается внутри своего родителя, поэтому он ведет себя фиксированным до тех пор, пока родитель не изменит свое положение — вот почему карточки прокручиваются из области просмотра вместе с блоком, в котором они находятся. Это может сбивать с толку в начале. , так что вот ссылка на более формальное объяснение.
Единственная проблема этого решения в том, что теперь карты полностью перекрывают друг друга.
Если мы хотим превратить их в идеальную красоту, нам понадобится JS.
…добавляем немного JS…
Чтобы сохранить смещение, мы установим свойство transform для каждой карты относительно ее положения в блоке.
Сначала выбираем все блоки карты. После этого мы сохраняем пространство внизу блока с помощью свойства padding-bottom, так как мы будем использовать свойство transform для установки смещения каждой карты. Наконец, мы перебираем все их дочерние элементы и вручную устанавливаем для свойства transform значение translateY, используя индекс каждого дочернего элемента.
Теперь наши карты складываются так, как мы хотим!
Вот и последняя ручка.
…внедрение стопочных карт как компонента React
Насколько я понимаю, вы смотрите на написанный вами код JS и думаете: "Ну, а как мне его использовать в моем замечательном приложении React/Vue/Next?".
На самом деле все еще проще. Посмотрите на код ниже.
Вам не нужен дополнительный скрипт, потому что вы используете цикл для рендеринга карточек, что позволяет вам писать встроенные стили на ходу.
Вот как это просто! И это не единственный способ использовать липкое позиционирование для стека карт. Посмотрите, каких интересных результатов можно добиться, приложив немного фантазии.
Если вам понравилась эта статья, подпишитесь и подпишитесь, чтобы не пропустить новый контент!
Хорошего дня!
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
