Для реализации данного эффекта воспользуемся лайтбоксом fancyBox3
Делаем структуру страницы, подключаем скрипты и стили. Более подробное описание дано в комментариях в коде.
Сдвиг страницы сайта вправо:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<html> <head> <title>Сдвиг страницы сайта вправо</title> <link rel="stylesheet" href="jquery.fancybox.css"> <link rel="stylesheet" href="my.css"> </head> <body> <div class="allpage"> <p>Внутри блока allpage размещаем весь видимый контент сайта</p> <p><a data-fancybox href="image.jpg">Картинка</a></p> <p><a data-fancybox="images" href="image.jpg">Галерея</a></p> <p><a data-fancybox data-src="#hidden-content" href="#">Окно</a></p> <p><a data-fancybox href="youtube.video">Видео</a></p> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.fancybox.js"></script> <script> $('[data-fancybox]').fancybox({ /* выключаем анимацию, чтобы информация за страницей появлялась без эффекта */ animationEffect : "false", /* ставим продолжительность анимации равной продолжительности ухода страницы, чтобы информация за страницей не исчезла раньше времени */ animationDuration : 600, /* перед закртиыем окна удаляем класс и возвращаем страницу */ beforeClose : function() { $('body').removeClass('modalopen'); } }); /* Перед открытием модального окна добавляем класс и убираем страницу */ $('[data-fancybox]').click(function() { $('body').addClass('modalopen'); }); </script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
html { height:100%; /* устанавливаем высоту в 100% для всей страницы */ } body { margin:0; padding:0; overflow:hidden; /* убираем прокрутку, чтобы она уезжала вместе со страницей */ height:100%; } .allpage { height:100%; overflow:auto; background:#FFF; /* устанавливаем цвет фона, чтобы не просвечивали модальные окна*/ position:relative; z-index: 999999; /* устанавливаем перекрытие страницы больше, чем у модальных окон */ transition: all 0.6s ease-in-out; /* Продолжительность ухода страницы */ left:0; } .modalopen .allpage { left:100%; /* сдвигаем страницу вправо */ } |
Демо страница отличается от представленного выше кода. В ней добавлены стили сайта и небольшая корректировка стиля для fancyBox3.
Увеличение и исчезание страницы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<html> <head> <title>Сдвиг страницы сайта вправо</title> <link rel="stylesheet" href="jquery.fancybox.css"> <link rel="stylesheet" href="my.css"> </head> <body> <div class="allpage"> <p>Внутри блока allpage размещаем весь видимый контент сайта</p> <p><a data-fancybox href="image.jpg">Картинка</a></p> <p><a data-fancybox="images" href="image.jpg">Галерея</a></p> <p><a data-fancybox data-src="#hidden-content" href="#">Окно</a></p> <p><a data-fancybox href="youtube.video">Видео</a></p> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.fancybox.js"></script> <script> $('[data-fancybox]').fancybox({ /* выключаем анимацию, чтобы информация за страницей появлялась без эффекта */ animationEffect : "false", /* ставим продолжительность анимации равной продолжительности ухода страницы, чтобы информация за страницей не исчезла раньше времени */ animationDuration : 600, /* перед закртиыем окна удаляем классы и возвращаем страницу */ beforeClose : function() { $('body').removeClass('modalopen2').removeClass('modalopen'); } }); /* перед открытием модального убираем страницу и ставим на задний план */ $('[data-fancybox]').click(function() { $('body').addClass('modalopen').delay(600).queue(function(){ $(this).addClass('modalopen2').dequeue();}); }); </script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
html { height:100%; /* устанавливаем высоту в 100% для всей страницы */ } body { margin:0; padding:0; overflow:hidden; /* убираем прокрутку, чтобы она уезжала вместе со страницей */ height:100%; } .allpage { height:100%; overflow:auto; background:#FFF; /* устанавливаем цвет фона, чтобы не просвечивали модальные окна*/ position:relative; z-index: 999999; /* устанавливаем перекрытие страницы больше, чем у модальных окон */ transition: all 0.6s ease-in-out; /* Продолжительность ухода страницы */ } .modalopen .allpage { opacity:0; transform:scale(1.1); } .modalopen2 .allpage { z-index:-1; } |
Демо страница отличается от представленного выше кода. В ней добавлены стили сайта и небольшая корректировка стиля для fancyBox3.
Добавить комментарий: