регистрация
856материалов
3264комментария
230тем на форуме
6750пользователей

Scroll Animation


Описание:

Немного красивой анимации на web-сайте может быть увлекательным и привлекательным для новых посетителей, анимированные элементы страницы не предлагают значительные изменения в содержании, но может обеспечить более экстраординарный опыт пользователя. Многие разработчики веб-сайтов используют различные способы прокрутки, чтобы сделать свои веб-сайты более заманчивым и интересным для своих зрителей, чтобы они не скучали. Я вам предлогаю простой, одностраничный Scroll Animation для Вашего сайта

Установка:

Создаете страницу динамическую (через редактор страниц) или статическую (в файловым менеджере с расширением html) страницу и вставляете в нее данный код:
Код
<html>
<head>
<title>Scroll Animation</title>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<script type="text/javascript" src="/.s/src/jquery-1.10.2.js"></script>
<style>
html,body{
margin:0px;
padding:0px;
}
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
::-webkit-scrollbar {
          display: none;
}

::-moz-scrollbar {
          display: none;
}

html,
body {
          height: 100%;
}

header {
          position: fixed;
          top: 0;
          height: 250px;
          width: 100%;
          pointer-events: none;
}
header .title {
          position: absolute;
          top: 50%;
          left: 80px;
          color: white;
          font-size: 40px;
          line-height: 40px;
          margin-top: -20px;
          transition: .3s all ease;
          z-index: 999;
          font-family: Roboto;
          font-weight: 300;
          text-transform: capitalize;
}
header .header-bg {
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
          background: #00A6FF;
          transition: .3s all ease;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
}
header.active .title {
          font-size: 20px;
          -webkit-transform: translate(-30px, -85px);
          -moz-transform: translate(-30px, -85px);
          -ms-transform: translate(-30px, -85px);
          -o-transform: translate(-30px, -85px);
          transform: translate(-30px, -85px);
          transition: .3s all ease .15s;
}
header.active .header-bg {
          -webkit-transform: translateY(-170px);
          -moz-transform: translateY(-170px);
          -ms-transform: translateY(-170px);
          -o-transform: translateY(-170px);
          transform: translateY(-170px);
          background: #00A6FF;
          transition: .3s all ease .15s;
}
header.active .cta-ctr {
          -webkit-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          transform: rotate(0deg);
          transition: .5s all ease .2s;
}
header.active .cta:after {
          -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
          -o-transform: rotate(180deg);
          transform: rotate(180deg);
          transition: .5s all ease .2s;
          box-shadow: 0 -8px 12px 1px rgba(0, 0, 0, 0.15);
}
header .cta-ctr {
          position: absolute;
          top: 50px;
          right: 50px;
          bottom: 0;
          -webkit-transform-origin: bottom center;
          -moz-transform-origin: bottom center;
          -ms-transform-origin: bottom center;
          -o-transform-origin: bottom center;
          transform-origin: bottom center;
          -webkit-transform: rotate(-90deg);
          -moz-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
          -o-transform: rotate(-90deg);
          transform: rotate(-90deg);
          transition: .3s all ease;
}
header .cta {
          width: 60px;
          height: 60px;
          background: #00937A;
          border-radius: 50%;
          cursor: pointer;
          transition: .3s all ease;
          pointer-events: auto;
          position: relative;
}
header .cta:after {
          content: "";
          box-shadow: 0 8px 12px 1px rgba(0, 0, 0, 0.15);
          border-radius: 50%;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/arrow-down.svg") no-repeat center 14px transparent;
          -webkit-transform: rotate(90deg);
          -moz-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
          -o-transform: rotate(90deg);
          transform: rotate(90deg);
          transition: .3s all ease;
}
header .cta:hover {
          background-color: #004438;
}

