Для реализации данного эффекта необходима следующая структура сайта:
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 |
<div class="curlbutton"> <div class="curlbuttonfon"></div> <div class="curlbuttontext"> <!-- Название кнопки, которая будет поворачивать сайт --> ОБЪЯВЛЕНИЕ </div> </div> <div class="curlmessage"> Текст нашего объявления или меню </div> <div class="curlmain"> <div class="curlcontent"> Весь видимый контент сайта </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(".curlbutton").hover(function() { $("body").addClass("curlopen"); }); $(".curlcontent").hover(function() { $("body").removeClass("curlopen"); }); </script> |
CSS:
|
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
html { height:100%; } body { height:100%; margin:0; padding:0; } /*Оформление кнопки для разворота*/ .curlbutton { width:80px; height:100%; position:fixed; z-index:3000; left:0; transition: all 0.5s ease-in-out; } .curlbuttonfon { opacity:0.5; background:#337AB7; width:80px; height:100%; position:absolute; top:0; left:0; } .curlbuttontext { position:absolute; text-align:center; color: #FFF; top:0; left:0; font-size:40px; line-height:80px; font-weight:bold; height:100%; vertical-align:center; text-shadow: 0 0 6px #000; writing-mode:tb-rl; transform: rotate(180deg); pointer-events: none; } /*Оформление появляющейся информации*/ .curlmessage { transition: all 0.5s ease-in-out; width:260px; padding:25px; position:fixed; top:0; left:-260px; z-index:1000; } /*Классы для обертывания всего сайта*/ .curlmain { perspective:2000px; overflow:hidden; height:100%; background:#BFE2FF; } .curlcontent { transition: all 0.5s ease-in-out; background:#FFF; height:100%; overflow-x:hidden; } /*Действия при наведении на кнопку*/ .curlopen .curlbutton { left:-80px; } .curlopen .curlcontent { transform: rotateY(-30deg) translateX(260px); box-shadow: 5px 30px 30px rgba(0,0,0,0.4); } .curlopen .curlmessage { left: 0; } /*Корректировка на малые экраны*/ @media screen and (max-width:800px) { .curlopen .curlcontent { transform: rotateY(-30deg) translateX(300px); } } |
Демо страница отличается от представленного выше кода, т.к. ней добавлены стили сайта.
Добрый день ! Прекрасный сайт с его "фишками" для оформления...
Вот и я воспользовался вариантом Горизонт.поворота страницы.
Но вот беда, и я бьюсь уже несколько дней ! По порядку...
Создаю свои страницы с помощ.конструктора сайтов и решил вставить Горизонт.поворот к себе.
Вроде, все получилось, с учетом ограничений конструктора. Но один момент - НИКАК !!!
Мне нужно, чтобы выводимый (при наведении на боковую кнопку) текст моей информации
при прокрутке страницы УХОДИЛ ВМЕСТЕ с видимым контентом страницы.
А получается, то что Вы видите на картинке... Он заползает на заголовок ???
Исправления вносил в следующий фрагмент кода - *Оформление появляющейся информации*:
[code].curlmessage {
transition: all 0.5s ease-in-out;
width:415px;
padding:25px;
margin:220px 0 0 190px;
position: absolute;
top:0;
left:-415px;
z-index:1000;
font-style: italic;
color: #FFF;
}[/code]
Очень рассчитываю на Вашу помощь.
А вот картинки...[img]https://ibb.co/mFb4YSz[/img]
https://ibb.co/mFb4YSz
Немного не понял, там прокрутки вообще то не должно.быть.
Скиньте лучше ссылку на саму страницу, сюда или в [url="https://vk.com/xazbix"]ВК[/url] мне
Шлю, шлю... https://gtp_service.ulkansayt.uz/akciya
Хм... даже незнаю что тут придумать
Тут получается что это эффект блока, а не страницы
Соотв. тут поставить кнопку открытия в него и текст выводимый подправить.
Так нужно?
Ни какой кнопки... Сам эффект - совершенен. Вот бы в блок загнать текст ?!
Александр ! Необходим твой профессионализм ! Написал на почту - info@atuin.ru
Спасибо.