Горизонтальный поворот страницы

Для реализации данного эффекта необходима следующая структура сайта:

HTML:

<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>

ОБЪЯВЛЕНИЕ

</div>

Текст нашего объявления или меню

</div>

Весь видимый контент сайта

</div>

$(".curlbutton").hover(function() {

$("body").addClass("curlopen");

});

$(".curlcontent").hover(function() {

$("body").removeClass("curlopen");

});

</script>

CSS:

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);
	}
}

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);

}

Посмотреть пример

Демо страница отличается от представленного выше кода, т.к. ней добавлены стили сайта.

.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; }

Фаррух: 18.09.2020 в 09:25
Добрый день ! Прекрасный сайт с его "фишками" для оформления...
Вот и я воспользовался вариантом Горизонт.поворота страницы.
Но вот беда, и я бьюсь уже несколько дней ! По порядку...
Создаю свои страницы с помощ.конструктора сайтов и решил вставить Горизонт.поворот к себе.
Вроде, все получилось, с учетом ограничений конструктора. Но один момент - НИКАК !!!
Мне нужно, чтобы выводимый (при наведении на боковую кнопку) текст моей информации
при прокрутке страницы УХОДИЛ ВМЕСТЕ с видимым контентом страницы.
А получается, то что Вы видите на картинке... Он заползает на заголовок ???
Исправления вносил в следующий фрагмент кода - *Оформление появляющейся информации*:
```
.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;
			}
```
Очень рассчитываю на Вашу помощь.
Ответить
- Фаррух: 18.09.2020 в 09:43
  
  А вот картинки...
  
  Ответить
  - Фаррух: 18.09.2020 в 09:44
    
    https://ibb.co/mFb4YSz
    
    Ответить
    - Alexander: 18.09.2020 в 09:53
      
      Немного не понял, там прокрутки вообще то не должно.быть.
      Скиньте лучше ссылку на саму страницу, сюда или в ВК мне
      
      Ответить
      - Фаррух: 18.09.2020 в 10:39
        
        Шлю, шлю... https://gtp_service.ulkansayt.uz/akciya
        
        Ответить
        
        Alexander: 18.09.2020 в 10:54
        
        Хм... даже незнаю что тут придумать
        Тут получается что это эффект блока, а не страницы
        Соотв. тут поставить кнопку открытия в него и текст выводимый подправить.
        
        Так нужно?
        
        Ответить
        
        Фаррух: 18.09.2020 в 11:41
        
        Ни какой кнопки... Сам эффект - совершенен. Вот бы в блок загнать текст ?!
  - Фаррух: 22.09.2020 в 13:21
    
    Александр ! Необходим твой профессионализм ! Написал на почту - info@atuin.ru
    Спасибо.
    
    Ответить

HTML:

CSS:

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

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

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