ZorNet.Ru — сайт для вебмастера » HTML и CSS » Горизонтальный поворот страницы на CSS3

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

Данный эффект при наведении клика автоматически развернет страницу, где появится объявление, также может быть различная функция подключена. Здесь по сети разворот происходит всего интернет ресурсе, что по левой стороне остается расстояние, что веб мастер автоматически задает под свой функций. Если здесь мы говорим об описание, как объявление, то оно может быть просто написано. Также можно его красиво предоставить в стильном оформлении. Не исключаю, что некоторые выставят навигацию, так как это очень удобно будет по работе, как пользователям, так и гостям сайта.

Если ставить на отдельную страницу или под операторы, на вам нужную страницу модуля, то отличное решение под рекламу пойдет. По левую сторону по всей высоте будет идти горизонтальная панель, только на вертикальном положении. Она изначально идет в светло прозрачном фоне, и как раз на ней будет написано ключевое слово, что вообще скрывается в блоке. И при наводки клика вы можете воспользоваться. Сам такой эффект в первые вижу, но думаю его можно много где применить, не только под описание или под новости.

Приступаем к установке:

HTML

Код

<div class="gtuklopas">
  <div class="zoprogramerga"></div>
  <div class="etransfolargetan">
  ОБЪЯВЛЕНИЕ
  </div>
</div>
<div class="gukipazernik">
  Ваш информер или текст по теме
</div>
<div class="lzarunirsa">
  <div class="detukipaxma">
  Это видимый текст по умолчанию
  </div>
</div>

Код

$(".gtuklopas").hover(function() {
  $("body").addClass("curlopen");
  });
  $(".detukipaxma").hover(function() {
  $("body").removeClass("curlopen");
  });

CSS

Код

.gtuklopas {
  width:78px;
  height:100%;
  position:fixed;
  z-index:3000;
  left:0;
  transition: all 0.4s ease-in-out;
}
.zoprogramerga {
  opacity:0.4;
  background:#337AB7;
  width:78px;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}
.etransfolargetan {
  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;
}
/*Оформление появляющейся информации*/
.gukipazernik {
  transition: all 0.4s ease-in-out;
  width:257px;
  padding:24px;
  position:fixed;
  top:0;
  left:-258px;
  z-index:1000;
}
/*Классы для обертывания всего сайта*/
.lzarunirsa {
  perspective:2000px;
  overflow:hidden;
  height:100%;
  background:#BFE2FF;
}
.detukipaxma {
  transition: all 0.4s ease-in-out;
  background:#FFF;
  height:100%;
  overflow-x:hidden;
}
/*Действия при наведении на кнопку*/
.curlopen .gtuklopas {
  left:-78px;
}
.curlopen .detukipaxma {
  transform: rotateY(-30deg) translateX(260px);
  box-shadow: 4.7px 29.8px 29.8px rgba(23, 22, 22, 0.45);
}
.curlopen .gukipazernik {
  left: 0;
}
@media screen and (max-width:800px) {
  .curlopen .detukipaxma {
  transform: rotateY(-30deg) translateX(300px);
  }
}

Также здесь можно задействовать информер или по тематическому направлению вашего интернет ресурса. Но безусловно будет все оригинально смотреться и преподносится в уникальном виде.

Демонстрация

23 Июня 2018 Просмотров: 1896 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 23 Июня 2018 20:31¹ 0 Если у вас не конструктор uCoz, то вам обязательно нужна подключенная библиотека для полноценной работы. Код <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>