Группа из 4-х секций

Небольшой код на JavaScript (1 кб. без сжатия), который позволяет открывать одну секцию из группы поверх остальных и выводить дополнительную информацию.

Пример:

×
Съедобные грибы

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

×
Несъедобные грибы

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

×
О грибах

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

×
Грибная кухня

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

  • Группа рассчитана только на 4 секции
  • В мобильной версии не показывается дополнительная фотография
  • Фоновое изображение и картинка в открывшейся секции могут отличаться
  • Количество текста в описании не ограничено

HTML:

  • Фотографии взяты с сайта pexels.com
  • Оригинальную версию данного решения можно посмотреть на codepen.io у пользователя Marcelo Ribeiro в работе Fullscreen Layout Page Transitions - Pure JS/CSS
  • Если кому-то нравится тема грибов, то о них можно почитать на одном из моих старых сайтов mushroom-site.ru

CSS:

JS:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Богдан:

    Сначала прописал всё со своими переменными - не работает. Попробовал скопировать с сайта и вставить свои фотки - не работает. Попробовал создать отдельный js-файл и вставить туда скрипт - не работает. Попробовал в html-коде прописать сам скрипт в тегах script - заработало. Не знаю почему. В первом файле-скрипте у меня уже прописана анимация для карусели фотографий, вместе с ней этот скрипт не дружит.

    Ответить
    • Alexander:

      Посмотрите, что в консоле, если что то не работает, там скорее всего есть ответ.
      А вообще скрипт должен быть ниже хтмл или запускаться после его загрузки

      Ответить
  • Даша:

    Как сделать несколько? Например я хочу сделать 15 секции, но я попробовала и почему не видно только 4 секция и как можно сделать больше?

    Ответить
    • Alexander:

      Так изначально задумано 🙂
      Если делать под несколько секций или под большее кол-во фото, нужно менять и CSS и JS

      Ответить
  • Алексей:

    А как несколько секций сделать?

    Ответить
  • СЕРГЕЙ:

    Блииин почему в опенкарте не работает! Такая крутая штука!

    Ответить
    • Эдуард:

      У меня работает) OC 3.0.3.7
      HTML закинь на страницу,где хочешь эту тему увидеть через tinyMCE или другой редактор, далее создай css и js файлы на хосте, отредактируй TWIG файлы HEADER(подключи стили и скрипты).
      Кажется все)

      Ответить
  • Миша:

    Супер! Спасибо что поделился такой прикольной штучкой!

    Ответить