.content-ctr {
          width: 100%;
          height: 100%;
          background: white;
          overflow: scroll;
          position: relative;
}
.content-ctr.active .header-content-ctr {
          height: 0%;
          transition: .3s height ease .45s;
}
.content-ctr.active .header-content-ctr .title {
          transition: .3s all ease;
          opacity: 0;
          -webkit-transform: translateY(-20px);
          -moz-transform: translateY(-20px);
          -ms-transform: translateY(-20px);
          -o-transform: translateY(-20px);
          transform: translateY(-20px);
}
.content-ctr.active .header-content-ctr .par {
          transition: .3s all ease .05s;
          opacity: 0;
          -webkit-transform: translateY(-20px);
          -moz-transform: translateY(-20px);
          -ms-transform: translateY(-20px);
          -o-transform: translateY(-20px);
          transform: translateY(-20px);
}
.content-ctr.active .main-content-ctr {
          height: 100%;
          overflow: scroll;
}
.content-ctr.active .main-content-ctr .title {
          transition: .3s all ease .65s;
          -webkit-transform: translateY(0px);
          -moz-transform: translateY(0px);
          -ms-transform: translateY(0px);
          -o-transform: translateY(0px);
          transform: translateY(0px);
          opacity: 1;
}
.content-ctr.active .main-content-ctr .par {
          transition: .3s all ease .7s;
          -webkit-transform: translateY(0px);
          -moz-transform: translateY(0px);
          -ms-transform: translateY(0px);
          -o-transform: translateY(0px);
          transform: translateY(0px);
          opacity: 1;
}
.content-ctr .title {
          font-family: Roboto;
          margin-bottom: 30px;
          font-size: 34px;
          color: #0078C6;
          transition: .3s all ease;
}
.content-ctr .par {
          font-family: Roboto;
          font-size: 18px;
          line-height: 1.5;
          font-weight: 300;
          color: #777;
}
.content-ctr .header-content-ctr {
          position: relative;
          height: 100%;
          overflow: hidden;
          transition: .3s height ease;
}
.content-ctr .header-content-ctr .title {
          transition: .3s all ease .15s;
}
.content-ctr .header-content-ctr .par {
          transition: .3s all ease .3s;
}
.content-ctr .header-content {
          position: absolute;
          right: 0;
          bottom: 110px;
          left: 80px;
}
.content-ctr .main-content-ctr {
          position: relative;
          min-height: 0%;
          transition: .3s height ease;
          overflow: hidden;
}
.content-ctr .main-content-ctr .title,
.content-ctr .main-content-ctr .par {
          opacity: 0;
          -webkit-transform: translateY(20px);
          -moz-transform: translateY(20px);
          -ms-transform: translateY(20px);
          -o-transform: translateY(20px);
          transform: translateY(20px);
}
.content-ctr .main-content {
          position: relative;
          top: 50%;
          right: 0;
          left: 0;
          margin-left: 50px;
          margin-top: -59px;
}

</style>
</head>
<body translate="no" >

          <div class='content-ctr'>
          <div class='header-content-ctr'>
          <div class='header-content'>
          <div class='title'>Шапка страницы</div>
          <div class='par'>Здесь может быть все что угодно :-)<br></div>
          </div>
          </div>
          <div class='main-content-ctr'>
          <div class='main-content'>
          <div class='title'>Система uCoz</div>
          <div class='par'>uCoz — бесплатная система управления сайтом и хостинг для сайтов, созданных с её использованием.<br>Модули uCoz могут использоваться как в единой связке для создания полнофункционального сайта, так и по отдельности, например, в качестве блог-платформы, интернет-магазина и др.<br>К 2014 году на его основе было создано более 20 млн страничек (из них активны были около 1 млн), на отдельных доменах работали 54 тыс. сайтов.<br>uCoz.ru находится на 73-м месте самых популярных российских сайтов по данным Alexa Internet.<br>Владелец сервиса — ООО «Юкоз Медиа», Россия.</div>
          </div>
          </div>
</div>
<header>
          <div class='header-bg'></div>
          <div class='title'>Scroll Animation</div>
          <div class='cta-ctr'>
          <div class='cta'></div>
          </div>
</header>

          <script>
          (function() {
          var button, contentCtr;

          button = document.querySelector(".cta");

          contentCtr = document.querySelector(".content-ctr");

          button.addEventListener("click", function() {
          var header;
          header = this.parentElement.parentElement;
          header.classList.toggle("active");
          return contentCtr.classList.toggle("active");
          });

          balapaCop("Scroll Animation", "#00A6FF");

}).call(this);
          </script>
</body>
</html>

P.S при создании динамической страница не забудьте добавить код $POWERED_BY$, а то система не даст сохранить шаблон.


Шаблон опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о шаблоне:
Дата добавления материала: 17.03.2017 в 19:30
Материал просмотрен: 466 раз
Категория материала: Шаблоны для uCoz
К материалу оставлен: 1 комментарий

Пожаловаться
Сказать спасибо
Источник

1 комментарий


Umbrella
Umbrella corporation @Umbrella 20.03.2017 15:201
0
Классная вещь, для персональной страницы ей переделаю
avatar
-50% на шаблоны от TemplateMonster
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0