| Kosten | Суббота, 23 Июня 2018, 21:18 | Сообщение 1 |
| В этом уроке узнаете, как можно повернуть в горизонтальном положений страницу на сайте, и этим сделать место под описание или поставить навигацию для портала. Вообще образуется место, которое по ширине мы сами самостоятельно задаем. А, чтоб для гостей и пользователя было понятно, то по левую сторону будет знак, во весь рост, а точнее плашка, что создана в прозрачном тоне, но здесь по основной стилистике выводится. Чтоб понять суть работы, и вообще для чего нужен это разворот, то как пример.
Гость или пользователь заводит на сайт, где стразу видит прозрачную полоса, где на ней написано, как пример, это "Объявление", где он наводит клик и происходит оригинальный эффект. А точнее страница отъезжает по правую сторону и остается место, там то и как раз вы разместите, то что вам нужно. Или то, что было на панели написано, чтоб сразу обозначить, какая функция скрывается, и где можно ней воспользоваться, в хорошем смысле.
Приступаем к установке:
HTML
Код <div class="lsaztun"> <div class="tukopad"></div> <div class="tukopazerun"> ОБЪЯВЛЕНИЕ </div> </div> <div class="uresaxrun"> Ваш информер или текст по теме </div> <div class="egasret"> <div class="vunilopsam"> Это видимый текст по умолчанию </div> </div>
JS
Код $(".lsaztun").hover(function() {
$("body").addClass("dsazum");
});
$(".vunilopsam").hover(function() {
$("body").removeClass("dsazum");
});
CSS
Код .lsaztun {
width:78px;
height:100%;
position:fixed;
z-index:3000;
left:0;
transition: all 0.4s ease-in-out;
}
.tukopad {
opacity:0.4;
background:#337AB7;
width:78px;
height:100%;
position:absolute;
top:0;
left:0;
}
.tukopazerun {
position:absolute;
text-align:center;
color: #f4f4f9;
top:0;
left:0;
font-size:39px;
line-height:75px;
font-weight:bold;
height:100%;
vertical-align:center;
text-shadow: 0 0 5px #141415;
writing-mode:tb-rl;
transform: rotate(180deg);
pointer-events: none;
}
/*Оформление появляющейся информации*/
.uresaxrun {
transition: all 0.4s ease-in-out;
width:257px;
padding:24px;
position:fixed;
top:0;
left:-258px;
z-index:1000;
}
/*Классы для обертывания всего сайта*/
.egasret {
perspective:2000px;
overflow:hidden;
height:100%;
background:#BFE2FF;
}
.vunilopsam {
transition: all 0.4s ease-in-out;
background:#FFF;
height:100%;
overflow-x:hidden;
}
/*Действия при наведении на кнопку*/
.dsazum .lsaztun {
left:-78px;
}
.dsazum .vunilopsam {
transform: rotateY(-30deg) translateX(260px);
box-shadow: 4.7px 29.8px 29.8px rgba(23, 22, 22, 0.45);
}
.dsazum .gukipazernik {
left: 0;
}
@media screen and (max-width:800px) {
.dsazum .vunilopsam {
transform: rotateY(-30deg) translateX(300px);
}
}
Также, если у кого не система uCoz, то нужно подключить библеотеку.
Код <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
На этом вся установка.
Демонстрация
| | Страна: (RU) |
| |
