Стандартное открытие всплывающих окон (Lightbox) в Gridbox выглядит привычно, но для промо-акций, лид-магнитов и портфолио часто требуется более выразительная подача. В этом руководстве собраны 20 готовых CSS-анимаций появления модальных окон: от мягкого масштабирования до сложных 3D-трансформаций.
1 Добавление суффикса класса к Lightbox
Открой страницу в редакторе Gridbox, выдели плагин Lightbox, перейди в его настройки и в поле Class Suffix добавь имя нужного эффекта (например, effect-1 или любой номер от effect-1 до effect-20):
Class Suffix
effect-12 Добавление библиотеки стилей анимаций (CSS)
Перейди в Инструменты ➝ Редактор кода ➝ CSS и добавь стили для всех 20 эффектов трансформации окон:
CSS
/* Базовая подготовка оверлея и перспективы модального окна */.ba-lightbox { perspective: 1300px; perspective-origin: center center;}.ba-lightbox .ba-lightbox-dialog { transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; transform-style: preserve-3d;}/* Effect 1: Fade In & Scale */.effect-1 .ba-lightbox-dialog { transform: scale(0.7); opacity: 0;}.effect-1.visible-lightbox .ba-lightbox-dialog { transform: scale(1); opacity: 1;}/* Effect 2: Slide In Right */.effect-2 .ba-lightbox-dialog { transform: translateX(25%); opacity: 0;}.effect-2.visible-lightbox .ba-lightbox-dialog { transform: translateX(0); opacity: 1;}/* Effect 3: Slide In Bottom */.effect-3 .ba-lightbox-dialog { transform: translateY(25%); opacity: 0;}.effect-3.visible-lightbox .ba-lightbox-dialog { transform: translateY(0); opacity: 1;}/* Effect 4: Newspaper (Вращение с масштабом) */.effect-4 .ba-lightbox-dialog { transform: scale(0) rotate(720deg); opacity: 0;}.effect-4.visible-lightbox .ba-lightbox-dialog { transform: scale(1) rotate(0deg); opacity: 1;}/* Effect 5: Fall (Падение сверху) */.effect-5 .ba-lightbox-dialog { transform: translateZ(600px) rotateX(20deg); opacity: 0;}.effect-5.visible-lightbox .ba-lightbox-dialog { transform: translateZ(0px) rotateX(0deg); opacity: 1;}/* Effect 6: Side Fall (Падение сбоку) */.effect-6 .ba-lightbox-dialog { transform: translate(30%) translateZ(600px) rotate(10deg); opacity: 0;}.effect-6.visible-lightbox .ba-lightbox-dialog { transform: translate(0%) translateZ(0) rotate(0deg); opacity: 1;}/* Effect 7: Sticky Up (Подъем снизу) */.effect-7 .ba-lightbox-dialog { transform: translateY(100%); opacity: 0;}.effect-7.visible-lightbox .ba-lightbox-dialog { transform: translateY(0); opacity: 1;}/* Effect 8: 3D Flip Horizontal */.effect-8 .ba-lightbox-dialog { transform: rotateY(-70deg); opacity: 0;}.effect-8.visible-lightbox .ba-lightbox-dialog { transform: rotateY(0deg); opacity: 1;}/* Effect 9: 3D Flip Vertical */.effect-9 .ba-lightbox-dialog { transform: rotateX(-70deg); opacity: 0;}.effect-9.visible-lightbox .ba-lightbox-dialog { transform: rotateX(0deg); opacity: 1;}/* Effect 10: 3D Sign */.effect-10 .ba-lightbox-dialog { transform: rotateX(-60deg); transform-origin: 50% 0; opacity: 0;}.effect-10.visible-lightbox .ba-lightbox-dialog { transform: rotateX(0deg); opacity: 1;}/* Effect 11: Super Scaled (Супер-масштаб) */.effect-11 .ba-lightbox-dialog { transform: scale(2); opacity: 0;}.effect-11.visible-lightbox .ba-lightbox-dialog { transform: scale(1); opacity: 1;}/* Effect 12: 3D Slit */.effect-12 .ba-lightbox-dialog { transform: translateZ(-3000px) rotateY(90deg); opacity: 0;}.effect-12.visible-lightbox .ba-lightbox-dialog { transform: translateZ(0) rotateY(0deg); opacity: 1;}/* Effect 13: 3D Rotate Bottom */.effect-13 .ba-lightbox-dialog { transform: translateY(100%) rotateX(90deg); transform-origin: 0 100%; opacity: 0;}.effect-13.visible-lightbox .ba-lightbox-dialog { transform: translateY(0%) rotateX(0deg); opacity: 1;}/* Effect 14: 3D Rotate In */.effect-14 .ba-lightbox-dialog { transform: translateY(-100%) rotateX(90deg); transform-origin: 0 0; opacity: 0;}.effect-14.visible-lightbox .ba-lightbox-dialog { transform: translateY(0%) rotateX(0deg); opacity: 1;}/* Effect 15: Blur Background & Pop */.effect-15 .ba-lightbox-dialog { transform: scale(0.85); filter: blur(5px); opacity: 0;}.effect-15.visible-lightbox .ba-lightbox-dialog { transform: scale(1); filter: blur(0px); opacity: 1;}/* Effect 16: Slide & Tilt */.effect-16 .ba-lightbox-dialog { transform: translateY(-40px) rotate(-5deg); opacity: 0;}.effect-16.visible-lightbox .ba-lightbox-dialog { transform: translateY(0) rotate(0deg); opacity: 1;}/* Effect 17: Zoom & Bounce */.effect-17 .ba-lightbox-dialog { transform: scale(0.5); opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;}.effect-17.visible-lightbox .ba-lightbox-dialog { transform: scale(1); opacity: 1;}/* Effect 18: Horizontal Swing */.effect-18 .ba-lightbox-dialog { transform: rotateY(180deg) scale(0.6); opacity: 0;}.effect-18.visible-lightbox .ba-lightbox-dialog { transform: rotateY(0deg) scale(1); opacity: 1;}/* Effect 19: Perspective Drop */.effect-19 .ba-lightbox-dialog { transform: translateY(-1000px) rotate(-45deg); opacity: 0;}.effect-19.visible-lightbox .ba-lightbox-dialog { transform: translateY(0) rotate(0deg); opacity: 1;}/* Effect 20: Smooth Expand */.effect-20 .ba-lightbox-dialog { transform: scale(0.95); opacity: 0;}.effect-20.visible-lightbox .ba-lightbox-dialog { transform: scale(1); opacity: 1;}Обрати внимание:
После сохранения CSS-кода в глобальном редакторе тебе больше не нужно писать стили под каждое окно — достаточно просто менять класс в настройках плагина Lightbox с effect-1 на любой другой до effect-20.