Главная | Готовые элементы для сайта с html, css и JavaScript кодом
Готовые элементы для сайта с html, css и JavaScript кодом
На данной странице представлены готовые, бесплатные элементы для сайта с готовым html, css и javaScript кодом. Все элементы показываются в реальном времени, их можно испробовать, проскролить, покликать и посмотреть в разных размерах экрана. Тема элементов выбирается табами. Код подгружается в нижней части представленного элемента, открыть его можно нажав на кнопку «смотреть код». Копируется код элемента в буфер обмена по нажатию на значок языка, в блоке с html кодом с названием html и т.д. Готовые элементы интерфейса сайта, которые можно просмотреть, испробовать и скопировать намного упрощают вашу работу при создании сайтов, весь html, css и JavaScript код быстро копируется и легко редактируется у вас в проекте. Если не знаете как сделать тот или иной элемент, на этой странице можно всегда подсмотреть и ускорить процес работы.
Есть идеи как сделать программу ещё проще для пользования или какую тему для элементов добавить ещё? Пиши в комментариях.
Элементы для сайта
Скрыть описание всех элементов
Элементы
Разделы для сайта
Меню для сайта
СЛАЙДЕР и карусель
Фото галерея
Timeline & progressbar
Карточка товара и цен
Hover эффект
Аккордеон
Checkbox и input
Форма для сайта
Обратный отсчёт и прогресс
Popup и модальное окно
Preloader
Размер экрана px
Full экран
Сбросить
Размер вашего экрана 2000 px
Размер экрана с элементом: px
<div class="contents"> <p class="bezel">Css эфект Текста. Да прибудет с вами Css.</p> </div>
.contents {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.bezel {
font-family: 'Oswald', sans-serif;
font-size: 100px;
font-weight: bold;
color: #9EA96E;
text-shadow: 1px 2px 4px rgba(0,0,0,0.6), -1px -1px 2px rgba(255,255,255,0.5);
animation: zoom 1s ease 0s 1;
}
@keyframes zoom {
0% {
text-shadow: 0px 0 0 rgba(0,0,0,0.6), 0 0 0 rgba(255,255,255,0.5);
}
20% {
text-shadow: 0px 0 0 rgba(0,0,0,0.6), 0 0 0 rgba(255,255,255,0.5);
}
100% {
text-shadow: 1px 2px 4px rgba(0,0,0,0.6), -1px -1px 2px rgba(255,255,255,0.5);
}
}Css Эффект для текста
Открыть элемент
<section>
<div class="container">
<h1 data-text="CIFAR">CIFAR</h1>
</div>
</section>section {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #09111b;
}
.container h1 {
font-size: 20vw;
color: rgb(0, 238, 255);
position: relative;
}
.container h1::before {
position: absolute;
content: attr(data-text);
text-shadow: 0px 0px 20px rgb(0, 238, 255);
filter: blur(10px) brightness(0);
animation: flicker 2s linear forwards;
animation-delay: 1s;
}
@keyframes flicker {
0% {
filter: blur(5px) brightness(1);
}
3% {
filter: blur(5px) brightness(0);
}
6% {
filter: blur(5px) brightness(0);
}
7% {
filter: blur(5px) brightness(1);
}
8% {
filter: blur(5px) brightness(0);
}
9% {
filter: blur(5px) brightness(1);
}
10% {
filter: blur(5px) brightness(0);
}
20% {
filter: blur(5px) brightness(1);
}
50% {
filter: blur(5px) brightness(1);
}
99% {
filter: blur(5px) brightness(0);
}
100% {
filter: blur(5px) brightness(1);
}
}Неоновый CSS текст с мерцающим эффектом
Открыть элемент
<section id="sec-1">
<div class="container">
<h1>Кнопка прокрутки вниз</h1>
<a href="#sec-2">
<div class="scroll-down"></div>
</a>
</div>
</section>
<section id="sec-2">
<div class="container">
<h1>Это второй раздел</h1>
</div>
</section>section {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#sec-1 {
background-color: rgb(214, 228, 92);
}
#sec-2 {
background-color: aliceblue;
}
.scroll-down {
height: 50px;
width: 30px;
border: 2px solid black;
position: absolute;
left: 50%;
bottom: 20px;
border-radius: 50px;
cursor: pointer;
}
.scroll-down::before,
.scroll-down::after {
content: "";
position: absolute;
top: 20%;
left: 50%;
height: 10px;
width: 10px;
transform: translate(-50%, -100%) rotate(45deg);
border: 2px solid black;
border-top: transparent;
border-left: transparent;
animation: scroll-down 1s ease-in-out infinite;
}
.scroll-down::before {
top: 30%;
animation-delay: 0.3s;
/* animation: scroll-down 1s ease-in-out infinite; */
}
@keyframes scroll-down {
0% {
/* top:20%; */
opacity: 0;
}
30% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
top: 90%;
opacity: 0;
}
}Анимированная Css кнопка прокрутки вниз
Открыть элемент
<div class="group" id="group6">
<div class="toggler" id="toggler_6-1">
<button type="button">
<input type="checkbox">
<span class="outer">
<span class="inner"></span>
</span>
</button>
</div>
<div class="toggler" id="toggler_6-2">
<button type="button">
<input type="checkbox">
<span class="outer">
<span class="inner"></span>
</span>
</button>
</div>
<div class="toggler" id="toggler_6-3">
<button type="button">
<input type="checkbox">
<span class="outer">
<span class="inner"></span>
</span>
</button>
</div>
<div class="toggler" id="toggler_6-4">
<button type="button">
<input type="checkbox" class="input-1">
<input type="checkbox" class="input-2">
<span class="outer">
<span class="one"></span>
<span class="two"></span>
</span>
</button>
</div>
</div>#toggler_6-1 button {
top: -10px;
width: 70px;
height: 70px;
}
#toggler_6-1 .outer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 4px solid #9D7DBF;
}
#toggler_6-1 .inner {
top: 23px;
left: 30px;
transform: rotateZ(45deg) translateX(0) translateY(0);
transition: transform 350ms ease, width 350ms ease;
width: 20px;
height: 4px;
background-color: #9D7DBF;
}
#toggler_6-1 .inner, #toggler_6-1 .inner::before, #toggler_6-1 .inner::after {
position: absolute;
}
#toggler_6-1 .inner::before, #toggler_6-1 .inner::after {
content: "";
display: block;
height: 4px;
background-color: #9D7DBF;
transition: transform 350ms ease;
}
#toggler_6-1 .inner::before {
top: 0;
right: 0;
width: 20px;
transform-origin: top right;
transform: rotateZ(-90deg) translateY(-4px) translateX(-1px);
}
#toggler_6-1 .inner::after {
top: 0;
right: 0;
width: 26px;
transform: rotateZ(-45deg) translateY(8px) translateX(-8px);
transition: transform 350ms ease, background-color 350ms ease;
}
#toggler_6-1 input:checked + .outer .inner {
transform: rotateZ(45deg) translateX(-5px) translateY(13px);
width: 30px;
}
#toggler_6-1 input:checked + .outer .inner::before {
width: 30px;
transform: rotateZ(-90deg) translateY(-17.5px) translateX(12.5px);
}
#toggler_6-1 input:checked + .outer .inner::after {
transform: rotateZ(-45deg) translateY(1px) translateX(-47px);
background-color: transparent;
}
#toggler_6-2 button {
top: -10px;
width: 70px;
height: 70px;
}
#toggler_6-2 .outer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 4px solid #9D7DBF;
transition: background-color 350ms ease;
}
#toggler_6-2 .inner {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: transform 350ms ease;
width: 30px;
height: 4px;
background-color: #9D7DBF;
transition: background-color 350ms ease;
}
#toggler_6-2 .inner, #toggler_6-2 .inner::before, #toggler_6-2 .inner::after {
position: absolute;
}
#toggler_6-2 .inner::before, #toggler_6-2 .inner::after {
content: "";
display: block;
width: 20px;
height: 4px;
top: 0;
right: 0;
background-color: #9D7DBF;
transition: background-color 350ms ease, width 350ms ease, transform 350ms ease;
}
#toggler_6-2 .inner::before {
transform: rotateZ(45deg) translateY(-7px) translateX(-1px);
}
#toggler_6-2 .inner::after {
transform: rotateZ(-45deg) translateY(7px) translateX(-1px);
}
#toggler_6-2 input:checked + .outer {
background-color: #9D7DBF;
}
#toggler_6-2 input:checked + .outer .inner {
background-color: transparent;
}
#toggler_6-2 input:checked + .outer .inner::before, #toggler_6-2 input:checked + .outer .inner::after {
background-color: #3B1167;
width: 30px;
transform: none;
}
#toggler_6-3 button {
top: -10px;
width: 70px;
height: 70px;
}
#toggler_6-3 .outer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 4px solid #9D7DBF;
transition: background-color 350ms ease;
}
#toggler_6-3 .inner {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: transform 350ms ease;
width: 30px;
height: 4px;
background-color: #9D7DBF;
transition: background-color 350ms ease;
}
#toggler_6-3 .inner, #toggler_6-3 .inner::before, #toggler_6-3 .inner::after {
position: absolute;
}
#toggler_6-3 .inner::before, #toggler_6-3 .inner::after {
content: "";
display: block;
width: 20px;
height: 4px;
top: 0;
right: 0;
background-color: #9D7DBF;
transition: background-color 350ms ease, width 350ms ease, transform 350ms ease;
}
#toggler_6-3 .inner::before {
transform: rotateZ(45deg) translateY(-7px) translateX(-1px);
}
#toggler_6-3 .inner::after {
transform: rotateZ(-45deg) translateY(7px) translateX(-1px);
}
#toggler_6-3 input:checked + .outer {
background-color: #9D7DBF;
}
#toggler_6-3 input:checked + .outer .inner::before, #toggler_6-3 input:checked + .outer .inner::after {
background-color: #3B1167;
width: 30px;
}
#toggler_6-3 input:checked + .outer .inner::before {
transform: rotateZ(45deg) translateY(0) translateX(0);
}
#toggler_6-3 input:checked + .outer .inner::after {
transform: rotateZ(-45deg) translateY(0) translateX(0);
}
#toggler_6-4 button {
top: -10px;
width: 70px;
height: 70px;
}
#toggler_6-4 .outer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 4px solid #9D7DBF;
}
#toggler_6-4 .one, #toggler_6-4 .two {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: transform 350ms ease;
width: 4px;
height: 4px;
}
#toggler_6-4 .one, #toggler_6-4 .one::before, #toggler_6-4 .one::after, #toggler_6-4 .two, #toggler_6-4 .two::before, #toggler_6-4 .two::after {
position: absolute;
}
#toggler_6-4 .one::before, #toggler_6-4 .one::after, #toggler_6-4 .two::before, #toggler_6-4 .two::after {
content: "";
display: block;
top: 0;
left: 0;
width: 20px;
height: 4px;
background-color: #9D7DBF;
animation-duration: 700ms;
animation-fill-mode: forwards;
}
#toggler_6-4 .one::before {
transform: rotateZ(45deg) translateY(-4.5px) translateX(-4px);
animation-name: t_6-4_before_forwards;
}
#toggler_6-4 .one::after {
transform: rotateZ(-45deg) translateY(4.5px) translateX(-4px);
animation-name: t_6-4_after_forwards;
}
#toggler_6-4 .two::before {
transform: translateX(-12px);
}
#toggler_6-4 .two::after {
transform: translateX(-3px);
}
#toggler_6-4 input.input-1 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#toggler_6-4 input.input-1:not(:checked) ~ .outer span.one::before, #toggler_6-4 input.input-1:not(:checked) ~ .outer span.one::after {
animation-name: none;
}
#toggler_6-4 input.input-1:checked {
display: none;
}
#toggler_6-4 input.input-2:checked ~ .outer span.one::before {
animation-name: t_6-4_before_backwards;
}
#toggler_6-4 input.input-2:checked ~ .outer span.one::after {
animation-name: t_6-4_after_backwards;
}
@keyframes t_6-4_before_forwards {
0% {
transform: rotateZ(45deg) translateY(-4.5px) translateX(-4px);
}
50% {
transform: rotateZ(0) translateY(-12.5px) translateX(-8px);
}
100% {
transform: rotateZ(0) translateY(0) translateX(-8px);
}
}
@keyframes t_6-4_after_forwards {
0% {
transform: rotateZ(-45deg) translateY(4.5px) translateX(-4px);
}
50% {
transform: rotateZ(0) translateY(12.5px) translateX(-8px);
}
100% {
transform: rotateZ(0) translateY(0) translateX(-8px);
}
}
@keyframes t_6-4_before_backwards {
0% {
transform: rotateZ(0) translateY(0) translateX(-8px);
}
50% {
transform: rotateZ(0) translateY(-12.5px) translateX(-8px);
}
100% {
transform: rotateZ(45deg) translateY(-4.5px) translateX(-4px);
}
}
@keyframes t_6-4_after_backwards {
0% {
transform: rotateZ(0) translateY(0) translateX(-8px);
}
50% {
transform: rotateZ(0) translateY(12.5px) translateX(-8px);
}
100% {
transform: rotateZ(-45deg) translateY(4.5px) translateX(-4px);
}
}
.toggler {
width: 150px;
height: 150px;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.toggler[id^=toggler_6] {
background-color: #3B1167;
}
.toggler::after {
content: attr(id);
display: block;
position: absolute;
bottom: 10px;
color: white;
font-size: 12px;
font-family: monospace;
}CSS hamburger menu checkbox toggles 6
Каждая кнопка под своим номером как в index файле, так и в файле css. Например, id toggler_6-1, в стилях она будет под селектором #toggler_6-1. Точно так же и для всех кнопок.
Открыть элемент
<div class="group" id="group5">
<div class="toggler" id="toggler_5-1">
<button type="button">
<input type="checkbox">
<span></span>
</button>
</div>
<div class="toggler" id="toggler_5-2">
<button type="button">
<input type="checkbox">
<span></span>
</button>
</div>
<div class="toggler" id="toggler_5-3">
<button type="button">
<input type="checkbox">
<span></span>
</button>
</div>
<div class="toggler" id="toggler_5-4">
<button type="button">
<input type="checkbox" class="input-1">
<input type="checkbox" class="input-2">
<span></span>
</button>
</div>
</div>#toggler_5-1 span {
top: 40%;
transform: translateY(-50%);
transition: transform 350ms ease;
width: 100%;
}
#toggler_5-1 span, #toggler_5-1 span::before, #toggler_5-1 span::after {
position: absolute;
left: 0;
height: 9px;
}
#toggler_5-1 span::before, #toggler_5-1 span::after {
content: "";
display: block;
top: 0;
width: 50px;
background-color: #C0C0C0;
}
#toggler_5-1 span::before {
transform: rotateZ(-45deg) translateX(-12px) translateY(12px);
transform-origin: bottom left;
}
#toggler_5-1 span::after {
transform: rotateZ(45deg) translateX(18px) translateY(6px);
transform-origin: bottom right;
}
#toggler_5-1 input:checked + span {
transform: rotateX(180deg);
}
#toggler_5-2 span {
top: 40%;
transform: translateY(-50%);
width: 100%;
}
#toggler_5-2 span, #toggler_5-2 span::before, #toggler_5-2 span::after {
position: absolute;
left: 0;
height: 9px;
}
#toggler_5-2 span::before, #toggler_5-2 span::after {
content: "";
display: block;
top: 0;
width: 50px;
background-color: #C0C0C0;
transition: transform 350ms ease;
}
#toggler_5-2 span::before {
transform: rotateZ(-45deg) translateX(-12px) translateY(12px);
transform-origin: bottom left;
}
#toggler_5-2 span::after {
transform: rotateZ(45deg) translateX(18px) translateY(6px);
transform-origin: bottom right;
}
#toggler_5-2 input:checked + span::before {
transform: rotateZ(-45deg) translateX(9px) translateY(33px);
}
#toggler_5-2 input:checked + span::after {
transform: rotateZ(45deg) translateX(-3px) translateY(27px);
}
#toggler_5-3 span {
top: 40%;
transform: rotateZ(0) translateX(0) translateY(-50%);
transition: transform 350ms ease;
width: 100%;
}
#toggler_5-3 span, #toggler_5-3 span::before, #toggler_5-3 span::after {
position: absolute;
left: 0;
height: 9px;
}
#toggler_5-3 span::before, #toggler_5-3 span::after {
content: "";
display: block;
top: 0;
width: 50px;
background-color: #C0C0C0;
}
#toggler_5-3 span::before {
transform: rotateZ(-45deg) translateX(-12px) translateY(12px);
transform-origin: bottom left;
transition: transform 350ms ease;
}
#toggler_5-3 span::after {
transform: rotateZ(45deg) translateX(18px) translateY(6px);
transform-origin: bottom right;
}
#toggler_5-3 input:checked + span {
transform: rotateZ(-90deg) translateX(-10px) translateY(14px);
}
#toggler_5-3 input:checked + span::before {
transform: rotateZ(-45deg) translateX(30px) translateY(12px);
}
#toggler_5-4 span {
top: 40%;
transform: translateY(-50%);
width: 100%;
transition: transform 700ms ease;
}
#toggler_5-4 span, #toggler_5-4 span::before, #toggler_5-4 span::after {
position: absolute;
left: 0;
height: 9px;
}
#toggler_5-4 span::before, #toggler_5-4 span::after {
content: "";
display: block;
top: 0;
width: 50px;
background-color: #C0C0C0;
animation-duration: 700ms;
animation-fill-mode: forwards;
}
#toggler_5-4 span::before {
transform: rotateZ(-45deg) translateX(-12px) translateY(12px);
transform-origin: bottom left;
animation-name: t_5-4_before_forwards;
}
#toggler_5-4 span::after {
transform: rotateZ(45deg) translateX(18px) translateY(6px);
transform-origin: bottom right;
animation-name: t_5-4_after_forwards;
}
#toggler_5-4 span.disabled::before, #toggler_5-4 span.disabled::after {
animation: none;
}
#toggler_5-4 input.input-1 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#toggler_5-4 input.input-1:not(:checked) ~ span::before, #toggler_5-4 input.input-1:not(:checked) ~ span::after {
animation-name: none;
}
#toggler_5-4 input.input-1:checked {
display: none;
}
#toggler_5-4 input.input-1:checked ~ span {
transform: translateY(34px);
}
#toggler_5-4 input.input-2:checked + span {
transform: translateY(-50%);
}
#toggler_5-4 input.input-2:checked + span::before {
animation-name: t_5-4_before_backwards;
}
#toggler_5-4 input.input-2:checked + span::after {
animation-name: t_5-4_after_backwards;
}
@keyframes t_5-4_before_forwards {
0% {
width: 50px;
transform: rotateZ(-45deg) translateX(-12px) translateY(12px);
}
50% {
width: 9px;
transform: rotateZ(-45deg) translateX(29.5px) translateY(12px);
}
100% {
width: 50px;
transform: rotateZ(-45deg) translateX(29.5px) translateY(12px);
}
}
@keyframes t_5-4_after_forwards {
0% {
width: 50px;
transform: rotateZ(45deg) translateX(18px) translateY(6px);
}
50% {
width: 9px;
transform: rotateZ(45deg) translateX(5.5px) translateY(-22px);
}
100% {
width: 50px;
transform: rotateZ(45deg) translateX(-23.5px) translateY(6px);
}
}
@keyframes t_5-4_before_backwards {
0% {
width: 50px;
transform: rotateZ(-45deg) translateX(29.5px) translateY(12px);
}
50% {
width: 9px;
transform: rotateZ(-45deg) translateX(29.5px) translateY(12px);
}
100% {
width: 50px;
transform: rotateZ(-45deg) translateX(-12px) translateY(12px);
}
}
@keyframes t_5-4_after_backwards {
0% {
width: 50px;
transform: rotateZ(45deg) translateX(-23.5px) translateY(6px);
}
50% {
width: 9px;
transform: rotateZ(45deg) translateX(5.5px) translateY(-22px);
}
100% {
width: 50px;
transform: rotateZ(45deg) translateX(18px) translateY(6px);
}
}
.toggler {
width: 150px;
height: 150px;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.toggler[id^=toggler_5] {
background-color: #161616;
}
.toggler::after {
content: attr(id);
display: block;
position: absolute;
bottom: 10px;
color: white;
font-size: 12px;
font-family: monospace;
}CSS hamburger menu checkbox toggles 5
Каждая кнопка под своим номером как в index файле, так и в файле css. Например, id toggler_5-1, в стилях она будет под селектором #toggler_5-1. Точно так же и для всех кнопок.
Открыть элемент
<div class="group" id="group4">
<div class="toggler" id="toggler_4-1">
<button type="button">
<input type="checkbox">
<span></span>
</button>
</div>
<div class="toggler" id="toggler_4-2">
<button type="button">
<input type="checkbox">
<span></span>
</button>
</div>
<div class="toggler" id="toggler_4-3">
<button type="button">
<input type="checkbox">
<span></span>
</button>
</div>
<div class="toggler" id="toggler_4-4">
<button type="button">
<input type="checkbox" class="input-1">
<input type="checkbox" class="input-2">
<span class="one"></span>
<span class="two"></span>
</button>
</div>
</div>.group {
width: 90%;
margin: 40px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
padding: 20px;
}
.group#group4 {
background-color: #D4A86A;
}
button {
position: relative;
width: 60px;
height: 60px;
display: block;
border-radius: 0;
border: none;
background-color: transparent;
background-image: none;
padding: 0;
}
button:focus {
outline: none;
}
input[type=checkbox] {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
opacity: 0;
}
input[type=checkbox]:focus {
outline: none;
}
button span {
display: block;
pointer-events: none;
}
button {
position: relative;
width: 60px;
height: 60px;
display: block;
border-radius: 0;
border: none;
background-color: transparent;
background-image: none;
padding: 0;
}
button:focus {
outline: none;
}
input[type=checkbox] {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
opacity: 0;
}
input[type=checkbox]:focus {
outline: none;
}
button span {
display: block;
pointer-events: none;
}
#toggler_4-1 span {
top: 50%;
transform: translateY(-50%);
}
#toggler_4-1 span, #toggler_4-1 span::after {
position: absolute;
left: 0;
width: 100%;
height: 9px;
background-color: #FFDBAA;
}
#toggler_4-1 span::after {
content: "";
display: block;
top: 0;
transform: rotateZ(-90deg);
transition: transform 350ms ease;
}
#toggler_4-1 input:checked + span::after {
transform: rotateZ(0);
}
#toggler_4-2 span {
top: 50%;
transform: translateY(-50%) rotateZ(0);
}
#toggler_4-2 span, #toggler_4-2 span::after {
position: absolute;
left: 0;
width: 100%;
height: 9px;
background-color: #FFDBAA;
transition: transform 700ms ease;
}
#toggler_4-2 span::after {
content: "";
display: block;
top: 0;
transform: rotateZ(-90deg);
}
#toggler_4-2 input:checked + span {
transform: translateY(-50%) rotateZ(360deg);
}
#toggler_4-2 input:checked + span::after {
transform: rotateZ(0deg);
}
#toggler_4-3 span {
top: 0;
left: 25.5px;
width: 9px;
height: 60px;
border-radius: 0;
transition: width 350ms ease, left 350ms ease, border-radius 350ms ease;
}
#toggler_4-3 span, #toggler_4-3 span::after {
position: absolute;
background-color: #FFDBAA;
}
#toggler_4-3 span::after {
content: "";
display: block;
top: 25px;
left: -25.5px;
width: 60px;
height: 9px;
transition: width 350ms ease, left 350ms ease, background-color 350ms ease;
}
#toggler_4-3 input:checked + span {
width: 60px;
left: 0;
border-radius: 50%;
}
#toggler_4-3 input:checked + span::after {
width: 30px;
left: 15.5px;
background-color: #553100;
}
#toggler_4-4 span {
position: absolute;
background-color: #FFDBAA;
animation-duration: 1050ms;
animation-fill-mode: forwards;
}
#toggler_4-4 span.one {
top: 25px;
left: 0;
width: 100%;
height: 9px;
transform-origin: top right;
animation-name: t_4-4_one_backwards;
}
#toggler_4-4 span.two {
top: 0;
left: 25px;
width: 9px;
height: 100%;
transform-origin: top left;
animation-name: t_4-4_two_backwards;
}
#toggler_4-4 input.input-1 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#toggler_4-4 input.input-1:not(:checked) ~ span {
animation-name: none;
}
#toggler_4-4 input.input-1:checked {
display: none;
}
#toggler_4-4 input.input-1:checked ~ span.one {
animation-name: t_4-4_one_forwards;
}
#toggler_4-4 input.input-1:checked ~ span.two {
animation-name: t_4-4_two_forwards;
}
#toggler_4-4 input.input-2:checked ~ span.one {
animation-name: t_4-4_one_backwards;
}
#toggler_4-4 input.input-2:checked ~ span.two {
animation-name: t_4-4_two_backwards;
}
@keyframes t_4-4_one_forwards {
0% {
transform: translateX(0) translateY(0) rotateZ(0);
}
50% {
transform: translateX(4.5px) translateY(-4.5px) rotateZ(-45deg);
}
100% {
transform: translateX(0) translateY(-4.5px) rotateZ(0deg);
}
}
@keyframes t_4-4_one_backwards {
0% {
transform: translateX(0) translateY(-4.5px) rotateZ(0deg);
}
50% {
transform: translateX(4.5px) translateY(-4.5px) rotateZ(-45deg);
}
100% {
transform: translateX(0) translateY(0) rotateZ(0);
}
}
@keyframes t_4-4_two_forwards {
0% {
transform: translateX(0) translateY(0) rotateZ(0);
}
50% {
transform: translateX(4.5px) translateY(-4.5px) rotateZ(45deg);
}
100% {
transform: translateX(35.5px) translateY(20px) rotateZ(90deg);
}
}
@keyframes t_4-4_two_backwards {
0% {
transform: translateX(35.5px) translateY(20px) rotateZ(90deg);
}
50% {
transform: translateX(4.5px) translateY(-4.5px) rotateZ(45deg);
}
100% {
transform: translateX(0) translateY(0) rotateZ(0);
}
}
.toggler {
width: 150px;
height: 150px;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.toggler[id^=toggler_4] {
background-color: #553100;
}
.toggler::after {
content: attr(id);
display: block;
position: absolute;
bottom: 10px;
color: white;
font-size: 12px;
font-family: monospace;
}CSS hamburger menu checkbox toggles 4
Каждая кнопка под своим номером как в index файле, так и в файле css. Например, id toggler_4-1, в стилях она будет под селектором #toggler_4-1. Точно так же и для всех кнопок.
Открыть элемент
<div class="group" id="group3">
<div class="toggler" id="toggler_3-1">
<button type="button">
<input type="checkbox">
<span></span>
</button>
</div>
<div class="toggler" id="toggler_3-2">
<button type="button">
<input type="checkbox">
<span></span>
</button>
</div>
<div class="toggler" id="toggler_3-3">
<button type="button">
<input type="checkbox">
<span></span>
</button>
</div>
<div class="toggler" id="toggler_3-4">
<button type="button">
<input type="checkbox" class="input-1">
<input type="checkbox" class="input-2">
<span></span>
</button>
</div>
</div>.group#group3 {
background-color: #499371;
}
button {
position: relative;
width: 60px;
height: 60px;
display: block;
border-radius: 0;
border: none;
background-color: transparent;
background-image: none;
padding: 0;
}
button:focus {
outline: none;
}
input[type=checkbox] {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
opacity: 0;
}
input[type=checkbox]:focus {
outline: none;
}
button span {
display: block;
pointer-events: none;
}
button {
position: relative;
width: 60px;
height: 60px;
display: block;
border-radius: 0;
border: none;
background-color: transparent;
background-image: none;
padding: 0;
}
button:focus {
outline: none;
}
input[type=checkbox] {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
opacity: 0;
}
input[type=checkbox]:focus {
outline: none;
}
button span {
display: block;
pointer-events: none;
}
#toggler_3-1 span {
top: 50%;
transform: translateY(-50%);
transition: transform 350ms ease;
}
#toggler_3-1 span, #toggler_3-1 span::after {
position: absolute;
left: 0;
width: 100%;
height: 9px;
background-color: #75B095;
}
#toggler_3-1 span::after {
content: "";
display: block;
top: 0;
transform: rotateZ(90deg);
}
#toggler_3-1 input:checked + span {
transform: translateY(-50%) rotateZ(45deg);
}
#toggler_3-2 span {
top: 50%;
transform: translateY(-50%);
}
#toggler_3-2 span, #toggler_3-2 span::after {
position: absolute;
left: 0;
width: 100%;
height: 9px;
background-color: #75B095;
transition: transform 700ms ease;
}
#toggler_3-2 span::after {
content: "";
display: block;
top: 0;
transform: rotateZ(90deg);
}
#toggler_3-2 input:checked + span {
transform: translateY(-50%) rotateZ(225deg);
}
#toggler_3-2 input:checked + span::after {
transform: rotateZ(-90deg);
}
#toggler_3-3 span {
top: 50%;
transform: translateY(-50%) rotateX(0) rotateZ(0);
}
#toggler_3-3 span, #toggler_3-3 span::after {
position: absolute;
left: 0;
width: 100%;
height: 9px;
background-color: #75B095;
transition: transform 700ms ease;
}
#toggler_3-3 span::after {
content: "";
display: block;
top: 0;
transform: rotateZ(90deg);
}
#toggler_3-3 input:checked + span {
transform: translateY(-50%) rotateX(180deg) rotateZ(45deg);
}
#toggler_3-4 span {
top: 50%;
transform: translateY(-50%);
animation-name: t_3-4_span_forwards;
}
#toggler_3-4 span, #toggler_3-4 span::after {
position: absolute;
left: 0;
width: 100%;
height: 9px;
background-color: #75B095;
animation-fill-mode: forwards;
animation-duration: 1050ms;
}
#toggler_3-4 span::after {
content: "";
display: block;
top: 0;
transform: rotateZ(90deg);
animation-name: t_3-4_after;
}
#toggler_3-4 input.input-1 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#toggler_3-4 input.input-1:not(:checked) ~ span, #toggler_3-4 input.input-1:not(:checked) ~ span::after {
animation-name: none;
}
#toggler_3-4 input.input-1:checked {
display: none;
}
#toggler_3-4 input.input-2:checked + span {
animation-name: t_3-4_span_backwards;
}
#toggler_3-4 input.input-2:checked + span::after {
animation-name: t_3-4_after_duplicate;
}
@keyframes t_3-4_span_forwards {
0% {
width: 60px;
left: 0;
transform: translateY(-50%) rotateZ(0deg);
}
33.333333% {
width: 9px;
left: 25px;
transform: translateY(-50%) rotateZ(0deg);
}
66.666666% {
width: 9px;
left: 25px;
transform: translateY(-50%) rotateZ(135deg);
}
100% {
width: 60px;
left: 0px;
transform: translateY(-50%) rotateZ(135deg);
}
}
@keyframes t_3-4_span_backwards {
0% {
width: 60px;
left: 0px;
transform: translateY(-50%) rotateZ(135deg);
}
33.333333% {
width: 9px;
left: 25px;
transform: translateY(-50%) rotateZ(135deg);
}
66.666666% {
width: 9px;
left: 25px;
transform: translateY(-50%) rotateZ(0deg);
}
100% {
width: 60px;
left: 0;
transform: translateY(-50%) rotateZ(0deg);
}
}
@keyframes t_3-4_after {
0% {
width: 60px;
}
33.333333% {
width: 9px;
}
66.666666% {
width: 9px;
}
100% {
width: 60px;
}
}
@keyframes t_3-4_after_duplicate {
0% {
width: 60px;
}
33.333333% {
width: 9px;
}
66.666666% {
width: 9px;
}
100% {
width: 60px;
}
}
.toggler {
width: 150px;
height: 150px;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.toggler[id^=toggler_3] {
background-color: #277552;
}
.toggler::after {
content: attr(id);
display: block;
position: absolute;
bottom: 10px;
color: white;
font-size: 12px;
font-family: monospace;
}CSS hamburger menu checkbox toggles 3
Каждая кнопка под своим номером как в index файле, так и в файле css. Например, id toggler_3-1, в стилях она будет под селектором #toggler_3-1. Точно так же и для всех кнопок.
Открыть элемент
<div class="group" id="group2">
<div class="toggler" id="toggler_2-1">
<button type="button">
<input type="checkbox">
<span class="one"></span>
<span class="two"></span>
</button>
</div>
<div class="toggler" id="toggler_2-2">
<button type="button">
<input type="checkbox">
<span class="one"></span>
<span class="two"></span>
</button>
</div>
<div class="toggler" id="toggler_2-3">
<button type="button">
<input type="checkbox">
<span class="one"></span>
<span class="two"></span>
</button>
</div>
<div class="toggler" id="toggler_2-4">
<button type="button">
<input type="checkbox">
<span class="one"></span>
<span class="two"></span>
</button>
</div>
</div>.group {
width: 90%;
margin: 40px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
padding: 20px;
}
.group#group2 {
background-color: #486D88;
}
button {
position: relative;
width: 60px;
height: 60px;
display: block;
border-radius: 0;
border: none;
background-color: transparent;
background-image: none;
padding: 0;
}
button:focus {
outline: none;
}
input[type=checkbox] {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
opacity: 0;
}
input[type=checkbox]:focus {
outline: none;
}
button span {
display: block;
pointer-events: none;
}
button {
position: relative;
width: 60px;
height: 60px;
display: block;
border-radius: 0;
border: none;
background-color: transparent;
background-image: none;
padding: 0;
}
button:focus {
outline: none;
}
input[type=checkbox] {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
opacity: 0;
}
input[type=checkbox]:focus {
outline: none;
}
button span {
display: block;
pointer-events: none;
}
#toggler_2-1 span {
top: 50%;
transform: translateY(-50%);
}
#toggler_2-1 span, #toggler_2-1 span::before, #toggler_2-1 span::after {
position: absolute;
left: 0;
width: 100%;
height: 9px;
}
#toggler_2-1 span::before, #toggler_2-1 span::after {
content: "";
display: block;
}
#toggler_2-1 span::before {
top: -18px;
}
#toggler_2-1 span::after {
bottom: -18px;
}
#toggler_2-1 span.one, #toggler_2-1 span.one::before, #toggler_2-1 span.one::after {
opacity: 1;
background-color: #708EA4;
transition: opacity 700ms ease 700ms;
}
#toggler_2-1 span + .two {
background-color: transparent;
}
#toggler_2-1 span + .two, #toggler_2-1 span + .two::before, #toggler_2-1 span + .two::after {
opacity: 0;
transition: opacity 700ms ease;
}
#toggler_2-1 span + .two::before, #toggler_2-1 span + .two::after {
background-color: #708EA4;
}
#toggler_2-1 span + .two::before {
transform-origin: top left;
transform: translateY(-2px) translateX(12px) rotateZ(45deg);
}
#toggler_2-1 span + .two::after {
transform-origin: bottom left;
transform: translateY(2px) translateX(12px) rotateZ(-45deg);
}
#toggler_2-1 input:checked + span.one, #toggler_2-1 input:checked + span.one::before, #toggler_2-1 input:checked + span.one::after {
opacity: 0;
transition: opacity 700ms ease;
}
#toggler_2-1 input:checked + span + .two, #toggler_2-1 input:checked + span + .two::before, #toggler_2-1 input:checked + span + .two::after {
opacity: 1;
transition: opacity 700ms ease 700ms;
}
#toggler_2-2 span {
top: 50%;
transform: translateY(-50%);
}
#toggler_2-2 span, #toggler_2-2 span::before, #toggler_2-2 span::after {
position: absolute;
left: 0;
width: 100%;
height: 9px;
}
#toggler_2-2 span::before, #toggler_2-2 span::after {
content: "";
display: block;
}
#toggler_2-2 span.one {
opacity: 1;
transition: opacity 0ms 350ms;
}
#toggler_2-2 span.one, #toggler_2-2 span.one::before, #toggler_2-2 span.one::after {
background-color: #708EA4;
}
#toggler_2-2 span.one::before, #toggler_2-2 span.one::after {
transition: transform 350ms ease 350ms;
}
#toggler_2-2 span.one::before {
top: -18px;
}
#toggler_2-2 span.one::after {
bottom: -18px;
}
#toggler_2-2 span + .two {
background-color: transparent;
}
#toggler_2-2 span + .two::before, #toggler_2-2 span + .two::after {
background-color: #708EA4;
transition: transform 350ms ease;
}
#toggler_2-2 input:checked + span.one {
opacity: 0;
}
#toggler_2-2 input:checked + span.one::before, #toggler_2-2 input:checked + span.one::after {
transition: transform 350ms ease;
}
#toggler_2-2 input:checked + span.one::before {
transform: translateY(18px);
}
#toggler_2-2 input:checked + span.one::after {
transform: translateY(-18px);
}
#toggler_2-2 input:checked + span + .two::before, #toggler_2-2 input:checked + span + .two::after {
transition: transform 350ms ease 350ms;
}
#toggler_2-2 input:checked + span + .two::before {
transform: rotateZ(45deg);
}
#toggler_2-2 input:checked + span + .two::after {
transform: rotateZ(-45deg);
}
#toggler_2-3 span {
top: 50%;
}
#toggler_2-3 span, #toggler_2-3 span::before, #toggler_2-3 span::after {
position: absolute;
left: 0;
width: 100%;
height: 9px;
transition: transform 350ms ease, opacity 350ms ease;
}
#toggler_2-3 span::before, #toggler_2-3 span::after {
content: "";
display: block;
}
#toggler_2-3 span.one {
transform: translateY(-50%);
}
#toggler_2-3 span.one, #toggler_2-3 span.one::before, #toggler_2-3 span.one::after {
opacity: 1;
background-color: #708EA4;
}
#toggler_2-3 span.one::before, #toggler_2-3 span.one::after {
transform: translateX(0);
}
#toggler_2-3 span.one::before {
top: -18px;
}
#toggler_2-3 span.one::after {
bottom: -18px;
}
#toggler_2-3 span + .two {
opacity: 0;
background-color: transparent;
}
#toggler_2-3 span + .two::before, #toggler_2-3 span + .two::after {
background-color: #708EA4;
}
#toggler_2-3 span + .two::before {
transform: rotateZ(-45deg) translateX(100%);
}
#toggler_2-3 span + .two::after {
transform: rotateZ(45deg) translateX(100%);
}
#toggler_2-3 input:checked + span.one {
transform: translateX(100%) translateY(-50%);
}
#toggler_2-3 input:checked + span.one, #toggler_2-3 input:checked + span.one::before, #toggler_2-3 input:checked + span.one::after {
opacity: 0;
}
#toggler_2-3 input:checked + span.one::before, #toggler_2-3 input:checked + span.one::after {
transform: translateX(-200%);
}
#toggler_2-3 input:checked + span + .two {
opacity: 1;
}
#toggler_2-3 input:checked + span + .two::before {
transform: rotateZ(-45deg) translateX(0);
}
#toggler_2-3 input:checked + span + .two::after {
transform: rotateZ(45deg) translateX(0);
}
#toggler_2-4 span {
top: 50%;
}
#toggler_2-4 span, #toggler_2-4 span::before, #toggler_2-4 span::after {
position: absolute;
}
#toggler_2-4 span::before, #toggler_2-4 span::after {
content: "";
display: block;
}
#toggler_2-4 span.one {
height: 9px;
transform: translateX(0) translateY(-50%);
transition: width 350ms ease, transform 350ms ease;
}
#toggler_2-4 span.one, #toggler_2-4 span.one::before, #toggler_2-4 span.one::after {
left: 0;
width: 100%;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
}
#toggler_2-4 span.one::before, #toggler_2-4 span.one::after {
height: 0;
transition: border-width 350ms ease;
}
#toggler_2-4 span.one::before {
top: -18px;
border-top: 9px solid #708EA4;
}
#toggler_2-4 span.one::after {
top: 18px;
border-bottom: 9px solid #708EA4;
}
#toggler_2-4 span + .two {
width: 100%;
height: 9px;
left: 0;
transform: translateY(-50%);
transition: width 350ms ease, height 350ms ease;
}
#toggler_2-4 span + .two::before, #toggler_2-4 span + .two::after {
top: 0;
width: 30px;
height: 9px;
border-top: 0px solid transparent;
border-bottom: 0px solid transparent;
transform: translateX(0) translateY(0);
transition: border-width 350ms ease, transform 350ms ease;
}
#toggler_2-4 span + .two::before {
left: 0;
border-left: 30px solid #708EA4;
}
#toggler_2-4 span + .two::after {
right: 0;
border-right: 30px solid #708EA4;
}
#toggler_2-4 input:checked + span.one {
width: 0;
transform: translateX(11px) translateY(-9px);
}
#toggler_2-4 input:checked + span.one::before, #toggler_2-4 input:checked + span.one::after {
border-width: 19px;
}
#toggler_2-4 input:checked + span + .two::before, #toggler_2-4 input:checked + span + .two::after {
width: 0;
height: 0;
border-width: 19px;
}
#toggler_2-4 input:checked + span + .two::before {
transform: translateX(2px) translateY(-14px);
}
#toggler_2-4 input:checked + span + .two::after {
transform: translateX(-2px) translateY(-14px);
}
.toggler {
width: 150px;
height: 150px;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.toggler[id^=toggler_2] {
background-color: #032137;
}
.toggler::after {
content: attr(id);
display: block;
position: absolute;
bottom: 10px;
color: white;
font-size: 12px;
font-family: monospace;
}CSS hamburger menu checkbox toggles 2
Каждая кнопка под своим номером как в index файле, так и в файле css. Например, id toggler_2-1, в стилях она будет под селектором #toggler_2-1. Точно так же и для всех кнопок.
Открыть элемент
<div class="group" id="group1">
<div class="toggler" id="toggler_1-1">
<button type="button">
<input type="checkbox">
<span></span>
</button>
</div>
<div class="toggler" id="toggler_1-2">
<button type="button">
<input type="checkbox">
<span></span>
</button>
</div>
<div class="toggler" id="toggler_1-3">
<button type="button">
<input type="checkbox">
<span class="outer">
<span class="inner">×</span>
</span>
</button>
</div>
<div class="toggler" id="toggler_1-4">
<button type="button">
<input type="checkbox" class="input-1">
<input type="checkbox" class="input-2">
<span></span>
</button>
</div>
</div>.group {
width: 90%;
margin: 40px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
padding: 20px;
}
.group#group1 {
background-color: #D4726A;
}
button {
position: relative;
width: 60px;
height: 60px;
display: block;
border-radius: 0;
border: none;
background-color: transparent;
background-image: none;
padding: 0;
}
button:focus {
outline: none;
}
input[type=checkbox] {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
opacity: 0;
}
input[type=checkbox]:focus {
outline: none;
}
button span {
display: block;
pointer-events: none;
}
button {
position: relative;
width: 60px;
height: 60px;
display: block;
border-radius: 0;
border: none;
background-color: transparent;
background-image: none;
padding: 0;
}
button:focus {
outline: none;
}
input[type=checkbox] {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
opacity: 0;
}
input[type=checkbox]:focus {
outline: none;
}
button span {
display: block;
pointer-events: none;
}
#toggler_1-1 span {
top: 50%;
transform: translateY(-50%);
transition: background-color 350ms ease;
}
#toggler_1-1 span, #toggler_1-1 span::before, #toggler_1-1 span::after {
position: absolute;
left: 0;
width: 100%;
height: 9px;
background-color: #FFB0AA;
}
#toggler_1-1 span::before, #toggler_1-1 span::after {
content: "";
display: block;
transition: transform 350ms ease;
}
#toggler_1-1 span::before {
top: -18px;
transform-origin: top left;
}
#toggler_1-1 span::after {
bottom: -18px;
transform-origin: bottom left;
}
#toggler_1-1 input:checked + span {
background-color: transparent;
}
#toggler_1-1 input:checked + span::before {
transform: translateY(-2px) translateX(10px) rotateZ(45deg);
}
#toggler_1-1 input:checked + span::after {
transform: translateY(2px) translateX(10px) rotateZ(-45deg);
}
#toggler_1-2 span {
top: 50%;
transform: translateY(-50%) rotateZ(0deg);
transition: transform 700ms ease, background-color 350ms ease;
}
#toggler_1-2 span, #toggler_1-2 span::before, #toggler_1-2 span::after {
position: absolute;
left: 0;
width: 100%;
height: 9px;
background-color: #FFB0AA;
will-change: transform;
}
#toggler_1-2 span::before, #toggler_1-2 span::after {
content: "";
display: block;
transition: transform 350ms ease;
}
#toggler_1-2 span::before {
top: -18px;
transform-origin: top left;
}
#toggler_1-2 span::after {
bottom: -18px;
transform-origin: bottom left;
}
#toggler_1-2 input:checked + span {
transform: translateY(-50%) rotateZ(270deg);
background-color: transparent;
}
#toggler_1-2 input:checked + span::before {
transform: translateY(-2px) translateX(10px) rotateZ(45deg);
}
#toggler_1-2 input:checked + span::after {
transform: translateY(2px) translateX(10px) rotateZ(-45deg);
}
#toggler_1-3 span.outer {
top: 50%;
transform: translateY(-50%);
transition: height 700ms ease 350ms, border-radius 700ms ease 350ms;
display: flex;
justify-content: center;
align-items: center;
}
#toggler_1-3 span.outer, #toggler_1-3 span.outer::before, #toggler_1-3 span.outer::after {
position: absolute;
left: 0;
width: 100%;
height: 9px;
background-color: #FFB0AA;
}
#toggler_1-3 span.outer::before, #toggler_1-3 span.outer::after {
content: "";
display: block;
transition: transform 350ms ease 350ms, opacity 350ms ease 350ms;
opacity: 1;
}
#toggler_1-3 span.outer::before {
top: -18px;
}
#toggler_1-3 span.outer::after {
bottom: -18px;
}
#toggler_1-3 span.inner {
width: 100%;
height: 100%;
font-size: 54px;
line-height: 1.1;
color: #550600;
opacity: 0;
transition: opacity 350ms ease;
}
#toggler_1-3 input:checked + span.outer {
height: 100%;
border-radius: 50%;
transition: height 700ms ease, border-radius 700ms ease;
}
#toggler_1-3 input:checked + span.outer::before, #toggler_1-3 input:checked + span.outer::after {
transition: transform 350ms ease, opacity 350ms ease;
}
#toggler_1-3 input:checked + span.outer::before {
transform: translateY(-25px);
opacity: 0;
}
#toggler_1-3 input:checked + span.outer::after {
transform: translateY(25px);
opacity: 0;
}
#toggler_1-3 input:checked + span.outer span.inner {
opacity: 1;
transition: opacity 350ms ease 600ms;
}
#toggler_1-4 span {
top: 50%;
transform: translateY(-50%);
animation-name: t_1-4_span_forwards;
}
#toggler_1-4 span, #toggler_1-4 span::before, #toggler_1-4 span::after {
position: absolute;
left: 0;
width: 100%;
height: 9px;
background-color: #FFB0AA;
animation-fill-mode: forwards;
animation-duration: 1050ms;
}
#toggler_1-4 span::before, #toggler_1-4 span::after {
content: "";
display: block;
}
#toggler_1-4 span::before {
top: -18px;
animation-name: t_1-4_before_forwards;
}
#toggler_1-4 span::after {
bottom: -18px;
animation-name: t_1-4_after_forwards;
}
#toggler_1-4 input.input-1 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#toggler_1-4 input.input-1:not(:checked) ~ span, #toggler_1-4 input.input-1:not(:checked) ~ span::before, #toggler_1-4 input.input-1:not(:checked) ~ span::after {
animation-name: none;
}
#toggler_1-4 input.input-1:checked {
display: none;
}
#toggler_1-4 input.input-2:checked + span {
animation-name: t_1-4_span_backwards;
}
#toggler_1-4 input.input-2:checked + span::before {
animation-name: t_1-4_before_backwards;
}
#toggler_1-4 input.input-2:checked + span::after {
animation-name: t_1-4_after_backwards;
}
@keyframes t_1-4_span_forwards {
0% {
width: 60px;
left: 0;
border-radius: 0;
}
50% {
width: 9px;
left: 25px;
border-radius: 4.5px;
}
100% {
width: 9px;
left: 25px;
border-radius: 4.5px;
}
}
@keyframes t_1-4_span_backwards {
0% {
width: 9px;
left: 25px;
border-radius: 4.5px;
}
50% {
width: 9px;
left: 25px;
border-radius: 4.5px;
}
100% {
width: 60px;
left: 0;
border-radius: 0;
}
}
@keyframes t_1-4_before_forwards {
0% {
width: 60px;
top: -18px;
border-radius: 0;
transform: rotateZ(0) translateX(0) translateY(0);
}
50% {
width: 9px;
top: 0;
border-radius: 4.5px;
transform: rotateZ(0) translateX(0) translateY(0);
}
50.1% {
width: 9px;
top: 0;
border-radius: 4.5px;
transform: rotateZ(-45deg) translateX(0) translateY(0);
}
100% {
width: 60px;
top: 0;
border-radius: 4.5px;
transform: rotateZ(-45deg) translateX(-18px) translateY(-18px);
}
}
@keyframes t_1-4_before_backwards {
0% {
width: 60px;
top: 0;
border-radius: 4.5px;
transform: rotateZ(-45deg) translateX(-18px) translateY(-18px);
}
50% {
width: 9px;
top: 0;
border-radius: 4.5px;
transform: rotateZ(-45deg) translateX(0) translateY(0);
}
50.1% {
width: 9px;
top: 0;
border-radius: 4.5px;
transform: rotateZ(0) translateX(0) translateY(0);
}
100% {
width: 60px;
top: -18px;
border-radius: 0;
transform: rotateZ(0) translateX(0) translateY(0);
}
}
@keyframes t_1-4_after_forwards {
0% {
width: 60px;
bottom: -18px;
border-radius: 0;
transform: rotateZ(0) translateX(0) translateY(0);
}
50% {
width: 9px;
bottom: 0;
border-radius: 4.5px;
transform: rotateZ(0deg) translateX(0) translateY(0);
}
50.1% {
width: 9px;
bottom: 0;
border-radius: 4.5px;
transform: rotateZ(45deg) translateX(0) translateY(0);
}
100% {
width: 60px;
bottom: 0;
border-radius: 4.5px;
transform: rotateZ(45deg) translateX(-18px) translateY(18px);
}
}
@keyframes t_1-4_after_backwards {
0% {
width: 60px;
bottom: 0;
border-radius: 4.5px;
transform: rotateZ(45deg) translateX(-18px) translateY(18px);
}
50% {
width: 9px;
bottom: 0;
border-radius: 4.5px;
transform: rotateZ(45deg) translateX(0) translateY(0);
}
50.1% {
width: 9px;
bottom: 0;
border-radius: 4.5px;
transform: rotateZ(0deg) translateX(0) translateY(0);
}
100% {
width: 60px;
bottom: -18px;
border-radius: 0;
transform: rotateZ(0) translateX(0) translateY(0);
}
}
.toggler {
width: 150px;
height: 150px;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.toggler[id^=toggler_1] {
background-color: #550600;
}
.toggler::after {
content: attr(id);
display: block;
position: absolute;
bottom: 10px;
color: white;
font-size: 12px;
font-family: monospace;
}CSS hamburger menu checkbox toggles
Каждая кнопка под своим номером как в index файле, так и в файле css. Например, id toggler_1-1, в стилях она будет под селектором #toggler_1-1. Точно так же и для всех кнопок.
Открыть элемент
<h1>Обводка текста</h1>
h1{
font-size: 150px;
font-weight: 700;
color: black;
-webkit-text-stroke: 10px black;
-webkit-text-fill-color: white;
}Обводка текста
В webkit появился ответ на вопрос, как сделать обводку текста с помощью одного лишь CSS без всяких теней и фотошопа.
Открыть элемент
<div class="container mx-auto">
<div class="outer_grid">
<div class="inner_grid">
<div class="grid">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
<div class="grid">
<div class="img4"></div>
<div class="img5"></div>
<div class="img6"></div>
</div>
</div>
<div class="inner_grid">
<div class="grid">
<div class="img7"></div>
<div class="img8"></div>
<div class="img9"></div>
</div>
<div class="grid">
<div class="img10"></div>
<div class="img11"></div>
<div class="img12"></div>
</div>
</div>
</div>
</div>.container{
max-width: 1536px;
/* background: blueviolet; */
}
.mx-auto{
margin-left: auto;
margin-right: auto;
margin-top: 10em;
}
body{
background: rgb(42, 40, 42);
}
.outer_grid{
display: grid;
grid-template-columns: repeat(1, minmax(0,1fr));
row-gap: 4em;
}
.inner_grid{
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-rows: repeat(1, minmax(600px, 1fr));
column-gap: 5em;
/* background: rgba(86, 228, 21, 0.705); */
}
.grid{
display: flex;
flex-direction: column;
gap: 4em;
}
.grid *{
background-size: cover !important;
border-radius: 10px;
box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1);
width: 100%;
height: 35em;
}
.grid .img1{
background: url('./assets/img1.png') no-repeat;
}
.grid .img2{
background: url('./assets/img2.png') no-repeat;
}
.grid .img3{
background: url('./assets/img3.png') no-repeat;
}
.grid .img4{
background: url('./assets/img4.png') no-repeat;
}
.grid .img5{
background: url('./assets/img5.png') no-repeat;
}
.grid .img6{
background: url('./assets/img6.png') no-repeat;
}
.grid .img7{
background: url('./assets/img7.png') no-repeat;
}
.grid .img8{
background: url('./assets/img8.png') no-repeat;
}
.grid .img9{
background: url('./assets/img9.png') no-repeat;
}
.grid .img10{
background: url('./assets/img10.png') no-repeat;
}
.grid .img11{
background: url('./assets/img11.png') no-repeat;
}
.grid .img12{
background: url('./assets/img12.png') no-repeat;
}
/* for screen lg: 768px */
@media (min-width: 768px){
.outer_grid{
display: grid;
grid-template-columns: repeat(1, minmax(0,1fr));
grid-template-rows: repeat(2, minmax(0px, 600px));
row-gap: initial;
}
.inner_grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid *{
width: auto;
height: auto;
}
.grid{
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
grid-template-rows: repeat(8, minmax(100px, 1fr));
row-gap: initial;
}
.grid > div:first-child{
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 5;
z-index: -99;
}
.grid > div:nth-child(2){
/* grid-area: (grid-row-start) / (grid-colunm-start) / (grid-row-end) / (grid-column-end) */
grid-area: 1 / 6 / 5 / 9;
z-index: -99;
}
.grid > div:nth-child(3){
grid-area: 3 / 3 / 8 / 7;
}
}Advanced CSS сетка
- Адаптивная сетка для изображений на чистом Css.
- Смотреть на полном экране.
Открыть элемент
Карточка профиля
<div class="modal">
<img src="img/profile.jpg" alt="">
<div class="close"></div>
</div>
<div class="container">
<div class="card">
<div class="header">
<div class="hamburger-menu">
<div class="center"></div>
</div>
<a href="#" class="mail">
<i class="far fa-envelope"></i>
</a>
<div class="main">
<div class="image">
<div class="hover">
<i class="fas fa-camera fa-2x"></i>
</div>
</div>
<h3 class="name">John Doe</h3>
<h3 class="sub-name">@J_Doe</h3>
</div>
</div>
<div class="content">
<div class="left">
<div class="about-container">
<h3 class="title">About</h3>
<p class="text">Lorem Ipsum is simply text of the printing and types industry.</p>
</div>
<div class="icons-container">
<a href="#" class="icon">
<i class="fab fa-facebook"></i>
</a>
<a href="#" class="icon">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="icon">
<i class="fab fa-google-plus-g"></i>
</a>
<a href="#" class="icon">
<i class="fab fa-twitter"></i>
</a>
</div>
<div class="buttons-wrap">
<div class="follow-wrap">
<a href="#" class="follow">Follow</a>
</div>
<div class="share-wrap">
<a href="#" class="share">Share</a>
</div>
</div>
</div>
<div class="right">
<div>
<h3 class="number">91</h3>
<h3 class="number-title">Posts</h3>
</div>
<div>
<h3 class="number">2.4K</h3>
<h3 class="number-title">Following</h3>
</div>
<div>
<h3 class="number">4.7K</h3>
<h3 class="number-title">Followers</h3>
</div>
</div>
</div>
</div>
</div>.container{
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.card{
position: relative;
width: 400px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card:before{
content: '';
position: absolute;
width: 100%;
height: 270px;
top: 0;
left: 0;
background-image: linear-gradient(to top, #00f2fe, #4facfe);
clip-path: circle(400px at 50% -48.5%);
}
.header{
position: relative;
height: 265px;
}
.mail{
position: absolute;
top: 1rem;
right: 2rem;
font-size: 1.5rem;
color: #fff;
opacity: .8;
transition: .3s;
z-index: 3;
text-decoration: none;
}
.mail:hover{
opacity: 1;
}
.hamburger-menu{
position: absolute;
width: 21px;
height: 16px;
top: 1.4rem;
left: 1.9rem;
z-index: 3;
cursor: pointer;
transition: .3s;
opacity: .8;
}
.hamburger-menu:hover{
opacity: 1;
}
.hamburger-menu .center{
position: absolute;
height: 2px;
width: 70%;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
border-radius: 1px;
}
.hamburger-menu:before, .hamburger-menu:after{
content: '';
position: absolute;
width: 100%;
height: 2px;
border-radius: 1px;
background-color: #fff;
}
.hamburger-menu:before{
top: 0;
}
.hamburger-menu:after{
bottom: 0;
}
.main{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main .image{
position: relative;
width: 110px;
height: 110px;
border-radius: 50%;
background: url('img/profile.jpg') no-repeat center / cover;
border: 4px solid #00d8fe;
margin-bottom: 2px;
overflow: hidden;
cursor: pointer;
}
.image .hover{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(79, 172, 254, .7);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
transition: .5s;
opacity: 0;
}
.image:hover .hover{
opacity: 1;
}
.hover.active{
opacity: 1;
}
.name{
font-size: 1.2rem;
color: #fff;
font-weight: 500;
line-height: 1;
margin: 5px 0;
}
.sub-name{
font-family: 'Cutive Mono', monospace;
font-size: 1.2rem;
opacity: .8;
color: #fff;
}
.content{
display: flex;
padding: 1.7rem 2.5rem 2.6rem 2.5rem;
}
.right{
padding-top: 1.5rem;
display: flex;
flex-direction: column;
text-align: right;
align-items: flex-end;
justify-content: space-between;
margin-left: 2.1rem;
}
.number{
font-size: 2.1rem;
font-weight: 200;
color: #333;
line-height: 1.2;
}
.number-title{
font-size: .55rem;
color: #666;
font-weight: 400;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
}
.title{
position: relative;
color: #555;
font-weight: 500;
font-size: 1.1rem;
padding: 0 0 3px 0;
margin-bottom: .9rem;
display: inline-block;
}
.title:after{
content: '';
position: absolute;
height: 3px;
width: 50%;
background-color: #555;
bottom: 0;
left: 0;
}
.text{
color: #666;
font-weight: 300;
line-height: 1.7;
}
.icons-container{
padding: 1rem 0;
}
.icon{
color: #c4c4c4;
font-size: 1.3rem;
text-decoration: none;
margin-right: 8px;
transition: .3s;
}
.icon:hover{
color: #4facfe;
}
.buttons-wrap{
display: flex;
margin-top: 5px;
}
.follow-wrap, .share-wrap{
flex: 4;
display: flex;
justify-content: center;
align-items: center;
transition: .5s;
}
.follow-wrap:hover, .share-wrap:hover{
flex: 5;
}
.follow{
padding: 9.6px 0;
width: 100%;
background: linear-gradient(to right, #4facfe 0%, #00f2fe 140%);
color: #fff;
text-align: center;
text-decoration: none;
font-size: .7rem;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 18.1px;
margin-right: 3px;
}
.share{
padding: 7.6px 0;
width: 100%;
border: 2px solid #4facfe;
color: #4facfe;
text-decoration: none;
text-align: center;
font-size: .7rem;
letter-spacing: 1px;
text-transform: uppercase;
margin-left: 3px;
border-radius: 18.1px;
}
.modal{
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: -1;
opacity: 0;
transition: .5s;
}
.modal img{
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%) scale(.3);
max-width: 100%;
max-height: 100%;
transition: .5s;
}
.modal.show{
opacity: 1;
z-index: 99;
}
.modal.show img{
top: 50%;
transform: translate(-50%, -50%) scale(1);
}
.close{
position: absolute;
top: 1rem;
right: 1rem;
width: 30px;
height: 30px;
cursor: pointer;
transition: .3s;
}
.close:hover{
opacity: .5;
}
.close:before, .close:after{
content: '';
position: absolute;
width: 100%;
height: 3px;
border-radius: 1.5px;
top: 50%;
left: 50%;
background-color: #fff;
}
.close:before{
transform: translate(-50%, -50%) rotate(45deg);
}
.close:after{
transform: translate(-50%, -50%) rotate(135deg);
}
@media (max-width: 410px){
.content{
flex-direction: column;
}
.right{
flex-direction: row;
text-align: center;
justify-content: space-around;
align-items: center;
margin: 0;
}
}
@media (max-width: 370px){
.header{
height: 230px;
}
.card:before{
clip-path: circle(400px at 50% -74.5%);
height: 230px;
}
.hamburger-menu{
width: 16px;
height: 12px;
top: 1.1rem;
left: 1.5rem;
}
.mail{
font-size: 1.1rem;
top: .75rem;
right: 1.5rem;
}
.main .image{
width: 90px;
height: 90px;
border-width: 3px;
}
.name, .sub-name{
font-size: 1rem;
}
.content{
padding: 1.2rem 1.8rem 1.8rem 1.8rem;
}
.number{
font-size: 1.8rem;
}
.number-title{
font-size: .4rem;
}
.right{
padding-top: 1rem;
}
.title{
font-size: .9rem;
margin-bottom: .5rem;
}
.text{
font-size: .8rem;
}
.icons-container{
padding: .5rem 0;
}
.icon{
font-size: 1.1rem;
}
.follow{
padding: 7.6px 0;
border-radius: 14.6px;
font-size: .6rem;
}
.share{
padding: 5.6px 0;
border-radius: 14.6px;
font-size: .6rem;
}
}const image = document.querySelector('.image');
const hover = document.querySelector('.hover');
const modal = document.querySelector('.modal');
const close = document.querySelector('.close');
function show(){
hover.classList.add('active');
modal.classList.add('show');
}
function hide(){
hover.classList.remove('active');
modal.classList.remove('show');
}
image.addEventListener('click', show);
close.addEventListener('click', hide);<script src="https://kit.fontawesome.com/a81368914c.js"></script>
Карточка профиля
Открыть элемент
Анимации дождя на CSS и JavaScript
* {
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(to bottom, #030420, #000000 70%);
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
overflow: hidden;
}
hr {
width: 50px;
border-color: transparent;
border-right-color: rgba(255, 255, 255, 0.7);
border-right-width: 50px;
position: absolute;
bottom: 100%;
transform-origin: 100% 50%;
animation-name: rain;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rain {
from {
transform: rotate(105deg) translateX(0);
}
to {
transform: rotate(105deg) translateX(calc(100vh + 20px));
}
}let hrElement;
let counter = 100;
for (let i = 0; i < counter; i++) {
hrElement = document.createElement("HR");
hrElement.style.left = Math.floor(Math.random() * window.innerWidth) + "px";
hrElement.style.animationDuration = 0.2 + Math.random() * 0.3 + "s";
hrElement.style.animationDelay = Math.random() * 5 + "s";
document.body.appendChild(hrElement);
}Анимации дождя на CSS и JavaScript
Открыть элемент
<div id="container"> <div id="player-container"></div> </div>
body {
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #1062b9;
}
* {
box-sizing: border-box;
}
#container {
width: auto;
width: 90vmin;
border: 3px solid white;
border-radius: 5px;
box-shadow: 0 0 300px #333;
}const videoUrl = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
const config = {
sources: [{
type: 'mp4',
src: videoUrl,
}]
};
const element = document.getElementById('player-container');
const player = IndigoPlayer.init(element, config);<script src="https://cdn.jsdelivr.net/npm/indigo-player@1/lib/indigo-player.js"></script>
Видеоплеер на JavaScript и HTML
Открыть элемент
Получить положение мыши на JavaScript
<div id="output">Переместите курсор мыши</div>
#output {
background-color: #ffffff;
width: 70vmin;
max-width: 500px;
padding: 20px 30px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
text-align: center;
border-radius: 8px;
box-shadow: 0 20px 50px rgba(4, 1, 22, 0.12);
font-size: 2em;
display: flex;
justify-content: center;
}
#output div {
margin: 0px 10px;
}
span {
color: #0c58af;
}let output = document.getElementById("output");
window.addEventListener("mousemove", (e) => {
let xPos = e.clientX;
let yPos = e.clientY;
output.innerHTML = `<div><span>X: </span>${xPos}px</div><div><span>Y: </span>${yPos}px</div>`;
});Получить положение мыши на JavaScript
Открыть элемент
Анимированные карточки для раздела нашей команды
<div class="main">
<div class="profile-card">
<div class="img">
<img src="https://interier-foto.ru/wp-content/uploads/2014/11/reka-maashej4207-300x300.jpg">
</div>
<div class="caption">
<h3>Vin Diesel</h3>
<p>Senior App Developer</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
<div class="profile-card">
<div class="img">
<img src="https://interier-foto.ru/wp-content/uploads/2014/11/reka-maashej4207-300x300.jpg">
</div>
<div class="caption">
<h3>David Corner</h3>
<p>Front End Developer</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
<div class="profile-card">
<div class="img">
<img src="https://interier-foto.ru/wp-content/uploads/2014/11/reka-maashej4207-300x300.jpg">
</div>
<div class="caption">
<h3>Tom Cruise</h3>
<p>Full Stact Developer</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
</div>* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Exo;
}
@font-face {
font-family: Exo;
src: url(./fonts/Exo2.0-Medium.otf);
}
.main{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #0c52a1;
}
.profile-card{
position: relative;
width: 220px;
height: 220px;
background: #fff;
padding: 30px;
border-radius: 50%;
box-shadow: 0 0 22px #3336;
transition: .6s;
margin: 0 25px;
}
.profile-card:hover{
border-radius: 10px;
height: 260px;
}
.profile-card .img{
position: relative;
width: 100%;
height: 100%;
transition: .6s;
z-index: 99;
}
.profile-card:hover .img{
transform: translateY(-60px);
}
.img img{
width: 100%;
border-radius: 50%;
box-shadow: 0 0 22px #3336;
transition: .6s;
}
.profile-card:hover img{
border-radius: 10px;
}
.caption{
text-align: center;
transform: translateY(-80px);
opacity: 0;
transition: .6s;
}
.profile-card:hover .caption{
opacity: 1;
}
.caption h3{
font-size: 21px;
}
.caption p{
font-size: 16px;
color: #0c52a1;
margin: 2px 0 9px 0;
}
.caption .social-links a{
color: #333;
margin-right: 8px;
font-size: 21px;
transition: .6s;
}
.social-links a:hover{
color: #0c52a1;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://use.fontawesome.com/ebd19701ea.js"></script>
Анимированные карточки для раздела нашей команды
Открыть элемент
Hamburger Menu от автора Vladislav Trefil
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>The Hamburger Menu</h1>
<p>(click)</p>
<div class="menu btn1" data-menu="1">
<div class="icon-left"></div>
<div class="icon-right"></div>
</div>
<div class="menu btn2" data-menu="2">
<div class="icon"></div>
</div>
<div class="menu btn3" data-menu="3">
<div class="icon"></div>
</div>
<div class="menu btn4" data-menu="4">
<div class="icon"></div>
</div>
<div class="menu btn5" data-menu="5">
<div class="icon"></div>
</div>
<div class="menu btn6" data-menu="6">
<div class="icon"></div>
</div>
<div class="menu btn7" data-menu="7">
<div class="icon-E"></div>
<div class="icon-X"></div>
</div>
<div class="menu btn8" data-menu="8">
<div class="icon-E"></div>
<div class="icon-X"></div>
</div>
<div class="menu btn9" data-menu="9">
<div class="icon"></div>
</div>
<div class="menu btn10" data-menu="10">
<div class="icon"></div>
</div>
<div class="menu btn11" data-menu="11">
<div class="icon-left"></div>
<div class="icon-right"></div>
</div>
<div class="menu btn12" data-menu="12">
<div class="icon"></div>
</div>
<div class="menu btn13" data-menu="13">
<div class="icon"></div>
</div>
<div class="menu btn14" data-menu="14">
<div class="icon-circle"></div>
<div class="icon"></div>
</div>
</div>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Neucha&family=Poppins:wght@100&family=Source+Sans+Pro:wght@300&display=swap');
body {
background-color: #efefef;
font-family: 'Neucha', cursive;
color: #212121;
}
.container {
position: relative;
max-width: 420px;
width: 100%;
margin: 0 auto;
}
h1, p {
text-align: center;
}
.btn1 {
position: absolute;
width: 60px;
height: 60px;
top: 100px;
left: 0px;
transition-duration: 0.5s;
}
.btn1 .icon-left {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 30px;
top: 30px;
background-color: #212121;
left: 0px;
}
.btn1 .icon-left:before {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.btn1 .icon-left:after {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.btn1 .icon-left:hover {
cursor: pointer;
}
.btn1 .icon-right {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 30px;
top: 30px;
background-color: #212121;
left: 30px;
}
.btn1 .icon-right:before {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.btn1 .icon-right:after {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.btn1.open .icon-left {
transition-duration: 0.5s;
background: transparent;
}
.btn1.open .icon-left:before {
transform: rotateZ(45deg) scaleX(1.4) translate(4px, 4px);
}
.btn1.open .icon-left:after {
transform: rotateZ(-45deg) scaleX(1.4) translate(4px, -4px);
}
.btn1.open .icon-right {
transition-duration: 0.5s;
background: transparent;
}
.btn1.open .icon-right:before {
transform: rotateZ(-45deg) scaleX(1.4) translate(-4px, 4px);
}
.btn1.open .icon-right:after {
transform: rotateZ(45deg) scaleX(1.4) translate(-4px, -4px);
}
.btn1:hover {
cursor: pointer;
}
.btn2 {
position: absolute;
width: 60px;
height: 60px;
top: 100px;
left: 120px;
transition-duration: 0.5s;
}
.btn2 .icon {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 30px;
background-color: #212121;
}
.btn2 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.btn2 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.btn2.open .icon {
transition-duration: 0.5s;
background: transparent;
}
.btn2.open .icon:before {
transform: rotateZ(45deg) scaleX(1.25) translate(13px, 13px);
}
.btn2.open .icon:after {
transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
}
.btn2:hover {
cursor: pointer;
}
.btn3 {
position: absolute;
width: 60px;
height: 60px;
top: 100px;
left: 240px;
transition-duration: 0.5s;
}
.btn3 .icon {
transition-duration: 0.5s;
position: absolute;
height: 0px;
width: 60px;
top: 30px;
background-color: #212121;
}
.btn3 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.btn3 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.btn3.open .icon {
transition-duration: 0.5s;
}
.btn3.open .icon:before {
transform: rotateZ(135deg) scaleX(1.25) translate(13px, -13px);
}
.btn3.open .icon:after {
transform: rotateZ(-135deg) scaleX(1.25) translate(12px, 12px);
}
.btn3:hover {
cursor: pointer;
}
.btn4 {
position: absolute;
width: 60px;
height: 60px;
top: 100px;
left: 360px;
transition-duration: 0.5s;
}
.btn4 .icon {
transition-duration: 0.5s;
position: absolute;
height: 0px;
width: 60px;
top: 30px;
background-color: #212121;
}
.btn4 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.btn4 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.btn4.open .icon {
transition: 0.5s;
}
.btn4.open .icon:before {
transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
}
.btn4.open .icon:after {
transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
}
.btn4:hover {
cursor: pointer;
}
.btn5 {
position: absolute;
width: 60px;
height: 60px;
top: 200px;
left: 0px;
transition-duration: 0.5s;
}
.btn5 .icon {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 30px;
background-color: #212121;
}
.btn5 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.btn5 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.btn5.open .icon {
transition: 0.5s;
}
.btn5.open .icon:before {
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
.btn5.open .icon:after {
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
}
.btn5:hover {
cursor: pointer;
}
.btn6 {
position: absolute;
width: 60px;
height: 60px;
top: 200px;
left: 120px;
transition-duration: 0.5s;
}
.btn6 .icon {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 30px;
background-color: #212121;
}
.btn6 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.btn6 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.btn6.open .icon {
transition-duration: 0.5s;
transform: rotateZ(180deg);
}
.btn6.open .icon:before {
transform: rotateZ(45deg) scaleX(0.75) translate(20px, -6px);
}
.btn6.open .icon:after {
transform: rotateZ(-45deg) scaleX(0.75) translate(20px, 6px);
}
.btn6:hover {
cursor: pointer;
}
.btn7 {
position: absolute;
width: 60px;
height: 60px;
top: 200px;
left: 240px;
transition-duration: 0.5s;
}
.btn7 .icon-E {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 30px;
background-color: #212121;
transition-delay: 0.5s;
}
.btn7 .icon-E:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.btn7 .icon-E:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.btn7 .icon-X {
transition-duration: 0.5s;
position: absolute;
height: 0px;
width: 200px;
top: 30px;
background-color: #212121;
transform: scaleX(0);
transform-origin: 30px 0px;
}
.btn7 .icon-X:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
}
.btn7 .icon-X:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
}
.btn7 .icon-X:hover {
cursor: pointer;
}
.btn7.open .icon-E {
transition-duration: 0.5s;
transform: scaleX(0);
transition-delay: 0s;
}
.btn7.open .icon-X {
transition: 0.5s;
transition-delay: 0.5s;
transform: scaleX(1);
}
.btn7:hover {
cursor: pointer;
}
.btn8 {
position: absolute;
width: 60px;
height: 60px;
top: 200px;
left: 360px;
transition-duration: 0.5s;
}
.btn8 .icon-E {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 30px;
background-color: #212121;
transform-origin: 0px 0px;
transition-delay: 0.5s;
}
.btn8 .icon-E:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.btn8 .icon-E:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.btn8 .icon-X {
transition-duration: 0.5s;
position: absolute;
height: 0px;
width: 60px;
top: 30px;
background-color: #212121;
transform-origin: 0px 0px;
transform: scaleY(0);
}
.btn8 .icon-X:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
}
.btn8 .icon-X:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
}
.btn8.open .icon-E {
transition-duration: 0.5s;
transform: scaleY(0);
transition-delay: 0s;
}
.btn8.open .icon-X {
transition: 0.5s;
transition-delay: 0.5s;
transform: scaleY(1);
}
.btn8:hover {
cursor: pointer;
}
.btn9 {
position: absolute;
width: 60px;
height: 60px;
top: 305px;
left: 0px;
transition-duration: 0.5s;
}
.btn9 .icon {
transition-duration: 0.5s;
position: absolute;
height: 0px;
width: 60px;
top: 30px;
background-color: #212121;
transform: rotateZ(90deg);
transform-origin: 30px 30px;
left: -15;
top: 0;
}
.btn9 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 60px;
background-color: #212121;
content: "";
top: 20px;
top: 0;
}
.btn9 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 60px;
background-color: #212121;
content: "";
top: 20px;
top: 0;
left: 30px;
}
.btn9.open .icon {
transition: all 0.5s;
transform: rotateZ(0deg);
}
.btn9.open .icon:before {
width: 22.5px;
}
.btn9.open .icon:after {
transform-origin: 30px 60px;
transform: scaleX(0.75);
}
.btn9.play .icon {
transition: all 0.5s;
transform: rotateZ(0deg);
}
.btn9.play .icon:before {
width: 500px;
}
.btn9.play .icon:after {
transform-origin: 30px 60px;
transform: scaleX(2);
}
.btn9:hover {
cursor: pointer;
}
.btn10 {
position: absolute;
width: 60px;
height: 60px;
top: 300px;
left: 120px;
transition-duration: 0.5s;
}
.btn10 .icon {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 30px;
background-color: #212121;
}
.btn10 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: -20px;
}
.btn10 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: #212121;
content: "";
top: 20px;
}
.btn10.open .icon {
transition-duration: 0.5s;
transform: rotateZ(-180deg);
}
.btn10.open .icon:before {
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
.btn10.open .icon:after {
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
}
.btn10:hover {
cursor: pointer;
}
.btn11 {
position: absolute;
width: 60px;
height: 60px;
top: 300px;
left: 240px;
transition-duration: 0.5s;
}
.btn11 .icon-left {
transition-duration: 0.5s;
position: absolute;
height: 4px;
width: 15px;
top: 30px;
background-color: #212121;
}
.btn11 .icon-left:before {
transition-duration: 0.5s;
position: absolute;
width: 15px;
height: 4px;
background-color: #212121;
content: "";
top: -10px;
}
.btn11 .icon-left:after {
transition-duration: 0.5s;
position: absolute;
width: 15px;
height: 4px;
background-color: #212121;
content: "";
top: 10px;
}
.btn11 .icon-left:hover {
cursor: pointer;
}
.btn11 .icon-right {
transition-duration: 0.5s;
position: absolute;
height: 4px;
width: 15px;
top: 30px;
background-color: #212121;
left: 15px;
}
.btn11 .icon-right:before {
transition-duration: 0.5s;
position: absolute;
width: 15px;
height: 4px;
background-color: #212121;
content: "";
top: -10px;
}
.btn11 .icon-right:after {
transition-duration: 0.5s;
position: absolute;
width: 15px;
height: 4px;
background-color: #212121;
content: "";
top: 10px;
}
.btn11.open .icon-left {
transition-duration: 0.5s;
background: transparent;
}
.btn11.open .icon-left:before {
transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px);
}
.btn11.open .icon-left:after {
transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px);
}
.btn11.open .icon-right {
transition-duration: 0.5s;
background: transparent;
}
.btn11.open .icon-right:before {
transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px);
}
.btn11.open .icon-right:after {
transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px);
}
.btn11:hover {
cursor: pointer;
}
.btn12 {
position: absolute;
width: 60px;
height: 60px;
top: 300px;
left: 315px;
transition-duration: 0.5s;
}
.btn12 .icon {
transition-duration: 0.5s;
position: absolute;
height: 4px;
width: 30px;
top: 30px;
background-color: #212121;
}
.btn12 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 4px;
background-color: #212121;
content: "";
top: -10px;
}
.btn12 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 4px;
background-color: #212121;
content: "";
top: 10px;
}
.btn12.open .icon {
transition-duration: 0.5s;
background: transparent;
}
.btn12.open .icon:before {
transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
}
.btn12.open .icon:after {
transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
}
.btn12:hover {
cursor: pointer;
}
.btn13 {
position: absolute;
width: 60px;
height: 60px;
top: 300px;
left: 390px;
transition-duration: 0.5s;
}
.btn13 .icon {
transition-duration: 0.5s;
position: absolute;
height: 4px;
width: 30px;
top: 30px;
background-color: #212121;
}
.btn13 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 4px;
background-color: #212121;
content: "";
top: -10px;
}
.btn13 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 4px;
background-color: #212121;
content: "";
top: 10px;
}
.btn13.open .icon {
transition: 0.5s;
}
.btn13.open .icon:before {
transform: rotateZ(-45deg) scaleX(0.75) translate(-10px, -3px);
}
.btn13.open .icon:after {
transform: rotateZ(45deg) scaleX(0.75) translate(-10px, 3px);
}
.btn13:hover {
cursor: pointer;
}
.btn14 {
position: absolute;
width: 60px;
height: 60px;
top: 400px;
left: 15px;
transition-duration: 0.5s;
}
.btn14 .icon-circle {
transition-duration: 0.5s;
position: absolute;
height: 60px;
width: 60px;
top: -1px;
border-radius: 100%;
background: transparent;
border: 4px solid black;
left: -19px;
}
.btn14 .icon-circle:hover {
background: #fff;
}
.btn14 .icon {
transition-duration: 0.5s;
position: absolute;
height: 4px;
width: 30px;
top: 30px;
background-color: #212121;
border-radius: 4px;
}
.btn14 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 4px;
background-color: #212121;
content: "";
top: -10px;
border-radius: 4px;
}
.btn14 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 4px;
background-color: #212121;
content: "";
top: 10px;
border-radius: 4px;
}
.btn14.open .icon-circle {
background: #fff;
}
.btn14.open .icon {
transition-duration: 0.5s;
background: transparent;
}
.btn14.open .icon:before {
transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
}
.btn14.open .icon:after {
transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
}
.btn14:hover {
cursor: pointer;
}
.btn15 {
position: absolute;
width: 60px;
height: 60px;
top: 400px;
left: 120px;
transition-duration: 0.5s;
}
.btn15 .icon {
transition-duration: 0.5s;
position: absolute;
height: 4px;
width: 30px;
top: 30px;
background-color: #212121;
border-radius: 4px;
left: 15px;
}
.btn15 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 4px;
background-color: #212121;
content: "";
top: -10px;
border-radius: 4px;
}
.btn15 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 30px;
height: 4px;
background-color: #212121;
content: "";
top: 10px;
border-radius: 4px;
}
.btn15.open .icon {
transition-duration: 0.5s;
background: transparent;
}
.btn15.open .icon:before {
transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
}
.btn15.open .icon:after {
transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
}
.btn15:hover {
background: #fff;
cursor: pointer;
}$('.menu').click (function(){
$(this).toggleClass('open');
});<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
Scss
@import "compass/css3";
$dark: #212121;
$light: #efefef;
$color: #b3e5fc;
@mixin btn($left, $top) {
position: absolute;
width: 60px;
height: 60px;
top: $top;
left: $left;
transition-duration: 0.5s;
}
@mixin icon($height, $width) {
transition-duration: 0.5s;
position: absolute;
height: $height;
width: $width;
top: 30px;
background-color: $dark;
}
@mixin icon-before($height, $width, $top) {
transition-duration: 0.5s;
position: absolute;
width: $width;
height: $height;
background-color: $dark;
content: "";
top: $top;
}
@mixin icon-after($height, $width, $top) {
transition-duration: 0.5s;
position: absolute;
width: $width;
height: $height;
background-color: $dark;
content: "";
top: $top;
}
@mixin icon-circle($height, $width) {
transition-duration: 0.5s;
position: absolute;
height: $height;
width: $width;
top: 2px;
border-radius: 100%;
background: transparent;
border: 4px solid black;
left: -15px;
}
body {
background-color: $light;
font-family: 'Roboto', sans-serif;
color: $dark;
}
.container {
position: relative;
max-width: 420px;
width: 100%;
margin: 0 auto;
}
h1, p {
text-align: center;
}
.btn1{
@include btn(0px, 100px);
.icon-left {
@include icon(8px, 30px);
left: 0px;
&:before{
@include icon-before(8px, 30px, -20px);
}
&:after{
@include icon-after(8px, 30px, 20px);
}
&:hover{
cursor: pointer;
}
}
.icon-right {
@include icon(8px, 30px);
left: 30px;
&:before{
@include icon-before(8px, 30px, -20px);
}
&:after{
@include icon-after(8px, 30px, 20px);
}
}
&.open {
.icon-left {
transition-duration: 0.5s;
background: transparent;
&:before{
transform: rotateZ(45deg) scaleX(1.4) translate(4px, 4px);
}
&:after{
transform: rotateZ(-45deg) scaleX(1.4) translate(4px, -4px);
}
}
.icon-right {
transition-duration: 0.5s;
background: transparent;
&:before{
transform: rotateZ(-45deg) scaleX(1.4) translate(-4px, 4px);
}
&:after{
transform: rotateZ(45deg) scaleX(1.4) translate(-4px, -4px);
}
}
}
&:hover {
cursor: pointer;
}
}
.btn2{
@include btn(120px, 100px);
.icon {
@include icon(8px, 60px);
&:before{
@include icon-before(8px, 60px, -20px);
}
&:after{
@include icon-after(8px, 60px, 20px);
}
}
&.open {
.icon {
transition-duration: 0.5s;
background: transparent;
&:before{
transform: rotateZ(45deg) scaleX(1.25) translate(13px, 13px);
}
&:after{
transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
}
}
}
&:hover {
cursor: pointer;
}
}
.btn3{
@include btn(240px, 100px);
.icon {
@include icon(0px, 60px);
&:before{
@include icon-before(8px, 60px, -20px);
}
&:after{
@include icon-after(8px, 60px, 20px);
}
}
&.open {
.icon {
transition-duration: 0.5s;
&:before{
transform: rotateZ(135deg) scaleX(1.25) translate(13px, -13px);
}
&:after{
transform: rotateZ(-135deg) scaleX(1.25) translate(12px, 12px);
}
}
}
&:hover {
cursor: pointer;
}
}
.btn4{
@include btn(360px, 100px);
.icon {
@include icon(0px, 60px);
&:before{
@include icon-before(8px, 60px, -20px);
}
&:after{
@include icon-after(8px, 60px, 20px);
}
}
&.open {
.icon {
transition: 0.5s;
&:before{
transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
}
&:after{
transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
}
}
}
&:hover {
cursor: pointer;
}
}
.btn5{
@include btn(0px, 200px);
.icon {
@include icon(8px, 60px);
&:before{
@include icon-before(8px, 60px, -20px);
}
&:after{
@include icon-after(8px, 60px, 20px);
}
}
&.open {
.icon {
transition: 0.5s;
&:before{
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
&:after{
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
}
}
}
&:hover {
cursor: pointer;
}
}
.btn6{
@include btn(120px, 200px);
.icon {
@include icon(8px, 60px);
&:before{
@include icon-before(8px, 60px, -20px);
}
&:after{
@include icon-after(8px, 60px, 20px);
}
}
&.open {
.icon {
transition-duration: 0.5s;
transform: rotateZ(180deg);
&:before{
transform: rotateZ(45deg) scaleX(0.75) translate(20px, -6px);
}
&:after{
transform: rotateZ(-45deg) scaleX(0.75) translate(20px, 6px);
}
}
}
&:hover {
cursor: pointer;
}
}
.btn7{
@include btn(240px, 200px);
.icon-E {
@include icon(8px, 60px);
transition-delay: 0.5s;
&:before{
@include icon-before(8px, 60px, -20px);
}
&:after{
@include icon-after(8px, 60px, 20px);
}
}
.icon-X {
@include icon(0px, 200px);
transform: scaleX(0);
transform-origin: 30px 0px;
&:before{
@include icon-before(8px, 60px, -20px);
transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
}
&:after{
@include icon-after(8px, 60px, 20px);
transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
}
&:hover{
cursor: pointer;
}
}
&.open {
.icon-E {
transition-duration: 0.5s;
transform: scaleX(0);
transition-delay: 0s;
}
.icon-X {
transition: 0.5s;
transition-delay: 0.5s;
transform: scaleX(1);
}
}
&:hover {
cursor: pointer;
}
}
.btn8{
@include btn(360px, 200px);
.icon-E {
@include icon(8px, 60px);
transform-origin: 0px 0px;
transition-delay: 0.5s;
&:before{
@include icon-before(8px, 60px, -20px);
}
&:after{
@include icon-after(8px, 60px, 20px);
}
}
.icon-X {
@include icon(0px, 60px);
transform-origin: 0px 0px;
transform: scaleY(0);
&:before{
@include icon-before(8px, 60px, -20px);
transform: rotateZ(45deg) scaleX(1.25) translate(12px, 12px);
}
&:after{
@include icon-after(8px, 60px, 20px);
transform: rotateZ(-45deg) scaleX(1.25) translate(12px, -12px);
}
}
&.open {
.icon-E {
transition-duration: 0.5s;
transform: scaleY(0);
transition-delay: 0s;
}
.icon-X {
transition: 0.5s;
transition-delay: 0.5s;
transform: scaleY(1);
}
}
&:hover {
cursor: pointer;
}
}
.btn9{
@include btn(0px, 305px);
.icon {
@include icon(0px, 60px);
transform: rotateZ(90deg);
transform-origin: 30px 30px;
left: -15;
top: 0;
&:before{
@include icon-before(60px, 30px, 20px);
top: 0;
}
&:after{
@include icon-after(60px, 30px, 20px);
top: 0;
left: 30px;
}
}
&.open {
.icon {
transition: all 0.5s;
transform: rotateZ(0deg);
&:before{
width: 22.5px;
}
&:after{
transform-origin: 30px 60px;
transform: scaleX(0.75);
}
}
}
&.play {
.icon {
transition: all 0.5s;
transform: rotateZ(0deg);
&:before{
width: 500px;
}
&:after{
transform-origin: 30px 60px;
transform: scaleX(2);
}
}
}
&:hover {
cursor: pointer;
}
}
.btn10{
@include btn(120px, 300px);
.icon {
@include icon(8px, 60px);
&:before{
@include icon-before(8px, 60px, -20px);
}
&:after{
@include icon-after(8px, 60px, 20px);
}
}
&.open {
.icon {
transition-duration: 0.5s;
transform: rotateZ(-180deg);
&:before{
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
&:after{
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
}
}
}
&:hover {
cursor: pointer;
}
}
.btn11{
@include btn(240px, 300px);
.icon-left {
@include icon(4px, 15px);
&:before{
@include icon-before(4px, 15px, -10px);
}
&:after{
@include icon-after(4px, 15px, 10px);
}
&:hover{
cursor: pointer;
}
}
.icon-right {
@include icon(4px, 15px);
left: 15px;
&:before{
@include icon-before(4px, 15px, -10px);
}
&:after{
@include icon-after(4px, 15px, 10px);
}
}
&.open {
.icon-left {
transition-duration: 0.5s;
background: transparent;
&:before{
transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px);
}
&:after{
transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px);
}
}
.icon-right {
transition-duration: 0.5s;
background: transparent;
&:before{
transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px);
}
&:after{
transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px);
}
}
}
&:hover {
cursor: pointer;
}
}
.btn12{
@include btn(315px, 300px);
.icon {
@include icon(4px, 30px);
&:before{
@include icon-before(4px, 30px, -10px);
}
&:after{
@include icon-after(4px, 30px, 10px);
}
}
&.open {
.icon {
transition-duration: 0.5s;
background: transparent;
&:before{
transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
}
&:after{
transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
}
}
}
&:hover {
cursor: pointer;
}
}
.btn13{
@include btn(390px, 300px);
.icon {
@include icon(4px, 30px);
&:before{
@include icon-before(4px, 30px, -10px);
}
&:after{
@include icon-after(4px, 30px, 10px);
}
}
&.open {
.icon {
transition: 0.5s;
&:before{
transform: rotateZ(-45deg) scaleX(0.75) translate(-10px, -3px);
}
&:after{
transform: rotateZ(45deg) scaleX(0.75) translate(-10px, 3px);
}
}
}
&:hover {
cursor: pointer;
}
}
.btn14{
@include btn(15px, 400px);
.icon-circle {
@include icon-circle(60px, 60px);
&:hover {
background: #fff;
}
}
.icon {
@include icon(4px, 30px);
border-radius: 4px;
&:before{
@include icon-before(4px, 30px, -10px);
border-radius: 4px;
}
&:after{
@include icon-after(4px, 30px, 10px);
border-radius: 4px;
}
}
&.open {
.icon-circle {
background: #fff;
}
.icon {
transition-duration: 0.5s;
background: transparent;
&:before{
transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
}
&:after{
transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
}
}
}
&:hover {
cursor: pointer;
}
}
.btn15{
@include btn(120px, 400px);
.icon {
@include icon(4px, 30px);
border-radius: 4px;
left: 15px;
&:before{
@include icon-before(4px, 30px, -10px);
border-radius: 4px;
}
&:after{
@include icon-after(4px, 30px, 10px);
border-radius: 4px;
}
}
&.open {
.icon {
transition-duration: 0.5s;
background: transparent;
&:before{
transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
}
&:after{
transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
}
}
}
&:hover {
background: #fff;
cursor: pointer;
}
}Hamburger Menu
Открыть элемент
Card scroll от автора Vladislav Trefil
<div class="container">
<div class="left half">
<div class="menu"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png"/>
<p>MENU</p>
</div>
<div class="flex">
<div class="cover"></div>
<div class="desc d1">
<h4>Design</h4>
<h1>Lorem1</h1>
<h3>Lorem ipsum dolor sit</h3>
<h4>23/2/2015</h4>
<p>Phasellus fringilla neque a ante consectetur, eget varius tellus molestie. Curabitur maximus egestas tristique. Suspendisse potenti. Sed posuere convallisPhasellus fringilla neque a ante consectetur, eget varius tellus molestie. Curabitur maximus egestas tristique. Suspendisse potenti. Sed posuere convallis</p>
<div class="button">
<p>PROJECT</p>
</div>
</div>
<div class="desc d2">
<h4>Design</h4>
<h1>Lorem2</h1>
<h3>Lorem ipsum dolor sit</h3>
<h4>23/2/2015</h4>
<p>Phasellus fringilla neque a ante consectetur, eget varius tellus molestie. Curabitur maximus egestas tristique. Suspendisse potenti. Sed posuere convallisPhasellus fringilla neque a ante consectetur, eget varius tellus molestie. Curabitur maximus egestas tristique. Suspendisse potenti. Sed posuere convallis</p>
<div class="button">
<p>PROJECT</p>
</div>
</div>
<div class="desc d3">
<h4>Design</h4>
<h1>Lorem3</h1>
<h3>Lorem ipsum dolor sit</h3>
<h4>23/2/2015</h4>
<p>Phasellus fringilla neque a ante consectetur, eget varius tellus molestie. Curabitur maximus egestas tristique. Suspendisse potenti. Sed posuere convallisPhasellus fringilla neque a ante consectetur, eget varius tellus molestie. Curabitur maximus egestas tristique. Suspendisse potenti. Sed posuere convallis</p>
<div class="button">
<p>PROJECT</p>
</div>
</div>
<div class="desc d4">
<h4>Design</h4>
<h1>Lorem4</h1>
<h3>Lorem ipsum dolor sit</h3>
<h4>23/2/2015</h4>
<p>Phasellus fringilla neque a ante consectetur, eget varius tellus molestie. Curabitur maximus egestas tristique. Suspendisse potenti. Sed posuere convallisPhasellus fringilla neque a ante consectetur, eget varius tellus molestie. Curabitur maximus egestas tristique. Suspendisse potenti. Sed posuere convallis</p>
<div class="button">
<p>PROJECT</p>
</div>
</div>
<div class="desc d5">
<h4>Design</h4>
<h1>Lorem5</h1>
<h3>Lorem ipsum dolor sit</h3>
<h4>23/2/2015</h4>
<p>Phasellus fringilla neque a ante consectetur, eget varius tellus molestie. Curabitur maximus egestas tristique. Suspendisse potenti. Sed posuere convallisPhasellus fringilla neque a ante consectetur, eget varius tellus molestie. Curabitur maximus egestas tristique. Suspendisse potenti. Sed posuere convallis</p>
<div class="button">
<p>PROJECT</p>
</div>
</div>
</div>
</div>
<div class="right half">
<div class="slide s1"></div>
<div class="slide s2"></div>
<div class="slide s3"></div>
<div class="slide s4"></div>
<div class="slide s5"></div>
</div>
</div>@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
* {
box-sizing: border-box;
}
body {
padding: 20px 0;
color: #212121;
background: #f8f8f6;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
h1, h2, h3, h4, h5, p, div {
margin: 0;
padding: 0;
}
.container {
background: white;
display: flex;
width: 90vw;
height: 600px;
box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.2);
position: relative;
}
.container .half {
width: 50%;
height: 100%;
}
.container .right {
background: #eaeae9;
overflow: hidden;
position: relative;
}
.container .right .slide {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
.container .right .s1 {
background: url(https://40.media.tumblr.com/tumblr_lqjip3WS6g1qcg4y9o1_500.jpg);
background-size: cover;
background-position: center;
z-index: 20;
}
.container .right .s2 {
background: url(https://40.media.tumblr.com/d02e05044230057d15370c6ed3931bec/tumblr_nqi8l5jxwr1uzrl54o1_500.jpg);
background-size: cover;
background-position: center;
}
.container .right .s3 {
background: url(https://s-media-cache-ak0.pinimg.com/736x/e0/42/c1/e042c17835ae71c25bbf2510d0b31bb5.jpg);
background-size: cover;
background-position: center;
}
.container .right .s4 {
background: url(https://static.tumblr.com/65162db388baaea011ad9b04912c0f58/ivguq93/wsGnlmsac/tumblr_static_91nsinx32eosw4kk8cg08s8o0_2048_v2.jpg);
background-size: cover;
background-position: center;
}
.container .right .s5 {
background: url(http://s8.favim.com/orig/150605/forest-green-mystery-nature-Favim.com-2793315.png);
background-size: cover;
background-position: center;
}
.container .left {
padding-right: 50px;
padding-left: 30px;
}
.container .left .menu {
cursor: pointer;
padding: 20px;
padding-left: 10px;
}
.container .left .menu img, .container .left .menu p {
display: inline-block;
vertical-align: top;
}
.container .left .menu img {
height: 20px;
}
.container .left .menu p {
margin-left: 10px;
}
.container .left .flex {
display: flex;
height: 90%;
width: 100%;
align-items: flex-end;
position: relative;
overflow: hidden;
}
.container .left .flex .cover {
background: white;
top: 0;
width: 100%;
height: 50px;
position: absolute;
z-index: 50;
}
.container .left .flex .desc {
position: absolute;
bottom: 20px;
width: 100%;
background: white;
margin-bottom: 40px;
}
.container .left .flex .desc h3, .container .left .flex .desc h4 {
font-family: Playfair Display;
font-weight: 400;
font-style: italic;
}
.container .left .flex .desc h4 {
margin-bottom: 20px;
}
.container .left .flex .desc h3 {
font-weight: 600;
}
.container .left .flex .desc h1, .container .left .flex .desc p {
font-family: Roboto;
}
.container .left .flex .desc h1 {
font-weight: 900;
background: white;
font-size: 50px;
text-transform: uppercase;
letter-spacing: 15px;
}
.container .left .flex .desc p {
font-size: 12px;
margin: 40px 0;
margin-bottom: 0;
line-height: 20px;
}
.container .left .flex .desc .button {
cursor: pointer;
text-decoration: underline;
}
@media screen and (max-width: 800px) {
.container {
flex-direction: column-reverse;
height: 600px;
}
.container .half {
width: 100%;
height: 70%;
}
.container .half .flex {
justify-content: flex-start;
height: 80%;
}
.container .half .flex .desc {
margin-top: 30px;
height: 100%;
margin-bottom: 0;
}
.container .half .flex .cover {
display: none;
}
.container .right {
height: 30%;
}
}$(document).ready(function() {
var prevS = $(".slide").length;
var currS = 1;
var nextS = 2;
var trigger = false;
// Setting up location of slides and text
$(".slide").css("top", "-100%");
$(".s" + currS).css("top", "0px");
$(".s" + prevS).css("top", "100%");
if($(window).innerWidth() > 800) {
$(".desc").css("bottom", "-100%");
$(".d" + currS).css("bottom", "0px");
$(".d" + prevS).css("bottom", "100%");
} else {
$(".desc").css("top", "100%");
$(".d" + currS).css("top", "0px");
$(".d" + prevS).css("top", "-100%");
}
// Making the card responsive
$(window).resize(function() {
if($(window).innerWidth() > 800) {
$(".desc").css("top", "auto");
$(".desc").css("bottom", "-100%");
$(".d" + currS).css("bottom", "0px");
$(".d" + prevS).css("bottom", "100%");
} else {
$(".desc").css("bottom", "auto");
$(".desc").css("top", "100%");
$(".d" + currS).css("top", "0px");
$(".d" + prevS).css("top", "-100%");
}
});
// using mousewheel as trigger
$(window).bind('mousewheel', function(event) {
// time offset between slides
if(!trigger) {
trigger = true;
// scroll up
if (event.originalEvent.wheelDelta >= 0) {
$(".s" + prevS).css("top", "100%");
$(".s" + currS).animate({top: "-100%"});
$(".s" + prevS).animate({top: "0px"});
$(".s" + nextS).css("top", "100%");
if($(window).innerWidth() > 800) {
$(".d" + prevS).css("bottom", "100%");
$(".d" + currS).animate({bottom: "-100%"});
$(".d" + prevS).animate({bottom: "0px"});
$(".d" + nextS).css("bottom", "-100%");
} else {
$(".d" + prevS).css("top", "100%");
$(".d" + currS).animate({top: "-100%"});
$(".d" + prevS).animate({top: "0px"});
$(".d" + nextS).css("top", "-100%");
}
currS--;
prevS--;
nextS--;
if(currS < 1) currS = 5;
if(prevS < 1) prevS = 5;
if(nextS < 1) nextS = 5;
}
// Scroll down
else {
$(".s" + nextS).css("top", "-100%");
$(".s" + currS).animate({top: "100%"});
$(".s" + prevS).css("top", "-100%");
$(".s" + nextS).animate({top: "0px"});
if($(window).innerWidth() > 800) {
$(".d" + prevS).css("bottom", "100%");
$(".d" + currS).animate({bottom: "100%"});
$(".d" + prevS).css("bottom", "-100%");
$(".d" + nextS).animate({bottom: "0px"});
} else {
$(".desc").css("z-index", "400");
$(".d" + nextS).css("top", "-100%");
$(".d" + currS).animate({top: "100%"});
$(".d" + prevS).css("top", "-100%");
$(".d" + nextS).animate({top: "0px"});
$(".d" + nextS).css("z-index", "5000");
$(".d" + currS).css("z-index", "5000");
}
currS++;
prevS++;
nextS++;
if(currS > $(".slide").length) currS = 1;
if(prevS > $(".slide").length) prevS = 1;
if(nextS > $(".slide").length) nextS = 1;
}
setTimeout(function(){ trigger = false }, 1000);
}
});
});<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic,900,900italic)
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900)
*
box-sizing: border-box
body
padding: 20px 0
color: #212121
background: #f8f8f6
margin: 0
display: flex
align-items: center
justify-content: center
h1,h2,h3,h4,h5,p, div
margin: 0
padding: 0
.container
background: white
display: flex
width: 90vw
height: 600px
box-shadow: 0px 1px 20px rgba(#000, .2)
position: relative
.half
width: 50%
height: 100%
.right
background: #eaeae9
overflow: hidden
position: relative
.slide
height: 100%
width: 100%
top: 0
left: 0
position: absolute
.s1
background: url(https://40.media.tumblr.com/tumblr_lqjip3WS6g1qcg4y9o1_500.jpg)
size: cover
position: center
z-index: 20
.s2
background: url(https://40.media.tumblr.com/d02e05044230057d15370c6ed3931bec/tumblr_nqi8l5jxwr1uzrl54o1_500.jpg)
size: cover
position: center
.s3
background: url(https://s-media-cache-ak0.pinimg.com/736x/e0/42/c1/e042c17835ae71c25bbf2510d0b31bb5.jpg)
size: cover
position: center
.s4
background: url(https://static.tumblr.com/65162db388baaea011ad9b04912c0f58/ivguq93/wsGnlmsac/tumblr_static_91nsinx32eosw4kk8cg08s8o0_2048_v2.jpg)
size: cover
position: center
.s5
background: url(http://s8.favim.com/orig/150605/forest-green-mystery-nature-Favim.com-2793315.png)
size: cover
position: center
.left
padding:
right: 50px
left: 30px
.menu
cursor: pointer
padding: 20px
left: 10px
img,p
display: inline-block
vertical-align: top
img
height: 20px
p
margin-left: 10px
.flex
display: flex
height: 90%
width: 100%
align-items: flex-end
position: relative
overflow: hidden
.cover
background: white
top: 0
width: 100%
height: 50px
position: absolute
z-index: 50
.desc
position: absolute
bottom: 20px
width: 100%
background: white
margin-bottom: 40px
h3, h4
font:
family: Playfair Display
weight: 400
style: italic
h4
margin-bottom: 20px
h3
font-weight: 600
h1,p
font-family: Roboto
h1
font-weight: 900
background: white
font-size: 50px
text-transform: uppercase
letter-spacing: 15px
p
font-size: 12px
margin: 40px 0
bottom: 0
line-height: 20px
.button
cursor: pointer
text-decoration: underline
@media screen and (max-width: 800px)
.container
flex-direction: column-reverse
height: 600px
.half
width: 100%
height: 70%
.flex
justify-content: flex-start
height: 80%
.desc
margin-top: 30px
height: 100%
margin-bottom: 0
.cover
display: none
.right
height: 30%Card scroll
Открыть элемент
Hamburger menu
<div class="nav-icon">
<div class="burger">
<div class="line_1 line"></div>
<div class="line_2 line"></div>
<div class="line_3 line"></div>
</div>
<div class="circle">
<div class="inner_circle"></div>
</div>
</div>* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100vw;
height: 100vh;
}
body .nav-icon {
position: relative;
}
body .nav-icon .burger {
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
body .nav-icon .burger .line {
background: #263238;
width: 40px;
height: 6px;
border-radius: 4px;
margin: 8px 0;
transform-origin: right;
transition: 400ms cubic-bezier(0.17, 0.67, 0.35, 1.15);
}
body .nav-icon .circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
width: 40px;
border-radius: 50%;
height: 40px;
opacity: 0;
border: #FFC107 40px solid;
transition: opacity 300ms, width 300ms cubic-bezier(0.17, 0.67, 0.35, 1.15), height 300ms cubic-bezier(0.17, 0.67, 0.35, 1.15), border 300ms 90ms cubic-bezier(0.17, 0.67, 0.35, 1.15);
}
body .active .burger .line_1 {
margin-left: -6px;
transform: rotate(-45deg);
}
body .active .burger .line_2 {
opacity: 0;
transform: translateX(-5px);
}
body .active .burger .line_3 {
margin-left: -6px;
transform: rotate(-315deg);
}
body .flash .circle {
width: 100px;
height: 100px;
border: 0px solid #FFC107;
opacity: 1;
}$(document).ready(function() {
$(".nav-icon").click(function() {
$(".nav-icon").toggleClass("active");
$(".nav-icon").addClass("flash");
setTimeout(function() {
$(".nav-icon").removeClass("flash");
},500)
});
});<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
Sass
*
box-sizing: border-box
body
margin: 0
padding: 0
display: flex
justify-content: center
align-items: center
flex-direction: column
width: 100vw
height: 100vh
.nav-icon
position: relative
.burger
position: absolute
z-index: 2
left: 50%
top: 50%
transform: translateY(-50%) translateX(-50%)
.line
background: #263238
width: 40px
height: 6px
border-radius: 4px
margin: 8px 0
transform-origin: right
transition: 400ms cubic-bezier(.17,.67,.35,1.15)
.circle
position: absolute
left: 50%
top: 50%
transform: translateY(-50%) translateX(-50%)
display: flex
justify-content: center
align-items: center
width: 40px
border-radius: 50%
height: 40px
opacity: 0
border: #FFC107 40px solid
transition: opacity 300ms, width 300ms cubic-bezier(.17,.67,.35,1.15), height 300ms cubic-bezier(.17,.67,.35,1.15), border 300ms 90ms cubic-bezier(.17,.67,.35,1.15)
.active
.burger
.line_1
margin-left: -6px
transform: rotate(-45deg)
.line_2
opacity: 0
transform: translateX(-5px)
.line_3
margin-left: -6px
transform: rotate(-315deg)
.flash
.circle
width: 100px
height: 100px
border: 0px solid #FFC107
opacity: 1
Hamburger menu
Открыть элемент
Фон анимация
<canvas id="sakura"></canvas>
<div class="btnbg">
</div>
<!-- sakura shader -->
<script id="sakura_point_vsh" type="x-shader/x_vertex">
uniform mat4 uProjection;
uniform mat4 uModelview;
uniform vec3 uResolution;
uniform vec3 uOffset;
uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
attribute vec3 aPosition;
attribute vec3 aEuler;
attribute vec2 aMisc; //x:size, y:fade
varying vec3 pposition;
varying float psize;
varying float palpha;
varying float pdist;
//varying mat3 rotMat;
varying vec3 normX;
varying vec3 normY;
varying vec3 normZ;
varying vec3 normal;
varying float diffuse;
varying float specular;
varying float rstop;
varying float distancefade;
void main(void) {
// Projection is based on vertical angle
vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);
gl_Position = uProjection * pos;
gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;
pposition = pos.xyz;
psize = aMisc.x;
pdist = length(pos.xyz);
palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);
vec3 elrsn = sin(aEuler);
vec3 elrcs = cos(aEuler);
mat3 rotx = mat3(
1.0, 0.0, 0.0,
0.0, elrcs.x, elrsn.x,
0.0, -elrsn.x, elrcs.x
);
mat3 roty = mat3(
elrcs.y, 0.0, -elrsn.y,
0.0, 1.0, 0.0,
elrsn.y, 0.0, elrcs.y
);
mat3 rotz = mat3(
elrcs.z, elrsn.z, 0.0,
-elrsn.z, elrcs.z, 0.0,
0.0, 0.0, 1.0
);
mat3 rotmat = rotx * roty * rotz;
normal = rotmat[2];
mat3 trrotm = mat3(
rotmat[0][0], rotmat[1][0], rotmat[2][0],
rotmat[0][1], rotmat[1][1], rotmat[2][1],
rotmat[0][2], rotmat[1][2], rotmat[2][2]
);
normX = trrotm[0];
normY = trrotm[1];
normZ = trrotm[2];
const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);
float tmpdfs = dot(lit, normal);
if(tmpdfs < 0.0) {
normal = -normal;
tmpdfs = dot(lit, normal);
}
diffuse = 0.4 + tmpdfs;
vec3 eyev = normalize(-pos.xyz);
if(dot(eyev, normal) > 0.0) {
vec3 hv = normalize(eyev + lit);
specular = pow(max(dot(hv, normal), 0.0), 20.0);
}
else {
specular = 0.0;
}
rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);
rstop = pow(rstop, 0.5);
//-0.69315 = ln(0.5)
distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
}
</script>
<script id="sakura_point_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
const vec3 fadeCol = vec3(0.08, 0.03, 0.06);
varying vec3 pposition;
varying float psize;
varying float palpha;
varying float pdist;
//varying mat3 rotMat;
varying vec3 normX;
varying vec3 normY;
varying vec3 normZ;
varying vec3 normal;
varying float diffuse;
varying float specular;
varying float rstop;
varying float distancefade;
float ellipse(vec2 p, vec2 o, vec2 r) {
vec2 lp = (p - o) / r;
return length(lp) - 1.0;
}
void main(void) {
vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;
vec3 d = vec3(0.0, 0.0, -1.0);
float nd = normZ.z; //dot(-normZ, d);
if(abs(nd) < 0.0001) discard;
float np = dot(normZ, p);
vec3 tp = p + d * np / nd;
vec2 coord = vec2(dot(normX, tp), dot(normY, tp));
//angle = 15 degree
const float flwrsn = 0.258819045102521;
const float flwrcs = 0.965925826289068;
mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);
vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;
float r;
if(flwrp.x < 0.0) {
r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);
}
else {
r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);
}
if(r > rstop) discard;
vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);
float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));
col *= vec3(1.0, grady, grady);
col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));
col = col * diffuse + specular;
col = mix(fadeCol, col, distancefade);
float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;
alpha = smoothstep(0.0, 1.0, alpha) * palpha;
gl_FragColor = vec4(col * 0.5, alpha);
}
</script>
<!-- effects -->
<script id="fx_common_vsh" type="x-shader/x_vertex">
uniform vec3 uResolution;
attribute vec2 aPosition;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
gl_Position = vec4(aPosition, 0.0, 1.0);
texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
}
</script>
<script id="bg_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform vec2 uTimes;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec3 col;
float c;
vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
c = exp(-pow(length(tmpv) * 1.8, 2.0));
col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
gl_FragColor = vec4(col * 0.5, 1.0);
}
</script>
<script id="fx_brightbuf_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec4 col = texture2D(uSrc, texCoord);
gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
}
</script>
<script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;
uniform vec4 uBlurDir; //dir(x, y), stride(z, w)
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec4 col = texture2D(uSrc, texCoord);
col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);
col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);
col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);
col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);
gl_FragColor = col / 5.0;
}
</script>
<!-- effect fragment shader template -->
<script id="fx_common_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
gl_FragColor = texture2D(uSrc, texCoord);
}
</script>
<!-- post processing -->
<script id="pp_final_vsh" type="x-shader/x_vertex">
uniform vec3 uResolution;
attribute vec2 aPosition;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
gl_Position = vec4(aPosition, 0.0, 1.0);
texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
}
</script>
<script id="pp_final_fsh" type="x-shader/x_fragment">
#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform sampler2D uBloom;
uniform vec2 uDelta;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {
vec4 srccol = texture2D(uSrc, texCoord) * 2.0;
vec4 bloomcol = texture2D(uBloom, texCoord);
vec4 col;
col = srccol + bloomcol * (vec4(1.0) + srccol);
col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);
col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)
gl_FragColor = vec4(col.rgb, 1.0);
gl_FragColor.a = 1.0;
}
</script>body {
padding:0;
margin:0;
overflow:hidden;
height: 600px;
}
canvas {
padding:0;
margin:0;
}
div.btnbg {
position:fixed;
left:0;
top:0;
}// Utilities
var Vector3 = {};
var Matrix44 = {};
Vector3.create = function(x, y, z) {
return {'x':x, 'y':y, 'z':z};
};
Vector3.dot = function (v0, v1) {
return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;
};
Vector3.cross = function (v, v0, v1) {
v.x = v0.y * v1.z - v0.z * v1.y;
v.y = v0.z * v1.x - v0.x * v1.z;
v.z = v0.x * v1.y - v0.y * v1.x;
};
Vector3.normalize = function (v) {
var l = v.x * v.x + v.y * v.y + v.z * v.z;
if(l > 0.00001) {
l = 1.0 / Math.sqrt(l);
v.x *= l;
v.y *= l;
v.z *= l;
}
};
Vector3.arrayForm = function(v) {
if(v.array) {
v.array[0] = v.x;
v.array[1] = v.y;
v.array[2] = v.z;
}
else {
v.array = new Float32Array([v.x, v.y, v.z]);
}
return v.array;
};
Matrix44.createIdentity = function () {
return new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]);
};
Matrix44.loadProjection = function (m, aspect, vdeg, near, far) {
var h = near * Math.tan(vdeg * Math.PI / 180.0 * 0.5) * 2.0;
var w = h * aspect;
m[0] = 2.0 * near / w;
m[1] = 0.0;
m[2] = 0.0;
m[3] = 0.0;
m[4] = 0.0;
m[5] = 2.0 * near / h;
m[6] = 0.0;
m[7] = 0.0;
m[8] = 0.0;
m[9] = 0.0;
m[10] = -(far + near) / (far - near);
m[11] = -1.0;
m[12] = 0.0;
m[13] = 0.0;
m[14] = -2.0 * far * near / (far - near);
m[15] = 0.0;
};
Matrix44.loadLookAt = function (m, vpos, vlook, vup) {
var frontv = Vector3.create(vpos.x - vlook.x, vpos.y - vlook.y, vpos.z - vlook.z);
Vector3.normalize(frontv);
var sidev = Vector3.create(1.0, 0.0, 0.0);
Vector3.cross(sidev, vup, frontv);
Vector3.normalize(sidev);
var topv = Vector3.create(1.0, 0.0, 0.0);
Vector3.cross(topv, frontv, sidev);
Vector3.normalize(topv);
m[0] = sidev.x;
m[1] = topv.x;
m[2] = frontv.x;
m[3] = 0.0;
m[4] = sidev.y;
m[5] = topv.y;
m[6] = frontv.y;
m[7] = 0.0;
m[8] = sidev.z;
m[9] = topv.z;
m[10] = frontv.z;
m[11] = 0.0;
m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);
m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);
m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);
m[15] = 1.0;
};
//
var timeInfo = {
'start':0, 'prev':0, // Date
'delta':0, 'elapsed':0 // Number(sec)
};
//
var gl;
var renderSpec = {
'width':0,
'height':0,
'aspect':1,
'array':new Float32Array(3),
'halfWidth':0,
'halfHeight':0,
'halfArray':new Float32Array(3)
// and some render targets. see setViewport()
};
renderSpec.setSize = function(w, h) {
renderSpec.width = w;
renderSpec.height = h;
renderSpec.aspect = renderSpec.width / renderSpec.height;
renderSpec.array[0] = renderSpec.width;
renderSpec.array[1] = renderSpec.height;
renderSpec.array[2] = renderSpec.aspect;
renderSpec.halfWidth = Math.floor(w / 2);
renderSpec.halfHeight = Math.floor(h / 2);
renderSpec.halfArray[0] = renderSpec.halfWidth;
renderSpec.halfArray[1] = renderSpec.halfHeight;
renderSpec.halfArray[2] = renderSpec.halfWidth / renderSpec.halfHeight;
};
function deleteRenderTarget(rt) {
gl.deleteFramebuffer(rt.frameBuffer);
gl.deleteRenderbuffer(rt.renderBuffer);
gl.deleteTexture(rt.texture);
}
function createRenderTarget(w, h) {
var ret = {
'width':w,
'height':h,
'sizeArray':new Float32Array([w, h, w / h]),
'dtxArray':new Float32Array([1.0 / w, 1.0 / h])
};
ret.frameBuffer = gl.createFramebuffer();
ret.renderBuffer = gl.createRenderbuffer();
ret.texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, ret.texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.bindFramebuffer(gl.FRAMEBUFFER, ret.frameBuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, ret.texture, 0);
gl.bindRenderbuffer(gl.RENDERBUFFER, ret.renderBuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, ret.renderBuffer);
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
return ret;
}
function compileShader(shtype, shsrc) {
var retsh = gl.createShader(shtype);
gl.shaderSource(retsh, shsrc);
gl.compileShader(retsh);
if(!gl.getShaderParameter(retsh, gl.COMPILE_STATUS)) {
var errlog = gl.getShaderInfoLog(retsh);
gl.deleteShader(retsh);
console.error(errlog);
return null;
}
return retsh;
}
function createShader(vtxsrc, frgsrc, uniformlist, attrlist) {
var vsh = compileShader(gl.VERTEX_SHADER, vtxsrc);
var fsh = compileShader(gl.FRAGMENT_SHADER, frgsrc);
if(vsh == null || fsh == null) {
return null;
}
var prog = gl.createProgram();
gl.attachShader(prog, vsh);
gl.attachShader(prog, fsh);
gl.deleteShader(vsh);
gl.deleteShader(fsh);
gl.linkProgram(prog);
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
var errlog = gl.getProgramInfoLog(prog);
console.error(errlog);
return null;
}
if(uniformlist) {
prog.uniforms = {};
for(var i = 0; i < uniformlist.length; i++) {
prog.uniforms[uniformlist[i]] = gl.getUniformLocation(prog, uniformlist[i]);
}
}
if(attrlist) {
prog.attributes = {};
for(var i = 0; i < attrlist.length; i++) {
var attr = attrlist[i];
prog.attributes[attr] = gl.getAttribLocation(prog, attr);
}
}
return prog;
}
function useShader(prog) {
gl.useProgram(prog);
for(var attr in prog.attributes) {
gl.enableVertexAttribArray(prog.attributes[attr]);;
}
}
function unuseShader(prog) {
for(var attr in prog.attributes) {
gl.disableVertexAttribArray(prog.attributes[attr]);;
}
gl.useProgram(null);
}
/////
var projection = {
'angle':60,
'nearfar':new Float32Array([0.1, 100.0]),
'matrix':Matrix44.createIdentity()
};
var camera = {
'position':Vector3.create(0, 0, 100),
'lookat':Vector3.create(0, 0, 0),
'up':Vector3.create(0, 1, 0),
'dof':Vector3.create(10.0, 4.0, 8.0),
'matrix':Matrix44.createIdentity()
};
var pointFlower = {};
var meshFlower = {};
var sceneStandBy = false;
var BlossomParticle = function () {
this.velocity = new Array(3);
this.rotation = new Array(3);
this.position = new Array(3);
this.euler = new Array(3);
this.size = 1.0;
this.alpha = 1.0;
this.zkey = 0.0;
};
BlossomParticle.prototype.setVelocity = function (vx, vy, vz) {
this.velocity[0] = vx;
this.velocity[1] = vy;
this.velocity[2] = vz;
};
BlossomParticle.prototype.setRotation = function (rx, ry, rz) {
this.rotation[0] = rx;
this.rotation[1] = ry;
this.rotation[2] = rz;
};
BlossomParticle.prototype.setPosition = function (nx, ny, nz) {
this.position[0] = nx;
this.position[1] = ny;
this.position[2] = nz;
};
BlossomParticle.prototype.setEulerAngles = function (rx, ry, rz) {
this.euler[0] = rx;
this.euler[1] = ry;
this.euler[2] = rz;
};
BlossomParticle.prototype.setSize = function (s) {
this.size = s;
};
BlossomParticle.prototype.update = function (dt, et) {
this.position[0] += this.velocity[0] * dt;
this.position[1] += this.velocity[1] * dt;
this.position[2] += this.velocity[2] * dt;
this.euler[0] += this.rotation[0] * dt;
this.euler[1] += this.rotation[1] * dt;
this.euler[2] += this.rotation[2] * dt;
};
function createPointFlowers() {
// get point sizes
var prm = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);
renderSpec.pointSize = {'min':prm[0], 'max':prm[1]};
var vtxsrc = document.getElementById("sakura_point_vsh").textContent;
var frgsrc = document.getElementById("sakura_point_fsh").textContent;
pointFlower.program = createShader(
vtxsrc, frgsrc,
['uProjection', 'uModelview', 'uResolution', 'uOffset', 'uDOF', 'uFade'],
['aPosition', 'aEuler', 'aMisc']
);
useShader(pointFlower.program);
pointFlower.offset = new Float32Array([0.0, 0.0, 0.0]);
pointFlower.fader = Vector3.create(0.0, 10.0, 0.0);
// paramerters: velocity[3], rotate[3]
pointFlower.numFlowers = 1600;
pointFlower.particles = new Array(pointFlower.numFlowers);
// vertex attributes {position[3], euler_xyz[3], size[1]}
pointFlower.dataArray = new Float32Array(pointFlower.numFlowers * (3 + 3 + 2));
pointFlower.positionArrayOffset = 0;
pointFlower.eulerArrayOffset = pointFlower.numFlowers * 3;
pointFlower.miscArrayOffset = pointFlower.numFlowers * 6;
pointFlower.buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
unuseShader(pointFlower.program);
for(var i = 0; i < pointFlower.numFlowers; i++) {
pointFlower.particles[i] = new BlossomParticle();
}
}
function initPointFlowers() {
//area
pointFlower.area = Vector3.create(20.0, 20.0, 20.0);
pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;
pointFlower.fader.x = 10.0; //env fade start
pointFlower.fader.y = pointFlower.area.z; //env fade half
pointFlower.fader.z = 0.1; //near fade start
//particles
var PI2 = Math.PI * 2.0;
var tmpv3 = Vector3.create(0, 0, 0);
var tmpv = 0;
var symmetryrand = function() {return (Math.random() * 2.0 - 1.0);};
for(var i = 0; i < pointFlower.numFlowers; i++) {
var tmpprtcl = pointFlower.particles[i];
//velocity
tmpv3.x = symmetryrand() * 0.3 + 0.8;
tmpv3.y = symmetryrand() * 0.2 - 1.0;
tmpv3.z = symmetryrand() * 0.3 + 0.5;
Vector3.normalize(tmpv3);
tmpv = 2.0 + Math.random() * 1.0;
tmpprtcl.setVelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);
//rotation
tmpprtcl.setRotation(
symmetryrand() * PI2 * 0.5,
symmetryrand() * PI2 * 0.5,
symmetryrand() * PI2 * 0.5
);
//position
tmpprtcl.setPosition(
symmetryrand() * pointFlower.area.x,
symmetryrand() * pointFlower.area.y,
symmetryrand() * pointFlower.area.z
);
//euler
tmpprtcl.setEulerAngles(
Math.random() * Math.PI * 2.0,
Math.random() * Math.PI * 2.0,
Math.random() * Math.PI * 2.0
);
//size
tmpprtcl.setSize(0.9 + Math.random() * 0.1);
}
}
function renderPointFlowers() {
//update
var PI2 = Math.PI * 2.0;
var limit = [pointFlower.area.x, pointFlower.area.y, pointFlower.area.z];
var repeatPos = function (prt, cmp, limit) {
if(Math.abs(prt.position[cmp]) - prt.size * 0.5 > limit) {
//out of area
if(prt.position[cmp] > 0) {
prt.position[cmp] -= limit * 2.0;
}
else {
prt.position[cmp] += limit * 2.0;
}
}
};
var repeatEuler = function (prt, cmp) {
prt.euler[cmp] = prt.euler[cmp] % PI2;
if(prt.euler[cmp] < 0.0) {
prt.euler[cmp] += PI2;
}
};
for(var i = 0; i < pointFlower.numFlowers; i++) {
var prtcl = pointFlower.particles[i];
prtcl.update(timeInfo.delta, timeInfo.elapsed);
repeatPos(prtcl, 0, pointFlower.area.x);
repeatPos(prtcl, 1, pointFlower.area.y);
repeatPos(prtcl, 2, pointFlower.area.z);
repeatEuler(prtcl, 0);
repeatEuler(prtcl, 1);
repeatEuler(prtcl, 2);
prtcl.alpha = 1.0;//(pointFlower.area.z - prtcl.position[2]) * 0.5;
prtcl.zkey = (camera.matrix[2] * prtcl.position[0]
+ camera.matrix[6] * prtcl.position[1]
+ camera.matrix[10] * prtcl.position[2]
+ camera.matrix[14]);
}
// sort
pointFlower.particles.sort(function(p0, p1){return p0.zkey - p1.zkey;});
// update data
var ipos = pointFlower.positionArrayOffset;
var ieuler = pointFlower.eulerArrayOffset;
var imisc = pointFlower.miscArrayOffset;
for(var i = 0; i < pointFlower.numFlowers; i++) {
var prtcl = pointFlower.particles[i];
pointFlower.dataArray[ipos] = prtcl.position[0];
pointFlower.dataArray[ipos + 1] = prtcl.position[1];
pointFlower.dataArray[ipos + 2] = prtcl.position[2];
ipos += 3;
pointFlower.dataArray[ieuler] = prtcl.euler[0];
pointFlower.dataArray[ieuler + 1] = prtcl.euler[1];
pointFlower.dataArray[ieuler + 2] = prtcl.euler[2];
ieuler += 3;
pointFlower.dataArray[imisc] = prtcl.size;
pointFlower.dataArray[imisc + 1] = prtcl.alpha;
imisc += 2;
}
//draw
gl.enable(gl.BLEND);
//gl.disable(gl.DEPTH_TEST);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
var prog = pointFlower.program;
useShader(prog);
gl.uniformMatrix4fv(prog.uniforms.uProjection, false, projection.matrix);
gl.uniformMatrix4fv(prog.uniforms.uModelview, false, camera.matrix);
gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
gl.uniform3fv(prog.uniforms.uDOF, Vector3.arrayForm(camera.dof));
gl.uniform3fv(prog.uniforms.uFade, Vector3.arrayForm(pointFlower.fader));
gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);
gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);
gl.vertexAttribPointer(prog.attributes.aPosition, 3, gl.FLOAT, false, 0, pointFlower.positionArrayOffset * Float32Array.BYTES_PER_ELEMENT);
gl.vertexAttribPointer(prog.attributes.aEuler, 3, gl.FLOAT, false, 0, pointFlower.eulerArrayOffset * Float32Array.BYTES_PER_ELEMENT);
gl.vertexAttribPointer(prog.attributes.aMisc, 2, gl.FLOAT, false, 0, pointFlower.miscArrayOffset * Float32Array.BYTES_PER_ELEMENT);
// doubler
for(var i = 1; i < 2; i++) {
var zpos = i * -2.0;
pointFlower.offset[0] = pointFlower.area.x * -1.0;
pointFlower.offset[1] = pointFlower.area.y * -1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
pointFlower.offset[0] = pointFlower.area.x * -1.0;
pointFlower.offset[1] = pointFlower.area.y * 1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
pointFlower.offset[0] = pointFlower.area.x * 1.0;
pointFlower.offset[1] = pointFlower.area.y * -1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
pointFlower.offset[0] = pointFlower.area.x * 1.0;
pointFlower.offset[1] = pointFlower.area.y * 1.0;
pointFlower.offset[2] = pointFlower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
}
//main
pointFlower.offset[0] = 0.0;
pointFlower.offset[1] = 0.0;
pointFlower.offset[2] = 0.0;
gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);
gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
unuseShader(prog);
gl.enable(gl.DEPTH_TEST);
gl.disable(gl.BLEND);
}
// effects
//common util
function createEffectProgram(vtxsrc, frgsrc, exunifs, exattrs) {
var ret = {};
var unifs = ['uResolution', 'uSrc', 'uDelta'];
if(exunifs) {
unifs = unifs.concat(exunifs);
}
var attrs = ['aPosition'];
if(exattrs) {
attrs = attrs.concat(exattrs);
}
ret.program = createShader(vtxsrc, frgsrc, unifs, attrs);
useShader(ret.program);
ret.dataArray = new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
1.0, 1.0
]);
ret.buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, ret.buffer);
gl.bufferData(gl.ARRAY_BUFFER, ret.dataArray, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
unuseShader(ret.program);
return ret;
}
// basic usage
// useEffect(prog, srctex({'texture':texid, 'dtxArray':(f32)[dtx, dty]})); //basic initialize
// gl.uniform**(...); //additional uniforms
// drawEffect()
// unuseEffect(prog)
// TEXTURE0 makes src
function useEffect(fxobj, srctex) {
var prog = fxobj.program;
useShader(prog);
gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);
if(srctex != null) {
gl.uniform2fv(prog.uniforms.uDelta, srctex.dtxArray);
gl.uniform1i(prog.uniforms.uSrc, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, srctex.texture);
}
}
function drawEffect(fxobj) {
gl.bindBuffer(gl.ARRAY_BUFFER, fxobj.buffer);
gl.vertexAttribPointer(fxobj.program.attributes.aPosition, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
function unuseEffect(fxobj) {
unuseShader(fxobj.program);
}
var effectLib = {};
function createEffectLib() {
var vtxsrc, frgsrc;
//common
var cmnvtxsrc = document.getElementById("fx_common_vsh").textContent;
//background
frgsrc = document.getElementById("bg_fsh").textContent;
effectLib.sceneBg = createEffectProgram(cmnvtxsrc, frgsrc, ['uTimes'], null);
// make brightpixels buffer
frgsrc = document.getElementById("fx_brightbuf_fsh").textContent;
effectLib.mkBrightBuf = createEffectProgram(cmnvtxsrc, frgsrc, null, null);
// direction blur
frgsrc = document.getElementById("fx_dirblur_r4_fsh").textContent;
effectLib.dirBlur = createEffectProgram(cmnvtxsrc, frgsrc, ['uBlurDir'], null);
//final composite
vtxsrc = document.getElementById("pp_final_vsh").textContent;
frgsrc = document.getElementById("pp_final_fsh").textContent;
effectLib.finalComp = createEffectProgram(vtxsrc, frgsrc, ['uBloom'], null);
}
// background
function createBackground() {
//console.log("create background");
}
function initBackground() {
//console.log("init background");
}
function renderBackground() {
gl.disable(gl.DEPTH_TEST);
useEffect(effectLib.sceneBg, null);
gl.uniform2f(effectLib.sceneBg.program.uniforms.uTimes, timeInfo.elapsed, timeInfo.delta);
drawEffect(effectLib.sceneBg);
unuseEffect(effectLib.sceneBg);
gl.enable(gl.DEPTH_TEST);
}
// post process
var postProcess = {};
function createPostProcess() {
//console.log("create post process");
}
function initPostProcess() {
//console.log("init post process");
}
function renderPostProcess() {
gl.enable(gl.TEXTURE_2D);
gl.disable(gl.DEPTH_TEST);
var bindRT = function (rt, isclear) {
gl.bindFramebuffer(gl.FRAMEBUFFER, rt.frameBuffer);
gl.viewport(0, 0, rt.width, rt.height);
if(isclear) {
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
};
//make bright buff
bindRT(renderSpec.wHalfRT0, true);
useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);
drawEffect(effectLib.mkBrightBuf);
unuseEffect(effectLib.mkBrightBuf);
// make bloom
for(var i = 0; i < 2; i++) {
var p = 1.5 + 1 * i;
var s = 2.0 + 1 * i;
bindRT(renderSpec.wHalfRT1, true);
useEffect(effectLib.dirBlur, renderSpec.wHalfRT0);
gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, p, 0.0, s, 0.0);
drawEffect(effectLib.dirBlur);
unuseEffect(effectLib.dirBlur);
bindRT(renderSpec.wHalfRT0, true);
useEffect(effectLib.dirBlur, renderSpec.wHalfRT1);
gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, 0.0, p, 0.0, s);
drawEffect(effectLib.dirBlur);
unuseEffect(effectLib.dirBlur);
}
//display
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, renderSpec.width, renderSpec.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
useEffect(effectLib.finalComp, renderSpec.mainRT);
gl.uniform1i(effectLib.finalComp.program.uniforms.uBloom, 1);
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, renderSpec.wHalfRT0.texture);
drawEffect(effectLib.finalComp);
unuseEffect(effectLib.finalComp);
gl.enable(gl.DEPTH_TEST);
}
/////
var SceneEnv = {};
function createScene() {
createEffectLib();
createBackground();
createPointFlowers();
createPostProcess();
sceneStandBy = true;
}
function initScene() {
initBackground();
initPointFlowers();
initPostProcess();
//camera.position.z = 17.320508;
camera.position.z = pointFlower.area.z + projection.nearfar[0];
projection.angle = Math.atan2(pointFlower.area.y, camera.position.z + pointFlower.area.z) * 180.0 / Math.PI * 2.0;
Matrix44.loadProjection(projection.matrix, renderSpec.aspect, projection.angle, projection.nearfar[0], projection.nearfar[1]);
}
function renderScene() {
//draw
Matrix44.loadLookAt(camera.matrix, camera.position, camera.lookat, camera.up);
gl.enable(gl.DEPTH_TEST);
//gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);
gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);
gl.clearColor(0.005, 0, 0.05, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
renderBackground();
renderPointFlowers();
renderPostProcess();
}
/////
function onResize(e) {
makeCanvasFullScreen(document.getElementById("sakura"));
setViewports();
if(sceneStandBy) {
initScene();
}
}
function setViewports() {
renderSpec.setSize(gl.canvas.width, gl.canvas.height);
gl.clearColor(0.2, 0.2, 0.5, 1.0);
gl.viewport(0, 0, renderSpec.width, renderSpec.height);
var rtfunc = function (rtname, rtw, rth) {
var rt = renderSpec[rtname];
if(rt) deleteRenderTarget(rt);
renderSpec[rtname] = createRenderTarget(rtw, rth);
};
rtfunc('mainRT', renderSpec.width, renderSpec.height);
rtfunc('wFullRT0', renderSpec.width, renderSpec.height);
rtfunc('wFullRT1', renderSpec.width, renderSpec.height);
rtfunc('wHalfRT0', renderSpec.halfWidth, renderSpec.halfHeight);
rtfunc('wHalfRT1', renderSpec.halfWidth, renderSpec.halfHeight);
}
function render() {
renderScene();
}
var animating = true;
function toggleAnimation(elm) {
animating ^= true;
if(animating) animate();
if(elm) {
elm.innerHTML = animating? "Stop":"Start";
}
}
function stepAnimation() {
if(!animating) animate();
}
function animate() {
var curdate = new Date();
timeInfo.elapsed = (curdate - timeInfo.start) / 1000.0;
timeInfo.delta = (curdate - timeInfo.prev) / 1000.0;
timeInfo.prev = curdate;
if(animating) requestAnimationFrame(animate);
render();
}
function makeCanvasFullScreen(canvas) {
var b = document.body;
var d = document.documentElement;
fullw = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
fullh = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
canvas.width = fullw;
canvas.height = fullh;
}
window.addEventListener('load', function(e) {
var canvas = document.getElementById("sakura");
try {
makeCanvasFullScreen(canvas);
gl = canvas.getContext('experimental-webgl');
} catch(e) {
alert("WebGL not supported." + e);
console.error(e);
return;
}
window.addEventListener('resize', onResize);
setViewports();
createScene();
initScene();
timeInfo.start = new Date();
timeInfo.prev = timeInfo.start;
animate();
});
//set window.requestAnimationFrame
(function (w, r) {
w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); };
})(window, 'equestAnimationFrame');Фон анимация
Открыть элемент
Прокрутка страницы
<div id="fullpage">
<section class="section s1">
<h1>Page1</h1>
</section>
<section class="section s2">
<h1>Page2</h1>
</section>
<section class="section s3">
<h1>Page3</h1>
</section>
<section class="section s4">
<h1>Page4</h1>
</section>
</div>*{
margin: 0;
padding: 0;
box-sizing: border-box;
}new fullpage('#fullpage', {
//options here
autoScrolling:true,
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
navigation: true,
onLeave: (origin,destination,direction)=> {
const section = destination.item;
console.log(section);
TweenMax.fromTo(section, 1, {opacity: 0}, {opacity: 1},'+=700');
}
});Файл fullpage.min.css
/*!
* fullPage 3.0.7
* https://github.com/alvarotrigo/fullPage.js
*
* @license GPLv3 for open source use only
* or Fullpage Commercial License for commercial use
* http://alvarotrigo.com/fullPage/pricing/
*
* Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
*/.fp-enabled body,html.fp-enabled{margin:0;padding:0;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0)}.fp-section{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fp-slide{float:left}.fp-slide,.fp-slidesContainer{height:100%;display:block}.fp-slides{z-index:1;height:100%;overflow:hidden;position:relative;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.fp-section.fp-table,.fp-slide.fp-table{display:table;table-layout:fixed;width:100%}.fp-tableCell{display:table-cell;vertical-align:middle;width:100%;height:100%}.fp-slidesContainer{float:left;position:relative}.fp-controlArrow{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;position:absolute;z-index:4;top:50%;cursor:pointer;width:0;height:0;border-style:solid;margin-top:-38px;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.fp-controlArrow.fp-prev{left:15px;width:0;border-width:38.5px 34px 38.5px 0;border-color:transparent #fff transparent transparent}.fp-controlArrow.fp-next{right:15px;border-width:38.5px 0 38.5px 34px;border-color:transparent transparent transparent #fff}.fp-scrollable{overflow:hidden;position:relative}.fp-scroller{overflow:hidden}.iScrollIndicator{border:0!important}.fp-notransition{-webkit-transition:none!important;transition:none!important}#fp-nav{position:fixed;z-index:100;margin-top:-32px;top:50%;opacity:1;-webkit-transform:translate3d(0,0,0)}#fp-nav.fp-right{right:17px}#fp-nav.fp-left{left:17px}.fp-slidesNav{position:absolute;z-index:4;opacity:1;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);left:0!important;right:0;margin:0 auto!important}.fp-slidesNav.fp-bottom{bottom:17px}.fp-slidesNav.fp-top{top:17px}#fp-nav ul,.fp-slidesNav ul{margin:0;padding:0}#fp-nav ul li,.fp-slidesNav ul li{display:block;width:14px;height:13px;margin:7px;position:relative}.fp-slidesNav ul li{display:inline-block}#fp-nav ul li a,.fp-slidesNav ul li a{display:block;position:relative;z-index:1;width:100%;height:100%;cursor:pointer;text-decoration:none}#fp-nav ul li a.active span,#fp-nav ul li:hover a.active span,.fp-slidesNav ul li a.active span,.fp-slidesNav ul li:hover a.active span{height:12px;width:12px;margin:-6px 0 0 -6px;border-radius:100%}#fp-nav ul li a span,.fp-slidesNav ul li a span{border-radius:50%;position:absolute;z-index:1;height:4px;width:4px;border:0;background:#333;left:50%;top:50%;margin:-2px 0 0 -2px;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}#fp-nav ul li:hover a span,.fp-slidesNav ul li:hover a span{width:10px;height:10px;margin:-5px 0 0 -5px}#fp-nav ul li .fp-tooltip{position:absolute;top:-2px;color:#fff;font-size:14px;font-family:arial,helvetica,sans-serif;white-space:nowrap;max-width:220px;overflow:hidden;display:block;opacity:0;width:0;cursor:pointer}#fp-nav ul li:hover .fp-tooltip,#fp-nav.fp-show-active a.active+.fp-tooltip{-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;width:auto;opacity:1}#fp-nav ul li .fp-tooltip.fp-right{right:20px}#fp-nav ul li .fp-tooltip.fp-left{left:20px}.fp-auto-height .fp-slide,.fp-auto-height .fp-tableCell,.fp-auto-height.fp-section{height:auto!important}.fp-responsive .fp-auto-height-responsive .fp-slide,.fp-responsive .fp-auto-height-responsive .fp-tableCell,.fp-responsive .fp-auto-height-responsive.fp-section{height:auto!important}.fp-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/*# sourceMappingURL=fullpage.min.css.map */
Файл fullpage.min.js
/*!
* fullPage 3.0.7
* https://github.com/alvarotrigo/fullPage.js
*
* @license GPLv3 for open source use only
* or Fullpage Commercial License for commercial use
* http://alvarotrigo.com/fullPage/pricing/
*
* Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
*/
!function(e,t,n,o,r){"function"==typeof define&&define.amd?define(function(){return e.fullpage=o(t,n),e.fullpage}):"object"==typeof exports?module.exports=o(t,n):t.fullpage=o(t,n)}(this,window,document,function(Rt,Nt){"use strict";var zt="fullpage-wrapper",jt="."+zt,Pt="fp-responsive",Dt="fp-notransition",Vt="fp-destroyed",Wt="fp-enabled",Yt="fp-viewing",Ft="active",Ut="."+Ft,Xt="fp-completely",Kt="fp-section",_t="."+Kt,$t=_t+Ut,qt="fp-tableCell",Qt="."+qt,Gt="fp-auto-height",Jt="fp-normal-scroll",Zt="fp-nav",en="#"+Zt,tn="fp-tooltip",nn="fp-slide",on="."+nn,rn=on+Ut,ln="fp-slides",an="."+ln,sn="fp-slidesContainer",cn="."+sn,un="fp-table",fn="fp-slidesNav",dn="."+fn,vn=dn+" a",e="fp-controlArrow",pn="."+e,hn="fp-prev",gn=pn+".fp-prev",mn=pn+".fp-next";function Sn(e,t){Rt.console&&Rt.console[e]&&Rt.console[e]("fullPage: "+t)}function bn(e,t){return(t=1<arguments.length?t:Nt)?t.querySelectorAll(e):null}function wn(e){e=e||{};for(var t=1,n=arguments.length;t<n;++t){var o=arguments[t];if(o)for(var r in o)o.hasOwnProperty(r)&&("[object Object]"!==Object.prototype.toString.call(o[r])?e[r]=o[r]:e[r]=wn(e[r],o[r]))}return e}function yn(e,t){return null!=e&&(e.classList?e.classList.contains(t):new RegExp("(^| )"+t+"( |$)","gi").test(e.className))}function En(){return"innerHeight"in Rt?Rt.innerHeight:Nt.documentElement.offsetHeight}function Ln(){return Rt.innerWidth}function xn(e,t){var n;for(n in e=l(e),t)if(t.hasOwnProperty(n)&&null!==n)for(var o=0;o<e.length;o++){e[o].style[n]=t[n]}return e}function n(e,t,n){for(var o=e[n];o&&!_n(o,t);)o=o[n];return o}function An(e,t){return n(e,t,"previousElementSibling")}function Tn(e,t){return n(e,t,"nextElementSibling")}function kn(e){return e.previousElementSibling}function On(e){return e.nextElementSibling}function Mn(e){return e[e.length-1]}function Cn(e,t){e=i(e)?e[0]:e;for(var n=null!=t?bn(t,e.parentNode):e.parentNode.childNodes,o=0,r=0;r<n.length;r++){if(n[r]==e)return o;1==n[r].nodeType&&o++}return-1}function l(e){return i(e)?e:[e]}function Bn(e){e=l(e);for(var t=0;t<e.length;t++)e[t].style.display="none";return e}function Hn(e){e=l(e);for(var t=0;t<e.length;t++)e[t].style.display="block";return e}function i(e){return"[object Array]"===Object.prototype.toString.call(e)||"[object NodeList]"===Object.prototype.toString.call(e)}function In(e,t){e=l(e);for(var n=0;n<e.length;n++){var o=e[n];o.classList?o.classList.add(t):o.className+=" "+t}return e}function Rn(e,t){e=l(e);for(var n=t.split(" "),o=0;o<n.length;o++){t=n[o];for(var r=0;r<e.length;r++){var i=e[r];i.classList?i.classList.remove(t):i.className=i.className.replace(new RegExp("(^|\\b)"+t.split(" ").join("|")+"(\\b|$)","gi")," ")}}return e}function Nn(e,t){t.appendChild(e)}function o(e,t,n){var o;t=t||Nt.createElement("div");for(var r=0;r<e.length;r++){var i=e[r];(n&&!r||!n)&&(o=t.cloneNode(!0),i.parentNode.insertBefore(o,i)),o.appendChild(i)}return e}function zn(e,t){o(e,t,!0)}function jn(e,t){for("string"==typeof t&&(t=qn(t)),e.appendChild(t);e.firstChild!==t;)t.appendChild(e.firstChild)}function Pn(e){for(var t=Nt.createDocumentFragment();e.firstChild;)t.appendChild(e.firstChild);e.parentNode.replaceChild(t,e)}function Dn(e,t){return e&&1===e.nodeType?_n(e,t)?e:Dn(e.parentNode,t):null}function Vn(e,t){r(e,e.nextSibling,t)}function Wn(e,t){r(e,e,t)}function r(e,t,n){i(n)||("string"==typeof n&&(n=qn(n)),n=[n]);for(var o=0;o<n.length;o++)e.parentNode.insertBefore(n[o],t)}function Yn(){var e=Nt.documentElement;return(Rt.pageYOffset||e.scrollTop)-(e.clientTop||0)}function Fn(t){return Array.prototype.filter.call(t.parentNode.children,function(e){return e!==t})}function Un(e){e.preventDefault?e.preventDefault():e.returnValue=!1}function Xn(e){if("function"==typeof e)return!0;var t=Object.prototype.toString(e);return"[object Function]"===t||"[object GeneratorFunction]"===t}function Kn(e,t,n){var o;n=void 0===n?{}:n,"function"==typeof Rt.CustomEvent?o=new CustomEvent(t,{detail:n}):(o=Nt.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,n),e.dispatchEvent(o)}function _n(e,t){return(e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector).call(e,t)}function $n(e,t){if("boolean"==typeof t)for(var n=0;n<e.length;n++)e[n].style.display=t?"block":"none";return e}function qn(e){var t=Nt.createElement("div");return t.innerHTML=e.trim(),t.firstChild}function Qn(e){e=l(e);for(var t=0;t<e.length;t++){var n=e[t];n&&n.parentElement&&n.parentNode.removeChild(n)}}function a(e,t,n){for(var o=e[n],r=[];o;)(_n(o,t)||null==t)&&r.push(o),o=o[n];return r}function Gn(e,t){return a(e,t,"nextElementSibling")}function Jn(e,t){return a(e,t,"previousElementSibling")}return Rt.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=function(e,t){t=t||Rt;for(var n=0;n<this.length;n++)e.call(t,this[n],n,this)}),Rt.fp_utils={$:bn,deepExtend:wn,hasClass:yn,getWindowHeight:En,css:xn,until:n,prevUntil:An,nextUntil:Tn,prev:kn,next:On,last:Mn,index:Cn,getList:l,hide:Bn,show:Hn,isArrayOrList:i,addClass:In,removeClass:Rn,appendTo:Nn,wrap:o,wrapAll:zn,wrapInner:jn,unwrap:Pn,closest:Dn,after:Vn,before:Wn,insertBefore:r,getScrollTop:Yn,siblings:Fn,preventDefault:Un,isFunction:Xn,trigger:Kn,matches:_n,toggle:$n,createElementFromHTML:qn,remove:Qn,filter:function(e,t){Array.prototype.filter.call(e,t)},untilAll:a,nextAll:Gn,prevAll:Jn,showError:Sn},function(e,E){var n=E&&new RegExp("([\\d\\w]{8}-){3}[\\d\\w]{8}|^(?=.*?[A-Y])(?=.*?[a-y])(?=.*?[0-8])(?=.*?[#?!@$%^&*-]).{8,}$").test(E.licenseKey)||-1<Nt.domain.indexOf("alvarotrigo.com"),r=bn("html, body"),u=bn("html")[0],L=bn("body")[0];if(!yn(u,Wt)){var h={};E=wn({menu:!1,anchors:[],lockAnchors:!1,navigation:!1,navigationPosition:"right",navigationTooltips:[],showActiveTooltip:!1,slidesNavigation:!1,slidesNavPosition:"bottom",scrollBar:!1,hybrid:!1,css3:!0,scrollingSpeed:700,autoScrolling:!0,fitToSection:!0,fitToSectionDelay:1e3,easing:"easeInOutCubic",easingcss3:"ease",loopBottom:!1,loopTop:!1,loopHorizontal:!0,continuousVertical:!1,continuousHorizontal:!1,scrollHorizontally:!1,interlockedSlides:!1,dragAndMove:!1,offsetSections:!1,resetSliders:!1,fadingEffect:!1,normalScrollElements:null,scrollOverflow:!1,scrollOverflowReset:!1,scrollOverflowHandler:Rt.fp_scrolloverflow?Rt.fp_scrolloverflow.iscrollHandler:null,scrollOverflowOptions:null,touchSensitivity:5,touchWrapper:"string"==typeof e?bn(e)[0]:e,bigSectionsDestination:null,keyboardScrolling:!0,animateAnchor:!0,recordHistory:!0,controlArrows:!0,controlArrowColor:"#fff",verticalCentered:!0,sectionsColor:[],paddingTop:0,paddingBottom:0,fixedElements:null,responsive:0,responsiveWidth:0,responsiveHeight:0,responsiveSlides:!1,parallax:!1,parallaxOptions:{type:"reveal",percentage:62,property:"translate"},cards:!1,cardsOptions:{perspective:100,fadeContent:!0,fadeBackground:!0},sectionSelector:".section",slideSelector:".slide",v2compatible:!1,afterLoad:null,onLeave:null,afterRender:null,afterResize:null,afterReBuild:null,afterSlideLoad:null,onSlideLeave:null,afterResponsive:null,lazyLoading:!0},E);var x,i,c,f,a=!1,o=navigator.userAgent.match(/(iPhone|iPod|iPad|Android|playbook|silk|BlackBerry|BB10|Windows Phone|Tizen|Bada|webOS|IEMobile|Opera Mini)/),l="ontouchstart"in Rt||0<navigator.msMaxTouchPoints||navigator.maxTouchPoints,d="string"==typeof e?bn(e)[0]:e,A=En(),s=Ln(),g=!1,t=!0,T=!0,v=[],p={m:{up:!0,down:!0,left:!0,right:!0}};p.k=wn({},p.m);var m,S,b,w,y,k,O,M,C,B=Rt.PointerEvent?{down:"pointerdown",move:"pointermove"}:{down:"MSPointerDown",move:"MSPointerMove"},H={touchmove:"ontouchmove"in Rt?"touchmove":B.move,touchstart:"ontouchstart"in Rt?"touchstart":B.down},I='a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]',R=!1;try{var N=Object.defineProperty({},"passive",{get:function(){R=!0}});Rt.addEventListener("testPassive",null,N),Rt.removeEventListener("testPassive",null,N)}catch(e){}var z,j,P=wn({},E),D=!1,V=!0,W=["parallax","scrollOverflowReset","dragAndMove","offsetSections","fadingEffect","responsiveSlides","continuousHorizontal","interlockedSlides","scrollHorizontally","resetSliders","cards"];Ot(),Rt.fp_easings=wn(Rt.fp_easings,{easeInOutCubic:function(e,t,n,o){return(e/=o/2)<1?n/2*e*e*e+t:n/2*((e-=2)*e*e+2)+t}}),d&&(h.version="3.0.5",h.setAutoScrolling=J,h.setRecordHistory=Z,h.setScrollingSpeed=ee,h.setFitToSection=te,h.setLockAnchors=function(e){E.lockAnchors=e},h.setMouseWheelScrolling=ne,h.setAllowScrolling=oe,h.setKeyboardScrolling=ie,h.moveSectionUp=le,h.moveSectionDown=ae,h.silentMoveTo=se,h.moveTo=ce,h.moveSlideRight=ue,h.moveSlideLeft=fe,h.fitToSection=Le,h.reBuild=de,h.setResponsive=pe,h.getFullpageData=function(){return E},h.destroy=function(e){J(!1,"internal"),oe(!0),re(!1),ie(!1),In(d,Vt),[y,w,S,k,O,C,b].forEach(function(e){clearTimeout(e)}),Rt.removeEventListener("scroll",Ee),Rt.removeEventListener("hashchange",$e),Rt.removeEventListener("resize",it),Nt.removeEventListener("keydown",Qe),Nt.removeEventListener("keyup",Ge),["click","touchstart"].forEach(function(e){Nt.removeEventListener(e,he)}),["mouseenter","touchstart","mouseleave","touchend"].forEach(function(e){Nt.removeEventListener(e,me,!0)}),e&&(xt(0),bn("img[data-src], source[data-src], audio[data-src], iframe[data-src]",d).forEach(function(e){De(e,"src")}),bn("img[data-srcset]").forEach(function(e){De(e,"srcset")}),Qn(bn(en+", "+dn+", "+pn)),xn(bn(_t),{height:"","background-color":"",padding:""}),xn(bn(on),{width:""}),xn(d,{height:"",position:"","-ms-touch-action":"","touch-action":""}),xn(r,{overflow:"",height:""}),Rn(u,Wt),Rn(L,Pt),L.className.split(/\s+/).forEach(function(e){0===e.indexOf(Yt)&&Rn(L,e)}),bn(_t+", "+on).forEach(function(e){E.scrollOverflowHandler&&E.scrollOverflow&&E.scrollOverflowHandler.remove(e),Rn(e,un+" "+Ft+" "+Xt);var t=e.getAttribute("data-fp-styles");t&&e.setAttribute("style",e.getAttribute("data-fp-styles")),yn(e,Kt)&&!D&&e.removeAttribute("data-anchor")}),ct(d),[Qt,cn,an].forEach(function(e){bn(e,d).forEach(function(e){Pn(e)})}),xn(d,{"-webkit-transition":"none",transition:"none"}),Rt.scrollTo(0,0),[Kt,nn,sn].forEach(function(e){Rn(bn("."+e),e)}))},h.getActiveSection=function(){return new Ht(bn($t)[0])},h.getActiveSlide=function(){return ze(bn(rn,bn($t)[0])[0])},h.test={top:"0px",translate3d:"translate3d(0px, 0px, 0px)",translate3dH:function(){for(var e=[],t=0;t<bn(E.sectionSelector,d).length;t++)e.push("translate3d(0px, 0px, 0px)");return e}(),left:function(){for(var e=[],t=0;t<bn(E.sectionSelector,d).length;t++)e.push(0);return e}(),options:E,setAutoScrolling:J},h.shared={afterRenderActions:ye,isNormalScrollElement:!1},Rt.fullpage_api=h,E.$&&Object.keys(h).forEach(function(e){E.$.fn.fullpage[e]=h[e]}),E.css3&&(E.css3=function(){var e,t=Nt.createElement("p"),n={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};for(var o in t.style.display="block",Nt.body.insertBefore(t,null),n)void 0!==t.style[o]&&(t.style[o]="translate3d(1px,1px,1px)",e=Rt.getComputedStyle(t).getPropertyValue(n[o]));return Nt.body.removeChild(t),void 0!==e&&0<e.length&&"none"!==e}()),E.scrollBar=E.scrollBar||E.hybrid,function(){if(!E.anchors.length){var e="[data-anchor]",t=bn(E.sectionSelector.split(",").join(e+",")+e,d);t.length&&(D=!0,t.forEach(function(e){E.anchors.push(e.getAttribute("data-anchor").toString())}))}if(!E.navigationTooltips.length){var e="[data-tooltip]",n=bn(E.sectionSelector.split(",").join(e+",")+e,d);n.length&&n.forEach(function(e){E.navigationTooltips.push(e.getAttribute("data-tooltip").toString())})}}(),function(){xn(d,{height:"100%",position:"relative"}),In(d,zt),In(u,Wt),A=En(),Rn(d,Vt),In(bn(E.sectionSelector,d),Kt),In(bn(E.slideSelector,d),nn);for(var e=bn(_t),t=0;t<e.length;t++){var n=t,o=e[t],r=bn(on,o),i=r.length;o.setAttribute("data-fp-styles",o.getAttribute("style")),s=o,(c=n)||null!=bn($t)[0]||In(s,Ft),f=bn($t)[0],xn(s,{height:A+"px"}),E.paddingTop&&xn(s,{"padding-top":E.paddingTop}),E.paddingBottom&&xn(s,{"padding-bottom":E.paddingBottom}),void 0!==E.sectionsColor[c]&&xn(s,{"background-color":E.sectionsColor[c]}),void 0!==E.anchors[c]&&s.setAttribute("data-anchor",E.anchors[c]),l=o,a=n,void 0!==E.anchors[a]&&yn(l,Ft)&&ut(E.anchors[a],a),E.menu&&E.css3&&null!=Dn(bn(E.menu)[0],jt)&&bn(E.menu).forEach(function(e){L.appendChild(e)}),0<i?be(o,r,i):E.verticalCentered&&dt(o)}var l,a,s,c;E.fixedElements&&E.css3&&bn(E.fixedElements).forEach(function(e){L.appendChild(e)}),E.navigation&&function(){var e=Nt.createElement("div");e.setAttribute("id",Zt);var t=Nt.createElement("ul");e.appendChild(t),Nn(e,L);var n=bn(en)[0];In(n,"fp-"+E.navigationPosition),E.showActiveTooltip&&In(n,"fp-show-active");for(var o="",r=0;r<bn(_t).length;r++){var i="";E.anchors.length&&(i=E.anchors[r]),o+='<li><a href="#'+i+'"><span class="fp-sr-only">'+we(r,"Section")+"</span><span></span></a>";var l=E.navigationTooltips[r];void 0!==l&&""!==l&&(o+='<div class="'+tn+" fp-"+E.navigationPosition+'">'+l+"</div>"),o+="</li>"}bn("ul",n)[0].innerHTML=o,xn(bn(en),{"margin-top":"-"+bn(en)[0].offsetHeight/2+"px"}),In(bn("a",bn("li",bn(en)[0])[Cn(bn($t)[0],_t)]),Ft)}(),bn('iframe[src*="youtube.com/embed/"]',d).forEach(function(e){var t,n,o;n="enablejsapi=1",o=(t=e).getAttribute("src"),t.setAttribute("src",o+(/\?/.test(o)?"&":"?")+n)}),E.scrollOverflow&&(m=E.scrollOverflowHandler.init(E))}(),oe(!0),re(!0),J(E.autoScrolling,"internal"),at(),yt(),"complete"===Nt.readyState&&_e(),Rt.addEventListener("load",_e),E.scrollOverflow||ye(),function(){for(var e=1;e<4;e++)C=setTimeout(Se,350*e)}(),Rt.addEventListener("scroll",Ee),Rt.addEventListener("hashchange",$e),Rt.addEventListener("blur",tt),Rt.addEventListener("resize",it),Nt.addEventListener("keydown",Qe),Nt.addEventListener("keyup",Ge),["click","touchstart"].forEach(function(e){Nt.addEventListener(e,he)}),E.normalScrollElements&&(["mouseenter","touchstart"].forEach(function(e){ge(e,!1)}),["mouseleave","touchend"].forEach(function(e){ge(e,!0)})));var Y=!1,F=0,U=0,X=0,K=0,_=0,$=(new Date).getTime(),q=0,Q=0,G=A;return h}function J(e,t){e||xt(0),kt("autoScrolling",e,t);var n=bn($t)[0];if(E.autoScrolling&&!E.scrollBar)xn(r,{overflow:"hidden",height:"100%"}),Z(P.recordHistory,"internal"),xn(d,{"-ms-touch-action":"none","touch-action":"none"}),null!=n&&xt(n.offsetTop);else if(xn(r,{overflow:"visible",height:"initial"}),Z(!!E.autoScrolling&&P.recordHistory,"internal"),xn(d,{"-ms-touch-action":"","touch-action":""}),null!=n){var o=je(n.offsetTop);o.element.scrollTo(0,o.options)}}function Z(e,t){kt("recordHistory",e,t)}function ee(e,t){kt("scrollingSpeed",e,t)}function te(e,t){kt("fitToSection",e,t)}function ne(e){e?(function(){var e,t="";Rt.addEventListener?e="addEventListener":(e="attachEvent",t="on");var n="onwheel"in Nt.createElement("div")?"wheel":void 0!==Nt.onmousewheel?"mousewheel":"DOMMouseScroll",o=!!R&&{passive:!1};"DOMMouseScroll"==n?Nt[e](t+"MozMousePixelScroll",Ce,o):Nt[e](t+n,Ce,o)}(),d.addEventListener("mousedown",Je),d.addEventListener("mouseup",Ze)):(Nt.addEventListener?(Nt.removeEventListener("mousewheel",Ce,!1),Nt.removeEventListener("wheel",Ce,!1),Nt.removeEventListener("MozMousePixelScroll",Ce,!1)):Nt.detachEvent("onmousewheel",Ce),d.removeEventListener("mousedown",Je),d.removeEventListener("mouseup",Ze))}function oe(t,e){void 0!==e?(e=e.replace(/ /g,"").split(",")).forEach(function(e){Tt(t,e,"m")}):Tt(t,"all","m")}function re(e){e?(ne(!0),function(){if(o||l){E.autoScrolling&&(L.removeEventListener(H.touchmove,Ae,{passive:!1}),L.addEventListener(H.touchmove,Ae,{passive:!1}));var e=E.touchWrapper;e.removeEventListener(H.touchstart,Oe),e.removeEventListener(H.touchmove,Te,{passive:!1}),e.addEventListener(H.touchstart,Oe),e.addEventListener(H.touchmove,Te,{passive:!1})}}()):(ne(!1),function(){if(o||l){E.autoScrolling&&(L.removeEventListener(H.touchmove,Te,{passive:!1}),L.removeEventListener(H.touchmove,Ae,{passive:!1}));var e=E.touchWrapper;e.removeEventListener(H.touchstart,Oe),e.removeEventListener(H.touchmove,Te,{passive:!1})}}())}function ie(t,e){void 0!==e?(e=e.replace(/ /g,"").split(",")).forEach(function(e){Tt(t,e,"k")}):(Tt(t,"all","k"),E.keyboardScrolling=t)}function le(){var e=An(bn($t)[0],_t);e||!E.loopTop&&!E.continuousVertical||(e=Mn(bn(_t))),null!=e&&Ie(e,null,!0)}function ae(){var e=Tn(bn($t)[0],_t);e||!E.loopBottom&&!E.continuousVertical||(e=bn(_t)[0]),null!=e&&Ie(e,null,!1)}function se(e,t){ee(0,"internal"),ce(e,t),ee(P.scrollingSpeed,"internal")}function ce(e,t){var n=ht(e);void 0!==t?gt(e,t):null!=n&&Ie(n)}function ue(e){Be("right",e)}function fe(e){Be("left",e)}function de(e){if(!yn(d,Vt)){g=!0,A=En(),s=Ln();for(var t=bn(_t),n=0;n<t.length;++n){var o=t[n],r=bn(an,o)[0],i=bn(on,o);E.verticalCentered&&xn(bn(Qt,o),{height:vt(o)+"px"}),xn(o,{height:A+"px"}),1<i.length&&ot(r,bn(rn,r)[0])}E.scrollOverflow&&m.createScrollBarForAll();var l=Cn(bn($t)[0],_t);l&&se(l+1),g=!1,Xn(E.afterResize)&&e&&E.afterResize.call(d,Rt.innerWidth,Rt.innerHeight),Xn(E.afterReBuild)&&!e&&E.afterReBuild.call(d)}}function ve(){return yn(L,Pt)}function pe(e){var t=ve();e?t||(J(!1,"internal"),te(!1,"internal"),Bn(bn(en)),In(L,Pt),Xn(E.afterResponsive)&&E.afterResponsive.call(d,e),E.scrollOverflow&&m.createScrollBarForAll()):t&&(J(P.autoScrolling,"internal"),te(P.autoScrolling,"internal"),Hn(bn(en)),Rn(L,Pt),Xn(E.afterResponsive)&&E.afterResponsive.call(d,e))}function he(e){var t=e.target;t&&Dn(t,en+" a")?function(e){Un(e);var t=Cn(Dn(this,en+" li"));Ie(bn(_t)[t])}.call(t,e):_n(t,".fp-tooltip")?function(){Kn(kn(this),"click")}.call(t):_n(t,pn)?function(){var e=Dn(this,_t);yn(this,hn)?p.m.left&&fe(e):p.m.right&&ue(e)}.call(t,e):_n(t,vn)||null!=Dn(t,vn)?function(e){Un(e);var t=bn(an,Dn(this,_t))[0],n=bn(on,t)[Cn(Dn(this,"li"))];ot(t,n)}.call(t,e):Dn(t,E.menu+" [data-menuanchor]")&&function(e){!bn(E.menu)[0]||!E.lockAnchors&&E.anchors.length||(Un(e),ce(this.getAttribute("data-menuanchor")))}.call(t,e)}function ge(e,t){Nt["fp_"+e]=t,Nt.addEventListener(e,me,!0)}function me(e){var o=event.toElement||e.relatedTarget||e.target,t=e.type,r=!1;o!=Nt&&o?("touchend"===t&&(V=!1,setTimeout(function(){V=!0},800)),("mouseenter"!==t||V)&&(E.normalScrollElements.split(",").forEach(function(e){if(!r){var t=_n(o,e),n=Dn(o,e);(t||n)&&(h.shared.isNormalScrollElement||re(!1),h.shared.isNormalScrollElement=!0,r=!0)}}),!r&&h.shared.isNormalScrollElement&&(re(!0),h.shared.isNormalScrollElement=!1))):re(!0)}function Se(){var e=En(),t=Ln();A===e&&s===t||(A=e,s=t,de(!0))}function be(e,t,n){var o=100*n,r=100/n,i=Nt.createElement("div");i.className=ln,zn(t,i);var l,a,s=Nt.createElement("div");s.className=sn,zn(t,s),xn(bn(cn,e),{width:o+"%"}),1<n&&(E.controlArrows&&(l=e,a=[qn('<div class="fp-controlArrow fp-prev"></div>'),qn('<div class="fp-controlArrow fp-next"></div>')],Vn(bn(an,l)[0],a),"#fff"!==E.controlArrowColor&&(xn(bn(mn,l),{"border-color":"transparent transparent transparent "+E.controlArrowColor}),xn(bn(gn,l),{"border-color":"transparent "+E.controlArrowColor+" transparent transparent"})),E.loopHorizontal||Bn(bn(gn,l))),E.slidesNavigation&&function(e,t){Nn(qn('<div class="'+fn+'"><ul></ul></div>'),e);var n=bn(dn,e)[0];In(n,"fp-"+E.slidesNavPosition);for(var o=0;o<t;o++)Nn(qn('<li><a href="#"><span class="fp-sr-only">'+we(o,"Slide")+"</span><span></span></a></li>"),bn("ul",n)[0]);xn(n,{"margin-left":"-"+n.innerWidth/2+"px"}),In(bn("a",bn("li",n)[0]),Ft)}(e,n)),t.forEach(function(e){xn(e,{width:r+"%"}),E.verticalCentered&&dt(e)});var c=bn(rn,e)[0];null!=c&&(0!==Cn(bn($t),_t)||0===Cn(bn($t),_t)&&0!==Cn(c))?Lt(c,"internal"):In(t[0],Ft)}function we(e,t){return E.navigationTooltips[e]||E.anchors[e]||t+" "+(e+1)}function ye(){var e,t,n=bn($t)[0];In(n,Xt),We(n),Ve(),Fe(n),E.scrollOverflow&&E.scrollOverflowHandler.afterLoad(),e=qe(),t=ht(e.section),e.section&&t&&(void 0===t||Cn(t)!==Cn(f))||!Xn(E.afterLoad)||Re("afterLoad",{activeSection:n,element:n,direction:null,anchorLink:n.getAttribute("data-anchor"),sectionIndex:Cn(n,_t)}),Xn(E.afterRender)&&Re("afterRender")}function Ee(){var e,t,n,o,r,i;if(!E.autoScrolling||E.scrollBar){var l=Yn(),a=(i=F<(r=l)?"down":"up",q=F=r,i),s=0,c=l+En()/2,u=L.offsetHeight-En()===l,f=bn(_t);if(u)s=f.length-1;else if(l)for(var d=0;d<f.length;++d)f[d].offsetTop<=c&&(s=d);else s=0;if(t=a,n=bn($t)[0].offsetTop,o=n+En(),("up"!=t?n<=Yn():o>=Yn()+En())&&(yn(bn($t)[0],Xt)||(In(bn($t)[0],Xt),Rn(Fn(bn($t)[0]),Xt))),!yn(e=f[s],Ft)){Y=!0;var v,p,h=bn($t)[0],g=Cn(h,_t)+1,m=ft(e),S=e.getAttribute("data-anchor"),b=Cn(e,_t)+1,w=bn(rn,e)[0],y={activeSection:h,sectionIndex:b-1,anchorLink:S,element:e,leavingSection:g,direction:m};w&&(p=w.getAttribute("data-anchor"),v=Cn(w)),T&&(In(e,Ft),Rn(Fn(e),Ft),Xn(E.onLeave)&&Re("onLeave",y),Xn(E.afterLoad)&&Re("afterLoad",y),Xe(h),We(e),Fe(e),ut(S,b-1),E.anchors.length&&(x=S),St(v,p,S)),clearTimeout(k),k=setTimeout(function(){Y=!1},100)}E.fitToSection&&(clearTimeout(O),O=setTimeout(function(){E.fitToSection&&bn($t)[0].offsetHeight<=A&&Le()},E.fitToSectionDelay))}}function Le(){T&&(g=!0,Ie(bn($t)[0]),g=!1)}function xe(e){if(p.m[e]){var t="down"===e?ae:le;if(E.scrollOverflow){var n=E.scrollOverflowHandler.scrollable(bn($t)[0]),o="down"===e?"bottom":"top";if(null!=n){if(!E.scrollOverflowHandler.isScrolled(o,n))return!0;t()}else t()}else t()}}function Ae(e){E.autoScrolling&&ke(e)&&p.m.up&&Un(e)}function Te(e){var t=Dn(e.target,_t)||bn($t)[0];if(ke(e)){E.autoScrolling&&Un(e);var n=Et(e);K=n.y,_=n.x,bn(an,t).length&&Math.abs(X-_)>Math.abs(U-K)?!a&&Math.abs(X-_)>Ln()/100*E.touchSensitivity&&(_<X?p.m.right&&ue(t):p.m.left&&fe(t)):E.autoScrolling&&T&&Math.abs(U-K)>Rt.innerHeight/100*E.touchSensitivity&&(K<U?xe("down"):U<K&&xe("up"))}}function ke(e){return void 0===e.pointerType||"mouse"!=e.pointerType}function Oe(e){if(E.fitToSection&&(z=!1),ke(e)){var t=Et(e);U=t.y,X=t.x}}function Me(e,t){for(var n=0,o=e.slice(Math.max(e.length-t,1)),r=0;r<o.length;r++)n+=o[r];return Math.ceil(n/t)}function Ce(e){var t=(new Date).getTime(),n=yn(bn(".fp-completely")[0],Jt);if(!p.m.down&&!p.m.up)return Un(e),!1;if(E.autoScrolling&&!c&&!n){var o=(e=e||Rt.event).wheelDelta||-e.deltaY||-e.detail,r=Math.max(-1,Math.min(1,o)),i=void 0!==e.wheelDeltaX||void 0!==e.deltaX,l=Math.abs(e.wheelDeltaX)<Math.abs(e.wheelDelta)||Math.abs(e.deltaX)<Math.abs(e.deltaY)||!i;149<v.length&&v.shift(),v.push(Math.abs(o)),E.scrollBar&&Un(e);var a=t-$;if($=t,200<a&&(v=[]),T){var s=Me(v,10);Me(v,70)<=s&&l&&xe(r<0?"down":"up")}return!1}E.fitToSection&&(z=!1)}function Be(e,t){var n=null==t?bn($t)[0]:t,o=bn(an,n)[0];if(!(null==o||a||bn(on,o).length<2)){var r=bn(rn,o)[0],i=null;if(null==(i="left"===e?An(r,on):Tn(r,on))){if(!E.loopHorizontal)return;var l=Fn(r);i="left"===e?l[l.length-1]:l[0]}a=!h.test.isTesting,ot(o,i,e)}}function He(){for(var e=bn(rn),t=0;t<e.length;t++)Lt(e[t],"internal")}function Ie(e,t,n){if(null!=e){var o,r,i,l,a,s,c,u,f,d={element:e,callback:t,isMovementUp:n,dtop:(r=(o=e).offsetHeight,i=o.offsetTop,a=q<(l=i),s=l-A+r,c=E.bigSectionsDestination,A<r?(a||c)&&"bottom"!==c||(l=s):(a||g&&null==On(o))&&(l=s),q=l),yMovement:ft(e),anchorLink:e.getAttribute("data-anchor"),sectionIndex:Cn(e,_t),activeSlide:bn(rn,e)[0],activeSection:bn($t)[0],leavingSection:Cn(bn($t),_t)+1,localIsResizing:g};if(!(d.activeSection==e&&!g||E.scrollBar&&Yn()===d.dtop&&!yn(e,Gt))){if(null!=d.activeSlide&&(u=d.activeSlide.getAttribute("data-anchor"),f=Cn(d.activeSlide)),!d.localIsResizing){var v=d.yMovement;if(void 0!==n&&(v=n?"up":"down"),d.direction=v,Xn(E.onLeave)&&!1===Re("onLeave",d))return}E.autoScrolling&&E.continuousVertical&&void 0!==d.isMovementUp&&(!d.isMovementUp&&"up"==d.yMovement||d.isMovementUp&&"down"==d.yMovement)&&((p=d).isMovementUp?Wn(bn($t)[0],Gn(p.activeSection,_t)):Vn(bn($t)[0],Jn(p.activeSection,_t).reverse()),xt(bn($t)[0].offsetTop),He(),p.wrapAroundElements=p.activeSection,p.dtop=p.element.offsetTop,p.yMovement=ft(p.element),d=p),d.localIsResizing||Xe(d.activeSection),E.scrollOverflow&&E.scrollOverflowHandler.beforeLeave(),In(e,Ft),Rn(Fn(e),Ft),We(e),E.scrollOverflow&&E.scrollOverflowHandler.onLeave(),T=h.test.isTesting,St(f,u,d.anchorLink,d.sectionIndex),function(e){if(E.css3&&E.autoScrolling&&!E.scrollBar){var t="translate3d(0px, -"+Math.round(e.dtop)+"px, 0px)";pt(t,!0),E.scrollingSpeed?(clearTimeout(w),w=setTimeout(function(){Pe(e)},E.scrollingSpeed)):Pe(e)}else{var n=je(e.dtop);h.test.top=-e.dtop+"px",Mt(n.element,n.options,E.scrollingSpeed,function(){E.scrollBar?setTimeout(function(){Pe(e)},30):Pe(e)})}}(d),x=d.anchorLink,ut(d.anchorLink,d.sectionIndex)}}var p}function Re(e,t){var n,o,r,i,l=(o=e,r=t,(i=E.v2compatible?{afterRender:function(){return[d]},onLeave:function(){return[r.activeSection,r.leavingSection,r.sectionIndex+1,r.direction]},afterLoad:function(){return[r.element,r.anchorLink,r.sectionIndex+1]},afterSlideLoad:function(){return[r.destiny,r.anchorLink,r.sectionIndex+1,r.slideAnchor,r.slideIndex]},onSlideLeave:function(){return[r.prevSlide,r.anchorLink,r.sectionIndex+1,r.prevSlideIndex,r.direction,r.slideIndex]}}:{afterRender:function(){return{section:Ne(bn($t)[0]),slide:ze(bn(rn,bn($t)[0])[0])}},onLeave:function(){return{origin:Ne(r.activeSection),destination:Ne(r.element),direction:r.direction}},afterLoad:function(){return i.onLeave()},afterSlideLoad:function(){return{section:Ne(r.section),origin:ze(r.prevSlide),destination:ze(r.destiny),direction:r.direction}},onSlideLeave:function(){return i.afterSlideLoad()}})[o]());if(E.v2compatible){if(!1===E[e].apply(l[0],l.slice(1)))return!1}else if(Kn(d,e,l),!1===E[e].apply(l[Object.keys(l)[0]],(n=l,Object.keys(n).map(function(e){return n[e]}))))return!1;return!0}function Ne(e){return e?new Ht(e):null}function ze(e){return e?new It(e):null}function je(e){var t={};return E.autoScrolling&&!E.scrollBar?(t.options=-e,t.element=bn(jt)[0]):(t.options=e,t.element=Rt),t}function Pe(e){var t;null!=(t=e).wrapAroundElements&&(t.isMovementUp?Wn(bn(_t)[0],t.wrapAroundElements):Vn(bn(_t)[bn(_t).length-1],t.wrapAroundElements),xt(bn($t)[0].offsetTop),He()),Xn(E.afterLoad)&&!e.localIsResizing&&Re("afterLoad",e),E.scrollOverflow&&E.scrollOverflowHandler.afterLoad(),e.localIsResizing||Fe(e.element),In(e.element,Xt),Rn(Fn(e.element),Xt),Ve(),T=!0,Xn(e.callback)&&e.callback()}function De(e,t){e.setAttribute(t,e.getAttribute("data-"+t)),e.removeAttribute("data-"+t)}function Ve(){var e=bn(".fp-auto-height")[0]||ve()&&bn(".fp-auto-height-responsive")[0];E.lazyLoading&&e&&bn(_t+":not("+Ut+")").forEach(function(e){var t,n,o;t=e.getBoundingClientRect(),n=t.top,o=t.bottom,(n+2<A&&0<n||2<o&&o<A)&&We(e)})}function We(o){E.lazyLoading&&bn("img[data-src], img[data-srcset], source[data-src], source[data-srcset], video[data-src], audio[data-src], iframe[data-src]",Ke(o)).forEach(function(n){if(["src","srcset"].forEach(function(e){var t=n.getAttribute("data-"+e);null!=t&&t&&(De(n,e),n.addEventListener("load",function(){Ye(o)}))}),_n(n,"source")){var e=Dn(n,"video, audio");e&&(e.load(),e.onloadeddata=function(){Ye(o)})}})}function Ye(e){E.scrollOverflow&&(clearTimeout(j),j=setTimeout(function(){m.createScrollBar(e)},200))}function Fe(e){var t=Ke(e);bn("video, audio",t).forEach(function(e){e.hasAttribute("data-autoplay")&&"function"==typeof e.play&&e.play()}),bn('iframe[src*="youtube.com/embed/"]',t).forEach(function(e){e.hasAttribute("data-autoplay")&&Ue(e),e.onload=function(){e.hasAttribute("data-autoplay")&&Ue(e)}})}function Ue(e){e.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}',"*")}function Xe(e){var t=Ke(e);bn("video, audio",t).forEach(function(e){e.hasAttribute("data-keepplaying")||"function"!=typeof e.pause||e.pause()}),bn('iframe[src*="youtube.com/embed/"]',t).forEach(function(e){/youtube\.com\/embed\//.test(e.getAttribute("src"))&&!e.hasAttribute("data-keepplaying")&&e.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}',"*")})}function Ke(e){var t=bn(rn,e);return t.length&&(e=t[0]),e}function _e(){var e=qe(),t=e.section,n=e.slide;t&&(E.animateAnchor?gt(t,n):se(t,n))}function $e(){if(!Y&&!E.lockAnchors){var e=qe(),t=e.section,n=e.slide,o=void 0===x,r=void 0===x&&void 0===n&&!a;t&&t.length&&(t&&t!==x&&!o||r||!a&&i!=n)&>(t,n)}}function qe(){var e,t,n=Rt.location.hash;if(n.length){var o=n.replace("#","").split("/"),r=-1<n.indexOf("#/");e=r?"/"+o[1]:decodeURIComponent(o[0]);var i=r?o[2]:o[1];i&&i.length&&(t=decodeURIComponent(i))}return{section:e,slide:t}}function Qe(e){clearTimeout(M);var t=Nt.activeElement,n=e.keyCode;9===n?function(e){var t,n,o,r,i,l,a,s=e.shiftKey,c=Nt.activeElement,u=et(Ke(bn($t)[0]));function f(e){return Un(e),u[0]?u[0].focus():null}(t=e,n=et(Nt),o=n.indexOf(Nt.activeElement),r=t.shiftKey?o-1:o+1,i=n[r],l=ze(Dn(i,on)),a=Ne(Dn(i,_t)),l||a)&&(c?null==Dn(c,$t+","+$t+" "+rn)&&(c=f(e)):f(e),(!s&&c==u[u.length-1]||s&&c==u[0])&&Un(e))}(e):_n(t,"textarea")||_n(t,"input")||_n(t,"select")||"true"===t.getAttribute("contentEditable")||""===t.getAttribute("contentEditable")||!E.keyboardScrolling||!E.autoScrolling||(-1<[40,38,32,33,34].indexOf(n)&&Un(e),c=e.ctrlKey,M=setTimeout(function(){!function(e){var t=e.shiftKey,n=Nt.activeElement,o=_n(n,"video")||_n(n,"audio");if(T||!([37,39].indexOf(e.keyCode)<0))switch(e.keyCode){case 38:case 33:p.k.up&&le();break;case 32:if(t&&p.k.up&&!o){le();break}case 40:case 34:p.k.down&&(32===e.keyCode&&o||ae());break;case 36:p.k.up&&ce(1);break;case 35:p.k.down&&ce(bn(_t).length);break;case 37:p.k.left&&fe();break;case 39:p.k.right&&ue()}}(e)},150))}function Ge(e){t&&(c=e.ctrlKey)}function Je(e){2==e.which&&(Q=e.pageY,d.addEventListener("mousemove",nt))}function Ze(e){2==e.which&&d.removeEventListener("mousemove",nt)}function et(e){return[].slice.call(bn(I,e)).filter(function(e){return"-1"!==e.getAttribute("tabindex")&&null!==e.offsetParent})}function tt(){c=t=!1}function nt(e){E.autoScrolling&&(T&&(e.pageY<Q&&p.m.up?le():e.pageY>Q&&p.m.down&&ae()),Q=e.pageY)}function ot(e,t,n){var o,r,i=Dn(e,_t),l={slides:e,destiny:t,direction:n,destinyPos:{left:t.offsetLeft},slideIndex:Cn(t),section:i,sectionIndex:Cn(i,_t),anchorLink:i.getAttribute("data-anchor"),slidesNav:bn(dn,i)[0],slideAnchor:wt(t),prevSlide:bn(rn,i)[0],prevSlideIndex:Cn(bn(rn,i)[0]),localIsResizing:g};l.xMovement=(o=l.prevSlideIndex,r=l.slideIndex,o==r?"none":r<o?"left":"right"),l.direction=l.direction?l.direction:l.xMovement,l.localIsResizing||(T=!1),E.onSlideLeave&&!l.localIsResizing&&"none"!==l.xMovement&&Xn(E.onSlideLeave)&&!1===Re("onSlideLeave",l)?a=!1:(In(t,Ft),Rn(Fn(t),Ft),l.localIsResizing||(Xe(l.prevSlide),We(t)),!E.loopHorizontal&&E.controlArrows&&($n(bn(gn,i),0!==l.slideIndex),$n(bn(mn,i),null!=On(t))),yn(i,Ft)&&!l.localIsResizing&&St(l.slideIndex,l.slideAnchor,l.anchorLink,l.sectionIndex),function(e,t,n){var o=t.destinyPos;if(E.css3){var r="translate3d(-"+Math.round(o.left)+"px, 0px, 0px)";h.test.translate3dH[t.sectionIndex]=r,xn(st(bn(cn,e)),At(r)),y=setTimeout(function(){n&&rt(t)},E.scrollingSpeed)}else h.test.left[t.sectionIndex]=Math.round(o.left),Mt(e,Math.round(o.left),E.scrollingSpeed,function(){n&&rt(t)})}(e,l,!0))}function rt(e){var t,n;t=e.slidesNav,n=e.slideIndex,E.slidesNavigation&&null!=t&&(Rn(bn(Ut,t),Ft),In(bn("a",bn("li",t)[n]),Ft)),e.localIsResizing||(Xn(E.afterSlideLoad)&&Re("afterSlideLoad",e),T=!0,Fe(e.destiny)),a=!1}function it(){clearTimeout(S),S=setTimeout(function(){for(var e=0;e<4;e++)b=setTimeout(lt,200*e)},200)}function lt(){if(at(),o){var e=Nt.activeElement;if(!_n(e,"textarea")&&!_n(e,"input")&&!_n(e,"select")){var t=En();Math.abs(t-G)>20*Math.max(G,t)/100&&(de(!0),G=t)}}else Se()}function at(){var e=E.responsive||E.responsiveWidth,t=E.responsiveHeight,n=e&&Rt.innerWidth<e,o=t&&Rt.innerHeight<t;e&&t?pe(n||o):e?pe(n):t&&pe(o)}function st(e){var t="all "+E.scrollingSpeed+"ms "+E.easingcss3;return Rn(e,Dt),xn(e,{"-webkit-transition":t,transition:t})}function ct(e){return In(e,Dt)}function ut(e,t){var n,o,r;n=e,bn(E.menu).forEach(function(e){E.menu&&null!=e&&(Rn(bn(Ut,e),Ft),In(bn('[data-menuanchor="'+n+'"]',e),Ft))}),o=e,r=t,E.navigation&&null!=bn(en)[0]&&(Rn(bn(Ut,bn(en)[0]),Ft),In(o?bn('a[href="#'+o+'"]',bn(en)[0]):bn("a",bn("li",bn(en)[0])[r]),Ft))}function ft(e){var t=Cn(bn($t)[0],_t),n=Cn(e,_t);return t==n?"none":n<t?"up":"down"}function dt(e){if(!yn(e,un)){var t=Nt.createElement("div");t.className=qt,t.style.height=vt(e)+"px",In(e,un),jn(e,t)}}function vt(e){var t=A;if(E.paddingTop||E.paddingBottom){var n=e;yn(n,Kt)||(n=Dn(e,_t));var o=parseInt(getComputedStyle(n)["padding-top"])+parseInt(getComputedStyle(n)["padding-bottom"]);t=A-o}return t}function pt(e,t){t?st(d):ct(d),xn(d,At(e)),h.test.translate3d=e,setTimeout(function(){Rn(d,Dt)},10)}function ht(e){var t=bn(_t+'[data-anchor="'+e+'"]',d)[0];if(!t){var n=void 0!==e?e-1:0;t=bn(_t)[n]}return t}function gt(e,t){var n=ht(e);if(null!=n){var o,r,i,l=(null==(i=bn(on+'[data-anchor="'+(o=t)+'"]',r=n)[0])&&(o=void 0!==o?o:0,i=bn(on,r)[o]),i);wt(n)===x||yn(n,Ft)?mt(l):Ie(n,function(){mt(l)})}}function mt(e){null!=e&&ot(Dn(e,an),e)}function St(e,t,n,o){var r="";E.anchors.length&&!E.lockAnchors&&(e?(null!=n&&(r=n),null==t&&(t=e),bt(r+"/"+(i=t))):(null!=e&&(i=t),bt(n))),yt()}function bt(e){if(E.recordHistory)location.hash=e;else if(o||l)Rt.history.replaceState(void 0,void 0,"#"+e);else{var t=Rt.location.href.split("#")[0];Rt.location.replace(t+"#"+e)}}function wt(e){if(!e)return null;var t=e.getAttribute("data-anchor"),n=Cn(e);return null==t&&(t=n),t}function yt(){var e=bn($t)[0],t=bn(rn,e)[0],n=wt(e),o=wt(t),r=String(n);t&&(r=r+"-"+o),r=r.replace("/","-").replace("#","");var i=new RegExp("\\b\\s?"+Yt+"-[^\\s]+\\b","g");L.className=L.className.replace(i,""),In(L,Yt+"-"+r)}function Et(e){var t=[];return t.y=void 0!==e.pageY&&(e.pageY||e.pageX)?e.pageY:e.touches[0].pageY,t.x=void 0!==e.pageX&&(e.pageY||e.pageX)?e.pageX:e.touches[0].pageX,l&&ke(e)&&E.scrollBar&&void 0!==e.touches&&(t.y=e.touches[0].pageY,t.x=e.touches[0].pageX),t}function Lt(e,t){ee(0,"internal"),void 0!==t&&(g=!0),ot(Dn(e,an),e),void 0!==t&&(g=!1),ee(P.scrollingSpeed,"internal")}function xt(e){var t=Math.round(e);if(E.css3&&E.autoScrolling&&!E.scrollBar)pt("translate3d(0px, -"+t+"px, 0px)",!1);else if(E.autoScrolling&&!E.scrollBar)xn(d,{top:-t+"px"}),h.test.top=-t+"px";else{var n=je(t);Ct(n.element,n.options)}}function At(e){return{"-webkit-transform":e,"-moz-transform":e,"-ms-transform":e,transform:e}}function Tt(t,e,n){"all"!==e?p[n][e]=t:Object.keys(p[n]).forEach(function(e){p[n][e]=t})}function kt(e,t,n){E[e]=t,"internal"!==n&&(P[e]=t)}function Ot(){var e=E.licenseKey,t="font-size: 15px;background:yellow;";n?e&&e.length<20&&(console.warn("%c This website was made using fullPage.js slider. More info on the following website:",t),console.warn("%c https://alvarotrigo.com/fullPage/",t)):(Sn("error","Fullpage.js version 3 has changed its license to GPLv3 and it requires a `licenseKey` option. Read about it here:"),Sn("error","https://github.com/alvarotrigo/fullPage.js#options.")),yn(u,Wt)?Sn("error","Fullpage.js can only be initialized once and you are doing it multiple times!"):(E.continuousVertical&&(E.loopTop||E.loopBottom)&&(E.continuousVertical=!1,Sn("warn","Option `loopTop/loopBottom` is mutually exclusive with `continuousVertical`; `continuousVertical` disabled")),!E.scrollOverflow||!E.scrollBar&&E.autoScrolling||Sn("warn","Options scrollBar:true and autoScrolling:false are mutually exclusive with scrollOverflow:true. Sections with scrollOverflow might not work well in Firefox"),!E.continuousVertical||!E.scrollBar&&E.autoScrolling||(E.continuousVertical=!1,Sn("warn","Scroll bars (`scrollBar:true` or `autoScrolling:false`) are mutually exclusive with `continuousVertical`; `continuousVertical` disabled")),E.scrollOverflow&&null==E.scrollOverflowHandler&&(E.scrollOverflow=!1,Sn("error","The option `scrollOverflow:true` requires the file `scrolloverflow.min.js`. Please include it before fullPage.js.")),W.forEach(function(e){E[e]&&Sn("warn","fullpage.js extensions require fullpage.extensions.min.js file instead of the usual fullpage.js. Requested: "+e)}),E.anchors.forEach(function(t){var e=[].slice.call(bn("[name]")).filter(function(e){return e.getAttribute("name")&&e.getAttribute("name").toLowerCase()==t.toLowerCase()}),n=[].slice.call(bn("[id]")).filter(function(e){return e.getAttribute("id")&&e.getAttribute("id").toLowerCase()==t.toLowerCase()});if(n.length||e.length){Sn("error","data-anchor tags can not have the same value as any `id` element on the site (or `name` element for IE).");var o=n.length?"id":"name";(n.length||e.length)&&Sn("error",'"'+t+'" is is being used by another element `'+o+"` property")}}))}function Mt(t,n,o,r){var e,i=(e=t).self!=Rt&&yn(e,ln)?e.scrollLeft:!E.autoScrolling||E.scrollBar?Yn():e.offsetTop,l=n-i,a=0;z=!0;var s=function(){if(z){var e=n;a+=20,o&&(e=Rt.fp_easings[E.easing](a,i,l,o)),Ct(t,e),a<o?setTimeout(s,20):void 0!==r&&r()}else a<o&&r()};s()}function Ct(e,t){!E.autoScrolling||E.scrollBar||e.self!=Rt&&yn(e,ln)?e.self!=Rt&&yn(e,ln)?e.scrollLeft=t:e.scrollTo(0,t):e.style.top=t+"px"}function Bt(e,t){this.anchor=e.getAttribute("data-anchor"),this.item=e,this.index=Cn(e,t),this.isLast=this.index===e.parentElement.querySelectorAll(t).length-1,this.isFirst=!this.index}function Ht(e){Bt.call(this,e,_t)}function It(e){Bt.call(this,e,on)}Ot()}}),window.jQuery&&window.fullpage&&function(t,n){"use strict";t&&n?t.fn.fullpage=function(e){e=t.extend({},e,{$:t}),new n(this[0],e)}:window.fp_utils.showError("error","jQuery is required to use the jQuery fullpage adapter!")}(window.jQuery,window.fullpage);
//# sourceMappingURL=fullpage.min.js.map
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"
integrity="sha256-fIkQKQryItPqpaWZbtwG25Jp2p5ujqo/NwJrfqAB+Qk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"
integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U=" crossorigin="anonymous"></script>Прокрутка страницы
Открыть элемент
Глаз панды
<div class="panda">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="eye left">
<div class="eye-roll"></div>
</div>
<div class="eye right">
<div class="eye-roll"></div>
</div>
<div class="nose">
<i class="fa fa-heart"></i>
</div>
<div class="mouth"></div>
</div>@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #fafafa;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.panda {
background-color: #fff;
border-radius: 50%;
position: relative;
height: 170px;
width: 170px;
}
.panda .ear {
background-color: #000;
border-radius: 50%;
position: absolute;
top: 5px;
height: 50px;
width: 50px;
z-index: -1;
}
.panda .ear.left {
left: 0;
}
.panda .ear.right {
right: 0;
}
.panda .eye {
background-color: #000;
position: absolute;
top: 50px;
left: 50%;
height: 50px;
width: 40px;
}
.panda .eye.left {
border-radius: 100% 60% 80% 60%;
transform: translateX(calc(-50% - 35px));
}
.panda .eye.right {
border-radius: 60% 100% 60% 80%;
transform: translateX(calc(-50% + 35px));
}
.panda .eye .eye-roll {
background: #fff;
border-radius: 50%;
position: absolute;
top: 20px;
left: 20px;
height: 12px;
width: 12px;
transform-origin: center left;
}
.panda .nose {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%);
}
.panda .mouth {
background: transparent;
border-radius: 0 0 50% 50%;
border: 2px solid transparent;
border-bottom: 2px solid #000;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%);
height: 50px;
width: 50px;
}const eyes = document.querySelectorAll('.eye-roll');
window.addEventListener('mousemove', (e) => {
eyes.forEach(eye => {
const x = eye.getBoundingClientRect().left + (eye.clientWidth / 2);
const y = eye.getBoundingClientRect().top + (eye.clientHeight / 2);
const radian = Math.atan2(e.pageX - x, e.pageY - y);
const rot = (radian * (180 / Math.PI) * -1) + 90;
eye.style.transform = `rotate(${rot}deg)`;
console.log(rot);
});
});Глаз панды
Открыть элемент
Content Placeholder
<div class="card">
<div class="card-header animated-bg" id="header">
<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="header" />
</div>
<div class="card-content">
<h3 class="card-title animated-bg animated-bg-text" id="title"> </h3>
<p class="card-excerpt" id="excerpt">
<span class="animated-bg animated-bg-text"> </span>
<span class="animated-bg animated-bg-text"> </span>
<span class="animated-bg animated-bg-text"> </span>
</p>
<div class="author">
<div class="profile-img animated-bg" id="profile_img">
</div>
<div class="author-info">
<strong class="animated-bg animated-bg-text" id="name"> </strong>
<small class="animated-bg animated-bg-text" id="date"> </small>
</div>
</div>
</div>
</div>
</div>@import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap');
* {
box-sizing: border-box;
}
body {
background: #ecf0f1;
display: flex;
align-items: center;
justify-content: center;
font-family: "Muli", sans-serif;
min-height: 100vh;
margin: 0;
}
img {
max-width: 100%;
}
.card {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
width: 350px;
max-width: 350px;
}
.card-header {
height: 200px;
}
.animated-bg {
background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 10%, #f6f7f8 20%, #f6f7f8 100%);
background-size: 200% 100%;
animation: bgPos 1s linear infinite;
}
.animated-bg-text {
border-radius: 50px;
display: inline-block;
margin: 0;
height: 10px;
width: 100%;
}
@-webkit-keyframes bgPos {
0% {
background-position: 50% 0;
}
100% {
background-position: -150% 0;
}
}
.card-header img {
display: none;
object-fit: cover;
height: 100%;
width: 100%;
}
.card-content {
background: #fff;
padding: 30px;
}
.card-title {
height: 20px;
margin: 0;
}
.card-excerpt {
color: #777;
margin: 10px 0 20px;
}
.author {
display: flex;
}
.profile-img {
border-radius: 50%;
overflow: hidden;
width: 40px;
height: 40px;
}
.author-info {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-left: 10px;
width: 100px;
}
.author-info small {
color: #aaa;
margin-top: 5px;
}const header = document.getElementById('header');
const title = document.getElementById('title');
const excerpt = document.getElementById('excerpt');
const profile_img = document.getElementById('profile_img');
const name = document.getElementById('name');
const date = document.getElementById('date');
const animated_bgs = document.querySelectorAll('.animated-bg');
const animated_bg_texts = document.querySelectorAll('.animated-bg');
setTimeout(getData, 2500);
function getData() {
header.querySelector('img').style.display = 'block';
title.innerHTML = 'Lorem ipsum dolor sit amet'
excerpt.innerHTML = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, sint.'
profile_img.innerHTML = `<img src="https://pbs.twimg.com/profile_images/595659104384905218/bOtXKmdP_400x400.jpg" alt="Florin Profile" />`
name.innerHTML = 'Florin Pop';
date.innerHTML = 'Nov 3, 2019';
animated_bgs.forEach(bgs => { bgs.classList.remove('animated-bg') });
animated_bg_texts.forEach(bgs => { bgs.classList.remove('animated-bg-text') });
}Content Placeholder
Открыть элемент
Авто текст
<h1 id="text">Starting...</h1> <p>Coded on iPhone</p>
@import url('https://fonts.googleapis.com/css2?family=Neucha&family=Poppins:wght@100&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Neucha', cursive;
background: darksalmon;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
text-align: center;
}const text = document.getElementById("text");
const prog = "Добро пожаловать на сайт StockShablonov!";
let idx = 1;
setInterval(writeText, 100);
function writeText() {
text.innerText = prog.slice(0, idx)
idx++;
if(idx > prog.length){
idx = 1;
}
}Авто текст
Открыть элемент
Страница 404
<h1>4<i class="fas fa-poop"></i>4</h1>
<h2>Sh*t!</h2>
<p class="text">
Looks like the page you're looking for has been <i>stoolen</i>.<br />
I hope it didn't get <i>dumped</i> somewhere we can't find.<br />
I know, I know, these puns are <i>crappy</i>!
</p>
<small class="attribution"><i>Idea and design by <a href="https://dribbble.com/shots/3937555--DailyUI-008-404-Page" target="_blank">Jane Kathryn Teo</a></i></small>@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Courier+Prime&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #FFFAF0;
color: #333;
display: flex;
font-family: 'Courier Prime', sans-serif;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
text-align: center;
}
h1 {
color: #7B341E;
font-size: 300px;
margin: 0;
letter-spacing: 10px;
line-height: 230px;
}
h1 i {
font-size: 200px;
position: relative;
top: -20px;
}
h2 {
font-size: 65px;
margin: 0;
}
.text {
font-size: 20px;
line-height: 30px;
margin: 20px 0;
}
.attribution a {
color: #333;
}
@media screen and (max-width: 600px) {
h1 {
font-size: 150px;
line-height: 120px;
}
h1 i {
font-size: 100px;
top: -10px;
}
h2 {
font-size: 50px;
}
.text {
max-width: 80vw;
}
}
/* SOCIAL PANEL CSS */
.social-panel-container {
position: fixed;
right: 0;
bottom: 80px;
transform: translateX(100%);
transition: transform 0.4s ease-in-out;
}
.social-panel-container.visible {
transform: translateX(-10px);
}
.social-panel {
background-color: #fff;
border-radius: 16px;
box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
border: 5px solid #001F61;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Muli';
position: relative;
height: 169px;
width: 370px;
max-width: calc(100% - 10px);
}
.social-panel button.close-btn {
border: 0;
color: #97A5CE;
cursor: pointer;
font-size: 20px;
position: absolute;
top: 5px;
right: 5px;
}
.social-panel button.close-btn:focus {
outline: none;
}
.social-panel p {
background-color: #001F61;
border-radius: 0 0 10px 10px;
color: #fff;
font-size: 14px;
line-height: 18px;
padding: 2px 17px 6px;
position: absolute;
top: 0;
left: 50%;
margin: 0;
transform: translateX(-50%);
text-align: center;
width: 235px;
}
.social-panel p i {
margin: 0 5px;
}
.social-panel p a {
color: #FF7500;
text-decoration: none;
}
.social-panel h4 {
margin: 20px 0;
color: #97A5CE;
font-family: 'Muli';
font-size: 14px;
line-height: 18px;
text-transform: uppercase;
}
.social-panel ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
.social-panel ul li {
margin: 0 10px;
}
.social-panel ul li a {
border: 1px solid #DCE1F2;
border-radius: 50%;
color: #001F61;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 50px;
text-decoration: none;
}
.social-panel ul li a:hover {
border-color: #FF6A00;
box-shadow: 0 9px 12px -9px #FF6A00;
}
.floating-btn {
border-radius: 26.5px;
background-color: #001F61;
border: 1px solid #001F61;
box-shadow: 0 16px 22px -17px #03153B;
color: #fff;
cursor: pointer;
font-size: 16px;
line-height: 20px;
padding: 12px 20px;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
}
.floating-btn:hover {
background-color: #ffffff;
color: #001F61;
}
.floating-btn:focus {
outline: none;
}
.floating-text {
background-color: #001F61;
border-radius: 10px 10px 0 0;
color: #fff;
font-family: 'Muli';
padding: 7px 15px;
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
text-align: center;
z-index: 998;
}
.floating-text a {
color: #FF7500;
text-decoration: none;
}
@media screen and (max-width: 480px) {
.social-panel-container.visible {
transform: translateX(0px);
}
.floating-btn {
right: 10px;
}
}Страница 404
Открыть элемент
Движущиеся звезды во Вселенной
<div class="container" id="container"> </div>
body {
margin: 0;
}
.container {
background-image: url("https://images.unsplash.com/photo-1516339901601-2e1b62dc0c45?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=100");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: relative;
height: 100vh;
width: 100vw;
}
.star {
background-color: #fff;
box-shadow: 0 0 10px rgba(255, 255, 255);
border-radius: 50%;
position: absolute;
opacity: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 4px;
width: 4px;
}const container = document.getElementById('container');
const timeToRunAnim = 5000;
let starIdx = 0;
setInterval(() => createStars(7), 100);
function createStar() {
const starEl = document.createElement('div');
const styleEl = document.createElement('style');
starEl.classList.add('star');
starEl.classList.add(`star-${++starIdx}`);
starEl.style.animation = `moveto-${starIdx} ${timeToRunAnim}ms linear forwards`;
const endX = Math.random() * 200 - 100;
const endY = Math.random() * 200 - 100;
styleEl.innerHTML += `
@keyframes moveto-${starIdx} {
20% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(3) translate(${endX}vw, ${endY}vh);
opacity: 0;
}
}
`;
container.appendChild(starEl);
container.appendChild(styleEl);
setTimeout(() => {
starEl.remove();
styleEl.remove();
}, timeToRunAnim);
}
function createStars(num) {
for(let i=0; i<num; i++) {
createStar();
}
}Движущиеся звезды во Вселенной
Открыть элемент
Scroll Animation JavaScript
<h1>Scroll to see the animation</h1> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div>
body {
background-color: #efedd6;
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
h1 {
margin: 10px;
}
.box {
background-color: hsl(282, 44%, 47%);
border-radius: 10px;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.2);
margin: 10px;
width: 96%;
height: 300px;
transform: translateX(200%);
transition: transform 0.4s ease;
}
.box:nth-of-type(even) {
transform: translateX(-200%);
}
.box.show {
transform: translateX(0);
}const boxes = document.querySelectorAll('.box');
window.addEventListener('scroll', checkBoxes);
checkBoxes();
function checkBoxes() {
const triggerBottom = window.innerHeight / 5 * 4;
boxes.forEach((box, idx) => {
const boxTop = box.getBoundingClientRect().top;
if(boxTop < triggerBottom) {
box.classList.add('show');
} else {
box.classList.remove('show');
}
});
}Scroll Animation JavaScript
Открыть элемент
<!--========== HEADER ==========-->
<header class="header">
<nav class="nav bd-container">
<a href="#" class="nav__logo">Travel</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#" class="nav__link">Explore</a></li>
<li class="nav__item"><a href="#" class="nav__link">Destinations</a></li>
<li class="nav__item"><a href="#" class="nav__link">Hotels</a></li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-menu'></i>
</div>
</nav>
</header>
<!--========== MAIN ==========-->
<main class='main'>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<!--========== ISLANDS 1 ==========-->
<section class="islands swiper-slide">
<img src="assets/img/borabora.jpg" alt="" class="islands__bg">
<div class="islands__container bd-container">
<div class="islands__data">
<h2 class="islands__subtitle">Islands</h2>
<h1 class="islands__title">Bora Bora</h1>
<p class="islands__description">Small South Pacific island northwest of Tahiti in French Polynesia, surrounded by motus.</p>
<a href="#" class="islands__button">Explore <i class='bx bx-right-arrow-alt islands__button-icon'></i></a>
</div>
<div class="islands__video">
<div class="islands__video-content">
<i class='bx bx-play-circle islands__video-icon'></i>
</div>
</div>
</div>
</section>
<!--========== ISLANDS 2 ==========-->
<section class="islands swiper-slide">
<img src="assets/img/bali.jpg" alt="" class="islands__bg">
<div class="islands__container bd-container">
<div class="islands__data">
<h2 class="islands__subtitle">Islands</h2>
<h1 class="islands__title">Bali</h1>
<p class="islands__description">It is an Indonesian island known and beautiful for its lush active volcanic mountains.</p>
<a href="#" class="islands__button">Explore <i class='bx bx-right-arrow-alt islands__button-icon'></i></a>
</div>
<div class="islands__video">
<div class="islands__video-content">
<i class='bx bx-play-circle islands__video-icon'></i>
</div>
</div>
</div>
</section>
<!--========== ISLANDS 3 ==========-->
<section class="islands swiper-slide">
<img src="assets/img/palawan.jpg" alt="" class="islands__bg">
<div class="islands__container bd-container">
<div class="islands__data">
<h2 class="islands__subtitle">Islands</h2>
<h1 class="islands__title">Palawan</h1>
<p class="islands__description">Also known as La Paragua, it is the largest island in the province of Palawan.</p>
<a href="#" class="islands__button">Explore <i class='bx bx-right-arrow-alt islands__button-icon'></i></a>
</div>
<div class="islands__video">
<div class="islands__video-content">
<i class='bx bx-play-circle islands__video-icon'></i>
</div>
</div>
</div>
</section>
<!--========== ISLANDS POPUP ==========-->
<div class="islands__popup" id="popup">
<div>
<div class="islands__popup-close" id="popup-close">
<i class='bx bx-x'></i>
</div>
<iframe class="islands__popup-video" src="https://www.youtube.com/embed/JrU6bsuNU7Y" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!--========== CONTROLS ==========-->
<div class="controls gallery-thumbs">
<div class="controls__container swiper-wrapper">
<img src="assets/img/borabora.jpg" alt="" class="controls__img swiper-slide">
<img src="assets/img/bali.jpg" alt="" class="controls__img swiper-slide">
<img src="assets/img/palawan.jpg" alt="" class="controls__img swiper-slide">
</div>
</div>
</main>/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
/*===== VARIABLES CSS =====*/
:root {
--header-height: 3rem;
/*========== Colors ==========*/
--first-color: #26A69A;
--first-color-lighter: #ECF3F2;
--title-color: #11443F;
--text-color: #5B7B78;
--body-color: #F5FFFE;
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--biggest-font-size: 3rem;
--big-font-size: 1.25rem;
--normal-font-size: .938rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
@media screen and (min-width: 1024px) {
:root {
--biggest-font-size: 5.5rem;
--big-font-size: 2rem;
--normal-font-size: 1rem;
}
}
/*========== BASE ==========*/
*, ::before, ::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h1, h2, ul, p {
margin: 0;
}
ul {
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
/*========== LAYOUT ==========*/
.main {
position: relative;
}
.bd-container {
max-width: 968px;
margin-left: 1.5rem;
margin-right: 1.5rem;
}
/*========== HEADER ==========*/
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
}
/*========== NAV ==========*/
.nav {
max-width: 968px;
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 768px) {
.nav__menu {
position: fixed;
top: -100%;
left: 0;
right: 0;
width: 90%;
margin: 0 auto;
text-align: center;
padding-top: 1.5rem;
background-color: var(--first-color-lighter);
border-radius: 1rem;
transition: .4s;
}
}
.nav__logo, .nav__toggle {
color: var(--body-color);
}
.nav__link {
color: var(--first-color-dark);
font-weight: var(--font-medium);
}
.nav__item {
margin-bottom: 1.5rem;
}
.nav__toggle {
font-size: 1.2rem;
cursor: pointer;
}
/* Show menu */
.show-menu {
top: calc(var(--header-height) + 1rem);
}
/*========== INLANDS ==========*/
.islands {
height: 100vh;
position: relative;
}
.islands__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
object-fit: cover;
object-position: center;
}
.islands__container {
position: relative;
height: 100%;
display: grid;
grid-template-columns: 2fr .25fr;
align-content: center;
}
.islands__subtitle, .islands__title, .islands__description {
color: var(--body-color);
}
.islands__subtitle {
font-size: var(--big-font-size);
font-weight: var(--font-medium);
}
.islands__title {
font-size: var(--biggest-font-size);
}
.islands__description {
margin-bottom: 1rem;
}
.islands__button {
display: inline-flex;
align-items: center;
padding: 1rem 1.5rem;
background-color: var(--body-color);
color: var(--first-color);
border-radius: .5rem;
font-weight: var(--font-medium);
}
.islands__button:hover {
background-color: var(--first-color-lighter);
}
.islands__button-icon {
font-size: 1.5rem;
margin-left: .5rem;
}
.islands__video {
display: flex;
align-items: flex-end;
padding-bottom: .75rem;
}
.islands__video-content {
display: inline-flex;
padding: .15rem;
background-color: var(--body-color);
border-radius: 50%;
cursor: pointer;
}
.islands__video-icon {
font-size: 1.8rem;
color: var(--first-color);
}
.islands__popup {
display: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: var(--first-color-lighter);
padding: 1rem .75rem;
border-radius: 1rem;
}
.islands__popup-close {
position: absolute;
top: -.75rem;
right: -.75rem;
display: inline-flex;
padding: .35rem;
background-color: var(--first-color);
color: var(--first-color-lighter);
font-size: 1.2rem;
border-radius: 50%;
cursor: pointer;
}
/* Show popup*/
.show-popup {
display: block;
}
/* Controls */
.controls {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
padding: .25rem .5rem;
background-color: var(--body-color);
border-radius: .75rem;
z-index: var(--z-tooltip);
overflow: hidden;
}
.controls__img {
width: 35px;
height: 35px;
border-radius: .5rem;
cursor: pointer;
}
.controls__container {
display: flex;
align-items: center;
column-gap: 1rem;
}
/* Active controls */
.swiper-slide-thumb-active {
width: 45px;
height: 45px;
}
/*========== MEDIA QUERIES ==========*/
/* For small devices */
@media screen and (max-width: 320px) {
.bd-container {
margin-left: 1rem;
margin-right: 1rem;
}
.controls__container {
column-gap: .25rem;
}
.islands__popup-video {
width: 230px;
height: 100px;
}
}
@media screen and (min-width: 768px) {
.nav {
height: calc(var(--header-height) + 1.5rem);
}
.nav__list {
display: flex;
}
.nav__item {
margin-right: 2rem;
margin-bottom: 0;
}
.nav__link {
color: var(--body-color);
}
.nav__toggle {
display: none;
}
.islands__container {
grid-template-columns: repeat(2, 1fr);
}
.islands__description {
padding-right: 5rem;
margin-bottom: 2rem;
}
.islands__video {
justify-content: center;
align-items: center;
padding: 0;
}
.islands__video-icon {
font-size: 3rem;
}
.islands__popup-video {
width: 500px;
height: 250px;
}
.islands__popup-close {
font-size: 1.5rem;
}
.controls {
padding: .5rem;
border-radius: 1.25rem;
}
.controls__container {
column-gap: 1.5rem;
}
.controls__img {
width: 45px;
height: 45px;
border-radius: .75rem;
}
.swiper-slide-thumb-active {
width: 55px;
height: 55px;
}
}
@media screen and (min-width: 1024px) {
.bd-container {
margin-left: auto;
margin-right: auto;
}
.islands__description {
padding-right: 11rem;
}
}
/* For tall screens on mobiles y desktop*/
@media screen and (min-height: 721px) {
.islands {
height: 640px;
}
}const showMenu = (toggleId, navId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
// Validate that variables exist
if(toggle && nav){
toggle.addEventListener('click', () =>{
// We add the show-menu class to the div tag with the nav__menu class
nav.classList.toggle('show-menu')
})
}
}
showMenu('nav-toggle','nav-menu')
/*==================== SWIPER JS ====================*/
let galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 0,
slidesPerView: 0,
})
let galleryTop = new Swiper('.gallery-top', {
effect: 'fade',
loop: true,
thumbs: {
swiper: galleryThumbs
}
})
/*==================== POPUP ====================*/
const btnOpenVideo = document.querySelectorAll('.islands__video-content')
const islandsPopup = document.getElementById('popup')
function poPup(){
islandsPopup.classList.add('show-popup')
}
btnOpenVideo.forEach(b => b.addEventListener('click', poPup))
const btnCloseVideo = document.getElementById('popup-close')
btnCloseVideo.addEventListener('click', ()=> {
islandsPopup.classList.remove('show-popup')
})
/*==================== GSAP ANIMATION ====================*/
const controlImg = document.querySelectorAll('.controls__img')
function scrollAnimation(){
gsap.from('.islands__subtitle', {opacity: 0, duration: .2, delay: .2, y: -20})
gsap.from('.islands__title', {opacity: 0, duration: .3, delay: .3, y: -20})
gsap.from('.islands__description', {opacity: 0, duration: .4, delay: .4, y: -20})
gsap.from('.islands__button', {opacity: 0, duration: .5, delay: .5, y: -20})
gsap.from('.islands__video-content', {opacity: 0, duration: .6, delay: .6, y: -20})
islandsPopup.classList.remove('show-popup')
}
controlImg.forEach(c => c.addEventListener('click', scrollAnimation))<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/> <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
Scss
/*===== GOOGLE FONTS =====*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
/*===== VARIABLES CSS =====*/
:root{
--header-height: 3rem;
/*========== Colors ==========*/
--first-color: #26A69A;
--first-color-lighter: #ECF3F2;
--title-color: #11443F;
--text-color: #5B7B78;
--body-color: #F5FFFE;
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--biggest-font-size: 3rem;
--big-font-size: 1.25rem;
--normal-font-size: .938rem;
@media screen and (min-width: 1024px){
--biggest-font-size: 5.5rem;
--big-font-size: 2rem;
--normal-font-size: 1rem;
}
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
/*========== BASE ==========*/
*,::before,::after{
box-sizing: border-box;
}
body{
margin: 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h1,h2,ul,p{
margin: 0;
}
ul{
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
}
/*========== LAYOUT ==========*/
.main{
position: relative;
}
.bd-container {
max-width: 968px;
margin-left: 1.5rem;
margin-right: 1.5rem;
}
/*========== HEADER ==========*/
.header{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
}
/*========== NAV ==========*/
.nav{
max-width: 968px;
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
@media screen and(max-width: 768px){
&__menu{
position: fixed;
top: -100%;
left: 0;
right: 0;
width: 90%;
margin: 0 auto;
text-align: center;
padding-top: 1.5rem;
background-color: var(--first-color-lighter);
border-radius: 1rem;
transition: .4s;
}
}
&__logo,
&__toggle{
color: var(--body-color);
}
&__link{
color: var(--first-color-dark);
font-weight: var(--font-medium);
}
&__item{
margin-bottom: 1.5rem;
}
&__toggle{
font-size: 1.2rem;
cursor: pointer;
}
}
/* Show menu */
.show-menu{
top: calc(var(--header-height) + 1rem);
}
/*========== INLANDS ==========*/
.islands{
height: 100vh;
position: relative;
&__bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
object-fit: cover;
object-position: center;
}
&__container{
position: relative;
height: 100%;
display: grid;
grid-template-columns: 2fr .25fr;
align-content: center;
}
&__subtitle,
&__title,
&__description{
color: var(--body-color);
}
&__subtitle{
font-size: var(--big-font-size);
font-weight: var(--font-medium);
}
&__title{
font-size: var(--biggest-font-size);
}
&__description{
margin-bottom: 1rem;
}
&__button{
display: inline-flex;
align-items: center;
padding: 1rem 1.5rem;
background-color: var(--body-color);
color: var(--first-color);
border-radius: .5rem;
font-weight: var(--font-medium);
&:hover{
background-color: var(--first-color-lighter);
}
&-icon{
font-size: 1.5rem;
margin-left: .5rem;
}
}
&__video{
display: flex;
align-items: flex-end;
padding-bottom: .75rem;
&-content{
display: inline-flex;
padding: .15rem;
background-color: var(--body-color);
border-radius: 50%;
cursor: pointer;
}
&-icon{
font-size: 1.8rem;
color: var(--first-color);
}
}
&__popup{
display: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: var(--first-color-lighter);
padding: 1rem .75rem;
border-radius: 1rem;
&-close{
position: absolute;
top: -.75rem;
right: -.75rem;
display: inline-flex;
padding: .35rem;
background-color: var(--first-color);
color: var(--first-color-lighter) ;
font-size: 1.2rem;
border-radius: 50%;
cursor: pointer;
}
}
}
/* Show popup*/
.show-popup{
display: block;
}
/* Controls */
.controls{
&__img{
width: 35px;
height: 35px;
border-radius: .5rem;
cursor: pointer;
}
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
padding: .25rem .5rem;
background-color: var(--body-color);
border-radius: .75rem;
z-index: var(--z-tooltip);
overflow: hidden;
&__container{
display: flex;
align-items: center;
column-gap: 1rem;
}
}
/* Active controls */
.swiper-slide-thumb-active{
width: 45px;
height: 45px;
}
/*========== MEDIA QUERIES ==========*/
/* For small devices */
@media screen and(max-width: 320px){
.bd-container{
margin-left: 1rem;
margin-right: 1rem;
}
.controls__container{
column-gap: .25rem;
}
.islands__popup-video{
width: 230px;
height: 100px;
}
}
@media screen and(min-width: 768px){
.nav {
height: calc(var(--header-height) + 1.5rem);
&__list{
display: flex;
}
&__item{
margin-right: 2rem;
margin-bottom: 0;
}
&__link{
color: var(--body-color);
}
&__toggle{
display: none;
}
}
.islands{
&__container{
grid-template-columns: repeat(2,1fr);
}
&__description{
padding-right: 5rem;
margin-bottom: 2rem;
}
&__video{
justify-content: center;
align-items: center;
padding: 0;
&-icon{
font-size: 3rem;
}
}
&__popup{
&-video{
width: 500px;
height: 250px;
}
&-close{
font-size: 1.5rem;
}
}
}
.controls{
padding: .5rem;
border-radius: 1.25rem;
&__container{
column-gap: 1.5rem;
}
&__img{
width: 45px;
height: 45px;
border-radius: .75rem;
}
}
.swiper-slide-thumb-active{
width: 55px;
height: 55px;
}
}
@media screen and(min-width: 1024px){
.bd-container{
margin-left: auto;
margin-right: auto;
}
.islands__description{
padding-right: 11rem;
}
}
/* For tall screens on mobiles y desktop*/
@media screen and(min-height: 721px){
.islands{
height: 640px;
}
}Видео проигрыватель для сайта путешествий
Открыть элемент
Drag-drop card
<div class="drop">
<div class="drop__container" id="drop-items">
<div class="drop__card">
<div class="drop__data">
<img src="assets/img/img1.jpg" alt="" class="drop__img">
<div>
<h1 class="drop__name">Clay</h1>
<span class="drop__profession">Web developer</span>
</div>
</div>
<div>
<a href="#" class="drop__social"><i class='bx bxl-instagram'></i></a>
<a href="#" class="drop__social"><i class='bx bxl-facebook'></i></a>
<a href="#" class="drop__social"><i class='bx bxl-twitter'></i></a>
</div>
</div>
<div class="drop__card">
<div class="drop__data">
<img src="assets/img/img2.jpg" alt="" class="drop__img">
<div>
<h1 class="drop__name">Sara Mill</h1>
<span class="drop__profession">Graphic design</span>
</div>
</div>
<div>
<a href="#" class="drop__social"><i class='bx bxl-instagram'></i></a>
<a href="#" class="drop__social"><i class='bx bxl-facebook'></i></a>
<a href="#" class="drop__social"><i class='bx bxl-twitter'></i></a>
</div>
</div>
<div class="drop__card">
<div class="drop__data">
<img src="assets/img/img3.jpg" alt="" class="drop__img">
<div>
<h1 class="drop__name">Robbie Ford</h1>
<span class="drop__profession">Ui/Ux design</span>
</div>
</div>
<div>
<a href="#" class="drop__social"><i class='bx bxl-instagram'></i></a>
<a href="#" class="drop__social"><i class='bx bxl-facebook'></i></a>
<a href="#" class="drop__social"><i class='bx bxl-twitter'></i></a>
</div>
</div>
<div class="drop__card">
<div class="drop__data">
<img src="assets/img/img4.jpg" alt="" class="drop__img">
<div>
<h1 class="drop__name">Jenny Lit</h1>
<span class="drop__profession">Digital marketing</span>
</div>
</div>
<div>
<a href="#" class="drop__social"><i class='bx bxl-instagram'></i></a>
<a href="#" class="drop__social"><i class='bx bxl-facebook'></i></a>
<a href="#" class="drop__social"><i class='bx bxl-twitter'></i></a>
</div>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap");
/*===== VARIABLES CSS =====*/
:root {
/*===== Colors =====*/
--first-color: #272A3A;
--first-color-light: #8A8EAA;
--first-color-lighten: #F8F8FC;
/*===== Font and typography =====*/
--body-font: 'Ubuntu', sans-serif;
--normal-font-size: 1rem;
--smaller-font-size: .813rem;
}
/*===== BASE =====*/
*,::before,::after{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font-family: var(--body-font);
background-color: var(--first-color-lighten);
}
h1{
margin: 0;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
}
/*===== DRAG and DROP =====*/
.drop, .drop__container{
display: grid;
}
.drop{
height: 100vh;
align-items: center;
justify-content: center;
}
.drop__container{
row-gap: 1rem;
padding: 2rem;
box-shadow: 4px 4px 16px #E1E1E1;
}
.drop__card, .drop__data{
display: flex;
align-items: center;
}
.drop__card{
width: 360px;
justify-content: space-between;
padding: .75rem 1.25rem .75rem .75rem;
background-color: var(--first-color-lighten);
box-shadow: 4px 4px 16px #E1E1E1, -2px -2px 16px #FFF;
border-radius: 2.5rem;
}
.drop__img{
width: 55px;
height: 55px;
border-radius: 50%;
margin-right: 1rem;
}
.drop__name{
font-size: var(--normal-font-size);
color: var(--first-color);
font-weight: 500;
}
.drop__profession{
font-size: var(--smaller-font-size);
color: var(--first-color-light);
}
.drop__social{
margin: 0 .375rem;
color: var(--first-color-light);
transition: .4s;
}
.drop__social:hover{
color: var(--first-color);
}
/* Class name for the chosen item */
.sortable-chosen{
box-shadow: 8px 8px 32px #E1E1E1;
}
/* Class name for the dragging item */
.sortable-drag{
opacity: 0;
}
const dropItems = document.getElementById('drop-items')
new Sortable(dropItems, {
animation: 350,
chosenClass: "sortable-chosen",
dragClass: "sortable-drag",
store: {
// We keep the order of the list
set: (sortable) =>{
const order = sortable.toArray()
localStorage.setItem(sortable.options.group.name, order.join('|'))
},
// We get the order of the list
get: (sortable) =>{
const order = localStorage.getItem(sortable.options.group.name)
return order ? order.split('|') : []
}
}
});
<!--===== SORTABLE JS =====--> <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
Scss
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap');
/*===== VARIABLES CSS =====*/
:root{
/*===== Colors =====*/
--first-color: #272A3A;
--first-color-light: #8A8EAA;
--first-color-lighten: #F8F8FC;
/*===== Font and typography =====*/
--body-font: 'Ubuntu', sans-serif;
--normal-font-size: 1rem;
--smaller-font-size: .813rem;
}
/*===== BASE =====*/
*,::before,::after{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font-family: var(--body-font);
background-color: var(--first-color-lighten);
}
h1{
margin: 0;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
}
/*===== DRAG and DROP =====*/
.drop{
height: 100vh;
display: grid;
align-items: center;
justify-content: center;
&__container{
display: grid;
row-gap: 1rem;
padding: 2rem;
box-shadow: 4px 4px 16px #E1E1E1;
border-radius: 1rem;
}
&__card, &__data{
display: flex;
align-items: center;
}
&__card{
width: 360px;
justify-content: space-between;
padding: .75rem 1.25rem .75rem .75rem;
background-color: var(--first-color-lighten);
box-shadow: 4px 4px 16px #E1E1E1, -2px -2px 16px #FFF;
border-radius: 2.5rem;
}
&__img{
width: 55px;
height: 55px;
border-radius: 50%;
margin-right: 1rem;
}
&__name{
font-size: var(--normal-font-size);
color: var(--first-color);
font-weight: 500;
}
&__profession{
font-size: var(--smaller-font-size);
color: var(--first-color-light);
}
&__social{
margin: 0 .375rem;
color: var(--first-color-light);
transition: .4s;
&:hover{
color: var(--first-color);
}
}
}
/* Class name for the chosen item */
.sortable-chosen{
box-shadow: 8px 8px 32px #E1E1E1;
}
/* Class name for the dragging item */
.sortable-drag{
opacity: 0;
}
Drag-drop card
Открыть элемент
Музыкальный проигрыватель
<div class="pulsing"></div>
<div class="card">
<div class="card-header">
<div class="img-container">
<img src="images/Wont Let You Down.jpg"
alt="singer image" id="songImg">
</div>
<p class="title" id="title">Won't Let You Down</p>
</div>
<div class="progress-container" id="progressContainer">
<span class="progress" id="progress"></span>
</div>
<audio src="songs/Tobu - Wont Let You Down.mp3"
id="player"></audio>
<div class="controls">
<button class="control" id="prevBtn">
<i class="fas fa-backward"></i>
</button>
<button class="control play" id="playBtn">
<i class="fas fa-play"></i>
<i class="fas fa-pause"></i>
</button>
<button class="control" id="nextBtn">
<i class="fas fa-forward"></i>
</button>
</div>
</div>body {
min-height: 100vh;
background: linear-gradient(135deg, #22c1c3, #fdbb2d);
display: flex;
justify-content: center;
align-items: center;
}
.card {
background-color: #fff;
padding: 1.5em;
min-width: 430px;
box-shadow: 0px 5px 22px 3px rgba(0, 0, 0, 0.2);
border-radius: 6px;
}
/* Header */
.card-header {
display: flex;
align-items: center;
}
.img-container {
width: 5em;
height: 5em;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
border-radius: 50%;
overflow: hidden;
}
.img-container img {
max-width: 100%;
}
.title {
font-size: 1.4rem;
margin-left: 1em;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.control {
margin: 0 0.5em;
border: none;
outline: none;
background-color: transparent;
width: 3em;
height: 3em;
border-radius: 50%;
cursor: pointer;
}
.play {
box-shadow: 0px 0px 40px 2px rgba(30, 177, 150, 0.4);
transition: box-shadow 0.4s;
}
.play:hover {
box-shadow: 0px 0px 20px 2px rgba(30, 177, 150, 0.4);
}
/* Show hide icons play/pause */
.play .fa-pause{
display: none;
}
.play.pause .fa-play {
display: none;
}
.play.pause .fa-pause {
display: block;
}
/* Progress */
.progress-container {
position: relative;
height: 0.3em;
margin: 1.7em 0em;
background-color: #e8e8e8;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
}
.progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
/* width: 70%; */
background-color: #22c1c394;
}const player = document.getElementById('player');
const playBtn = document.getElementById('playBtn');
const title = document.getElementById('title');
const songImg = document.getElementById('songImg');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progressContainer');
let index = 0;
const songs = [
{
title: 'Won\'t Let You Down',
file: 'songs/Tobu - Wont Let You Down.mp3',
img: 'images/Wont Let You Down.jpg'
},
{
title: 'Sunshine Road',
file: 'songs/Tobu & Owen Campbell - Sunshine Road.mp3',
img: 'images/Sunshine Road.jpg'
},
{ title: 'Highway Right Into My Soul',
file: 'songs/Tobu - Highway Right Into My Soul.mp3',
img: 'images/Highway Right Into My Soul.jpg' }]
const NUMBER_OF_SONGS = songs.length;
// Functions
const togglePlay = () => {
playBtn.classList.contains('pause') ?
player.pause() :
player.play();
playBtn.classList.toggle('pause');
}
const forcePlay = () => {
if (!playBtn.classList.contains('pause'))
playBtn.classList.add('pause')
player.play();
}
const setSong = (newIndex) => {
index = newIndex;
if (newIndex >= NUMBER_OF_SONGS)
index = 0;
if (newIndex < 0)
index = NUMBER_OF_SONGS - 1;
songImg.src = songs[index].img;
player.src = songs[index].file;
title.innerHTML = songs[index].title;
forcePlay()
}
const setProgress = (e) => {
const { duration, currentTime } = e.srcElement;
// console.log('duration', duration)
// console.log('currentTime', currentTime)
if (!duration || !currentTime) return;
const progressPercentage = (currentTime / duration) * 100;
progress.style.width = `${progressPercentage}%`;
}
const setCurrentTime = (e) => {
debugger
// console.log(e.offsetX);
const cursorX = e.offsetX;
const containerWidth = progressContainer.offsetWidth;
// console.log('containerWidth', containerWidth);
player.currentTime = (cursorX / containerWidth) * player.duration
}
// Events handlers
playBtn.addEventListener('click', togglePlay);
prevBtn.addEventListener('click', () => setSong(index - 1));
nextBtn.addEventListener('click', () => setSong(index + 1));
// update audio progress
player.addEventListener('timeupdate', setProgress);
// set player song currentTime through click
progressContainer.addEventListener('click', setCurrentTime);Музыкальный проигрыватель
Открыть элемент
JavaScript Календарь
<body class="light">
<div class="calendar">
<div class="calendar-header">
<span class="month-picker" id="month-picker">February</span>
<div class="year-picker">
<span class="year-change" id="prev-year">
<pre><</pre>
</span>
<span id="year">2021</span>
<span class="year-change" id="next-year">
<pre>></pre>
</span>
</div>
</div>
<div class="calendar-body">
<div class="calendar-week-day">
<div>Sun</div>
<div>Mon</div>
<div>Tue</div>
<div>Wed</div>
<div>Thu</div>
<div>Fri</div>
<div>Sat</div>
</div>
<div class="calendar-days"></div>
</div>
<div class="calendar-footer">
<div class="toggle">
<span>Dark Mode</span>
<div class="dark-mode-switch">
<div class="dark-mode-switch-ident"></div>
</div>
</div>
</div>
<div class="month-list"></div>
</div>
</body>:root {
--dark-body: #4d4c5a;
--dark-main: #141529;
--dark-second: #79788c;
--dark-hover: #323048;
--dark-text: #f8fbff;
--light-body: #f3f8fe;
--light-main: #fdfdfd;
--light-second: #c3c2c8;
--light-hover: #edf0f5;
--light-text: #151426;
--blue: #0000ff;
--white: #fff;
--shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
--font-family: cursive;
}
.dark {
--bg-body: var(--dark-body);
--bg-main: var(--dark-main);
--bg-second: var(--dark-second);
--color-hover: var(--dark-hover);
--color-txt: var(--dark-text);
}
.light {
--bg-body: var(--light-body);
--bg-main: var(--light-main);
--bg-second: var(--light-second);
--color-hover: var(--light-hover);
--color-txt: var(--light-text);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100vh;
display: grid;
place-items: center;
font-family: var(--font-family);
background-color: var(--bg-body);
}
.calendar {
height: max-content;
width: max-content;
background-color: var(--bg-main);
border-radius: 30px;
padding: 20px;
position: relative;
overflow: hidden;
/* transform: scale(1.25); */
}
.light .calendar {
box-shadow: var(--shadow);
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 25px;
font-weight: 600;
color: var(--color-txt);
padding: 10px;
}
.calendar-body {
padding: 10px;
}
.calendar-week-day {
height: 50px;
display: grid;
grid-template-columns: repeat(7, 1fr);
font-weight: 600;
}
.calendar-week-day div {
display: grid;
place-items: center;
color: var(--bg-second);
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
color: var(--color-txt);
}
.calendar-days div {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
position: relative;
cursor: pointer;
animation: to-top 1s forwards;
/* border-radius: 50%; */
}
.calendar-days div span {
position: absolute;
}
.calendar-days div:hover span {
transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
}
.calendar-days div span:nth-child(1),
.calendar-days div span:nth-child(3) {
width: 2px;
height: 0;
background-color: var(--color-txt);
}
.calendar-days div:hover span:nth-child(1),
.calendar-days div:hover span:nth-child(3) {
height: 100%;
}
.calendar-days div span:nth-child(1) {
bottom: 0;
left: 0;
}
.calendar-days div span:nth-child(3) {
top: 0;
right: 0;
}
.calendar-days div span:nth-child(2),
.calendar-days div span:nth-child(4) {
width: 0;
height: 2px;
background-color: var(--color-txt);
}
.calendar-days div:hover span:nth-child(2),
.calendar-days div:hover span:nth-child(4) {
width: 100%;
}
.calendar-days div span:nth-child(2) {
top: 0;
left: 0;
}
.calendar-days div span:nth-child(4) {
bottom: 0;
right: 0;
}
.calendar-days div:hover span:nth-child(2) {
transition-delay: 0.2s;
}
.calendar-days div:hover span:nth-child(3) {
transition-delay: 0.4s;
}
.calendar-days div:hover span:nth-child(4) {
transition-delay: 0.6s;
}
.calendar-days div.curr-date,
.calendar-days div.curr-date:hover {
background-color: var(--blue);
color: var(--white);
border-radius: 50%;
}
.calendar-days div.curr-date span {
display: none;
}
.month-picker {
padding: 5px 10px;
border-radius: 10px;
cursor: pointer;
}
.month-picker:hover {
background-color: var(--color-hover);
}
.year-picker {
display: flex;
align-items: center;
}
.year-change {
height: 40px;
width: 40px;
border-radius: 50%;
display: grid;
place-items: center;
margin: 0 10px;
cursor: pointer;
}
.year-change:hover {
background-color: var(--color-hover);
}
.calendar-footer {
padding: 10px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.toggle {
display: flex;
}
.toggle span {
margin-right: 10px;
color: var(--color-txt);
}
.dark-mode-switch {
position: relative;
width: 48px;
height: 25px;
border-radius: 14px;
background-color: var(--bg-second);
cursor: pointer;
}
.dark-mode-switch-ident {
width: 21px;
height: 21px;
border-radius: 50%;
background-color: var(--bg-main);
position: absolute;
top: 2px;
left: 2px;
transition: left 0.2s ease-in-out;
}
.dark .dark-mode-switch .dark-mode-switch-ident {
top: 2px;
left: calc(2px + 50%);
}
.month-list {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: var(--bg-main);
padding: 20px;
grid-template-columns: repeat(3, auto);
gap: 5px;
display: grid;
transform: scale(1.5);
visibility: hidden;
pointer-events: none;
}
.month-list.show {
transform: scale(1);
visibility: visible;
pointer-events: visible;
transition: all 0.2s ease-in-out;
}
.month-list > div {
display: grid;
place-items: center;
}
.month-list > div > div {
width: 100%;
padding: 5px 20px;
border-radius: 10px;
text-align: center;
cursor: pointer;
color: var(--color-txt);
}
.month-list > div > div:hover {
background-color: var(--color-hover);
}
@keyframes to-top {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}let calendar = document.querySelector('.calendar')
const month_names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
isLeapYear = (year) => {
return (year % 4 === 0 && year % 100 !== 0 && year % 400 !== 0) || (year % 100 === 0 && year % 400 ===0)
}
getFebDays = (year) => {
return isLeapYear(year) ? 29 : 28
}
generateCalendar = (month, year) => {
let calendar_days = calendar.querySelector('.calendar-days')
let calendar_header_year = calendar.querySelector('#year')
let days_of_month = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
calendar_days.innerHTML = ''
let currDate = new Date()
if (!month) month = currDate.getMonth()
if (!year) year = currDate.getFullYear()
let curr_month = `${month_names[month]}`
month_picker.innerHTML = curr_month
calendar_header_year.innerHTML = year
// get first day of month
let first_day = new Date(year, month, 1)
for (let i = 0; i <= days_of_month[month] + first_day.getDay() - 1; i++) {
let day = document.createElement('div')
if (i >= first_day.getDay()) {
day.classList.add('calendar-day-hover')
day.innerHTML = i - first_day.getDay() + 1
day.innerHTML += `<span></span>
<span></span>
<span></span>
<span></span>`
if (i - first_day.getDay() + 1 === currDate.getDate() && year === currDate.getFullYear() && month === currDate.getMonth()) {
day.classList.add('curr-date')
}
}
calendar_days.appendChild(day)
}
}
let month_list = calendar.querySelector('.month-list')
month_names.forEach((e, index) => {
let month = document.createElement('div')
month.innerHTML = `<div data-month="${index}">${e}</div>`
month.querySelector('div').onclick = () => {
month_list.classList.remove('show')
curr_month.value = index
generateCalendar(index, curr_year.value)
}
month_list.appendChild(month)
})
let month_picker = calendar.querySelector('#month-picker')
month_picker.onclick = () => {
month_list.classList.add('show')
}
let currDate = new Date()
let curr_month = {value: currDate.getMonth()}
let curr_year = {value: currDate.getFullYear()}
generateCalendar(curr_month.value, curr_year.value)
document.querySelector('#prev-year').onclick = () => {
--curr_year.value
generateCalendar(curr_month.value, curr_year.value)
}
document.querySelector('#next-year').onclick = () => {
++curr_year.value
generateCalendar(curr_month.value, curr_year.value)
}
let dark_mode_toggle = document.querySelector('.dark-mode-switch')
dark_mode_toggle.onclick = () => {
document.querySelector('body').classList.toggle('light')
document.querySelector('body').classList.toggle('dark')
}JavaScript Календарь
Открыть элемент
Анимированный фон для сайта. Автор WebDevSimplified
<div class="landscape">
<div class="mountain"></div>
<div class="mountain mountain-2"></div>
<div class="mountain mountain-3"></div>
<div class="sun-container sun-container-1">
</div>
<div class="sun-container">
<div class="sun"></div>
</div>
<div class="cloud"></div>
<div class="cloud cloud-1"></div>
<div class="sun-container sun-container-reflection">
<div class="sun"></div>
</div>
<div class="light"></div>
<div class="light light-1"></div>
<div class="light light-2"></div>
<div class="light light-3"></div>
<div class="light light-4"></div>
<div class="light light-5"></div>
<div class="light light-6"></div>
<div class="light light-7"></div>
<div class="water"></div>
<div class="splash"></div>
<div class="splash delay-1"></div>
<div class="splash delay-2"></div>
<div class="splash splash-4 delay-2"></div>
<div class="splash splash-4 delay-3"></div>
<div class="splash splash-4 delay-4"></div>
<div class="splash splash-stone delay-3"></div>
<div class="splash splash-stone splash-4"></div>
<div class="splash splash-stone splash-5"></div>
<div class="lotus lotus-1"></div>
<div class="lotus lotus-2"></div>
<div class="lotus lotus-3"></div>
<!-- TODO: Add trash -->
<div class="trash-container"></div>
<div class="front">
<div class="stone"></div>
<div class="grass"></div>
<div class="grass grass-1"></div>
<div class="grass grass-2"></div>
<div class="reed"></div>
<div class="reed reed-1"></div>
</div>
</div>
<div class="logo"></div>
<h1 class="money"></h1>.logo-parent {
display: inline-flex;
border: 1px solid #00AAFF;
}
.logo {
position: absolute;
top: .5rem;
left: .5rem;
overflow: hidden;
width: 5rem;
height: 5rem;
border-radius: 100%;
z-index: 100;
}
.logo::before {
content: "";
background: url(/team-seas-logo.png);
position: absolute;
background-size: cover;
width: 100%;
height: 100%;
}
.logo::after {
content: '';
position: absolute;
width: 200%;
height: 200%;
background-color: hsl(290, 31%, 67%, .9);
bottom: 0;
left: -50%;
border-radius: 35%;
animation: waves 5s ease-in-out alternate infinite;
}
@keyframes waves {
from {
transform: translateY(0) rotate(0);
}
to {
transform: translateY(-50%) rotate(540deg);
}
}
.money {
position: absolute;
bottom: 50vh;
left: 50vmin;
font-size: 6vmin;
z-index: 100;
margin: 0;
opacity: .5;
color: white;
text-shadow: 0 0 5px hsl(0, 0%, 0%, .5);
}
.trash-container {
width: 100%;
height: 50vh;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
}
.trash {
position: absolute;
overflow: hidden;
animation: bob 2s ease-in-out infinite alternate;
}
.trash svg {
opacity: .75;
}
@keyframes bob {
from {
transform: rotate(var(--rotation)) translateY(1vh)
}
to {
transform: rotate(calc(var(--rotation) + 10deg)) translateY(0)
}
}
body {
margin: 0;
}
/*
Below code from Paulina Hetman
*/
:root {
--v1: #be91c6;
--v2: #8a65cc;
--v3: #5e30d9;
--transparentv3: #5e30d900;
--v4: #3b1895;
--s1: #fea798;
--s2: #ff846e;
--cloud: #fea798;
}
.landscape:after,
.landscape:before,
.landscape *,
.landscape *:after,
.landscape *:before {
position: absolute;
}
.front {
/* TODO: Change z-index */
z-index: 11;
bottom: 0;
left: 0;
right: 0;
}
.landscape {
height: 100vh;
background-image: linear-gradient(var(--v1), var(--s1), var(--v1));
position: relative;
z-index: 1;
overflow: hidden;
}
.mountain {
border-radius: 180% 80% 0% 0%/60vmin 60vmin 0% 0%;
width: 40vmin;
height: 30vmin;
bottom: 50%;
left: -10vmin;
background: var(--s1);
background-image: linear-gradient(var(--v1), var(--v2) 30%, var(--v3));
box-shadow: inset -10px 0 10px -10px var(--s1);
}
.mountain::before {
content: "";
bottom: 0;
width: inherit;
height: inherit;
background: inherit;
border-radius: inherit;
transform-origin: bottom center;
transform: scaleX(1) scaleY(-0.6);
filter: blur(3px);
}
.mountain-2 {
left: 5vmin;
height: 15vmin;
width: 40vmin;
box-shadow: inset -15px 0 10px -14px var(--s1);
border-radius: 120% 50% 0% 0%/25vmin 25vmin 0% 0%;
background-image: linear-gradient(var(--v3), var(--v4));
}
.mountain-3 {
border-radius: 80% 0% 0 0/100% 100% 0 0;
right: -85vmin;
width: 100vmin;
left: auto;
height: 12vmin;
color: var(--v3);
background-image: linear-gradient(var(--s1), var(--v4));
box-shadow: inset 15px 0 10px -10px var(--s1);
}
.mountain-3:after {
content: "";
border-radius: 60% 0 0 0/100% 0 0 0;
background: inherit;
width: 100%;
height: 0;
bottom: 0;
right: 20%;
}
.lotus {
width: 10vmin;
height: 5vmin;
background: conic-gradient(
var(--v3) 0deg 40deg,
var(--transparentv3) 50deg 70deg,
var(--v3) 80deg
);
border-radius: 50%;
}
.lotus-1 {
bottom: 10vmin;
right: 5vmin;
width: 20vmin;
}
.lotus-2 {
bottom: 20vmin;
right: 15vmin;
height: 3vmin;
transform: skew(-10deg);
opacity: 0.5;
mix-blend-mode: multiply;
}
.lotus-3 {
bottom: 10vmin;
right: 35vmin;
transform: rotate(180deg) skew(-20deg);
opacity: 0.8;
width: 15vmin;
}
.cloud {
width: 80vmin;
height: 6vmin;
background: currentcolor;
color: var(--cloud);
top: 24vmin;
left: 20vmin;
border-radius: 50%;
box-shadow: 30vmin 0.5vmin 0 -1vmin currentcolor,
-25vmin 0 0 -0.6vmin currentcolor;
opacity: 0.3;
transform: translate3d(-150vmin, 0, 0);
animation: clouds 120s infinite;
animation-delay: -10s;
}
@keyframes clouds {
50% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(150vmin, 0, 0);
}
}
.cloud-1 {
left: 60vmin;
top: 15vmin;
opacity: 0.2;
filter: blur(1px);
animation-delay: 0;
animation-duration: 100s;
}
.water {
top: 50%;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(#fea79855, var(--v2));
overflow: hidden;
box-shadow: inset 0 1px 4px -3px white;
}
.stone {
bottom: -5vh;
left: 0;
height: 20vmin;
width: 40vmin;
background: var(--v4);
box-shadow: inset 0 0 20px -5px rgba(0, 0, 0, 0.2);
border-radius: 0% 200% 0 0/0% 200%;
}
.stone:after {
content: "";
background: var(--v3);
width: 100%;
height: 100%;
right: -15%;
border-radius: inherit;
z-index: -1;
transform: scaleX(1.3) skew(10deg);
box-shadow: inset 0 0 20px -5px rgba(0, 0, 0, 0.4);
}
.grass {
height: 40vmin;
width: 10vmin;
border-radius: 0 60% 0 0/0 100% 0 0;
bottom: 0;
border-right: 5px solid var(--v4);
box-shadow: 1px 0 0 var(--s1);
filter: drop-shadow(-0.5vmin 6vmin 0 var(--s2))
drop-shadow(-4.5vmin 10vmin 0 var(--v3));
}
.grass-1 {
left: 14vmin;
bottom: -2vmin;
transform: scaleX(-1);
box-shadow: 2px 0 0 var(--v4);
border-color: var(--v3);
filter: drop-shadow(-1vmin 5vmin 0 var(--v3))
drop-shadow(-80vmin 5vmin 0 var(--v4));
}
.grass-2 {
right: 0;
left: auto;
height: 20vmin;
bottom: -2vmin;
transform: scaleX(-1);
}
.sun {
background: white;
border-radius: 50%;
width: 20vmin;
height: 20vmin;
left: calc(60% - 10vmin);
top: 100%;
transform: translate3d(0, 0, 0);
animation: rise 20s infinite;
box-shadow: 0 0 10px white;
}
.reed {
height: 40vmin;
width: 0.5vmin;
bottom: 0;
left: 10vmin;
color: var(--v4);
background: currentColor;
transform-origin: bottom center;
transform: rotate(4deg);
box-shadow: inset -1px 0 0 var(--s2), -6vmin 3vmin 0 0, 80vmin 0 0 0;
animation: verticalise 20s infinite;
}
.reed-1 {
color: var(--s2);
left: 15vmin;
height: 50vmin;
bottom: -5vmin;
transform: rotate(-2deg);
animation: verticalise-1 20s infinite;
box-shadow: inset -1px 0 0 var(--s1), 6vmin 13vmin 0 0 var(--s1),
80vmin 10vmin 0 0 var(--v3);
}
.reed:after {
content: "";
width: 1.5vmin;
height: 10vmin;
background: currentcolor;
border-radius: 0.75vmin;
top: 0;
left: -0.5vmin;
box-shadow: inherit;
}
@keyframes verticalise {
0%,
10% {
transform: rotate(4deg);
}
30%,
70% {
transform: rotate(0);
}
}
@keyframes verticalise-1 {
0%,
10% {
transform: rotate(-2deg);
}
45%,
70% {
transform: rotate(0) translateY(-6vmin);
}
}
@keyframes rise {
100% {
transform: translate3d(0, -100vh, 20vmin);
}
}
@keyframes rise-reflection {
30% {
opacity: 0;
transform: translate3d(0, 5vmin, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 80vmin, 0);
}
}
.sun-container {
overflow: hidden;
width: 100%;
height: 50%;
}
.sun-container-1:after {
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
background: radial-gradient(circle at 60% 100%, var(--s2), transparent);
animation: fade 20s infinite;
mix-blend-mode: color-burn;
}
@keyframes fade {
10% {
opacity: 1;
}
30%,
70% {
opacity: 0;
}
}
.sun-container-reflection {
top: 50%;
background: radial-gradient(circle at 60% 0%, var(--s2), transparent);
}
.sun-container-reflection .sun {
background: linear-gradient(white, rgba(255, 255, 255, 0));
box-shadow: none;
filter: blur(5px);
opacity: 1;
top: 0;
transform: translate3d(0, -20vmin, 0);
animation-name: rise-reflection;
}
.light {
height: 0.5vmin;
width: 20vmin;
background: white;
left: 20%;
right: 0;
margin: auto;
top: calc(50% + 1vmin);
animation: light 20s infinite;
opacity: 0;
transform: scaleX(0.1) translate3d(0%, 0, 0);
border-radius: 0.25vh;
filter: blur(1px);
}
@-webkit-keyframes light {
5% {
opacity: 1;
transform: scaleX(1);
}
10% {
opacity: 0.6;
transform: scaleX(1) translate3d(5%, 0, 0);
}
15% {
opacity: 0.6;
transform: scaleX(1) translate3d(-5%, 0, 0);
}
20% {
opacity: 0;
transform: scaleX(0.1) translate3d(0, 0, 0);
}
}
@keyframes light {
5% {
opacity: 1;
transform: scaleX(1);
}
10% {
opacity: 0.6;
transform: scaleX(1) translate3d(5%, 0, 0);
}
15% {
opacity: 0.6;
transform: scaleX(1) translate3d(-5%, 0, 0);
}
20% {
opacity: 0;
transform: scaleX(0.1) translate3d(0, 0, 0);
}
}
.light-1 {
top: calc(50% + 2vmin);
animation-delay: 0.5s;
}
.light-2 {
top: calc(50% + 3vmin);
width: 18vmin;
animation-delay: 1s;
}
.light-3 {
top: calc(50% + 4vmin);
width: 18vmin;
animation-delay: 1.5s;
}
.light-4 {
top: calc(50% + 5vmin);
width: 16vmin;
animation-delay: 2s;
}
.light-5 {
top: calc(50% + 8vmin);
width: 14vmin;
animation-delay: 2.5s;
}
.light-6 {
top: calc(50% + 9vmin);
width: 10vmin;
animation-delay: 3s;
}
.light-7 {
top: calc(50% + 7vmin);
width: 12vmin;
animation-delay: 3.5s;
}
.splash {
width: 8vmin;
height: 3vmin;
border: 2px solid var(--s1);
box-shadow: 0 0 2px var(--s1);
border-radius: 50%;
bottom: 5vmin;
left: 70%;
animation: splash 9s infinite;
transform: scale(0);
}
.splash-stone {
bottom: 15vh;
left: -3vmin;
height: 10vmin;
width: 30vmin;
}
.splash-4 {
bottom: 5vmin;
left: auto;
bottom: 15vmin;
right: -2vmin;
}
@keyframes splash {
50%,
100% {
transform: scale(1);
opacity: 0;
}
}
.delay-1 {
animation-delay: 1s;
}
.delay-2 {
animation-delay: 2s;
}
.delay-3 {
animation-delay: 3s;
}
.delay-4 {
animation-delay: 4s;
}
.delay-5 {
animation-delay: 5s;
}
.delay-6 {
animation-delay: 6s;
}const trashContainer = document.querySelector(".trash-container")
const moneyElem = document.querySelector(".money")
const numberFormatter = new Intl.NumberFormat("en-us", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0,
})
const MAX_MONEY_RAISED = 30000000
const XXL_TRASH_MONEY = 1000000
const XL_TRASH_MONEY = 100000
const LG_TRASH_MONEY = 10000
const MD_TRASH_MONEY = 1000
const SM_TRASH_MONEY = 100
const XS_TRASH_MONEY = 10
const bagSvg = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="#000000"><g><rect fill="none" /><path d="M18,6h-2c0-2.21-1.79-4-4-4S8,3.79,8,6H6C4.9,6,4,6.9,4,8v12c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8C20,6.9,19.1,6,18,6z M10,10c0,0.55-0.45,1-1,1s-1-0.45-1-1V8h2V10z M12,4c1.1,0,2,0.9,2,2h-4C10,4.9,10.9,4,12,4z M16,10c0,0.55-0.45,1-1,1 s-1-0.45-1-1V8h2V10z"/></g></svg>`
const bottleSvg = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="#000000"><g><rect fill="none"/></g><g><path d="M20.63,8.54l-0.95-0.32C19.28,8.09,19,7.71,19,7.28V3c0-0.55-0.45-1-1-1h-3c-0.55,0-1,0.45-1,1v4.28 c0,0.43-0.28,0.81-0.68,0.95l-0.95,0.32C11.55,8.82,11,9.58,11,10.44V20c0,1.1,0.9,2,2,2h7c1.1,0,2-0.9,2-2v-9.56 C22,9.58,21.45,8.82,20.63,8.54z M16,4h1v1h-1V4z M13,10.44l0.95-0.32C15.18,9.72,16,8.57,16,7.28V7h1v0.28 c0,1.29,0.82,2.44,2.05,2.85L20,10.44V12h-7V10.44z M20,20h-7v-2h7V20z"/></g></g></g></svg>`
const headphonesSvg = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="#000000"><g><rect fill="none" /></g><g><path d="M12,3c-4.97,0-9,4.03-9,9v7c0,1.1,0.9,2,2,2h4v-8H5v-1c0-3.87,3.13-7,7-7s7,3.13,7,7v1h-4v8h4c1.1,0,2-0.9,2-2v-7 C21,7.03,16.97,3,12,3z"/></g></svg>`
const phoneSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 5h10v14H7z" opacity=".3"/><path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>`
const takeoutBoxSvg = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="#000000"><g><rect fill="none" /></g><g><path d="M5.26,11h13.48l-0.67,9H5.93L5.26,11z M9.02,4h5.95L19,7.38l1.59-1.59L22,7.21 L19.21,10H4.79L2,7.21l1.41-1.41L5,7.38L9.02,4z" fill-rule="evenodd"/></g></svg>`
const toyCarSvg = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="#000000"><g display="none"><rect display="inline" fill="none" y="0"/></g><g><path d="M22,14c0-1.95-1.4-3.57-3.25-3.92L17.4,6.05C17,4.82,15.85,4,14.56,4H9.44C8.15,4,7,4.82,6.6,6.05L5.81,8.4L4.41,7 l0.29-0.29c0.39-0.39,0.39-1.02,0-1.41c-0.39-0.39-1.02-0.39-1.41,0l-2,2c-0.39,0.39-0.39,1.02,0,1.41c0.39,0.39,1.02,0.39,1.41,0 L3,8.41l1.79,1.79C3.18,10.72,2,12.22,2,14c0,1.5,0.83,2.79,2.05,3.48C4.28,18.9,5.51,20,7,20c1.3,0,2.4-0.84,2.82-2h4.37 c0.41,1.16,1.51,2,2.82,2c1.49,0,2.72-1.1,2.95-2.52C21.17,16.79,22,15.5,22,14z M7,18c-0.55,0-1-0.45-1-1s0.45-1,1-1s1,0.45,1,1 S7.55,18,7,18z M11,10H7.41L7.39,9.98l1.1-3.3C8.63,6.27,9.01,6,9.44,6H11V10z M13,6h1.56c0.43,0,0.81,0.27,0.95,0.68L16.61,10H13 V6z M17,18c-0.55,0-1-0.45-1-1s0.45-1,1-1s1,0.45,1,1S17.55,18,17,18z"/></g></svg>`
const amountRaised = 12341342
moneyElem.innerText = numberFormatter.format(amountRaised)
const amountLeftToRaise = Math.max(MAX_MONEY_RAISED - amountRaised, 0)
const trashAmounts = {}
trashAmounts.xxl = {
amount: Math.floor(amountLeftToRaise / XXL_TRASH_MONEY),
icon: bagSvg,
}
trashAmounts.xl = {
amount: Math.floor((amountLeftToRaise % XXL_TRASH_MONEY) / XL_TRASH_MONEY),
icon: takeoutBoxSvg,
}
trashAmounts.md = {
amount: Math.floor((amountLeftToRaise % XL_TRASH_MONEY) / LG_TRASH_MONEY),
icon: headphonesSvg,
}
trashAmounts.md = {
amount: Math.floor((amountLeftToRaise % LG_TRASH_MONEY) / MD_TRASH_MONEY),
icon: phoneSvg,
}
trashAmounts.sm = {
amount: Math.floor((amountLeftToRaise % MD_TRASH_MONEY) / SM_TRASH_MONEY),
icon: toyCarSvg,
}
trashAmounts.xs = {
amount: Math.floor((amountLeftToRaise % SM_TRASH_MONEY) / XS_TRASH_MONEY),
icon: bottleSvg,
}
Object.values(trashAmounts).forEach(({ amount, icon, size }) => {
for (let i = 0; i < amount; i++) createTrash(icon, size)
})
function createTrash(icon) {
const div = document.createElement("div")
const top = randomNumberBetween(0, 50)
const size = top / 5 + 1
div.classList.add("trash")
div.innerHTML = icon
div.style.width = `${size}vmin`
div.style.height = `${size}vmin`
div.style.top = `${top}vh`
div.style.left = `${randomNumberBetween(0, 100)}vw`
div.style.setProperty("--rotation", `${randomNumberBetween(-30, 30)}deg`)
trashContainer.appendChild(div)
}
function randomNumberBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}Анимированный фон для сайта
Открыть элемент
Текст речи. Автор WebDevSimplified
<textarea id="text"></textarea> <label for="speed">Speed</label> <input type="number" name="spee" id="speed" min=".5" max="3" step=".5" value="1"> <button id="play-button">Play</button> <button id="pause-button">Pause</button> <button id="stop-button">Stop</button>
body {
width: 90%;
margin: 0 auto;
margin-top: 1rem;
background-color: #ffffff;
}
#text {
width: 100%;
height: 50vh;
}const playButton = document.getElementById('play-button')
const pauseButton = document.getElementById('pause-button')
const stopButton = document.getElementById('stop-button')
const textInput = document.getElementById('text')
const speedInput = document.getElementById('speed')
let currentCharacter
playButton.addEventListener('click', () => {
playText(textInput.value)
})
pauseButton.addEventListener('click', pauseText)
stopButton.addEventListener('click', stopText)
speedInput.addEventListener('input', () => {
stopText()
playText(utterance.text.substring(currentCharacter))
})
const utterance = new SpeechSynthesisUtterance()
utterance.addEventListener('end', () => {
textInput.disabled = false
})
utterance.addEventListener('boundary', e => {
currentCharacter = e.charIndex
})
function playText(text) {
if (speechSynthesis.paused && speechSynthesis.speaking) {
return speechSynthesis.resume()
}
if (speechSynthesis.speaking) return
utterance.text = text
utterance.rate = speedInput.value || 1
textInput.disabled = true
speechSynthesis.speak(utterance)
}
function pauseText() {
if (speechSynthesis.speaking) speechSynthesis.pause()
}
function stopText() {
speechSynthesis.resume()
speechSynthesis.cancel()
}Текст речи
Открыть элемент
Игра крестики нолики. Автор WebDevSimplified
<div class="board" id="board">
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
</div>
<div class="winning-message" id="winningMessage">
<div data-winning-message-text></div>
<button id="restartButton">Restart</button>
</div>:root {
--cell-size: 100px;
--mark-size: calc(var(--cell-size) * .9);
}
body {
margin: 0;
}
.board {
width: 100vw;
height: 100vh;
display: grid;
justify-content: center;
align-content: center;
justify-items: center;
align-items: center;
grid-template-columns: repeat(3, auto)
}
.cell {
width: var(--cell-size);
height: var(--cell-size);
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
}
.cell:first-child,
.cell:nth-child(2),
.cell:nth-child(3) {
border-top: none;
}
.cell:nth-child(3n + 1) {
border-left: none;
}
.cell:nth-child(3n + 3) {
border-right: none;
}
.cell:last-child,
.cell:nth-child(8),
.cell:nth-child(7) {
border-bottom: none;
}
.cell.x,
.cell.circle {
cursor: not-allowed;
}
.cell.x::before,
.cell.x::after,
.cell.circle::before {
background-color: black;
}
.board.x .cell:not(.x):not(.circle):hover::before,
.board.x .cell:not(.x):not(.circle):hover::after,
.board.circle .cell:not(.x):not(.circle):hover::before {
background-color: lightgrey;
}
.cell.x::before,
.cell.x::after,
.board.x .cell:not(.x):not(.circle):hover::before,
.board.x .cell:not(.x):not(.circle):hover::after {
content: '';
position: absolute;
width: calc(var(--mark-size) * .15);
height: var(--mark-size);
}
.cell.x::before,
.board.x .cell:not(.x):not(.circle):hover::before {
transform: rotate(45deg);
}
.cell.x::after,
.board.x .cell:not(.x):not(.circle):hover::after {
transform: rotate(-45deg);
}
.cell.circle::before,
.cell.circle::after,
.board.circle .cell:not(.x):not(.circle):hover::before,
.board.circle .cell:not(.x):not(.circle):hover::after {
content: '';
position: absolute;
border-radius: 50%;
}
.cell.circle::before,
.board.circle .cell:not(.x):not(.circle):hover::before {
width: var(--mark-size);
height: var(--mark-size);
}
.cell.circle::after,
.board.circle .cell:not(.x):not(.circle):hover::after {
width: calc(var(--mark-size) * .7);
height: calc(var(--mark-size) * .7);
background-color: white;
}
.winning-message {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .9);
justify-content: center;
align-items: center;
color: white;
font-size: 5rem;
flex-direction: column;
}
.winning-message button {
font-size: 3rem;
background-color: white;
border: 1px solid black;
padding: .25em .5em;
cursor: pointer;
}
.winning-message button:hover {
background-color: black;
color: white;
border-color: white;
}
.winning-message.show {
display: flex;
}const X_CLASS = 'x'
const CIRCLE_CLASS = 'circle'
const WINNING_COMBINATIONS = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
]
const cellElements = document.querySelectorAll('[data-cell]')
const board = document.getElementById('board')
const winningMessageElement = document.getElementById('winningMessage')
const restartButton = document.getElementById('restartButton')
const winningMessageTextElement = document.querySelector('[data-winning-message-text]')
let circleTurn
startGame()
restartButton.addEventListener('click', startGame)
function startGame() {
circleTurn = false
cellElements.forEach(cell => {
cell.classList.remove(X_CLASS)
cell.classList.remove(CIRCLE_CLASS)
cell.removeEventListener('click', handleClick)
cell.addEventListener('click', handleClick, { once: true })
})
setBoardHoverClass()
winningMessageElement.classList.remove('show')
}
function handleClick(e) {
const cell = e.target
const currentClass = circleTurn ? CIRCLE_CLASS : X_CLASS
placeMark(cell, currentClass)
if (checkWin(currentClass)) {
endGame(false)
} else if (isDraw()) {
endGame(true)
} else {
swapTurns()
setBoardHoverClass()
}
}
function endGame(draw) {
if (draw) {
winningMessageTextElement.innerText = 'Draw!'
} else {
winningMessageTextElement.innerText = `${circleTurn ? "O's" : "X's"} Wins!`
}
winningMessageElement.classList.add('show')
}
function isDraw() {
return [...cellElements].every(cell => {
return cell.classList.contains(X_CLASS) || cell.classList.contains(CIRCLE_CLASS)
})
}
function placeMark(cell, currentClass) {
cell.classList.add(currentClass)
}
function swapTurns() {
circleTurn = !circleTurn
}
function setBoardHoverClass() {
board.classList.remove(X_CLASS)
board.classList.remove(CIRCLE_CLASS)
if (circleTurn) {
board.classList.add(CIRCLE_CLASS)
} else {
board.classList.add(X_CLASS)
}
}
function checkWin(currentClass) {
return WINNING_COMBINATIONS.some(combination => {
return combination.every(index => {
return cellElements[index].classList.contains(currentClass)
})
})
}Игра крестики нолики
Открыть элемент
Анимированный фон для сайта. Автор WebDevSimplified
<div class="landscape">
<div class="mountain"></div>
<div class="mountain mountain-2"></div>
<div class="mountain mountain-3"></div>
<div class="sun-container sun-container-1">
</div>
<div class="sun-container">
<div class="sun"></div>
</div>
<div class="cloud"></div>
<div class="cloud cloud-1"></div>
<div class="sun-container sun-container-reflection">
<div class="sun"></div>
</div>
<div class="light"></div>
<div class="light light-1"></div>
<div class="light light-2"></div>
<div class="light light-3"></div>
<div class="light light-4"></div>
<div class="light light-5"></div>
<div class="light light-6"></div>
<div class="light light-7"></div>
<div class="water"></div>
<div class="splash"></div>
<div class="splash delay-1"></div>
<div class="splash delay-2"></div>
<div class="splash splash-4 delay-2"></div>
<div class="splash splash-4 delay-3"></div>
<div class="splash splash-4 delay-4"></div>
<div class="splash splash-stone delay-3"></div>
<div class="splash splash-stone splash-4"></div>
<div class="splash splash-stone splash-5"></div>
<div class="lotus lotus-1"></div>
<div class="lotus lotus-2"></div>
<div class="lotus lotus-3"></div>
<div class="trash-container"></div>
<div class="front">
<div class="stone"></div>
<div class="grass"></div>
<div class="grass grass-1"></div>
<div class="grass grass-2"></div>
<div class="reed"></div>
<div class="reed reed-1"></div>
</div>
</div>
<div class="logo"></div>
<h1 class="money"></h1>.logo {
position: absolute;
top: .5rem;
left: .5rem;
width: 5rem;
height: 5rem;
border-radius: 100%;
overflow: hidden;
z-index: 100;
}
.logo::before {
content: "";
background: url(/imgs/team-seas-logo.png);
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
}
.logo::after {
content: '';
position: absolute;
width: 200%;
height: 200%;
background-color: hsla(290, 31%, 67%, .9);
bottom: 0;
left: -50%;
border-radius: 35%;
animation: waves 5s ease-in-out alternate infinite;
}
@keyframes waves {
to {
transform: translateY(-50%) rotate(540deg);
}
}
.money {
position: absolute;
bottom: 50vh;
left: 50vmin;
font-size: 6vmin;
z-index: 100;
color: white;
margin: 0;
opacity: .5;
text-shadow: 0 0 5px hsl(0, 0%, 0%, .5);
}
.trash-container {
position: absolute;
width: 100%;
height: 50vh;
bottom: 0;
left: 0;
}
.trash {
position: absolute;
opacity: .75;
animation: bob 2s ease-in-out infinite alternate;
}
@keyframes bob {
from {
transform: rotate(var(--rotation)) translateY(1vh);
}
to {
transform: rotate(calc(var(--rotation) + 10deg)) translateY(0);
}
}
/*
Below code from Paulina Hetman
*/
:root {
--v1: #be91c6;
--v2: #8a65cc;
--v3: #5e30d9;
--transparentv3: #5e30d900;
--v4: #3b1895;
--s1: #fea798;
--s2: #ff846e;
--cloud: #fea798;
}
.landscape:after,
.landscape:before,
.landscape *,
.landscape *:after,
.landscape *:before {
position: absolute;
}
.front {
z-index: 1;
bottom: 0;
left: 0;
right: 0;
}
.landscape {
height: 100vh;
background-image: linear-gradient(var(--v1), var(--s1), var(--v1));
position: relative;
z-index: 1;
overflow: hidden;
}
.mountain {
border-radius: 180% 80% 0% 0%/60vmin 60vmin 0% 0%;
width: 40vmin;
height: 30vmin;
bottom: 50%;
left: -10vmin;
background: var(--s1);
background-image: linear-gradient(var(--v1), var(--v2) 30%, var(--v3));
box-shadow: inset -10px 0 10px -10px var(--s1);
}
.mountain:before {
content: "";
bottom: 0;
width: inherit;
height: inherit;
background: inherit;
border-radius: inherit;
transform-origin: bottom center;
transform: scaleX(1) scaleY(-0.6);
filter: blur(3px);
}
.mountain-2 {
left: 5vmin;
height: 15vmin;
width: 40vmin;
box-shadow: inset -15px 0 10px -14px var(--s1);
border-radius: 120% 50% 0% 0%/25vmin 25vmin 0% 0%;
background-image: linear-gradient(var(--v3), var(--v4));
}
.mountain-3 {
border-radius: 80% 0% 0 0/100% 100% 0 0;
right: -85vmin;
width: 100vmin;
left: auto;
height: 12vmin;
color: var(--v3);
background-image: linear-gradient(var(--s1), var(--v4));
box-shadow: inset 15px 0 10px -10px var(--s1);
}
.mountain-3:after {
content: "";
border-radius: 60% 0 0 0/100% 0 0 0;
background: inherit;
width: 100%;
height: 0;
bottom: 0;
right: 20%;
}
.lotus {
width: 10vmin;
height: 5vmin;
background: conic-gradient(var(--v3) 0deg 40deg, var(--transparentv3) 50deg 70deg, var(--v3) 80deg);
border-radius: 50%;
}
.lotus-1 {
bottom: 10vmin;
right: 5vmin;
width: 20vmin;
}
.lotus-2 {
bottom: 20vmin;
right: 15vmin;
height: 3vmin;
transform: skew(-10deg);
opacity: 0.5;
mix-blend-mode: multiply;
}
.lotus-3 {
bottom: 10vmin;
right: 35vmin;
transform: rotate(180deg) skew(-20deg);
opacity: 0.8;
width: 15vmin;
}
.cloud {
width: 80vmin;
height: 6vmin;
background: currentcolor;
color: var(--cloud);
top: 24vmin;
left: 20vmin;
border-radius: 50%;
box-shadow: 30vmin 0.5vmin 0 -1vmin currentcolor, -25vmin 0 0 -0.6vmin currentcolor;
opacity: 0.3;
transform: translate3d(-150vmin, 0, 0);
-webkit-animation: clouds 120s infinite;
animation: clouds 120s infinite;
-webkit-animation-delay: -10s;
animation-delay: -10s;
}
@-webkit-keyframes clouds {
50% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(150vmin, 0, 0);
}
}
@keyframes clouds {
50% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(150vmin, 0, 0);
}
}
.cloud-1 {
left: 60vmin;
top: 15vmin;
opacity: 0.2;
filter: blur(1px);
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-duration: 100s;
animation-duration: 100s;
}
.water {
top: 50%;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(#fea79855, var(--v2));
overflow: hidden;
box-shadow: inset 0 1px 4px -3px white;
}
.stone {
bottom: -5vh;
left: 0;
height: 20vmin;
width: 40vmin;
background: var(--v4);
box-shadow: inset 0 0 20px -5px rgba(0, 0, 0, 0.2);
border-radius: 0% 200% 0 0/0% 200%;
}
.stone:after {
content: "";
background: var(--v3);
width: 100%;
height: 100%;
right: -15%;
border-radius: inherit;
z-index: -1;
transform: scaleX(1.3) skew(10deg);
box-shadow: inset 0 0 20px -5px rgba(0, 0, 0, 0.4);
}
.grass {
height: 40vmin;
width: 10vmin;
border-radius: 0 60% 0 0/0 100% 0 0;
bottom: 0;
border-right: 5px solid var(--v4);
box-shadow: 1px 0 0 var(--s1);
filter: drop-shadow(-0.5vmin 6vmin 0 var(--s2)) drop-shadow(-4.5vmin 10vmin 0 var(--v3));
}
.grass-1 {
left: 14vmin;
bottom: -2vmin;
transform: scaleX(-1);
box-shadow: 2px 0 0 var(--v4);
border-color: var(--v3);
filter: drop-shadow(-1vmin 5vmin 0 var(--v3)) drop-shadow(-80vmin 5vmin 0 var(--v4));
}
.grass-2 {
right: 0;
left: auto;
height: 20vmin;
bottom: -2vmin;
transform: scaleX(-1);
}
.sun {
background: white;
border-radius: 50%;
width: 20vmin;
height: 20vmin;
left: calc(60% - 10vmin);
top: 100%;
transform: translate3d(0, 0, 0);
-webkit-animation: rise 20s infinite;
animation: rise 20s infinite;
box-shadow: 0 0 10px white;
}
.reed {
height: 40vmin;
width: 0.5vmin;
bottom: 0;
left: 10vmin;
color: var(--v4);
background: currentColor;
transform-origin: bottom center;
transform: rotate(4deg);
box-shadow: inset -1px 0 0 var(--s2), -6vmin 3vmin 0 0, 80vmin 0 0 0;
-webkit-animation: verticalise 20s infinite;
animation: verticalise 20s infinite;
}
.reed-1 {
color: var(--s2);
left: 15vmin;
height: 50vmin;
bottom: -5vmin;
transform: rotate(-2deg);
-webkit-animation: verticalise-1 20s infinite;
animation: verticalise-1 20s infinite;
box-shadow: inset -1px 0 0 var(--s1), 6vmin 13vmin 0 0 var(--s1), 80vmin 10vmin 0 0 var(--v3);
}
.reed:after {
content: "";
width: 1.5vmin;
height: 10vmin;
background: currentcolor;
border-radius: 0.75vmin;
top: 0;
left: -0.5vmin;
box-shadow: inherit;
}
@-webkit-keyframes verticalise {
0%, 10% {
transform: rotate(4deg);
}
30%, 70% {
transform: rotate(0);
}
}
@keyframes verticalise {
0%, 10% {
transform: rotate(4deg);
}
30%, 70% {
transform: rotate(0);
}
}
@-webkit-keyframes verticalise-1 {
0%, 10% {
transform: rotate(-2deg);
}
45%, 70% {
transform: rotate(0) translateY(-6vmin);
}
}
@keyframes verticalise-1 {
0%, 10% {
transform: rotate(-2deg);
}
45%, 70% {
transform: rotate(0) translateY(-6vmin);
}
}
@-webkit-keyframes rise {
100% {
transform: translate3d(0, -100vh, 20vmin);
}
}
@keyframes rise {
100% {
transform: translate3d(0, -100vh, 20vmin);
}
}
@-webkit-keyframes rise-reflection {
30% {
opacity: 0;
transform: translate3d(0, 5vmin, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 80vmin, 0);
}
}
@keyframes rise-reflection {
30% {
opacity: 0;
transform: translate3d(0, 5vmin, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 80vmin, 0);
}
}
.sun-container {
overflow: hidden;
width: 100%;
height: 50%;
}
.sun-container-1:after {
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
background: radial-gradient(circle at 60% 100%, var(--s2), transparent);
-webkit-animation: fade 20s infinite;
animation: fade 20s infinite;
mix-blend-mode: color-burn;
}
@-webkit-keyframes fade {
10% {
opacity: 1;
}
30%, 70% {
opacity: 0;
}
}
@keyframes fade {
10% {
opacity: 1;
}
30%, 70% {
opacity: 0;
}
}
.sun-container-reflection {
top: 50%;
background: radial-gradient(circle at 60% 0%, var(--s2), transparent);
}
.sun-container-reflection .sun {
background: linear-gradient(white, rgba(255, 255, 255, 0));
box-shadow: none;
filter: blur(5px);
opacity: 1;
top: 0;
transform: translate3d(0, -20vmin, 0);
-webkit-animation-name: rise-reflection;
animation-name: rise-reflection;
}
.light {
height: 0.5vmin;
width: 20vmin;
background: white;
left: 20%;
right: 0;
margin: auto;
top: calc(50% + 1vmin);
-webkit-animation: light 20s infinite;
animation: light 20s infinite;
opacity: 0;
transform: scaleX(0.1) translate3d(0%, 0, 0);
border-radius: 0.25vh;
filter: blur(1px);
}
@-webkit-keyframes light {
5% {
opacity: 1;
transform: scaleX(1);
}
10% {
opacity: 0.6;
transform: scaleX(1) translate3d(5%, 0, 0);
}
15% {
opacity: 0.6;
transform: scaleX(1) translate3d(-5%, 0, 0);
}
20% {
opacity: 0;
transform: scaleX(0.1) translate3d(0, 0, 0);
}
}
@keyframes light {
5% {
opacity: 1;
transform: scaleX(1);
}
10% {
opacity: 0.6;
transform: scaleX(1) translate3d(5%, 0, 0);
}
15% {
opacity: 0.6;
transform: scaleX(1) translate3d(-5%, 0, 0);
}
20% {
opacity: 0;
transform: scaleX(0.1) translate3d(0, 0, 0);
}
}
.light-1 {
top: calc(50% + 2vmin);
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.light-2 {
top: calc(50% + 3vmin);
width: 18vmin;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.light-3 {
top: calc(50% + 4vmin);
width: 18vmin;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.light-4 {
top: calc(50% + 5vmin);
width: 16vmin;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.light-5 {
top: calc(50% + 8vmin);
width: 14vmin;
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.light-6 {
top: calc(50% + 9vmin);
width: 10vmin;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.light-7 {
top: calc(50% + 7vmin);
width: 12vmin;
-webkit-animation-delay: 3.5s;
animation-delay: 3.5s;
}
.splash {
width: 8vmin;
height: 3vmin;
border: 2px solid var(--s1);
box-shadow: 0 0 2px var(--s1);
border-radius: 50%;
bottom: 5vmin;
left: 70%;
-webkit-animation: splash 9s infinite;
animation: splash 9s infinite;
transform: scale(0);
}
.splash-stone {
bottom: 15vh;
left: -3vmin;
height: 10vmin;
width: 30vmin;
}
.splash-4 {
bottom: 5vmin;
left: auto;
bottom: 15vmin;
right: -2vmin;
}
@-webkit-keyframes splash {
50%, 100% {
transform: scale(1);
opacity: 0;
}
}
@keyframes splash {
50%, 100% {
transform: scale(1);
opacity: 0;
}
}
.delay-1 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.delay-2 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.delay-3 {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.delay-4 {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.delay-5 {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.delay-6 {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}const trashContainer = document.querySelector(".trash-container")
const moneyElem = document.querySelector(".money")
const currencyFormatter = new Intl.NumberFormat("en-us", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0,
})
const trashFormatter = new Intl.NumberFormat("en-us", {
minimumIntegerDigits: 8,
maximumFractionDigits: 0,
useGrouping: false,
})
const MAX_MONEY_RAISED = 30000000
setupTrash()
async function setupTrash() {
const amountRaised = await fetch("https://tscache.com/donation_total.json")
.then(res => res.json())
.then(data => data.count)
moneyElem.innerText = currencyFormatter.format(amountRaised)
const amountLeftToRaise = Math.max(MAX_MONEY_RAISED - amountRaised, 0)
const stringifiedAmount = trashFormatter.format(amountLeftToRaise)
const trashAmount = {
xxl: {
amount: parseInt(`${stringifiedAmount[0]}${stringifiedAmount[1]}`),
icon: "bag",
},
xl: {
amount: parseInt(stringifiedAmount[2]),
icon: "takeout",
},
lg: {
amount: parseInt(stringifiedAmount[3]),
icon: "headphones",
},
md: {
amount: parseInt(stringifiedAmount[4]),
icon: "phone",
},
sm: {
amount: parseInt(stringifiedAmount[5]),
icon: "toy-car",
},
xs: {
amount: parseInt(stringifiedAmount[6]),
icon: "bottle",
},
}
Object.values(trashAmount).forEach(({ amount, icon }) => {
for (let i = 0; i < amount; i++) {
createTrash(icon)
}
})
}
function createTrash(icon) {
const img = document.createElement("img")
const top = randomNumberBetween(0, 50)
const size = top / 5 + 1
img.classList.add("trash")
img.src = `/imgs/${icon}.svg`
img.style.width = `${size}vmin`
img.style.height = `${size}vmin`
img.style.top = `${top}vh`
img.style.left = `${randomNumberBetween(0, 100)}vw`
img.style.setProperty("--rotation", `${randomNumberBetween(-30, 30)}deg`)
trashContainer.appendChild(img)
}
function randomNumberBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}Анимированный фон для сайта
Открыть элемент
Калькулятор для сайта
<div class="calculator-grid">
<div class="output">
<div data-previous-operand class="previous-operand"></div>
<div data-current-operand class="current-operand"></div>
</div>
<button data-all-clear class="span-two">AC</button>
<button data-delete>DEL</button>
<button data-operation>÷</button>
<button data-number>1</button>
<button data-number>2</button>
<button data-number>3</button>
<button data-operation>*</button>
<button data-number>4</button>
<button data-number>5</button>
<button data-number>6</button>
<button data-operation>+</button>
<button data-number>7</button>
<button data-number>8</button>
<button data-number>9</button>
<button data-operation>-</button>
<button data-number>.</button>
<button data-number>0</button>
<button data-equals class="span-two">=</button>
</div>.calculator-grid {
display: grid;
justify-content: center;
align-content: center;
min-height: 100vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}
.calculator-grid > button {
cursor: pointer;
font-size: 2rem;
border: 1px solid white;
outline: none;
background-color: rgba(255, 255, 255, .75);
}
.calculator-grid > button:hover {
background-color: rgba(255, 255, 255, .9);
}
.span-two {
grid-column: span 2;
}
.output {
grid-column: 1 / -1;
background-color: rgba(0, 0, 0, .75);
display: flex;
align-items: flex-end;
justify-content: space-around;
flex-direction: column;
padding: 10px;
word-wrap: break-word;
word-break: break-all;
}
.output .previous-operand {
color: rgba(255, 255, 255, .75);
font-size: 1.5rem;
}
.output .current-operand {
color: white;
font-size: 2.5rem;
}class Calculator {
constructor(previousOperandTextElement, currentOperandTextElement) {
this.previousOperandTextElement = previousOperandTextElement
this.currentOperandTextElement = currentOperandTextElement
this.clear()
}
clear() {
this.currentOperand = ''
this.previousOperand = ''
this.operation = undefined
}
delete() {
this.currentOperand = this.currentOperand.toString().slice(0, -1)
}
appendNumber(number) {
if (number === '.' && this.currentOperand.includes('.')) return
this.currentOperand = this.currentOperand.toString() + number.toString()
}
chooseOperation(operation) {
if (this.currentOperand === '') return
if (this.previousOperand !== '') {
this.compute()
}
this.operation = operation
this.previousOperand = this.currentOperand
this.currentOperand = ''
}
compute() {
let computation
const prev = parseFloat(this.previousOperand)
const current = parseFloat(this.currentOperand)
if (isNaN(prev) || isNaN(current)) return
switch (this.operation) {
case '+':
computation = prev + current
break
case '-':
computation = prev - current
break
case '*':
computation = prev * current
break
case '÷':
computation = prev / current
break
default:
return
}
this.currentOperand = computation
this.operation = undefined
this.previousOperand = ''
}
getDisplayNumber(number) {
const stringNumber = number.toString()
const integerDigits = parseFloat(stringNumber.split('.')[0])
const decimalDigits = stringNumber.split('.')[1]
let integerDisplay
if (isNaN(integerDigits)) {
integerDisplay = ''
} else {
integerDisplay = integerDigits.toLocaleString('en', { maximumFractionDigits: 0 })
}
if (decimalDigits != null) {
return `${integerDisplay}.${decimalDigits}`
} else {
return integerDisplay
}
}
updateDisplay() {
this.currentOperandTextElement.innerText =
this.getDisplayNumber(this.currentOperand)
if (this.operation != null) {
this.previousOperandTextElement.innerText =
`${this.getDisplayNumber(this.previousOperand)} ${this.operation}`
} else {
this.previousOperandTextElement.innerText = ''
}
}
}
const numberButtons = document.querySelectorAll('[data-number]')
const operationButtons = document.querySelectorAll('[data-operation]')
const equalsButton = document.querySelector('[data-equals]')
const deleteButton = document.querySelector('[data-delete]')
const allClearButton = document.querySelector('[data-all-clear]')
const previousOperandTextElement = document.querySelector('[data-previous-operand]')
const currentOperandTextElement = document.querySelector('[data-current-operand]')
const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)
numberButtons.forEach(button => {
button.addEventListener('click', () => {
calculator.appendNumber(button.innerText)
calculator.updateDisplay()
})
})
operationButtons.forEach(button => {
button.addEventListener('click', () => {
calculator.chooseOperation(button.innerText)
calculator.updateDisplay()
})
})
equalsButton.addEventListener('click', button => {
calculator.compute()
calculator.updateDisplay()
})
allClearButton.addEventListener('click', button => {
calculator.clear()
calculator.updateDisplay()
})
deleteButton.addEventListener('click', button => {
calculator.delete()
calculator.updateDisplay()
})Калькулятор для сайта
Открыть элемент
Генератор пароля
<div class="container">
<h1 class="title">Password Generator</h1>
<h3 class="password-display" id="passwordDisplay">password</h3>
<form id="passwordGeneratorForm" class="form">
<label for="characterAmountNumber">Number Of Characters</label>
<div class="character-amount-container">
<input type="range" min="1" max="50" value="10" id="characterAmountRange">
<input class="number-input" type="number" min="1" max="50" value="10" id="characterAmountNumber">
</div>
<label for="includeUppercase">Include Uppercase</label>
<input type="checkbox" id="includeUppercase">
<label for="includeNumbers">Include Numbers</label>
<input type="checkbox" id="includeNumbers">
<label for="includeSymbols">Include Symbols</label>
<input type="checkbox" id="includeSymbols">
<button type="submit" class="btn">Generate Password</button>
</form>
</div>.container {
background-color: #006699;
padding: 3rem;
border-radius: 1rem;
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form {
display: grid;
grid-template-columns: auto auto;
row-gap: 1rem;
column-gap: 3rem;
justify-content: center;
align-items: center;
}
.title {
margin: 0;
text-align: center;
}
label {
font-weight: bold;
}
.character-amount-container {
display: flex;
align-items: center;
}
.number-input {
width: 2rem;
}
.password-display {
background-color: white;
color: black;
padding: 1rem;
border: 1px solid #333;
height: 2rem;
width: 350px;
display: flex;
justify-content: center;
align-items: center;
word-break: break-all;
border-radius: .5rem;
}
.btn {
grid-column: span 2;
background-color: transparent;
border: 2px solid white;
color: white;
padding: .5rem 1rem;
font-weight: bold;
cursor: pointer;
border-radius: 1rem;
}
.btn:hover {
background-color: #FFFFFF33;
}const characterAmountRange = document.getElementById('characterAmountRange')
const characterAmountNumber = document.getElementById('characterAmountNumber')
const includeUppercaseElement = document.getElementById('includeUppercase')
const includeNumbersElement = document.getElementById('includeNumbers')
const includeSymbolsElement = document.getElementById('includeSymbols')
const form = document.getElementById('passwordGeneratorForm')
const passwordDisplay = document.getElementById('passwordDisplay')
const UPPERCASE_CHAR_CODES = arrayFromLowToHigh(65, 90)
const LOWERCASE_CHAR_CODES = arrayFromLowToHigh(97, 122)
const NUMBER_CHAR_CODES = arrayFromLowToHigh(48, 57)
const SYMBOL_CHAR_CODES = arrayFromLowToHigh(33, 47).concat(
arrayFromLowToHigh(58, 64)
).concat(
arrayFromLowToHigh(91, 96)
).concat(
arrayFromLowToHigh(123, 126)
)
characterAmountNumber.addEventListener('input', syncCharacterAmount)
characterAmountRange.addEventListener('input', syncCharacterAmount)
form.addEventListener('submit', e => {
e.preventDefault()
const characterAmount = characterAmountNumber.value
const includeUppercase = includeUppercaseElement.checked
const includeNumbers = includeNumbersElement.checked
const includeSymbols = includeSymbolsElement.checked
const password = generatePassword(characterAmount, includeUppercase, includeNumbers, includeSymbols)
passwordDisplay.innerText = password
})
function generatePassword(characterAmount, includeUppercase, includeNumbers, includeSymbols) {
let charCodes = LOWERCASE_CHAR_CODES
if (includeUppercase) charCodes = charCodes.concat(UPPERCASE_CHAR_CODES)
if (includeSymbols) charCodes = charCodes.concat(SYMBOL_CHAR_CODES)
if (includeNumbers) charCodes = charCodes.concat(NUMBER_CHAR_CODES)
const passwordCharacters = []
for (let i = 0; i < characterAmount; i++) {
const characterCode = charCodes[Math.floor(Math.random() * charCodes.length)]
passwordCharacters.push(String.fromCharCode(characterCode))
}
return passwordCharacters.join('')
}
function arrayFromLowToHigh(low, high) {
const array = []
for (let i = low; i <= high; i++) {
array.push(i)
}
return array
}
function syncCharacterAmount(e) {
const value = e.target.value
characterAmountNumber.value = value
characterAmountRange.value = value
}Генератор пароля
Открыть элемент
Стрелочные часы для сайта
<div class="clock">
<div class="hand hour" data-hour-hand></div>
<div class="hand minute" data-minute-hand></div>
<div class="hand second" data-second-hand></div>
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
</div>.clock {
width: 300px;
height: 300px;
background-color: rgba(255, 255, 255, .8);
border-radius: 50%;
border: 2px solid black;
position: relative;
}
.clock .number {
--rotation: 0;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transform: rotate(var(--rotation));
font-size: 1.5rem;
}
.clock .number1 { --rotation: 30deg; }
.clock .number2 { --rotation: 60deg; }
.clock .number3 { --rotation: 90deg; }
.clock .number4 { --rotation: 120deg; }
.clock .number5 { --rotation: 150deg; }
.clock .number6 { --rotation: 180deg; }
.clock .number7 { --rotation: 210deg; }
.clock .number8 { --rotation: 240deg; }
.clock .number9 { --rotation: 270deg; }
.clock .number10 { --rotation: 300deg; }
.clock .number11 { --rotation: 330deg; }
.clock .hand {
--rotation: 0;
position: absolute;
bottom: 50%;
left: 50%;
border: 1px solid white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
transform-origin: bottom;
z-index: 10;
transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
}
.clock::after {
content: '';
position: absolute;
background-color: black;
z-index: 11;
width: 15px;
height: 15px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.clock .hand.second {
width: 3px;
height: 45%;
background-color: red;
}
.clock .hand.minute {
width: 7px;
height: 40%;
background-color: black;
}
.clock .hand.hour {
width: 10px;
height: 35%;
background-color: black;
}setInterval(setClock, 1000)
const hourHand = document.querySelector('[data-hour-hand]')
const minuteHand = document.querySelector('[data-minute-hand]')
const secondHand = document.querySelector('[data-second-hand]')
function setClock() {
const currentDate = new Date()
const secondsRatio = currentDate.getSeconds() / 60
const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60
const hoursRatio = (minutesRatio + currentDate.getHours()) / 12
setRotation(secondHand, secondsRatio)
setRotation(minuteHand, minutesRatio)
setRotation(hourHand, hoursRatio)
}
function setRotation(element, rotationRatio) {
element.style.setProperty('--rotation', rotationRatio * 360)
}
setClock()Стрелочные часы для сайта
Открыть элемент
Разноцветный фон для сайта
<section class="bg-box">
<div class="bg-color">Rainbow</div>
<h1 class="title">Выберите свой цвет:</h1>
<select class="color-picker" onchange="colorChange(this)">
<option value="#ff0404">Red</option>
<option value="#fca708">Orange</option>
<option value="#ffff12">Yellow</option>
<option value="#66ff00">Green</option>
<option value="#0a0afa">Blue</option>
<option value="#9b1fe8">Purple</option>
</select>
</section>.bg-color{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('../images/bg.jpg') no-repeat;
background-position: center;
background-size: cover;
transition: all 0.5s;
display: flex;
justify-content: center;
align-items: center;
font-size: 20vw;
font-weight: bold;
white-space: nowrap;
user-select: none;
color: rgba(0, 0, 0, 0.5);
}
.color-picker{
position: absolute;
top: 80px;
left: 50%;
transform: translate(-50%, 0);
padding: 10px;
border: none;
border-right: 10px solid #fff;
outline: none;
width: 100px;
border-radius: 5px;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
}
.title{
position: absolute;
top: 20px;
left: 50%;
transform: translate(-50%, 0);
font-size: 20px;
color: #fff;
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}function colorChange(getColor){
var bg = document.querySelector('.bg-color');
var selectColor = getColor.value;
var text = getColor.options[getColor.selectedIndex].text;
bg.style.background = selectColor;
bg.innerHTML = text;
}Разноцветный фон для сайта
Открыть элемент
Фото текст для сайта
<div class="text-portrait-box">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</div>.text-portrait-box{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #0e0149;
overflow: hidden;
}
.text-portrait-box p{
position: relative;
font-size: 1em;
letter-spacing: 0.05em;
line-height: 0.8em;
background: url('Ваше фото');
background-blend-mode: color-dodge;
background-position: center;
background-size: auto;
background-attachment: fixed;
-webkit-background-clip: text;
color: transparent;
user-select: none;
}Фото текст для сайта
Открыть элемент
Добавить событие элемент для сайта
<!-- modal -->
<div class="modal" id="todo_form">
<div class="header">
<div class="title">Add Todo</div>
<button class="btn close-modal">×</button>
</div>
<div class="body">
<input type="text" id="todo_input" />
<input type="submit" value="Add Todo" id="todo_submit" />
</div>
</div>
<!-- todo -->
<div class="todo-container">
<div class="status" id="no_status">
<h1>No Status</h1>
<button id="add_btn" data-target-modal="#todo_form">+ Add Todo</button>
<div class="todo" draggable="true">
Buy a Pizza
<span class="close">×</span>
</div>
</div>
<div class="status">
<h1>Not Started</h1>
</div>
<div class="status">
<h1>In Progress</h1>
</div>
<div class="status">
<h1>Completed</h1>
</div>
</div>
<div id="overlay"></div>* {
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.todo-container {
width: 1000px;
height: 80vh;
display: flex;
}
.status {
width: 25%;
background-color: #f3f3f3;
position: relative;
padding: 60px 1rem 0.5rem;
}
.status:nth-child(even) {
background-color: #e9e9e96b;
}
.status h1 {
position: absolute;
top: 0;
left: 0;
background-color: #343434;
color: #f3f3f3;
margin: 0;
width: 100%;
padding: 0.5rem 1rem;
}
#add_btn {
padding: 0.5rem 1rem;
background-color: #ccc;
outline: none;
border: none;
width: 100%;
font-size: 1.5rem;
margin: 0.5rem 0;
border-radius: 4px;
cursor: pointer;
}
#add_btn:hover {
background-color: #aaa;
}
.todo {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
background-color: #fff;
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
rgba(15, 15, 15, 0.1) 0px 2px 4px;
border-radius: 4px;
padding: 0.5rem 1rem;
font-size: 1.5rem;
margin: 0.5rem 0;
}
.todo .close {
position: absolute;
right: 1rem;
top: 0rem;
font-size: 2rem;
color: #ccc;
cursor: pointer;
}
.todo .close:hover {
color: #343444;
}
/* modal */
.close-modal {
background: none;
border: none;
font-size: 1.5rem;
}
.modal {
width: 450px;
position: fixed;
top: -50%;
left: 50%;
transform: translate(-50%, -50%);
transition: top 0.3s ease-in-out;
border: 1px solid #ccc;
border-radius: 10px;
z-index: 2;
background-color: #fff;
}
.modal.active {
top: 15%;
}
.modal .header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
padding: 0.5rem;
background-color: rgba(0, 0, 0, 0.05);
}
.modal .body {
padding: 0.75rem;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
#overlay.active {
display: block;
}
#todo_input,
#todo_submit {
padding: 0.5rem 1rem;
width: 100%;
margin: 0.25rem;
}
#todo_submit {
background-color: #4caf50;
color: #f3f3f3;
font-size: 1.25rem;
border: none;
}const todos = document.querySelectorAll(".todo");
const all_status = document.querySelectorAll(".status");
let draggableTodo = null;
todos.forEach((todo) => {
todo.addEventListener("dragstart", dragStart);
todo.addEventListener("dragend", dragEnd);
});
function dragStart() {
draggableTodo = this;
setTimeout(() => {
this.style.display = "none";
}, 0);
console.log("dragStart");
}
function dragEnd() {
draggableTodo = null;
setTimeout(() => {
this.style.display = "block";
}, 0);
console.log("dragEnd");
}
all_status.forEach((status) => {
status.addEventListener("dragover", dragOver);
status.addEventListener("dragenter", dragEnter);
status.addEventListener("dragleave", dragLeave);
status.addEventListener("drop", dragDrop);
});
function dragOver(e) {
e.preventDefault();
// console.log("dragOver");
}
function dragEnter() {
this.style.border = "1px dashed #ccc";
console.log("dragEnter");
}
function dragLeave() {
this.style.border = "none";
console.log("dragLeave");
}
function dragDrop() {
this.style.border = "none";
this.appendChild(draggableTodo);
console.log("dropped");
}
/* modal */
const btns = document.querySelectorAll("[data-target-modal]");
const close_modals = document.querySelectorAll(".close-modal");
const overlay = document.getElementById("overlay");
btns.forEach((btn) => {
btn.addEventListener("click", () => {
document.querySelector(btn.dataset.targetModal).classList.add("active");
overlay.classList.add("active");
});
});
close_modals.forEach((btn) => {
btn.addEventListener("click", () => {
const modal = btn.closest(".modal");
modal.classList.remove("active");
overlay.classList.remove("active");
});
});
window.onclick = (event) => {
if (event.target == overlay) {
const modals = document.querySelectorAll(".modal");
modals.forEach((modal) => modal.classList.remove("active"));
overlay.classList.remove("active");
}
};
/* create todo */
const todo_submit = document.getElementById("todo_submit");
todo_submit.addEventListener("click", createTodo);
function createTodo() {
const todo_div = document.createElement("div");
const input_val = document.getElementById("todo_input").value;
const txt = document.createTextNode(input_val);
todo_div.appendChild(txt);
todo_div.classList.add("todo");
todo_div.setAttribute("draggable", "true");
/* create span */
const span = document.createElement("span");
const span_txt = document.createTextNode("\u00D7");
span.classList.add("close");
span.appendChild(span_txt);
todo_div.appendChild(span);
no_status.appendChild(todo_div);
span.addEventListener("click", () => {
span.parentElement.style.display = "none";
});
// console.log(todo_div);
todo_div.addEventListener("dragstart", dragStart);
todo_div.addEventListener("dragend", dragEnd);
document.getElementById("todo_input").value = "";
todo_form.classList.remove("active");
overlay.classList.remove("active");
}
const close_btns = document.querySelectorAll(".close");
close_btns.forEach((btn) => {
btn.addEventListener("click", () => {
btn.parentElement.style.display = "none";
});Добавить событие элемент для сайта
Открыть элемент
Текстовая фоновая анимация CSS
<div class="container">
<h1 class="text">Subscribe</h1>
<h1 class="text reflect">Subscribe</h1>
<button>Subscribe</button>
</div>.container{
position: relative;
height: 600px;
width: 1000px;
background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7) ), url(background.jpg);
text-align: center;
box-shadow: 0 0 20px orangered;
border: 2px solid orangered;
animation: fire 3s linear infinite;
}
.text{
position: absolute;
top:20%;
font-size: 5rem;
width:100%;
background: url(background.jpg);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 15px;
animation: fire 3s linear infinite;
}
.reflect{
position: absolute;
top:35%;
transform: perspective(500px) rotateX(230deg) scale(1.1);
opacity: 0.3;
}
button{
position: absolute;
bottom: 20%;
left:50%;
transform: translateX(-50%);
padding: 1rem 2rem;
background: url(background.jpg);
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
color:white;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 3px;
animation: fire 5s linear infinite;
transition: filter 0.5s;
}
button:hover{
filter: brightness(2);
}
@keyframes fire{
0%{ background-position: 100% 0%;}
100%{ background-position: 100% 100%;}
}Текстовая фоновая анимация CSS
Открыть элемент
<h1>CSS-Фильтр Эффекты</h1>
<section class="container">
<div class="img-container">
<img src="image.jpg" alt="">
<p>Original Image</p>
</div>
<div class="img-container">
<img src="image.jpg" alt="" class="blur">
<p>Blur Filter</p>
</div>
<div class="img-container">
<img src="image.jpg" alt="" class="grayscale">
<p>grayscale Filter</p>
</div>
<div class="img-container">
<img src="image.jpg" alt="" class="brightness">
<p>brightness Filter</p>
</div>
<div class="img-container">
<img src="image.jpg" alt="" class="contrast">
<p>Contrast Filter</p>
</div>
<div class="img-container">
<img src="image.jpg" alt="" class="invert">
<p>Invert Filter</p>
</div>
<div class="img-container">
<img src="image.jpg" alt="" class="opacity">
<p>Opacity Filter</p>
</div>
</section>h1{
color: white;
font-size: 4rem;
text-align: center;
margin: 2rem 0 ;
letter-spacing: 2px;
text-transform: uppercase;
}
.container{
max-width: 1100px;
margin: auto;
padding: 2rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
width:100%;
}
.img-container{
position: relative;
width: 30%;
height: 200px;
margin: 1rem;
}
img{
width: 100%;
height: 100%;
box-shadow: 2px 2px 10px rgba(0,0,0,0.6);
}
.img-container p{
position: absolute;
bottom:0;
left:0;
right: 0;
padding: 0.5rem 1rem;
background: rgba(0,0,0,0.6);
color: white;
text-transform: uppercase;
letter-spacing: 2px;
}
.blur{
filter: blur(10px)
}
.grayscale{
filter: grayscale(100%);
}
.contrast{
filter: contrast(200%)
}
.invert{
filter: invert(100%)
}
.brightness{
filter: brightness(200%)
}
.opacity{
filter: opacity(50%)
}CSS-Фильтр Эффекты
Открыть элемент
Изогнутый фон для сайта
<div class="container">
<div class="box">
<h1>Skewed Background</h1>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Satisfy&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.container {
width: 100%;
height: auto;
background: #fff;
}
.box {
display: flex;
width: 100%;
height: 90vh;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, rgba(35, 35, 35, 0.7), rgba(35, 35, 35, 0.7)), url('bg_img.jpg');
background-size: cover;
background-position: center;
clip-path: polygon(70% 76%, 0 100%, 0 0, 100% 0, 100% 100%);
}
.box h1 {
color: #fff;
font-size: 5rem;
text-transform: uppercase;
}Изогнутый фон для сайта
Открыть элемент
Эффект для текста
<div class="container">
<h1>Text Stroke</h1>
</div>@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@700&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Averia Serif Libre', cursive;
}
.container {
display: grid;
height: 100vh;
place-items: center;
background: #111;
}
h1 {
color: #fff;
font-size: 10rem;
text-transform: uppercase;
letter-spacing: 3px;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.2rem;
}Эффект для текста
Открыть элемент
Текст с градиентом
<div class="container">
<h1>Gradient Text</h1>
</div>@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@700&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Averia Serif Libre', cursive;
}
.container {
display: flex;
height: 100vh;
width: 100%;
align-items: center;
justify-content: center;
}
h1 {
font-size: 10rem;
text-transform: uppercase;
letter-spacing: 3px;
background: linear-gradient(45deg, #0077ff, #ff0077, #7700aa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}Текст с градиентом
Открыть элемент
Изогнутая форма Бока
<div class="container">
<div class="curved-area">
<h1>Curved Div</h1>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Rock Salt', cursive;
}
.container {
background: #fff;
width: 100%;
height: auto;
}
.curved-area {
display: flex;
width: 100%;
height: 80vh;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)), url('Ваше изображение');
background-size: cover;
background-position: center;
border-bottom-left-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
}
h1 {
color: #fff;
font-size: 7rem;
}Изогнутая форма Бока
Открыть элемент
Автор Crazy Coding
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name = "format-detection" content = "telephone=no">
<title>Animated 404 Text</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div class="error-box">
<h2>4<span class="zero-block"></span>4</h2>
</div>
</body>
</html>body{
font-family: 'Roboto', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #000000, #000000 50%, #ff9204 50%, #ff9204);
}
.error-box{
position: relative;
}
.error-box h2{
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
font-size: 10em;
text-shadow: -25px 25px 40px rgba(0, 0, 0, 0.5),
-10px 10px 0 rgba(255, 255, 255, 0.5),
-20px 20px 0 rgba(255, 255, 255, 0.2),
-30px 30px 0 rgba(255, 255, 255, 0.1);
}
.zero-block{
position: relative;
display: inline-block;
width: 140px;
height: 140px;
background: linear-gradient(to bottom, #fff, #777);
border-radius: 50%;
margin: 0 15px;
box-shadow: -25px 25px 40px rgba(0, 0, 0, 0.5);
}
.zero-block::before{
content: '';
position: absolute;
top: 50%;
right: 15%;
transform: translateY(-50%);
width: 100px;
height: 100px;
background: linear-gradient(to top, #fff, #777);
border-radius: 50%;
background: linear-gradient(315deg, #000000, #000000 50%, #ff9204 50%, #ff9204);
box-shadow: inset 0 0 30px rgba(0, 0, 0, 1);
animation: Zero 5s steps(4) infinite;
}
@keyframes Zero{
0%{
transform: translateY(-50%) rotate(0deg);
}
100%{
transform: translateY(-50%) rotate(360deg);
}
}Страница 404 — 2
Открыть элемент
Страница 404
<div class="container">
<h1 class="text">404</h1>
<div class="content">
<p>The page you are looking for doesn't exist.</p>
<a href="#" class="btn">go back to home</a>
</div>
<img src="images/tree.png" class="tree" alt="">
</div>*{
margin:0; padding:0;
box-sizing: border-box;
text-decoration: none;
outline: none;
border:none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-transform: capitalize;
transition: all .3s linear;
}
body{
overflow: hidden;
background-color: #ffffff;
}
.container{
min-height: 100vh;
background:url(../images/bg.jpg) no-repeat;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.container .text{
text-align: center;
font-size: 30vw;
color:#fff;
text-shadow: 1px 1px 0px #0002,
1px 1px 0px #aaa,
2px 2px 0px #aaa,
3px 3px 0px #aaa,
4px 4px 0px #aaa,
5px 5px 0px #aaa,
6px 6px 0px #aaa,
7px 7px 0px #aaa,
8px 8px 0px #aaa,
9px 9px 0px #aaa,
10px 10px 0px #aaa,
11px 11px 0px #aaa,
12px 12px 0px #aaa,
13px 13px 0px #aaa,
14px 14px 0px #aaa,
15px 15px 0px #0009,
20px 20px 10px #0009;
}
.container .content{
position: absolute;
top:70%; left:50%;
transform:translate(-50%, -50%);
text-align: center;
z-index: 1;
}
.container .content p{
font-size: 30px;
color:#fff;
text-shadow: 0 5px 10px #000;
padding: 25px 0;
}
.container .content .btn{
display: inline-block;
height:50px;
width: 250px;
line-height: 50px;
background:#fff;
color:#444;
font-size: 20px;
box-shadow: 0 5px 10px #0009;
}
.container .content .btn.btn:hover{
transform:scale(.9);
}
.tree{
position: absolute;
top:0; left:0;
height:100%;
width:100%;
object-fit: cover;
}let container = document.querySelector('.container')
let text = document.querySelector('.text');
container.addEventListener('mousemove', (e) =>{
var x = (window.innerWidth / 2 - e.pageX) / 10;
var y = (window.innerHeight / 2 - e.pageY) / 10;
text.style.transform = `translateX(${x}px) translateY(${y}px)`;
})Страница 404
Открыть элемент
Адаптивная видео галерея для сайта
<div class="container">
<div class="videos">
<video class="active" src="https://media.istockphoto.com/videos/wine-tasting-in-the-countryside-video-id1201824016" muted></video>
<video src="https://media.istockphoto.com/videos/family-walking-on-the-beach-piggyback-ride-video-id1212640596" muted></video>
<video src="https://media.istockphoto.com/videos/swimmer-training-front-crawl-and-taking-deep-breaths-camera-follows-video-id1286680037" muted></video>
<video src="https://media.istockphoto.com/videos/young-woman-on-inflatable-ring-taking-selfies-half-underwater-in-video-id1328715976" muted></video>
</div>
<div class="main-video">
<video src="videos/video1.mp4" muted controls autoplay></video>
</div>
</div>*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: cornflowerblue;
}
.container{
width: 1100px;
height: 480px;
display: flex;
background: rgb(238, 236, 236);
}
.container .videos{
width: 20%;
padding: 10px 0 10px 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.container .videos video{
width: 95%;
height: 100px;
margin: 10px;
object-fit: cover;
cursor: pointer;
transition: 0.2s;
}
.container .videos video:nth-child(1){
margin-top: 0;
}
.container .videos video:hover,
.container .videos .active{
transform: scale(1.06);
border: 3px solid blue;
}
.container .main-video{
width: 80%;
padding: 10px;
}
.container .main-video video{
width: 100%;
height: 100%;
object-fit: cover;
border: 3px solid blue;
}
@media (max-width: 768px) {
.container{
flex-direction: column;
}
.container .videos, .container .main-video{
width: 100%;
}
.container .videos{
flex-direction: row;
align-items: center;
}
.container .videos video {
width: 24%;
margin: 0;
}
}
@media (max-width: 425px) {
.container .videos{
flex-wrap: wrap;
}
.container .videos video {
width: 48%;
margin-bottom: 10px;
}
}$(document).ready(function(){
$('.videos video').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var src = $(this).attr('src');
$('.main-video video').attr('src',src);
});
});Адаптивная видео галерея для сайта
Открыть элемент
Видео галерея для сайта
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- custom css file link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="video-links-container">
<a href="images/video-1.mp4" class="video-links">01. click here to play the video</a>
<a href="images/video-2.mp4" class="video-links">02. click here to play the video</a>
<a href="images/video-3.mp4" class="video-links">03. click here to play the video</a>
<a href="images/video-4.mp4" class="video-links">04. click here to play the video</a>
<a href="images/video-5.mp4" class="video-links">05. click here to play the video</a>
<a href="images/video-6.mp4" class="video-links">06. click here to play the video</a>
<a href="images/video-7.mp4" class="video-links">07. click here to play the video</a>
<a href="images/video-8.mp4" class="video-links">08. click here to play the video</a>
</div>
<div class="video-container">
<video src="images/video-1.mp4" loop muted controls class="video"></video>
</div>
</div>
</body>
</html>*{
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background:linear-gradient(#eee 50%, #ccc 50.1%);
padding:20px 7%;
padding-bottom: 70px;
}
.container{
display: flex;
flex-wrap: wrap-reverse;
gap:5px;
border-radius: 5px;
border:2px solid #333;
box-shadow: 0 10px 15px #3333;
background:#fff;
padding:20px;
}
.container .video-links-container{
flex:1 1 400px;
}
.container .video-container{
flex:1 1 400px;
}
.container .video-container .video{
height: 100%;
width: 100%;
object-fit: cover;
border:2px solid #333;
border-radius: 5px;
}
.container .video-links-container .video-links{
font-size: 20px;
color:#333;
border:2px solid #333;
border-radius: 5px;
display: block;
padding:10px 15px;
margin-bottom: 5px;
}
.container .video-links-container .video-links:nth-child(odd){
background:#eee;
}
.container .video-links-container .video-links:hover{
background:#666;
color:#fff;
}document.querySelectorAll('.video-links').forEach(links =>{
links.addEventListener('click', (e) =>{
e.preventDefault();
var src = links.getAttribute('href');
document.querySelector('.video').src = src;
document.querySelector('.video').play();
});
});Видео галерея для сайта
Открыть элемент
Элемент для сайта
<div id="theme-open" class="fas fa-bars"></div>
<div class="themes-container">
<div id="theme-close" class="fas fa-times"></div>
<h3>switch theme</h3>
<div class="theme-toggler">
<span>light</span>
<span class="toggler"></span>
<span>dart</span>
</div>
<h3>pick a color</h3>
<div class="theme-colors">
<div class="color" style="background:#2980b9"></div>
<div class="color" style="background:#27ae60;"></div>
<div class="color" style="background:#ffa502;"></div>
<div class="color" style="background:#8e44ad;"></div>
<div class="color" style="background:#0fb9b1;"></div>
<div class="color" style="background:#ffd32a;"></div>
<div class="color" style="background:#ff0033;"></div>
<div class="color" style="background:#e84393;"></div>
</div>
</div>
<div class="container">
<div class="content">
<img src="image/kitten.jpg" alt="">
<h3>some text heading</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, atque?</p>
<a href="#" class="btn">read more</a>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');
:root{
--main-color:#2980b9;
--black:#444;
--bg:#fff;
--light-bg:#eee;
--light-color:#666;
--border:1px solid rgba(0,0,0,.1);
--box-shadow:0 5px 10px rgba(0,0,0,.1);
}
*{
font-family: 'Poppins', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
transition:.2s linear;
}
body{
background:var(--light-bg);
overflow: hidden;
}
body.active{
--black:#fff;
--bg:#262626;
--light-bg:#333;
--light-color:#eee;
--border:1px solid rgba(255,255,255,.1);
--box-shadow:0 5px 10px rgba(0,0,0,.3);
}
#theme-open{
position: fixed;
top:15px; right:20px;
font-size: 40px;
color:var(--black);
cursor: pointer;
z-index: 10;
}
.themes-container{
position:fixed;
top:0; right:-100%;
background:var(--bg);
border-left: var(--border);
height:100vh;
width:350px;
z-index: 1000;
text-align: right;
padding:20px;
}
.themes-container.active{
right:0;
}
.themes-container #theme-close{
font-size: 40px;
color:var(--black);
cursor: pointer;
}
.themes-container h3{
text-align: center;
color:var(--black);
border-top: var(--border);
border-bottom: var(--border);
padding:15px 0;
margin:20px 0;
}
.themes-container .theme-toggler{
display:flex;
align-items: center;
justify-content: center;
}
.themes-container .theme-toggler span{
color:var(--light-color);
}
.themes-container .theme-toggler .toggler{
height:40px;
width:100px;
border-radius: 50px;
background:var(--light-bg);
position: relative;
cursor: pointer;
border:var(--border);
margin:0 10px;
}
.themes-container .theme-toggler .toggler::before{
content:'';
position: absolute;
top:5px; left:5px;
height:28px;
width:28px;
border-radius: 50%;
background:#fff;
transition:.2s linear;
}
.themes-container .theme-toggler.active .toggler::before{
left:65px;
}
.themes-container .theme-colors{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap:15px;
}
.themes-container .theme-colors .color{
border-radius: 5px;
height:50px;
width:50px;
cursor: pointer;
}
.themes-container .theme-colors .color:hover{
opacity: .5;
}
.container{
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 60px;
margin:10px;
min-height: 100vh;
}
.container .content{
background: var(--bg);
border-radius: 5px;
padding:20px;
box-shadow: var(--box-shadow);
border:var(--border);
text-align: center;
width:400px;
}
.container .content img{
width:100%;
margin-bottom: 10px;
border-radius: 5px;
}
.container .content h3{
color:var(--black);
font-size: 25px;
}
.container .content p{
color:var(--light-color);
font-size: 15px;
line-height: 2;
padding:10px 0;
}
.container .content .btn{
margin-top: 10px;
display: inline-block;
border-radius: 5px;
padding:10px 30px;
color:#fff;
background: var(--main-color);
font-size: 17px;
}
.container .content .btn:hover{
opacity: .8;
letter-spacing: 1px;
}let themeToggler = document.querySelector('.theme-toggler');
themeToggler.onclick = () =>{
themeToggler.classList.toggle('active');
if(themeToggler.classList.contains('active')){
document.body.classList.add('active');
}else{
document.body.classList.remove('active');
}
}
document.querySelectorAll('.theme-colors .color').forEach(color =>{
color.onclick = () => {
let background = color.style.background;
document.querySelector(':root').style.setProperty('--main-color', background);
}
});
let theme = document.querySelector('.themes-container');
document.querySelector('#theme-open').onclick = () =>{
theme.classList.add('active');
document.body.style.paddingRight = '350px';
}
document.querySelector('#theme-close').onclick = () =>{
theme.classList.remove('active');
document.body.style.paddingRight = '0px';
}Элемент для сайта
Открыть элемент
Video playlist element 2
<div class="container">
<h1 class="heading"> music playlist </h1>
<div class="box-container">
<div class="box" data-src="images/music-1.mp3">
<div class="image">
<div class="play">
<i class="fas fa-play"></i>
</div>
<img src="images/album-1.png" alt="">
</div>
<div class="content">
<h3>NEFFEX cold</h3>
</div>
</div>
<div class="box" data-src="images/music-2.mp3">
<div class="image">
<div class="play">
<i class="fas fa-play"></i>
</div>
<img src="images/album-2.png" alt="">
</div>
<div class="content">
<h3>rize up</h3>
</div>
</div>
<div class="box" data-src="images/music-3.mp3">
<div class="image">
<div class="play">
<i class="fas fa-play"></i>
</div>
<img src="images/album-3.png" alt="">
</div>
<div class="content">
<h3>arround the world</h3>
</div>
</div>
<div class="box" data-src="images/music-4.mp3">
<div class="image">
<div class="play">
<i class="fas fa-play"></i>
</div>
<img src="images/album-4.png" alt="">
</div>
<div class="content">
<h3>THNK U jay someday</h3>
</div>
</div>
<div class="box" data-src="images/music-5.mp3">
<div class="image">
<div class="play">
<i class="fas fa-play"></i>
</div>
<img src="images/album-5.png" alt="">
</div>
<div class="content">
<h3>NEFFEX life</h3>
</div>
</div>
<div class="box" data-src="images/music-6.mp3">
<div class="image">
<div class="play">
<i class="fas fa-play"></i>
</div>
<img src="images/album-6.png" alt="">
</div>
<div class="content">
<h3>fun house</h3>
</div>
</div>
</div>
</div>
<div class="music-player">
<div id="close-player" class="fas fa-angle-up"></div>
<h3 class="music-title">(play your song)</h3>
<audio src="" controls></audio>
</div>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');
*{
font-family: 'Poppins', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-transform: capitalize;
text-decoration: none;
transition: .2s linear;
}
.container .heading{
text-align: center;
padding:10px;
color:#333;
font-size: 35px;
border-bottom: 3px solid #333;
}
.container .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap:20px;
padding:20px 9%;
background: #eee;
}
.container .box-container.active{
padding-bottom: 150px;
}
.container .box-container .box{
border-radius: 10px;
background:#fff;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
padding:15px;
cursor: pointer;
}
.container .box-container .box .image{
height:540px;
width: 100%;
overflow: hidden;
border-radius: 10px;
position: relative;
}
.container .box-container .box .image img{
height:100%;
width:100%;
object-fit: cover;
}
.container .box-container .box .image .play{
position: absolute;
top:0; left:0;
height: 100%;
width:100%;
background: rgba(0,0,0,.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
display: none;
}
.container .box-container .box:hover .image .play{
display: flex;
}
.container .box-container .box .image .play i{
font-size: 100px;
color:#fff;
}
.container .box-container .box .content{
padding-top: 15px;
}
.container .box-container .box .content h3{
font-size: 20px;
color:#333;
}
.music-player{
position: fixed;
bottom: -125px; left:0; right:0;
background: #fff;
z-index: 1000;
}
.music-player.active{
bottom: 0;
}
.music-player .music-title{
font-size: 25px;
margin-bottom: 5px;
border-top: 3px solid #333;
border-bottom: 1px solid #333;
text-align: center;
color:#333;
padding:10px;
}
.music-player audio{
width: 100%;
}
.music-player audio::-webkit-media-controls-enclosure{
border-radius: 0;
background: #fff;
}
.music-player #close-player{
position: absolute;
top:-50px; right:5px;
height: 50px;
width: 55px;
line-height: 50px;
cursor: pointer;
font-size: 30px;
color:#333;
background: #fff;
border:3px solid #333;
border-bottom: none;
text-align: center;
}
@media (max-width:768px) {
.container .box-container{
padding:20px;
}
}
@media (max-width:450px) {
.container .box-container{
grid-template-columns: 1fr;
}
.container .box-container .box .image{
height: 300px;
}
}let closePlayer = document.querySelector('#close-player');
let musicPlayer = document.querySelector('.music-player');
let boxContainer = document.querySelector('.container .box-container');
closePlayer.onclick = () =>{
closePlayer.classList.toggle('fa-times');
musicPlayer.classList.toggle('active');
boxContainer.classList.toggle('active');
}
let boxes = document.querySelectorAll('.container .box-container .box');
boxes.forEach(box =>{
box.onclick = () =>{
let src = box.getAttribute('data-src');
let text = box.querySelector('.content h3').innerText;
closePlayer.classList.add('fa-times');
musicPlayer.classList.add('active');
boxContainer.classList.add('active');
musicPlayer.querySelector('h3').innerText = text;
musicPlayer.querySelector('audio').src = src;
musicPlayer.querySelector('audio').play();
}
});Video playlist element 2
Открыть элемент
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="text">
<span style="--i: 1;">2</span>
<span style="--i: 2;">0</span>
<span style="--i: 3;">2</span>
<span style="--i: 4;">2</span>
</div>
</div>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body{
font-family: 'Roboto', sans-serif;
width: 100%;
min-height: 100vh;
background: #10002b;
display: grid;
place-items: center;
font-size: 62.5%;
}
.wrapper .text{
color: #ffffff;
font-size: 15rem;
font-weight: 700;
text-align: center;
transform: rotateX(30deg) rotateY(20deg) translateX(50px);
}
.wrapper .text span{
display: inline-block;
text-shadow: -12px 15px 25px #000000;
margin: -50px;
animation: text 1s linear infinite alternate;
animation-delay: calc(0.3s*var(--i));
}
@keyframes text {
0%{
transform: translateY(0);
}
100%{
transform: translateY(-100px);
}
}Css текст 2
Открыть элемент
Автор Crazy Coding. Видео для эффекта любое в формате mp4
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name = "format-detection" content = "telephone=no">
<title>Video in Text Background</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div class="video-bg">
<video src="video.mp4" autoplay loop muted></video>
<h2 class="main-text">Crazy<br> Coding</h2>
</div>
<!-- Scripts -->
<script src="js/main.js"></script>
</body>
</html>body{
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.video-bg{
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
}
.video-bg h2{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-transform: uppercase;
font-size: 20vw;
text-align: center;
font-weight: 800;
line-height: 1em;
color: #ffffff;
background: rgba(0, 0, 0, 0.9);
mix-blend-mode: multiply;
margin: 0;
}
.video-bg video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}Css текст 1
Открыть элемент
<div class="container">
<div class="main-video-container" id="video_playlist">
<video src="images/vid-1.mp4" loop controls class="main-video"></video>
<h3 class="main-vid-title">house flood animation</h3>
</div>
<div class="video-list-container">
<div class="list active">
<video src="images/vid-1.mp4" class="list-video"></video>
<h3 class="list-title">house flood animation</h3>
</div>
<div class="list">
<video src="images/vid-2.mp4" class="list-video"></video>
<h3 class="list-title">zoombie walking animation</h3>
</div>
<div class="list">
<video src="images/vid-3.mp4" class="list-video"></video>
<h3 class="list-title">emoji falling animation</h3>
</div>
<div class="list">
<video src="images/vid-4.mp4" class="list-video"></video>
<h3 class="list-title">3D town animation</h3>
</div>
<div class="list">
<video src="images/vid-5.mp4" class="list-video"></video>
<h3 class="list-title">man chasing carrot animation</h3>
</div>
<div class="list">
<video src="images/vid-6.mp4" class="list-video"></video>
<h3 class="list-title">door hinge animation</h3>
</div>
<div class="list">
<video src="images/vid-7.mp4" class="list-video"></video>
<h3 class="list-title">poeple walking in town animation</h3>
</div>
<div class="list">
<video src="images/vid-8.mp4" class="list-video"></video>
<h3 class="list-title">knight chasing virus animation</h3>
</div>
<div class="list">
<video src="images/vid-9.mp4" class="list-video"></video>
<h3 class="list-title">3D helicopter animation</h3>
</div>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');
*{
font-family: 'Poppins', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
}
body{
background-color: coral;
padding:20px;
}
.container{
max-width: 900px;
margin:0px auto;
display: flex;
align-items: flex-start;
gap:20px;
}
.container .main-video-container{
flex:1 1 550px;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,.1);
background-color: #fff;
padding:15px;
}
.container .main-video-container .main-video{
margin-bottom: 7px;
border-radius: 5px;
width: 100%;
}
.container .main-video-container .main-vid-title{
font-size: 20px;
color:#444;
}
.container .video-list-container{
flex:1 1 325px;
height: 350px;
overflow-y: scroll;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,.1);
background-color: #fff;
padding:15px;
}
.container .video-list-container::-webkit-scrollbar{
width: 10px;
}
.container .video-list-container::-webkit-scrollbar-track{
background-color: #fff;
border-radius: 5px;
}
.container .video-list-container::-webkit-scrollbar-thumb{
background-color: #444;
border-radius: 5px;
}
.container .video-list-container .list{
display: flex;
align-items: center;
gap:15px;
padding:10px;
background-color: #eee;
cursor: pointer;
border-radius: 5px;
margin-bottom: 10px;
}
.container .video-list-container .list:last-child{
margin-bottom: 0;
}
.container .video-list-container .list.active{
background-color: #444;
}
.container .video-list-container .list.active .list-title{
color:#fff;
}
.container .video-list-container .list .list-video{
width: 100px;
border-radius: 5px;
}
.container .video-list-container .list .list-title{
font-size: 17px;
color:#444;
}
@media (max-width:1200px){
.container{
margin:0;
}
}
@media (max-width: 768px) {
.container{
display: flex;
flex-wrap: wrap;
}
}
@media (max-width:450px){
.container .main-video-container .main-vid-title{
font-size: 15px;
text-align: center;
}
.container .video-list-container .list{
flex-flow: column;
gap:10px;
}
.container .video-list-container .list .list-video{
width: 100%;
}
.container .video-list-container .list .list-title{
font-size: 15px;
text-align: center;
}
}let videoList = document.querySelectorAll('.video-list-container .list');
videoList.forEach(vid =>{
vid.onclick = () =>{
videoList.forEach(remove =>{remove.classList.remove('active')});
vid.classList.add('active');
let src = vid.querySelector('.list-video').src;
let title = vid.querySelector('.list-title').innerHTML;
document.querySelector('.main-video-container .main-video').src = src;
document.querySelector('.main-video-container .main-video').play();
document.querySelector('.main-video-container .main-vid-title').innerHTML = title;
};
});video playlist element
Открыть элемент
<section class="speciality" id="speciality">
<h1 class="heading"> Для <span>раздела сайта</span> </h1>
<div class="box-container">
<div class="box">
<img class="image" src="images/s-img-1.jpg" alt="">
<div class="content">
<img src="images/s-1.png" alt="">
<h3>tasty burger</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda inventore neque amet ipsa tenetur voluptates aperiam tempore libero labore aut.</p>
</div>
</div>
<div class="box">
<img class="image" src="images/s-img-2.jpg" alt="">
<div class="content">
<img src="images/s-2.png" alt="">
<h3>tasty pizza</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda inventore neque amet ipsa tenetur voluptates aperiam tempore libero labore aut.</p>
</div>
</div>
<div class="box">
<img class="image" src="images/s-img-3.jpg" alt="">
<div class="content">
<img src="images/s-3.png" alt="">
<h3>cold ice-cream</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda inventore neque amet ipsa tenetur voluptates aperiam tempore libero labore aut.</p>
</div>
</div>
<div class="box">
<img class="image" src="images/s-img-4.jpg" alt="">
<div class="content">
<img src="images/s-4.png" alt="">
<h3>cold drinks</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda inventore neque amet ipsa tenetur voluptates aperiam tempore libero labore aut.</p>
</div>
</div>
<div class="box">
<img class="image" src="images/s-img-5.jpg" alt="">
<div class="content">
<img src="images/s-5.png" alt="">
<h3>tasty sweets</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda inventore neque amet ipsa tenetur voluptates aperiam tempore libero labore aut.</p>
</div>
</div>
<div class="box">
<img class="image" src="images/s-img-6.jpg" alt="">
<div class="content">
<img src="images/s-6.png" alt="">
<h3>healty breakfast</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda inventore neque amet ipsa tenetur voluptates aperiam tempore libero labore aut.</p>
</div>
</div>
</div>
</section>html {
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 6rem;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: all .2s linear;
}
section {
padding: 2rem 9%;
}
.heading {
text-align: center;
font-size: 3.5rem;
padding: 1rem;
color: #666;
}
.heading span {
color: #ff3838;
}
.speciality .box-container{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}
.speciality .box-container .box{
flex:1 1 30rem;
position: relative;
overflow: hidden;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
border:.1rem solid rgba(0,0,0,.3);
cursor: pointer;
border-radius: .5rem;
}
.speciality .box-container .box .image{
height:100%;
width:100%;
object-fit: cover;
position: absolute;
top:-100%; left:0;
}
.speciality .box-container .box .content{
text-align: center;
background:#fff;
padding:2rem;
}
.speciality .box-container .box .content img{
margin:1.5rem 0;
}
.speciality .box-container .box .content h3{
font-size: 2.5rem;
color:#333;
}
.speciality .box-container .box .content p{
font-size: 1.6rem;
color:#666;
padding:1rem 0;
}
.speciality .box-container .box:hover .image{
top:0;
}
.speciality .box-container .box:hover .content{
transform: translateY(100%);
}Карточки для сайта о еде. Раздел Наша спецификация
Открыть элемент
<!-- HEADER -->
<header class="l-header">
<nav class="nav bd-grid">
<div class="nav__logo">
<ion-icon class="nav__icon" name="logo-dribbble"></ion-icon>
</div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#" class="nav__link">About</a></li>
<li class="nav__item"><a href="#" class="nav__link">Works</a></li>
<li class="nav__item"><a href="#" class="nav__link">Contacts</a></li>
<li class="nav__item"><a href="#" class="nav__link">Comumunity</a></li>
</ul>
</div>
<div class="menu-toggle" id="menu-toggle">
<ion-icon class="nav__icon" name="menu"></ion-icon>
</div>
</nav>
</header>
<!-- HOME -->
<main>
<div class="home bd-grid">
<div class="home__data">
<h1 class="home__title">Hello Dribbble</h1>
<span class="home__name">I'am Bedimcode</span>
<a href="#" class="button">Explorar</a>
<div class="home__social">
<span class="home__social-name">Siguenos</span>
<a href="" class="home__social-icon"><ion-icon name="logo-github"></ion-icon></a>
<a href="" class="home__social-icon"><ion-icon name="logo-linkedin"></ion-icon></a>
<a href="" class="home__social-icon"><ion-icon name="logo-instagram"></ion-icon></a>
</div>
</div>
<div class="home__img">
<img src="assets/img/web_developer.svg" alt="">
</div>
</div>
</main>/*Fuentes de tipografia*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600|Raleway:400,600&display=swap');
/* VARIABLES CSS */
/*Header*/
:root{
--header-height: 3rem;
}
/*Colores*/
:root{
--color-first: #EA4C89;
--color-secondary: #1D2063;
--color-text: #fff;
}
/*Fuente y tipografia*/
:root{
--heading-font: 'Raleway';
--body-font: 'Open Sans';
--h1-font-size: 2rem;
--h3-font-size: 1rem;
--small-font-size: 0.8125rem;
}
@media screen and (min-width: 768px){
:root{
--h1-font-size: 3.5rem;
--h3-font-size: 1.25rem;
--small-font-size: 0.8125rem;
}
}
/* z-index*/
:root{
--z-back: -10;
--z-normal: 1;
--z-tooltip: 10;
--z-fixed: 100;
--z-modal: 1000;
}
/* BASE */
*,::before,::after{
box-sizing: border-box;
}
body{
margin: var(--header-height) 0 0 0;
color: var(--color-text);
background-color: var(--color-secondary);
font-family: var(--body-font);
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
h1{
font-size: var(--h1-font-size);
font-family: var(--heading-font);
}
img{
max-width: 100%;
height: auto;
}
/* LAYAOUT */
.bd-grid{
display: grid;
grid-template-columns: 100%;
max-width: 1200px;
margin-left: 1rem;
margin-right: 1rem;
align-items: center;
}
.l-header{
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: var(--color-secondary);
}
/* COMPONENTS */
.button{
display: inline-block;
padding: .5rem 1.5rem;
margin-bottom: 1rem;
background-color: var(--color-first);
color: var(--color-text);
border-radius: 1.5rem;
}
.button:hover{
box-shadow: 2px 0 24px var(--color-first);
transition: .5s;
}
/* PAGES */
.home{
height: calc(100vh - var(--header-height));
}
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 768px){
.nav__menu{
position: fixed;
top: var(--header-height);
right: -100%;
width: 60%;
height: 100vh;
padding: 1.5rem;
background-color: var(--color-secondary);
z-index: var(--z-fixed);
transition: .5s;
border-top: 1px solid var(--color-text);
border-left: 1px solid var(--color-text);
}
}
.nav__item{
margin-bottom: 1.5rem;
}
.nav__link{
color: var(--color-text);
}
.nav__link:hover{
border-bottom: 1px solid var(--color-text);
}
.nav__icon{
font-size: 1.5rem;
}
.menu-toggle{
cursor: pointer;
}
/*Aparece menu*/
.show{
right: 0;
}
/*Home*/
.home__data{
padding-top: 2rem;
text-align: center;
}
.home__title{
margin-bottom: .5rem;
color: var(--color-first);
}
.home__name{
display: block;
margin-bottom: 1.5rem;
font-size: var(--h3-font-size);
}
.home__social{
display: flex;
align-items: center;
text-align: initial;
}
.home__social-name{
writing-mode: vertical-rl;
transform: rotate(180deg);
border-left: 1px solid var(--color-text);
margin-right: .5rem;
padding: 1rem .2rem;
font-size: var(--small-font-size);
}
.home__social-icon{
margin-right: 1rem;
color: var(--color-text);
z-index: var(--z-back);
}
.home__img{
padding: 2rem;
}
/*MEDIA QUERIES*/
@media screen and (min-width: 768px){
body{
margin: 0;
}
.home{
height: 100vh;
grid-template-columns: repeat(2, 1fr);
}
.button{
margin-bottom: 3rem;
}
.nav__list{
display: flex;
}
.nav__item{
margin-bottom: 0;
margin-left: 1.5rem;
}
.menu-toggle{
display: none;
}
.home__data{
padding: 0;
text-align: initial;
}
.home__social-icon{
font-size: 1.5rem;
}
}
@media screen and (min-width: 1200px){
.bd-grid{
margin-left: auto;
margin-right: auto;
}
}const showMenu = (toggleId, navId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if(toggle && nav){
toggle.addEventListener('click', () =>{
nav.classList.toggle('show')
})
}
}
showMenu('menu-toggle','nav-menu')<!-- Script Ionicons--> <script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
Картинка
https://raw.githubusercontent.com/valekutce/element-site-elements/abae46d8743f3c00828bd24c7b45d700d7d037c1/assets/img/web_developer.svg
Адаптивный элемент для главного раздела сайта
- Данный элемент, если его разметка вам подходит, можно легко скопировать и вставить к себе в проект, заполнив раздел своим контентом (поменять заголовок, фон, картинку, ссылки на соц сети и т.д.). А можно оставить так как есть, лишь вставив своё описание.
- Раздел полностью адаптивный и готов к работе.
Открыть элемент
Элемент сайта
<main>
<div class="big-wrapper light">
<img src="./img/shape.png" alt="" class="shape" />
<header>
<div class="container">
<div class="logo">
<img src="./img/logo.png" alt="Logo" />
<h3>Danvo in a new branch</h3>
</div>
<div class="links">
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#" class="btn">Sign up</a></li>
</ul>
</div>
<div class="overlay"></div>
<div class="hamburger-menu">
<div class="bar"></div>
</div>
</div>
</header>
<div class="showcase-area">
<div class="container">
<div class="left">
<div class="big-title">
<h1>Future is here,</h1>
<h1>Start Exploring now.</h1>
</div>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Delectus eius distinctio odit, magni magnam qui ex perferendis
vitae!
</p>
<div class="cta">
<a href="#" class="btn">Get started</a>
</div>
</div>
<div class="right">
<img src="./img/person.png" alt="Person Image" class="person" />
</div>
</div>
</div>
<div class="bottom-area">
<div class="container">
<button class="toggle-btn">
<i class="far fa-moon"></i>
<i class="far fa-sun"></i>
</button>
</div>
</div>
</div>
</main>@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
.light {
--mainColor: #64bcf4;
--hoverColor: #5bacdf;
--backgroundColor: #f1f8fc;
--darkOne: #312f3a;
--darkTwo: #45424b;
--lightOne: #919191;
--lightTwo: #aaa;
}
.dark {
--mainColor: #64bcf4;
--hoverColor: #5bacdf;
--backgroundColor: #192e3a;
--darkOne: #f3f3f3;
--darkTwo: #fff;
--lightOne: #ccc;
--lightTwo: #e7e3e3;
}
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
.stop-scrolling {
height: 100%;
overflow: hidden;
}
img {
width: 100%;
}
a {
text-decoration: none;
}
.big-wrapper {
position: relative;
padding: 1.7rem 0 2rem;
width: 100%;
min-height: 100vh;
overflow: hidden;
background-color: var(--backgroundColor);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.container {
position: relative;
max-width: 81rem;
width: 100%;
margin: 0 auto;
padding: 0 3rem;
z-index: 10;
}
header {
position: relative;
z-index: 70;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.overlay {
display: none;
}
.logo {
display: flex;
align-items: center;
cursor: pointer;
}
.logo img {
width: 40px;
margin-right: 0.6rem;
margin-top: -0.6rem;
}
.logo h3 {
color: var(--darkTwo);
font-size: 1.55rem;
line-height: 1.2;
font-weight: 700;
}
.links ul {
display: flex;
list-style: none;
align-items: center;
}
.links a {
color: var(--lightTwo);
margin-left: 4.5rem;
display: inline-block;
transition: 0.3s;
}
.links a:hover {
color: var(--hoverColor);
transform: scale(1.05);
}
.btn {
display: inline-block;
padding: 0.9rem 1.9rem;
color: #fff !important;
background-color: var(--mainColor);
border-radius: 16px;
text-transform: capitalize;
transition: 0.3s;
}
.btn:hover {
background-color: var(--hoverColor);
transform: scale(1) !important;
}
.hamburger-menu {
position: relative;
z-index: 99;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
display: none;
}
.hamburger-menu .bar {
position: relative;
width: 100%;
height: 3px;
background-color: var(--darkTwo);
border-radius: 3px;
transition: 0.5s;
}
.bar::before,
.bar::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: var(--darkTwo);
border-radius: 3px;
transition: 0.5s;
}
.bar::before {
transform: translateY(-8px);
}
.bar::after {
transform: translateY(8px);
}
.big-wrapper.active .hamburger-menu .bar {
background-color: transparent;
}
.big-wrapper.active .bar::before {
transform: translateY(0) rotate(-45deg);
}
.big-wrapper.active .bar::after {
transform: translateY(0) rotate(45deg);
}
.showcase-area .container {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
justify-content: center;
}
.big-title {
font-size: 1.4rem;
color: var(--darkOne);
text-transform: capitalize;
line-height: 1.4;
}
.text {
color: var(--lightOne);
font-size: 1.1rem;
margin: 1.9rem 0 2.5rem;
max-width: 600px;
line-height: 2.3;
}
.showcase-area .btn {
box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.05);
}
.person {
width: 123%;
transform: translate(15%, 25px);
}
.toggle-btn {
display: inline-block;
border: none;
background: var(--darkTwo);
color: var(--backgroundColor);
outline: none;
cursor: pointer;
height: 39px;
width: 39px;
border-radius: 50%;
font-size: 1.1rem;
transition: 0.3s;
}
.toggle-btn i {
line-height: 39px;
}
.toggle-btn:hover {
background: var(--mainColor);
}
.big-wrapper.light .toggle-btn i:last-child {
display: none;
}
.big-wrapper.light .toggle-btn i:first-child {
display: block;
}
.big-wrapper.dark .toggle-btn i:last-child {
display: block;
}
.big-wrapper.dark .toggle-btn i:first-child {
display: none;
}
.shape {
position: absolute;
z-index: 0;
width: 500px;
bottom: -180px;
left: -15px;
opacity: 0.1;
}
.copy {
position: absolute;
top: 0;
left: 0;
z-index: 100;
animation: appear 1s 1 both;
}
@keyframes appear {
0% {
clip-path: circle(30% at -25% -25%);
}
100% {
clip-path: circle(150% at 0 0);
}
}
@media screen and (max-width: 870px) {
.hamburger-menu {
display: flex;
}
.links {
position: fixed;
top: 0;
right: 0;
max-width: 450px;
width: 100%;
height: 100%;
background-color: var(--mainColor);
z-index: 95;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(100%);
transition: 0.5s;
}
.links ul {
flex-direction: column;
}
.links a {
color: #fff;
margin-left: 0;
padding: 2rem 0;
}
.links .btn {
background: none;
}
.overlay {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
pointer-events: none;
transition: 0.5s;
}
.big-wrapper.active .links {
transform: translateX(0);
box-shadow: 0 0 50px 2px rgba(0, 0, 0, 0.4);
}
.big-wrapper.active .overlay {
pointer-events: all;
opacity: 1;
}
.showcase-area {
padding: 2.5rem 0;
max-width: 700px;
margin: 0 auto;
}
.showcase-area .container {
grid-template-columns: 1fr;
justify-content: center;
grid-gap: 2rem;
}
.big-title {
font-size: 1.1rem;
}
.text {
font-size: 0.95rem;
margin: 1.4rem 0 1.5rem;
}
.person {
width: 100%;
transform: none;
}
.logo h3 {
font-size: 1.25rem;
}
.shape {
bottom: -180px;
left: -150px;
}
}
@media screen and (max-width: 470px) {
.container {
padding: 0 1.5rem;
}
.big-title {
font-size: 0.9rem;
}
.text {
margin: 1.1rem 0 1.5rem;
}
.showcase-area .btn {
font-size: 0.8rem;
}
}var toggle_btn;
var big_wrapper;
var hamburger_menu;
function declare() {
toggle_btn = document.querySelector(".toggle-btn");
big_wrapper = document.querySelector(".big-wrapper");
hamburger_menu = document.querySelector(".hamburger-menu");
}
const main = document.querySelector("main");
declare();
let dark = false;
function toggleAnimation() {
// Clone the wrapper
dark = !dark;
let clone = big_wrapper.cloneNode(true);
if (dark) {
clone.classList.remove("light");
clone.classList.add("dark");
} else {
clone.classList.remove("dark");
clone.classList.add("light");
}
clone.classList.add("copy");
main.appendChild(clone);
document.body.classList.add("stop-scrolling");
clone.addEventListener("animationend", () => {
document.body.classList.remove("stop-scrolling");
big_wrapper.remove();
clone.classList.remove("copy");
// Reset Variables
declare();
events();
});
}
function events() {
toggle_btn.addEventListener("click", toggleAnimation);
hamburger_menu.addEventListener("click", () => {
big_wrapper.classList.toggle("active");
});
}
events();<script src="https://kit.fontawesome.com/a81368914c.js"></script>
Главное изображение
https://valekutce.github.io/site-element-elements/img/person.png
Логотип
https://valekutce.github.io/site-element-elements/img/logo.png
Дополнительный фон
https://valekutce.github.io/site-element-elements/img/shape.png
Элемент сайта
Открыть элемент
Раздел страницы Наши услуги
<section id="service-section">
<!-- Header -->
<div class="header service-head">
<h2>What I <span>Offer</span></h2>
<p>Here is my Services</p>
</div>
<!-- Services Main -->
<div class="container">
<div class="card">
<div class="logo">
<i class="fas fa-code"></i>
</div>
<h2>Website Development</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam non aut obcaecati libero.
Quisquam, officiis?</p>
</div>
<div class="card">
<div class="logo">
<i class="fab fa-app-store"></i>
</div>
<h2>App Development</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam non aut obcaecati libero.
Quisquam, officiis?</p>
</div>
<div class="card">
<div class="logo">
<i class="fas fa-laptop-code"></i>
</div>
<h2>Web Designing</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam non aut obcaecati libero.
Quisquam, officiis?</p>
</div>
<div class="card">
<div class="logo">
<i class="fas fa-photo-video"></i>
</div>
<h2>Graphic Designing</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam non aut obcaecati libero.
Quisquam, officiis?</p>
</div>
<div class="card">
<div class="logo">
<i class="fas fa-list-ul"></i>
</div>
<h2>SEO Marketing</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam non aut obcaecati libero.
Quisquam, officiis?</p>
</div>
<div class="card">
<div class="logo">
<i class="fas fa-pencil-alt"></i>
</div>
<h2>Content Writing</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam non aut obcaecati libero.
Quisquam, officiis?</p>
</div>
</div>
</section>#service-section{
width: 100%;
height: auto;
padding: 70px 12%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.service-head{
margin-bottom: 50px;
}
.container{
width: 100%;
height: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 60px 40px;
}
.card{
padding: 30px;
background-color: #e74d06;
color: #fff;
border-radius: 3px;
border-top-right-radius: 50px;
position: relative;
transition: .7s;
}
.card h2{
font-size: 17px;
margin: 10px 0 15px 0;
transition: .7s;
}
.card p{
font-size: 13px;
opacity: .8;
}
.card .logo{
width: 70px;
height: 50px;
background-color: #fff;
color: #e74d06;
border-radius: 3px;
display: grid;
place-items: center;
font-size: 23px;
position: absolute;
top: 0;
left: 30px;
transform: translateY(-50%);
transition: .7s;
}
.card:hover{
color: #333;
background-color: rgb(230, 230, 230);
}
.card:hover .logo{
color: #fff;
background-color: #e74d06;
}
.card:hover h2{
color: #e74d06;
}
@media (max-width: 1024px){
#service-section {
padding: 50px 4%;
}
}
@media (max-width: 768px) {
.container{
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 425px){
.container{
grid-gap: 40px 15px
}
.card {
padding: 30px 10px;
}
}
@media (max-width: 375px){
.container {
grid-template-columns: repeat(1, 1fr);
}
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://use.fontawesome.com/ebd19701ea.js"></script>
Раздел страницы Наши услуги
Открыть элемент
Раздел страницы Команда
<div class="main">
<h2 class="head">Team <span>Members</span></h2>
<div class="container">
<div class="box">
<img src="https://interier-foto.ru/wp-content/uploads/2015/01/bajkal-4237-300x300.jpg" width="150px">
<div class="name_post">
<p class="name">Tom Cruise</p>
<p class="deg">Front End Developer</p>
</div>
<div class="social-icons">
<ul>
<li><i class="uil uil-facebook-f"></i></li>
<li><i class="uil uil-instagram"></i></li>
<li><i class="uil uil-twitter-alt"></i></li>
<li><i class="uil uil-linkedin-alt"></i></li>
</ul>
</div>
</div>
<div class="box">
<img src="https://interier-foto.ru/wp-content/uploads/2015/01/bajkal-4237-300x300.jpg" width="150px">
<div class="name_post">
<p class="name">Vin Deisel</p>
<p class="deg">Back End Developer</p>
</div>
<div class="social-icons">
<ul>
<li><i class="uil uil-facebook-f"></i></li>
<li><i class="uil uil-instagram"></i></li>
<li><i class="uil uil-twitter-alt"></i></li>
<li><i class="uil uil-linkedin-alt"></i></li>
</ul>
</div>
</div>
<div class="box">
<img src="https://interier-foto.ru/wp-content/uploads/2015/01/bajkal-4237-300x300.jpg" width="150px">
<div class="name_post">
<p class="name">Paul Walker</p>
<p class="deg">Full Stack Developer</p>
</div>
<div class="social-icons">
<ul>
<li><i class="uil uil-facebook-f"></i></li>
<li><i class="uil uil-instagram"></i></li>
<li><i class="uil uil-twitter-alt"></i></li>
<li><i class="uil uil-linkedin-alt"></i></li>
</ul>
</div>
</div>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Neucha&family=Poppins:wght@100&family=Source+Sans+Pro:wght@300&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Neucha', cursive;
background-color: #fff;
}
.main{
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.main .head{
position: relative;
font-size: 31px;
}
.main .foot{
position: relative;
font-size: 36px;
margin-top: 70px;
}
.main .head span{
color: #ff5100;
}
.main .foot span{
color: #ff5100;
}
.main .head::after{
content: " ";
position: absolute;
width: 50%;
height: 5px;
background-color: #ff5100;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
border-radius: 4px;
}
.container{
display: flex;
justify-content: space-around;
margin: 70px auto;
width: 1120px;
max-width: 100%;
}
.container .box{
width: 230px;
height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-color: #fff;
color: #333;
margin: 0 30px;
text-align: center;
position: relative;
border-radius: 3px;
cursor: pointer;
padding: 15px 0;
box-shadow: 1px 1px 45px rgba(51, 51, 51, 0.41);
}
.box img{
border-radius: 3px;
}
.box .name{
font-weight: 600;
font-size: 17px;
}
.box .social-icons ul{
display: flex;
}
.box .social-icons li{
list-style-type: none;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
transition: all .4s ease;
}
.box .social-icons li:hover{
border: 1px solid #333;
transform: scale(1.3);
}
.box::after, .box::before{
content: " ";
position: absolute;
width: 0;
height: 0;
background-image: linear-gradient(135deg, #ff5100, #fad400);
animation: none;
z-index: -1;
}
.box::before{
bottom: -6px;
right: -6px;
}
.box::after{
top: -6px;
left: -6px;
}
.box:hover::after, .box:hover::before{
animation: stroke .5s linear;
animation-fill-mode: forwards;
}
@keyframes stroke{
0%{
height: 5px;
width: 0;
}
100%{
height: calc(100% + 12px);
width: 100%
}
}
@media (max-width: 768px) {
.container{
flex-wrap: wrap;
justify-content: center;
}
.container .box{
margin-bottom: 30px;
}
}
@media (max-width: 375px){
.main{
padding: 30px 0;
}
.container .card{
margin: 15px 0;
}
}<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
Раздел страницы Команда
Открыть элемент
Раздел страницы Профиль
<div class="main">
<h3 class="heading"><span>Profile </span>Card</h3>
<div class="container">
<div class="card">
<img src="https://st.depositphotos.com/2309453/3449/i/950/depositphotos_34490345-stock-photo-confident-casual-unshaven-young-man.jpg">
<div class="details">
<h3>Pankaj</h3>
<p>Software Developer</p>
<div class="social-links">
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href=""><i class="uil uil-instagram"></i></a>
<a href=""><i class="uil uil-twitter-alt"></i></a>
<a href=""><i class="uil uil-whatsapp"></i></a>
</div>
</div>
</div>
<div class="card">
<img src="https://static5.depositphotos.com/1005730/457/i/950/depositphotos_4578212-stock-photo-portrait-beautiful-hispanic-woman-isolated.jpg">
<div class="details">
<h3>Sandeep</h3>
<p>App Developer</p>
<div class="social-links">
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href=""><i class="uil uil-instagram"></i></a>
<a href=""><i class="uil uil-twitter-alt"></i></a>
<a href=""><i class="uil uil-whatsapp"></i></a>
</div>
</div>
</div>
<div class="card">
<img src="https://st.depositphotos.com/1743476/3058/i/950/depositphotos_30589095-stock-photo-smiling-guy-full-length.jpg">
<div class="details">
<h3>Nitin</h3>
<p>Website Developer</p>
<div class="social-links">
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href=""><i class="uil uil-instagram"></i></a>
<a href=""><i class="uil uil-twitter-alt"></i></a>
<a href=""><i class="uil uil-whatsapp"></i></a>
</div>
</div>
</div>
<div class="card">
<img src="https://st2.depositphotos.com/36235434/43214/i/1600/depositphotos_432148838-stock-photo-student-white-shirt-fluffy-hair.jpg">
<div class="details">
<h3>Manshi</h3>
<p>Data Scientist</p>
<div class="social-links">
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href=""><i class="uil uil-instagram"></i></a>
<a href=""><i class="uil uil-twitter-alt"></i></a>
<a href=""><i class="uil uil-whatsapp"></i></a>
</div>
</div>
</div>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Neucha&family=Poppins:wght@100&family=Source+Sans+Pro:wght@300&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Neucha', cursive;
background-color: #fff;
}
.main{
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px;
}
.main .heading{
font-size: 25px;
margin-bottom: 80px;
position: relative;
}
.heading span{
color: rgb(0, 81, 255);
}
.heading::after{
content: " ";
position: absolute;
width: 60%;
height: 3px;
left: 50%;
transform: translateX(-50%);
bottom: -5px;
background-color: rgb(0, 81, 255);
}
.container{
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.container .card{
width: 230px;
height: 350px;
position: relative;
border-radius: 10px;
background-color: #fff;
overflow: hidden;
box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.37);
margin:15px;
}
.card::after{
content: " ";
width: 100%;
height: 40%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 81, 255, 0.864);
}
.card img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: fit;
transition: .6s;
box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.37);
z-index: 99;
}
.card:hover img{
transform: scale(.50) translateY(-120px);
border-radius: 10px;
}
.card .details{
width: 100%;
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding-bottom: 40px;
transform: translateY(100%);
transition: .6s;
}
.card:hover .details{
transform: translateY(0);
}
.details h3{
font-size: 22px;
color: rgb(0, 81, 255);
}
.details p{
font-size: 15px;
color: #333;
margin-bottom: 7px;
}
.details .social-links{
display: flex;
}
.details .social-links a{
width: 30px;
height: 30px;
margin: 0 5px;
border-radius: 50%;
color: #333;
background-color: rgb(182, 182, 182);
text-decoration: none;
transition: .6s;
display: grid;
place-items: center;
font-size: 17px;
}
.details .social-links a:hover{
transform: rotate(360deg);
background-color: rgb(0, 81, 255);
color: #fff;
}
@media (max-width: 375px){
.main{
padding: 30px 0;
}
.container .card{
margin: 15px 0;
}
}
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
Раздел страницы Профиль
Открыть элемент
Раздел страницы для Отзывов
<div class="testimonials">
<h2>Testimonials</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum est in quos nulla totam voluptatibus!</p>
<!-- Testimonials Cards -->
<div class="cards">
<div class="card">
<img src="https://interier-foto.ru/wp-content/uploads/2015/01/bajkal-4237-300x300.jpg" alt="">
<h3>Someone Famous</h3>
<h4>Web Developer</h4>
<div class="ratings">
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star-half-alt"></i>
</div>
<hr>
<p>Very Professional and Honest Highly Recommanded</p>
</div>
<div class="card">
<img src="https://interier-foto.ru/wp-content/uploads/2015/01/bajkal-4237-300x300.jpg" alt="">
<h3>Someone Famous</h3>
<h4>Web Developer</h4>
<div class="ratings">
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star-half-alt"></i>
</div>
<hr>
<p>Very Professional and Honest Highly Recommanded</p>
</div>
<div class="card">
<img src="https://interier-foto.ru/wp-content/uploads/2015/01/bajkal-4237-300x300.jpg" alt="">
<h3>Someone Famous</h3>
<h4>Web Developer</h4>
<div class="ratings">
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star"></i>
<i class="uil uil-star-half-alt"></i>
</div>
<hr>
<p>Very Professional and Honest Highly Recommanded</p>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Neucha&family=Poppins:wght@100&family=Source+Sans+Pro:wght@300&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Neucha', cursive;
background-color: #fff;
}
.testimonials{
width: 100%;
min-height: 100vh;
padding: 50px 15%;
background-color: #333;
color: #fff;
position: relative;
overflow: hidden;
}
.testimonials::after,
.testimonials::before{
content: " ";
position: absolute;
width: 700px;
height: 700px;
border-radius: 50%;
background-color: #f39c12;
}
.testimonials::after{
left: 0%;
bottom: 0%;
transform: translate(-50%, 50%);
}
.testimonials::before{
right: 0%;
bottom: 0%;
transform: translate(50%, 50%);
}
.testimonials > h2{
font-size: 29px;
margin-bottom: 27px;
position: relative;
}
.testimonials > h2::after{
content: " ";
position: absolute;
width: 90px;
height: 4px;
background-color: #f39c12;
border-radius: 10px;
left: 0;
bottom: -6px;
}
.testimonials > p{
font-size: 16px;
max-width: 530px;
opacity: .8;
line-height: 26px;
}
.cards{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 50px;
margin-top: 25px;
position: relative;
z-index: 99;
text-align: center;
}
.card{
padding: 50px 40px;
background-color: rgba(255, 255, 255, 0.185);
border-radius: 10px;
backdrop-filter: blur(10px);
box-shadow: 0 0 45px rgba(51, 51, 51, 0.501);
transition: all .4s ease;
}
.card:hover{
background-color: rgba(255, 255, 255, 0.811);
color: #333;
transform: scale(1.06);
}
.card img{
width: 90px;
height: 90px;
object-fit: cover;
border-radius: 50%;
border: 3px solid #f39c12;
}
.card h3{
font-size: 18px;
margin-top: 10px;
color: #f39c12;
}
.card h4{
font-size: 16px;
font-weight: 500;
opacity: .9;
margin-top: 2px;
}
.card p{
font-size: 15px;
opacity: .8;
line-height: 25px;
margin-top: 10px;
}
.ratings{
margin: 4px 0 16px 0;
}
.ratings .uil{
font-size: 23px;
/* color: #f39c12; */
}
@media (max-width: 1024px){
.testimonials{
padding: 50px 7%;
}
}
@media (max-width: 768px) {
.testimonials{
padding: 50px 3%;
}
.cards {
grid-gap: 15px;
}
}
@media (max-width: 425px){
.cards {
grid-template-columns: repeat(1, 1fr);
}
.testimonials::after, .testimonials::before{
top: -5px;
}
}
@media (max-width: 375px){
.about_section{
padding: 50px 4%;
}<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
Раздел страницы для Отзывов
Открыть элемент
Раздел страницы О нас
<section class="about_section" id="About">
<div class="about_img-border">
<div class="about_img">
</div>
</div>
<div class="about_details">
<h1>About Me</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae ipsam voluptas perspiciatis voluptatum magnam
fugit deleniti, dolorem rerum excepturi quasi! <br><br>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore consectetur quidem animi at debitis.</p>
<div class="btns">
<a href="#" class="btn btn1">HIRE ME</a>
<a href="#" class="btn btn2">DOWNLOAD CV</a>
</div>
</div>
</section>@import url('https://fonts.googleapis.com/css2?family=Neucha&family=Poppins:wght@100&family=Source+Sans+Pro:wght@300&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Neucha', cursive;
background-color: #fff;
}
.about_section{
width: 100%;
height: 100%;
background-color: #444;
display: flex;
align-items: center;
justify-content: space-between;
padding: 50px 13%;
}
.about_img-border{
width: 40%;
height: 530px;
border: 15px solid #f39c12;
position: relative;
}
.about_img{
width: 100%;
height: 500px;
border: 15px solid #444;
box-shadow: 0 0 10px;
position: absolute;
top: -50px;
right: -50px;
background: url(https://st.depositphotos.com/1144472/1971/i/950/depositphotos_19714321-stock-photo-young-happy-smiling-business-man.jpg) no-repeat center;
background-size: cover;
transition: .5s;
}
.about_img-border:hover .about_img{
top: 0px;
right: 0px;
}
.about_details h1{
font-size: 58px;
color: #fff;
position: relative;
}
.about_details h1::after{
content: " ";
position: absolute;
width: 120px;
height: 4px;
background-color: #f39c12;
border-radius: 5px;
left: 0;
bottom: 2px;
}
.about_details p{
font-size: 15px;
color: #fff;
width: 480px;
margin: 30px 0 45px 0;
line-height: 29px;
}
.btn{
padding: 10px 25px;
border: 2px solid #f39c12;
border-radius: 5px;
color: #f39c12;
text-decoration: none;
margin: 30px 0;
transition: all .5s ease;
font-weight: 600;
}
.btn:hover{
background-color: #f39c12;
color: #333;
}
.btn1{
margin-right: 15px;
background-color: #f39c12;
color: #000;
}
.btn1:hover{
background-color: transparent;
color: #f39c12;
}
@media (max-width: 1024px){
.about_details {
width: 50%;
}
.about_img{
right: -25px;
}
.about_img-border{
width: 45%;
}
}
@media (max-width: 768px) {
.about_section{
flex-wrap: wrap;
}
.about_details {
width: 100%;
}
.about_img-border {
width: 72%;
margin: 0 auto 50px;
}
.about_details p{
width: 100%;
}
}
@media (max-width: 425px){
.about_img-border{
width: 100%;
}
.about_img{
right: 0px;
top: 0;
}
.about_details h1 {
font-size: 45px;
}
}
@media (max-width: 375px){
.about_section{
padding: 50px 4%;
}
}Раздел страницы О нас
Открыть элемент
Раздел страницы о нас
<section id="about-section">
<!-- about left -->
<div class="about-left">
<img src="https://cdn.pixabay.com/photo/2018/01/21/14/16/woman-3096664__340.jpg" width="350px" />
</div>
<!-- about right -->
<div class="about-right">
<h4>My Story</h4>
<h1>About Me</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Debitis fugiat a dolorem at similique maxime dolorum dolore
enim dicta voluptatibus, illum recusandae, vel optio tempore
ipsum incidunt eum. Aspernatur, repellendus.
</p>
<div class="address">
<ul>
<li>
<span class="address-logo">
<i class="fas fa-paper-plane"></i>
</span>
<p>Address</p>
<span class="saprater">:</span>
<p>Jaipur, Rajasthan, India</p>
</li>
<li>
<span class="address-logo">
<i class="fas fa-phone-alt"></i>
</span>
<p>Phone No</p>
<span class="saprater">:</span>
<p>+91 987-654-4321</p>
</li>
<li>
<span class="address-logo">
<i class="far fa-envelope"></i>
</span>
<p>Email ID</p>
<span class="saprater">:</span>
<p>crowncoder@gmail.com</p>
</li>
</ul>
</div>
<div class="expertise">
<h3>My Expertise</h3>
<ul>
<li>
<span class="expertise-logo">
<i class="fab fa-html5"></i>
</span>
<p>HTML</p>
</li>
<li>
<span class="expertise-logo">
<i class="fab fa-css3-alt"></i>
</span>
<p>CSS</p>
</li>
<li>
<span class="expertise-logo">
<i class="fab fa-node-js"></i>
</span>
<p>Java Script</p>
</li>
<li>
<span class="expertise-logo">
<i class="fab fa-react"></i>
</span>
<p>React Js</p>
</li>
</ul>
</div>
</div>
</section>@import url('https://fonts.googleapis.com/css2?family=Neucha&family=Poppins:wght@100&family=Source+Sans+Pro:wght@300&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Neucha', cursive;
}
#about-section{
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 80px 13%;
}
.about-right{
width: 57%;
}
.about-right ul li{
display: flex;
align-items: center;
}
.about-right h1{
color: #e74d06;
font-size: 37px;
margin-bottom: 5px;
}
.about-right p{
color: #444;
line-height: 26px;
font-size: 15px;
}
.about-right .address{
margin: 25px 0;
}
.about-right .address ul li{
margin-bottom: 5px;
}
.address .address-logo{
margin-right: 15px;
color: #e74d06;
}
.address .saprater{
margin: 0 35px;
}
.about-right .expertise ul{
width: 80%;
display: flex;
align-items: center;
justify-content: space-between;
}
.expertise h3{
margin-bottom: 10px;
}
.expertise .expertise-logo{
font-size: 19px;
margin-right: 10px;
color: #e74d06;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://use.fontawesome.com/ebd19701ea.js"></script>
Раздел страницы о нас
Открыть элемент
<section class="neon bd-container">
<div class="neon__container">
<div class="neon__card">
<svg class="neon__icon" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M35.712 6C40.28 6 43.998 9.68403 43.998 14.2103L44 19.5649C44 19.9573 43.842 20.3378
43.562 20.6152C43.28 20.8946 42.9 21.0512 42.5 21.0512C40.858 21.0512 39.522 22.375 39.522
24.002C39.522 25.629 40.858 26.9528 42.5 26.9528C43.328 26.9528 44 27.6186 44
28.4391V33.7917C44 38.318 40.284 42 35.716 42H12.286C7.718 42 4 38.318 4
33.7917V28.4391C4 27.6186 4.672 26.9528 5.5 26.9528C7.144 26.9528 8.48 25.629
8.48 24.002C8.48 22.4166 7.198 21.2236 5.5 21.2236C5.102 21.2236 4.722 21.067
4.44 20.7876C4.158 20.5082 4 20.1297 4 19.7373L4.004 14.2103C4.004 9.68403
7.72 6 12.288 6H35.712ZM24.004 16.3069C23.436 16.3069 22.928 16.6201 22.674
17.1234L21.216 20.0504L17.964 20.5201C17.402 20.5994 16.942 20.9799 16.764
21.5149C16.588 22.05 16.73 22.6286 17.138 23.021L19.496 25.296L18.94 28.5124C18.844
29.0673 19.07 29.6182 19.53 29.9491C19.79 30.1334 20.092 30.2286 20.398 30.2286C20.632
30.2286 20.868 30.1711 21.084 30.0581L24 28.5401L26.91 30.0542C27.414 30.3217 28.012
30.2801 28.47 29.9472C28.932 29.6182 29.158 29.0673 29.062 28.5124L28.504 25.296L30.862
23.021C31.272 22.6286 31.414 22.05 31.236 21.5149C31.06 20.9799 30.6 20.5994 30.044
20.5221L26.786 20.0504L25.328 17.1254C25.078 16.622 24.57 16.3089 24.004 16.3069Z"/>
</svg>
<h1 class="neon__title">Ticket 01</h1>
<p class="neon__description">Pass tickets, for full access to premium movies and series for one year.</p>
<a href="#" class="neon__button">Buy Now
<svg class="neon__button-icon" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M24.0099 4C29.3698 4 33.7763 8.21182 34 13.5486H33.9477C33.954 13.7038 33.9242 13.8583
33.8606 14H34.1729C36.6069 14 39.1557 15.687 40.1777 19.7596L40.2887 20.2401L41.8265 32.6295C42.9332
40.5315 38.6099 43.8546 32.7124 43.9953L32.3169 44H15.7371C9.74355 44 5.12509 41.8159 6.14056
33.1671L6.20981 32.6295L7.76528 20.2401C8.53228 15.8544 11.1072 14.1245 13.5882 14.0065L13.8634
14H14.0198C13.9934 13.8507 13.9934 13.698 14.0198 13.5486C14.2434 8.21182 18.65 4 24.0099
4ZM18.194 20.6586C17.2178 20.6586 16.4264 21.4731 16.4264 22.4779C16.4264 23.4826 17.2178
24.2971 18.194 24.2971C19.1702 24.2971 19.9616 23.4826 19.9616 22.4779L19.9478 22.2497C19.8387
21.3526 19.0951 20.6586 18.194 20.6586ZM29.7716 20.6586C28.7954 20.6586 28.0041 21.4731 28.0041
22.4779C28.0041 23.4826 28.7954 24.2971 29.7716 24.2971C30.7478 24.2971 31.5392 23.4826 31.5392
22.4779C31.5392 21.4731 30.7478 20.6586 29.7716 20.6586ZM23.9315 6.60477C20.0833 6.60477 16.9637
9.71365 16.9637 13.5486C16.99 13.698 16.99 13.8507 16.9637 14H30.9864C30.9308 13.8559 30.9013
13.7031 30.8993 13.5486C30.8993 9.71365 27.7797 6.60477 23.9315 6.60477Z"/>
</svg>
</a>
</div>
<div class="neon__card">
<svg class="neon__icon" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M35.712 6C40.28 6 43.998 9.68403 43.998 14.2103L44 19.5649C44 19.9573 43.842 20.3378
43.562 20.6152C43.28 20.8946 42.9 21.0512 42.5 21.0512C40.858 21.0512 39.522 22.375 39.522
24.002C39.522 25.629 40.858 26.9528 42.5 26.9528C43.328 26.9528 44 27.6186 44
28.4391V33.7917C44 38.318 40.284 42 35.716 42H12.286C7.718 42 4 38.318 4
33.7917V28.4391C4 27.6186 4.672 26.9528 5.5 26.9528C7.144 26.9528 8.48 25.629
8.48 24.002C8.48 22.4166 7.198 21.2236 5.5 21.2236C5.102 21.2236 4.722 21.067
4.44 20.7876C4.158 20.5082 4 20.1297 4 19.7373L4.004 14.2103C4.004 9.68403
7.72 6 12.288 6H35.712ZM24.004 16.3069C23.436 16.3069 22.928 16.6201 22.674
17.1234L21.216 20.0504L17.964 20.5201C17.402 20.5994 16.942 20.9799 16.764
21.5149C16.588 22.05 16.73 22.6286 17.138 23.021L19.496 25.296L18.94 28.5124C18.844
29.0673 19.07 29.6182 19.53 29.9491C19.79 30.1334 20.092 30.2286 20.398 30.2286C20.632
30.2286 20.868 30.1711 21.084 30.0581L24 28.5401L26.91 30.0542C27.414 30.3217 28.012
30.2801 28.47 29.9472C28.932 29.6182 29.158 29.0673 29.062 28.5124L28.504 25.296L30.862
23.021C31.272 22.6286 31.414 22.05 31.236 21.5149C31.06 20.9799 30.6 20.5994 30.044
20.5221L26.786 20.0504L25.328 17.1254C25.078 16.622 24.57 16.3089 24.004 16.3069Z"/>
</svg>
<h1 class="neon__title">Ticket 02</h1>
<p class="neon__description">Pass tickets, for full access to premium movies and series for one year.</p>
<a href="#" class="neon__button">Buy Now
<svg class="neon__button-icon" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M24.0099 4C29.3698 4 33.7763 8.21182 34 13.5486H33.9477C33.954 13.7038 33.9242 13.8583
33.8606 14H34.1729C36.6069 14 39.1557 15.687 40.1777 19.7596L40.2887 20.2401L41.8265 32.6295C42.9332
40.5315 38.6099 43.8546 32.7124 43.9953L32.3169 44H15.7371C9.74355 44 5.12509 41.8159 6.14056
33.1671L6.20981 32.6295L7.76528 20.2401C8.53228 15.8544 11.1072 14.1245 13.5882 14.0065L13.8634
14H14.0198C13.9934 13.8507 13.9934 13.698 14.0198 13.5486C14.2434 8.21182 18.65 4 24.0099
4ZM18.194 20.6586C17.2178 20.6586 16.4264 21.4731 16.4264 22.4779C16.4264 23.4826 17.2178
24.2971 18.194 24.2971C19.1702 24.2971 19.9616 23.4826 19.9616 22.4779L19.9478 22.2497C19.8387
21.3526 19.0951 20.6586 18.194 20.6586ZM29.7716 20.6586C28.7954 20.6586 28.0041 21.4731 28.0041
22.4779C28.0041 23.4826 28.7954 24.2971 29.7716 24.2971C30.7478 24.2971 31.5392 23.4826 31.5392
22.4779C31.5392 21.4731 30.7478 20.6586 29.7716 20.6586ZM23.9315 6.60477C20.0833 6.60477 16.9637
9.71365 16.9637 13.5486C16.99 13.698 16.99 13.8507 16.9637 14H30.9864C30.9308 13.8559 30.9013
13.7031 30.8993 13.5486C30.8993 9.71365 27.7797 6.60477 23.9315 6.60477Z"/>
</svg>
</a>
</div>
<div class="neon__card">
<svg class="neon__icon" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M35.712 6C40.28 6 43.998 9.68403 43.998 14.2103L44 19.5649C44 19.9573 43.842 20.3378
43.562 20.6152C43.28 20.8946 42.9 21.0512 42.5 21.0512C40.858 21.0512 39.522 22.375 39.522
24.002C39.522 25.629 40.858 26.9528 42.5 26.9528C43.328 26.9528 44 27.6186 44
28.4391V33.7917C44 38.318 40.284 42 35.716 42H12.286C7.718 42 4 38.318 4
33.7917V28.4391C4 27.6186 4.672 26.9528 5.5 26.9528C7.144 26.9528 8.48 25.629
8.48 24.002C8.48 22.4166 7.198 21.2236 5.5 21.2236C5.102 21.2236 4.722 21.067
4.44 20.7876C4.158 20.5082 4 20.1297 4 19.7373L4.004 14.2103C4.004 9.68403
7.72 6 12.288 6H35.712ZM24.004 16.3069C23.436 16.3069 22.928 16.6201 22.674
17.1234L21.216 20.0504L17.964 20.5201C17.402 20.5994 16.942 20.9799 16.764
21.5149C16.588 22.05 16.73 22.6286 17.138 23.021L19.496 25.296L18.94 28.5124C18.844
29.0673 19.07 29.6182 19.53 29.9491C19.79 30.1334 20.092 30.2286 20.398 30.2286C20.632
30.2286 20.868 30.1711 21.084 30.0581L24 28.5401L26.91 30.0542C27.414 30.3217 28.012
30.2801 28.47 29.9472C28.932 29.6182 29.158 29.0673 29.062 28.5124L28.504 25.296L30.862
23.021C31.272 22.6286 31.414 22.05 31.236 21.5149C31.06 20.9799 30.6 20.5994 30.044
20.5221L26.786 20.0504L25.328 17.1254C25.078 16.622 24.57 16.3089 24.004 16.3069Z"/>
</svg>
<h1 class="neon__title">Ticket 03</h1>
<p class="neon__description">Pass tickets, for full access to premium movies and series for one year.</p>
<a href="#" class="neon__button">Buy Now
<svg class="neon__button-icon" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M24.0099 4C29.3698 4 33.7763 8.21182 34 13.5486H33.9477C33.954 13.7038 33.9242 13.8583
33.8606 14H34.1729C36.6069 14 39.1557 15.687 40.1777 19.7596L40.2887 20.2401L41.8265 32.6295C42.9332
40.5315 38.6099 43.8546 32.7124 43.9953L32.3169 44H15.7371C9.74355 44 5.12509 41.8159 6.14056
33.1671L6.20981 32.6295L7.76528 20.2401C8.53228 15.8544 11.1072 14.1245 13.5882 14.0065L13.8634
14H14.0198C13.9934 13.8507 13.9934 13.698 14.0198 13.5486C14.2434 8.21182 18.65 4 24.0099
4ZM18.194 20.6586C17.2178 20.6586 16.4264 21.4731 16.4264 22.4779C16.4264 23.4826 17.2178
24.2971 18.194 24.2971C19.1702 24.2971 19.9616 23.4826 19.9616 22.4779L19.9478 22.2497C19.8387
21.3526 19.0951 20.6586 18.194 20.6586ZM29.7716 20.6586C28.7954 20.6586 28.0041 21.4731 28.0041
22.4779C28.0041 23.4826 28.7954 24.2971 29.7716 24.2971C30.7478 24.2971 31.5392 23.4826 31.5392
22.4779C31.5392 21.4731 30.7478 20.6586 29.7716 20.6586ZM23.9315 6.60477C20.0833 6.60477 16.9637
9.71365 16.9637 13.5486C16.99 13.698 16.99 13.8507 16.9637 14H30.9864C30.9308 13.8559 30.9013
13.7031 30.8993 13.5486C30.8993 9.71365 27.7797 6.60477 23.9315 6.60477Z"/>
</svg>
</a>
</div>
</div>
</section>@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap");
/*===== VARIABLES CSS =====*/
:root {
/*========== Colors ==========*/
--body-color: #020318;
--text-color-light: #FFF;
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--biggest-font-size: 2rem;
--h1-font-size: 1.5rem;
--normal-font-size: .938rem;
--smaller-font-size: .75rem;
/*========== Box, Drop & Text Shadow ==========*/
--box-shadow-inset: inset 0 22px 56px -36px rgba(255, 255, 255, .5),
inset 0 4px 5px -4px rgba(255, 255, 255, 1),
inset 0 -31px 34px -32px rgba(96, 68, 144, .3),
inset 0 39px 50px -34px rgba(202, 172, 255, .3),
inset 0 2px 9px rgba(154, 146, 210, .3),
inset 0 1px 10px rgba(227, 222, 255, .2);
--drop-shadow: 0 0 8px rgba(161, 165, 247, .8);
--text-shadow: 0 0 8px rgba(161, 165, 247, .8);
--box-shadow-inset-button: inset 0 2px 7px -9px rgba(255, 255, 255, .5),
inset 0 1px 2px -1px rgba(255, 255, 255, 1),
inset 0 -20px 16px -32px rgba(96, 68, 144, .3),
inset 0 28px 25px -24px rgba(202, 172, 255, .3),
inset 0 1px 4px rgba(154, 146, 210, .3),
inset 0 1px 10px rgba(227, 222, 255, .2);
/*========== Box, Drop & Text Shadow Hover ==========*/
--box-shadow-inset-hover: inset 0 19px 28px -18px rgba(255, 255, 255, .5),
inset 0 4px 6px -3px rgba(255, 255, 255, 1),
inset 0 -51px 44px -42px rgba(96, 68, 144, .3),
inset 0 59px 60px -32px rgba(202, 172, 255, .3),
inset 0 4px 16px rgba(154, 146, 210, .3),
inset 0 2px 25px rgba(227, 222, 255, .23);
--drop-shadow-hover: 0 0 14px rgba(161, 165, 247, .8);
--text-shadow-hover: 0 0 14px rgba(161, 165, 247, .8);
--box-shadow-inset-button-hover: inset 0 4px 7px -4px rgba(255, 255, 255, .5),
inset 0 1px 2px -1px rgba(255, 255, 255, 1),
inset 0 -20px 16px -32px rgba(96, 68, 144, .3),
inset 0 28px 25px -20px rgba(202, 172, 255, .3),
inset 0 1px 4px rgba(154, 146, 210, .3),
inset 0 1px 16px rgba(227, 222, 255, .2);
/*========== Filter Blur ==========*/
--filter-blur: blur(100px);
}
@media screen and (min-width: 1024px) {
:root {
--normal-font-size: 1rem;
}
}
/*========== BASE ==========*/
*, ::before, ::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
}
h1, p {
margin: 0;
}
a {
text-decoration: none;
}
/*========== LAYAOUT ==========*/
.bd-container {
max-width: 1024px;
margin-left: 1.5rem;
margin-right: 1.5rem;
}
/*========== CARD NEON ==========*/
.neon,
.neon__container{
display: grid;
align-items: center;
}
.neon {
padding: 2.5rem 0;
}
.neon__container {
grid-template-columns: repeat(auto-fit, minmax(312px, 1fr));
row-gap: 3.5rem;
column-gap: 2.5rem;
}
.neon__card {
background: rgba(255, 255, 255, 0.01);
color: var(--text-color-light);
box-shadow: var(--box-shadow-inset);
backdrop-filter: var(--filter-blur);
padding: 3.5rem 1.5rem 2rem;
border-radius: 3rem;
text-align: center;
}
.neon__icon {
width: 120px;
fill: var(--text-color-light);
filter: drop-shadow(var(--drop-shadow));
margin-bottom: .25rem;
}
.neon__title, .neon__description {
text-shadow: var(--text-shadow);
}
.neon__title {
font-size: var(--biggest-font-size);
margin-bottom: .25rem;
}
.neon__description {
text-align: initial;
margin-bottom: 1.5rem;
}
.neon__button-icon {
width: 1.2rem;
margin-left: .5rem;
fill: var(--text-color-light);
filter: drop-shadow(var(--drop-shadow));
}
.neon__button {
box-shadow: var(--box-shadow-inset-button);
color: var(--text-color-light);
text-shadow: var(--text-shadow);
display: flex;
justify-content: center;
padding: 1.25rem;
border-radius: 1rem;
}
.neon__button:hover {
box-shadow: var(--box-shadow-inset-button-hover);
}
/* Card neon hover */
.neon__card:hover {
box-shadow: var(--box-shadow-inset-hover);
}
.neon__card:hover .neon__icon {
filter: drop-shadow(var(--drop-shadow-hover));
}
.neon__card:hover .neon__title,
.neon__card:hover .neon__description {
text-shadow: var(--text-shadow-hover);
}
.neon__card,
.neon__icon,
.neon__title,
.neon__description,
.neon__button {
transition: .3s;
}
/*========== MEDIA QUERIES ==========*/
/* For small devices */
@media screen and (max-width: 359px) {
.neon__container {
grid-template-columns: 1fr;
}
.neon__card {
padding: 2rem 1rem 1.5rem;
border-radius: 2rem;
}
.neon__icon {
width: 80px;
}
.neon__title {
font-size: var(--h1-font-size);
}
.neon__description {
font-size: var(--smaller-font-size);
}
.neon__button {
padding: 1rem;
font-size: var(--smaller-font-size);
border-radius: .6rem;
}
.neon__button-icon {
width: 1rem;
}
}
/* For long screens */
@media screen and (min-width: 1024px) {
.bd-container {
margin-left: auto;
margin-right: auto;
}
.neon {
height: 100vh;
}
}Scss
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap');
/*===== VARIABLES CSS =====*/
:root{
/*========== Colors ==========*/
--body-color: #020318;
--text-color-light: #FFF;
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--biggest-font-size: 2rem;
--h1-font-size: 1.5rem;
--normal-font-size: .938rem;
--smaller-font-size: .75rem;
@media screen and (min-width: 1024px){
--normal-font-size: 1rem;
}
/*========== Box, Drop & Text Shadow ==========*/
--box-shadow-inset: inset 0 22px 56px -36px rgba(255, 255, 255, .5),
inset 0 4px 5px -4px rgba(255, 255, 255, 1),
inset 0 -31px 34px -32px rgba(96, 68, 144, .3),
inset 0 39px 50px -34px rgba(202, 172, 255, .3),
inset 0 2px 9px rgba(154, 146, 210, .3),
inset 0 1px 10px rgba(227, 222, 255, .2);;
--drop-shadow: 0 0 8px rgba(161, 165, 247, .8);
--text-shadow: 0 0 8px rgba(161, 165, 247, .8);
--box-shadow-inset-button: inset 0 2px 7px -9px rgba(255, 255, 255, .5),
inset 0 1px 2px -1px rgba(255, 255, 255, 1),
inset 0 -20px 16px -32px rgba(96, 68, 144, .3),
inset 0 28px 25px -24px rgba(202, 172, 255, .3),
inset 0 1px 4px rgba(154, 146, 210, .3),
inset 0 1px 10px rgba(227, 222, 255, .2);
/*========== Box, Drop & Text Shadow Hover ==========*/
--box-shadow-inset-hover: inset 0 19px 28px -18px rgba(255, 255, 255, .5),
inset 0 4px 6px -3px rgba(255, 255, 255, 1),
inset 0 -51px 44px -42px rgba(96, 68, 144, .3),
inset 0 59px 60px -32px rgba(202, 172, 255, .3),
inset 0 4px 16px rgba(154, 146, 210, .3),
inset 0 2px 25px rgba(227, 222, 255, .23);
--drop-shadow-hover: 0 0 14px rgba(161, 165, 247, .8);
--text-shadow-hover: 0 0 14px rgba(161, 165, 247, .8);
--box-shadow-inset-button-hover: inset 0 4px 7px -4px rgba(255, 255, 255, .5),
inset 0 1px 2px -1px rgba(255, 255, 255, 1),
inset 0 -20px 16px -32px rgba(96, 68, 144, .3),
inset 0 28px 25px -20px rgba(202, 172, 255, .3),
inset 0 1px 4px rgba(154, 146, 210, .3),
inset 0 1px 16px rgba(227, 222, 255, .2);
/*========== Filter Blur ==========*/
--filter-blur: blur(100px)
}
/*========== BASE ==========*/
*,::before,::after{
box-sizing: border-box;
}
body{
margin: 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
}
h1,p{
margin: 0;
}
a{
text-decoration: none;
}
/*========== LAYAOUT ==========*/
.bd-container{
max-width: 1024px;
margin-left: 1.5rem;
margin-right: 1.5rem;
}
/*========== CARD NEON ==========*/
.neon{
display: grid;
align-items: center;
padding: 2.5rem 0;
&__container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(312px, 1fr));
align-items: center;
row-gap: 3.5rem;
column-gap: 2.5rem;
}
&__card{
background: rgba(255,255,255,.01);
color: var(--text-color-light);
box-shadow: var(--box-shadow-inset);
backdrop-filter: var(--filter-blur);
padding: 3.5rem 1.5rem 2rem;
border-radius: 3rem;
text-align: center;
}
&__icon{
width: 120px;
fill: var(--text-color-light);
filter: drop-shadow(var(--drop-shadow));
margin-bottom: .25rem;
}
&__title,
&__description{
text-shadow: var(--text-shadow);
}
&__title{
font-size: var(--biggest-font-size);
margin-bottom: .25rem;
}
&__description{
text-align: initial;
margin-bottom: 1.5rem;
}
&__button{
&-icon{
width: 1.2rem;
margin-left: .5rem;
fill: var(--text-color-light);
filter: drop-shadow(var(--drop-shadow));
}
box-shadow: var(--box-shadow-inset-button);
color: var(--text-color-light);
text-shadow: var(--text-shadow);
display: flex;
justify-content: center;
padding: 1.25rem;
border-radius: 1rem;
&:hover{
box-shadow: var(--box-shadow-inset-button-hover);
}
}
/* Card neon hover */
&:hover{
box-shadow: var(--box-shadow-inset-hover);
}
&:hover .neon__icon{
filter: drop-shadow(var(--drop-shadow-hover));
}
&:hover .neon__title,
&:hover .neon__description{
text-shadow: var(--text-shadow-hover);
}
&__card,
&__icon,
&__title,
&__description,
&__button{
transition: .3s;
}
}
/*========== MEDIA QUERIES ==========*/
/* For small devices */
@media screen and (max-width: 359px) {
.neon{
&__container{
grid-template-columns: 1fr;
}
&__card{
padding: 2rem 1rem 1.5rem;
border-radius: 2rem;
}
&__icon{
width: 80px;
}
&__title{
font-size: var(--h1-font-size);
}
&__description{
font-size: var(--smaller-font-size);
}
&__button{
padding: 1rem;
font-size: var(--smaller-font-size);
border-radius: .6rem;
&-icon{
width: 1rem;
}
}
}
}
/* For long screens */
@media screen and (min-width: 1024px){
.bd-container{
margin-left: auto;
margin-right: auto;
}
.neon{
height: 100vh;
}
}Неоновые карточки для сайта
- Красивые неоновые стеклянные карты с анимацией для любого раздела сайта созданные на HTML и CSS.
Открыть элемент
<section class="card">
<div class="card__circle card__circle1"></div>
<div class="card__circle card__circle2"></div>
<div class="card__container bd-container">
<div class="card__glass">
<img src="assets/img/img1.jpg" alt="" class="card__img">
<div class="card__data">
<h3 class="card__title">Alina Morton</h3>
<span class="card__profession">Web Developer</span>
</div>
<a href="#" class="card__button">Know more</a>
<div class="card__social">
<a href="#" class="card__link"><i class='bx bxl-instagram' ></i></a>
<a href="#" class="card__link"><i class='bx bxl-facebook'></i></a>
<a href="#" class="card__link"><i class='bx bxl-twitter' ></i></a>
</div>
</div>
<div class="card__glass">
<img src="assets/img/img2.jpg" alt="" class="card__img">
<div class="card__data">
<h3 class="card__title">Robbi Hawkins</h3>
<span class="card__profession">Product Designer</span>
</div>
<a href="#" class="card__button">Know more</a>
<div class="card__social">
<a href="#" class="card__link"><i class='bx bxl-instagram' ></i></a>
<a href="#" class="card__link"><i class='bx bxl-facebook'></i></a>
<a href="#" class="card__link"><i class='bx bxl-twitter' ></i></a>
</div>
</div>
<div class="card__glass">
<img src="assets/img/img3.jpg" alt="" class="card__img">
<div class="card__data">
<h3 class="card__title">Davidson Bass</h3>
<span class="card__profession">Ui/Ux Design</span>
</div>
<a href="#" class="card__button">Know more</a>
<div class="card__social">
<a href="#" class="card__link"><i class='bx bxl-instagram' ></i></a>
<a href="#" class="card__link"><i class='bx bxl-facebook'></i></a>
<a href="#" class="card__link"><i class='bx bxl-twitter' ></i></a>
</div>
</div>
</div>
</section>@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');
/*========== VARIABLES CSS ==========*/
:root {
/*========== Colors ==========*/
--first-color: #4D49BF;
--second-color: #05DBF2;
--body-color: #DFE9F2;
--title-color: #1C1C22;
--text-color: #58576B;
/*========== Font and typography ==========*/
--body-font: 'Montserrat', sans-serif;
--normal-font-size: .938rem;
--h3-font-size: 1.125rem;
--small-font-size: .75rem;
}
@media screen and (min-width: 968px) {
:root {
--normal-font-size: 1rem;
--h3-font-size: 1.25rem;
--small-font-size: .813rem;
}
}
/*========== BASE ==========*/
*,::before,::after{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
}
h3{
margin: 0;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
}
.bd-container{
max-width: 968px;
width: calc(100% - 3rem);
margin-left: 1.5rem;
margin-right: 1.5rem;
}
/*========== CARD GLASS ==========*/
.card{
position: relative;
overflow: hidden;
padding: 3rem 0;
background-color: var(--body-color);
}
.card__container{
display: grid;
gap: 1.5rem;
}
.card__glass{
position: relative;
overflow: hidden;
text-align: center;
padding: 2.5rem;
background: linear-gradient(130deg,
rgba(251,251,254,.6),
rgba(251,251,254,.2));
box-shadow: inset 2px 2px 1px rgba(251,251,254,.3)
inset -2px -2px 1px rgba(251,251,254,.2);
border-radius: 1.5rem;
backdrop-filter: blur(10px);
}
.card__img{
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #F4F4FB;
margin-bottom: 1rem;
}
.card__data{
margin-bottom: 1.5rem;
}
.card__title{
font-size: var(--h3-font-size);
color: var(--title-color);
font-weight: 600;
margin-bottom: .25rem;
}
.card__profession{
font-size: var(--small-font-size);
color: var(--text-color);
font-weight: 500;
}
.card__button{
display: inline-block;
background: linear-gradient(130deg,
rgba(251,251,254,.9),
rgba(251,251,254,.2));
padding: .75rem 1.5rem;
border-radius: .5rem;
color: var(--title-color);
font-weight: 500;
transition: .4s;
}
.card__button:hover{
background: linear-gradient(130deg,
rgba(251,251,254,1),
rgba(251,251,254,.4));
}
.card__social{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.card__link{
display: block;
font-size: 1.35rem;
color: var(--title-color);
margin: 1rem 0;
transform: translateX(-5rem);
}
.card__link:nth-child(1){
transition: .2s;
}
.card__link:nth-child(2){
transition: .5s;
}
.card__link:nth-child(3){
transition: .7s;
}
.card__glass:hover .card__link{
transform: translateX(-1.5rem);
}
.card__circle{
position: absolute;
width: 250px;
height: 250px;
background: linear-gradient(130deg,
rgba(77,73,191,.8),
rgba(255,255,255,.2));
border-radius: 50%;
}
.card__circle1{
top: 20%;
left: -20%;
}
.card__circle2{
bottom: -5%;
right: -25%;
background: linear-gradient(130deg,
rgba(5,219,242,.8),
rgba(255,255,255,.2));
}
/*========== MEDIA QUERIES ==========*/
@media screen and (min-width: 568px){
.card__container{
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 768px){
.bd-container{
margin-left: auto;
margin-right: auto;
}
.card{
padding: 0;
}
.card__container{
height: 100vh;
grid-template-columns: repeat(3, 1fr);
align-content: center;
}
.card__circle1{
left: 5%;
top: 12%;
}
.card__circle2{
right: 8%;
bottom: 15%;
}
}@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');
/*========== VARIABLES CSS ==========*/
:root{
/*========== Colors ==========*/
--first-color: #4D49BF;
--second-color: #05DBF2;
--body-color: #DFE9F2;
--title-color: #1C1C22;
--text-color: #58576B;
/*========== Font and typography ==========*/
--body-font: 'Montserrat', sans-serif;
--normal-font-size: .938rem;
--h3-font-size: 1.125rem;
--small-font-size: .75rem;
@media screen and (min-width: 968px){
--normal-font-size: 1rem;
--h3-font-size: 1.25rem;
--small-font-size: .813rem;
}
}
/*========== BASE ==========*/
*,::before,::after{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
}
h3{
margin: 0;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
}
.bd-container{
max-width: 968px;
width: calc(100% - 3rem);
margin-left: 1.5rem;
margin-right: 1.5rem;
}
/*========== CARD GLASS ==========*/
.card{
position: relative;
overflow: hidden;
padding: 3rem 0;
bbackground-color: var(--body-color);
&__container{
display: grid;
gap: 1.5rem;
}
&__glass{
position: relative;
overflow: hidden;
text-align: center;
padding: 2.5rem;
background: linear-gradient(130deg,
rgba(251, 251, 254, .6),
rgba(251, 251, 254, .2));
box-shadow: inset 2px 2px 1px rgba(251, 251, 254, .3),
inset -2px -2px 1px rgba(251, 251, 254, .2);
border-radius: 1.5rem;
backdrop-filter: blur(10px);
&:hover .card__link{
transform: translateX(-1.5rem);
}
}
&__img{
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #F4F4FB;
margin-bottom: 1rem;
}
&__data{
margin-bottom: 1.5rem;
}
&__title{
font-size: var(--h3-font-size);
color: var(--title-color);
font-weight: 600;
margin-bottom: .25rem;
}
&__profession{
font-size: var(--small-font-size);
color: var(--text-color);
font-weight: 500;
}
&__button{
display: inline-block;
background: linear-gradient(130deg,
rgba(251, 251, 254, .9),
rgba(251, 251, 254, .2));
padding: .75rem 1.5rem;
border-radius: .5rem;
color: var(--title-color);
font-weight: 500;
transition: .4s;
&:hover{
background: linear-gradient(130deg,
rgba(255, 255, 255, 1),
rgba(255, 255, 255, .4));
}
}
&__social{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
&__link{
display: block;
font-size: 1.35rem;
color: var(--title-color);
margin: 1rem 0;
transform: translateX(-5rem);
&:nth-child(1){
transition: .2s;
}
&:nth-child(2){
transition: .5s;
}
&:nth-child(3){
transition: .7s;
}
}
&__circle{
position: absolute;
width: 250px;
height: 250px;
background: linear-gradient(130deg,
rgba(77, 73, 191, .8),
rgba(255, 255, 255, .2));
border-radius: 50%;
}
&__circle1{
top: 20%;
left: -20%;
}
&__circle2{
bottom: -5%;
right: -25%;
background: linear-gradient(130deg,
rgba(5, 219, 242, .8),
rgba(255, 255, 255, .2));
}
}
/*========== MEDIA QUERIES ==========*/
@media screen and (min-width: 568px){
.card__container{
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 768px){
.bd-container{
margin-left: auto;
margin-right: auto;
}
.card{
padding: 0;
&__container{
height: 100vh;
grid-template-columns: repeat(3, 1fr);
align-content: center;
}
&__circle1{
left: 5%;
top: 12%;
}
&__circle2{
right: 8%;
bottom: 15%;
}
}
}Адаптивные карточки для сайта
- Простые, но красивые адаптивные профильные карточки для раздела страницы О нас в стиле пользовательского интерфейса Glass Morphism с использованием Html и Css.
Открыть элемент
Список карт для сайта
<div class="card">
<div class="card-image">
<img src="Ваше фото" alt="Blog image">
</div>
<div class="card-body">
<p class="title">Lorem ipsum dolor sit amet consectetur</p>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt eaque earum ex repellendus vitae ea et soluta. <span>more...</span></p>
</div>
<div class="card-footer">
<div class="author">
<img src="Ваше фото" alt="author photo">
<p>Marion Deer</p>
</div>
<div class="duration">
<i class="far fa-clock"></i>
<p>15 min</p>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="Ваше фото" alt="Blog image">
</div>
<div class="card-body">
<p class="title">Lorem ipsum dolor sit amet consectetur</p>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt eaque earum ex repellendus vitae ea et soluta. <span>more...</span></p>
</div>
<div class="card-footer">
<div class="author">
<img src="Ваше фото" alt="author photo">
<p>Jhon Spencer</p>
</div>
<div class="duration">
<i class="far fa-clock"></i>
<p>7 min</p>
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="Ваше фото" alt="Blog image">
</div>
<div class="card-body">
<p class="title">Lorem ipsum dolor sit amet consectetur</p>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt eaque earum ex repellendus vitae ea et soluta. <span>more...</span></p>
</div>
<div class="card-footer">
<div class="author">
<img src="Ваше фото" alt="author photo">
<p>Marc McGrew</p>
</div>
<div class="duration">
<i class="far fa-clock"></i>
<p>12 min</p>
</div>
</div>
</div>body {
min-height: 100vh;
width: 100%;
background-color: #e4e4e4;
display: flex;
/* Responsivness */
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.card {
width: 320px;
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.15);
padding: 8px 16px;
margin: 48px 24px;
}
.card-image {
width: 100%;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 15px 35px -15px rgba(0, 0, 0, 0.5),
0 5px 20px 0 rgba(0, 0, 0, 0.1);
transform: translateY(-32px);
}
.card-image img {
width: 100%;
transform: scale(1.05);
}
/* Card body */
.card-body {
padding: 0 12px;
}
.title {
font-size: 1.4em;
color: #333;
font-weight: bold;
letter-spacing: 0.8px;
margin-bottom: 12px;
}
.content {
line-height: 24px;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.content span {
cursor: pointer;
color: #03b43e;
font-weight: bold;
}
/* Footer */
.card-footer {
width: 100%;
padding: 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.author img {
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.15);
margin-right: 12px;
}
.author,
.duration {
display: flex;
align-items: center;
}
.duration i {
margin-right: 4px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
Список карт для сайта
Открыть элемент
Профильные карты для сайта
<div class="card">
<div class="card-image">
<img src="./images/profile1.jpg" alt="Profile image">
</div>
<p class="name">Julie Watson</p>
<p>UX / UI developer</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur delectus, mollitia tenetur libero quam recusandae alias in incidunt.</p>
<div class="socials">
<button class="github"><i class="fab fa-github"></i></button>
<button class="twitter"><i class="fab fa-twitter"></i></button>
<button class="pinterest"><i class="fab fa-pinterest-p"></i></button>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="./images/profile2.jpg" alt="Profile image">
</div>
<p class="name">Marc McKnew</p>
<p>Front-End developer</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur delectus, mollitia tenetur libero quam recusandae alias in incidunt.</p>
<div class="socials">
<button class="github"><i class="fab fa-github"></i></button>
<button class="pinterest"><i class="fab fa-pinterest-p"></i></button>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="./images/profile3.jpg" alt="Profile image">
</div>
<p class="name">Jenny McKnew</p>
<p>Back-End developer</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur delectus, mollitia tenetur libero quam recusandae alias in incidunt.</p>
<div class="socials">
<button class="github"><i class="fab fa-github"></i></button>
<button class="twitter"><i class="fab fa-twitter"></i></button>
</div>
</div>body {
min-height: 100vh;
width: 100%;
background-color: #e4e4e4;
display: flex;
/* Responsive behaviour */
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 40px 16px;
}
.card {
position: relative;
width: 300px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.15);
padding: 16px;
margin: 56px 24px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.card-image {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 15px 35px -15px rgba(0, 0, 0, 0.5),
0 5px 20px 0 rgba(0, 0, 0, 0.1);
}
.card-image img {
width: 100%;
transform: scale(1.2);
}
p {
line-height: 24px;
letter-spacing: 0.5px;
margin-bottom: 12px;
text-align: center;
}
.name {
margin-top: 80px;
font-size: 1.4em;
color: #333;
font-weight: bold;
letter-spacing: 0.8px;
margin-bottom: 8px;
}
.socials {
display: flex;
align-items: center;
justify-content: center;
}
button {
margin: 12px 8px;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
cursor: pointer;
transition: opacity 0.4s;
}
button:hover {
opacity: 0.8;
}
button i {
color: #fff;
font-size: 1.4em;
}
/* Social media colors */
button.github {
background-color: #24292e;
}
button.twitter {
background-color: #1da1f2;
}
button.pinterest {
background-color: #d3263a;
} Профильные карты для сайта
Открыть элемент
Blog post card для сайта
<div class="card">
<div class="image" style="background-image: url(./images/davide-pietralunga-m-4HF0tMApI-unsplash.jpg);"></div>
<div class="content">
<div class="info">
<i class="bx bx-heart"></i>
<span>123</span>
<i class="bx bx-comment"></i>
<span>12</span>
<i class="bx bx-share bx-flip-horizontal"></i>
<span>221</span>
</div>
<div class="header">
Don't wish it easier, wish you were better
</div>
<div class="footer">
<div class="preview">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore excepturi officiis ab ipsum vero aperiam temporibus repellendus facilis dolor fugiat, libero nemo quidem. Aut incidunt commodi expedita, tenetur blanditiis quaerat?
</div>
<button class="btn">
Read more
</button>
</div>
</div>
</div>
<div class="card">
<div class="image" style="background-image: url(./images/brooke-cagle-ICFPv3xJY90-unsplash.jpg);"></div>
<div class="content">
<div class="info">
<i class="bx bx-heart"></i>
<span>123</span>
<i class="bx bx-comment"></i>
<span>12</span>
<i class="bx bx-share bx-flip-horizontal"></i>
<span>221</span>
</div>
<div class="header">
You don't find the happy life. You make it
</div>
<div class="footer">
<div class="preview">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore excepturi officiis ab ipsum vero aperiam temporibus repellendus facilis dolor fugiat, libero nemo quidem. Aut incidunt commodi expedita, tenetur blanditiis quaerat? Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur aperiam vel unde quam consequuntur veritatis libero, corporis asperiores perferendis tempore vitae ducimus illo et iste eos incidunt officia neque. Tenetur!
</div>
<button class="btn">
Read more
</button>
</div>
</div>
</div>.card {
height: 500px;
width: 400px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
position: relative;
overflow: hidden;
margin-right: 50px;
}
.card:hover .image {
transform: scale(1.3);
}
.card .image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: transform 0.5s ease-in-out;
}
.card .image::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), black);
}
.card .content {
position: absolute;
left: 0;
width: 100%;
padding: 20px;
color: #d2d2d2;
transition: bottom 0.5s ease-in-out;
}
.card .content .info {
font-size: 15px;
display: flex;
align-items: center;
}
.card .content .info span {
margin: 0 15px 0 5px;
}
.card .content .header {
font-size: 30px;
}
.card .content .footer .preview {
padding: 20px 0;
font-size: 13px;
line-height: 21px;
}
.btn {
cursor: pointer;
background-color: transparent;
height: 40px;
width: 120px;
border: none;
border-left: 2px solid #d2d2d2;
border-right: 2px solid #d2d2d2;
outline: none;
color: #d2d2d2;
font-size: 15px;
position: relative;
}
.btn span {
display: inline-block;
background-color: #d2d2d2;
position: absolute;
transition: all 0.5s ease-in-out;
height: 2px;
}
.btn span:nth-child(1) {
width: 70%;
top: 0;
left: 0;
}
.btn span:nth-child(2) {
width: 20%;
top: 0;
right: 0;
}
.btn span:nth-child(3) {
width: 20%;
bottom: 0;
left: 0;
}
.btn span:nth-child(4) {
width: 70%;
bottom: 0;
right: 0;
}
.btn:hover span:nth-child(1), .btn:hover span:nth-child(4) {
width: 20%;
}
.btn:hover span:nth-child(2), .btn:hover span:nth-child(3) {
width: 70%;
}
window.onload = () => {
document.querySelectorAll('.btn').forEach(btn => {
btn.innerHTML = `
<span></span>
<span></span>
<span></span>
<span></span>
${btn.textContent}
`
})
// card hover effect
document.querySelectorAll('.card').forEach(card => {
let content = card.querySelector('.content')
let footer = content.querySelector('.footer')
content.style.bottom = `-${footer.offsetHeight}px`
// card hover
card.addEventListener('mouseover', () => {
content.style.bottom = `0`
})
card.addEventListener('mouseleave', () => {
content.style.bottom = `-${footer.offsetHeight}px`
})
})
}<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>Ccss
$bodyBg: #32373e;
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Noto Sans TC", sans-serif;
height: 100vh;
background-color: $bodyBg;
display: flex;
align-items: center;
justify-content: center;
}
.card {
height: 500px;
width: 400px;
box-shadow: rgba($color: #000000, $alpha: 0.35) 0px 5px 15px;
position: relative;
overflow: hidden;
margin-right: 50px;
&:hover .image {
transform: scale(1.3);
}
.image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: transform 0.5s ease-in-out;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to bottom,
rgb(255 255 255 / 0%),
rgb(0 0 0)
);
}
}
.content {
position: absolute;
left: 0;
width: 100%;
padding: 20px;
color: #d2d2d2;
transition: bottom 0.5s ease-in-out;
.info {
font-size: 15px;
display: flex;
align-items: center;
& span {
margin: 0 15px 0 5px;
}
}
.header {
font-size: 30px;
}
.footer {
.preview {
padding: 20px 0;
font-size: 13px;
line-height: 21px;
}
}
}
}
.btn {
cursor: pointer;
$border: 2px solid #d2d2d2;
background-color: transparent;
height: 40px;
width: 120px;
border: none;
border-left: $border;
border-right: $border;
outline: none;
color: #d2d2d2;
font-size: 15px;
position: relative;
& span {
display: inline-block;
background-color: #d2d2d2;
position: absolute;
transition: all 0.5s ease-in-out;
height: 2px;
&:nth-child(1) {
width: 70%;
top: 0;
left: 0;
}
&:nth-child(2) {
width: 20%;
top: 0;
right: 0;
}
&:nth-child(3) {
width: 20%;
bottom: 0;
left: 0;
}
&:nth-child(4) {
width: 70%;
bottom: 0;
right: 0;
}
}
&:hover span:nth-child(1),
&:hover span:nth-child(4) {
width: 20%;
}
&:hover span:nth-child(2),
&:hover span:nth-child(3) {
width: 70%;
}
}Blog post card для сайта
Открыть элемент
Анимированный скролл для сайта
<div id="fullpage">
<div class="section" id="section1">
<div class="contain">
<div class="hero-text">
<div class="hero-title">
<span>BOOK NOW</span>
<h1>Winter Special</h1>
</div>
<div>
<span class="cat">JUST FOR YOU</span>
<h3>SCROLL DOWN FOR SOME MAGIC</h3>
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="contain">
<div class="description">
<span class="cat">About Us</span>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dolores ducimus inventore architecto unde voluptates ipsam magni dicta illum aliquid quod necessitatibus, labore quibusdam odio. Sapiente ipsam ad dolorum odit animi officia maxime dolorem aliquid eveniet quidem a, quasi repudiandae consequuntur quod exercitationem voluptatem ducimus et tempore? Fugiat quod a magni totam esse voluptate quis optio, exercitationem nihil similique doloribus soluta tenetur. Facilis, labore doloremque explicabo culpa repudiandae neque temporibus exercitationem consectetur modi doloribus est dolorem, ullam laudantium voluptatem, dolores ducimus expedita sint accusamus voluptates consequatur in tempore optio! Alias ab officia corporis iure eveniet exercitationem delectus autem odit explicabo!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dolores ducimus inventore architecto unde voluptates ipsam magni dicta illum aliquid quod necessitatibus, labore quibusdam odio. Sapiente ipsam ad dolorum odit animi officia maxime dolorem aliquid eveniet quidem a, quasi repudiandae consequuntur quod exercitationem voluptatem ducimus et tempore? Fugiat quod a magni totam esse voluptate quis optio, exercitationem nihil similique doloribus soluta tenetur. Facilis, labore doloremque explicabo culpa repudiandae neque temporibus exercitationem consectetur modi doloribus est dolorem, ullam laudantium voluptatem, dolores ducimus expedita sint accusamus voluptates consequatur in tempore optio! Alias ab officia corporis iure eveniet exercitationem delectus autem odit explicabo!
</p>
</div>
</div>
</div>
<div class="section" id="section3">
<div class="contain">
<span class="cat margin-bottom">Gallery</span>
<div class="image-one">
<img src="images/bg1.png" alt="">
</div>
</div>
</div>
<div id="bg">
<img src="images/bg3.png" alt="">
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css?family=lato:400,700,300');
html {
background-color: #dbad84;
height: 100%;
line-height: 1.5;
overflow-x: hidden;
overflow-y: scroll;
box-sizing: border-box;
color: #fff;
}
html, body {
font-family: "Lato", sans-serif;
font-size: 16px;
min-height: 100%;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
.section{
min-height: 100vh;
}
img {
max-width: 100%;
}
h1, h2, h3, h4 {
font-family: "Abril Fatface", sans-serif;
font-weight: 400;
letter-spacing: 1.5px;
}
h1 {
font-size: 9vw;
line-height: 1;
margin-top: 0;
}
.contain {
margin: 0 10%;
}
.hero-text {
width: 80%;
float: left;
}
.cat{
font-size: 18px;
letter-spacing: 2px;
position: relative;
display: inline-block;
text-transform: uppercase;
color: #FFF;
margin-top: 30px;
}
.cat:after {
position: absolute;
top: 50%;
left: 100%;
content: "";
width: 50px;
height: 1px;
background-color: #fff;
margin-left: 5px;
}
.cat.margin-bottom{
margin-bottom: 1rem;
}
.description {
letter-spacing: 1px;
width: 100%;
float: left;
margin-bottom: 1rem;
}
.description p {
font-family: "Lato", sans-serif;
font-size: 1.2rem;
}
#bg{
z-index: -1;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}
#bg img {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
max-width: 900px;
}
.image-one{
width: 80%;
float: left;
margin-right: 50%;
margin-bottom: 50px;
}
@media (min-width: 1280px) {
.description {
width: 50%;
}
}
@media (min-width: 600px) {
.hero-text {
width: 50%;
}
.image-one {
width: 100%;
padding-bottom: 20px;
}
}$(document).ready(function() {
$("#fullpage").fullpage({
anchors: ["firstPage", "secondPage", "thirdPage"],
menu: "#menu",
autoScrolling:false
// responsiveWidth: 750
});
});
// ScrollMagic: init controller
var controller = new ScrollMagic.Controller();
// Tween - Section 2
var scene = new ScrollMagic.Scene({
triggerElement: "#section2"
})
// animate color and top border in relation to scroll position
.setTween("#bg img", {
maxWidth: "1200px",
top: "30%",
left: "80%",
opacity: 0.25
}) // the tween durtion can be omitted and defaults to 1
// .addIndicators({ name: "2 (duration: 100)" }) // add indicators (requires plugin)
.addTo(controller);
// Tween - Section 3
var scene = new ScrollMagic.Scene({
triggerElement: "#section3",
duration: 300
})
// animate color and top border in relation to scroll position
.setTween("#bg img", {
top: "20%"
}) // the tween duration can be omitted and defaults to 1
// Add indicators (required plugin)
.addTo(controller);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js"></script>
Анимированный скролл для сайта
Открыть элемент
Готовые Css карточки для сайта
<div class="card-grid">
<div class="card">
<div class="card-header">123 Main St</div>
<div class="card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt expedita nulla nobis cumque quisquam. Enim perspiciatis vero laudantium nemo cum!
</div>
<div class="card-footer">
<button class="btn">Details</button>
<button class="btn btn-outline">Contact Seller</button>
</div>
</div>
<div class="card card-shadow">
<div class="card-header">123 Main St</div>
<div class="card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt expedita nulla nobis cumque quisquam. Enim perspiciatis vero laudantium nemo cum!
</div>
<div class="card-footer">
<button class="btn">Details</button>
<button class="btn btn-outline">Contact Seller</button>
</div>
</div>
<div class="card card-shadow">
<div class="card-header card-image">
<img src="https://source.unsplash.com/178j8tJrNlc" />
</div>
<div class="card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt expedita nulla nobis cumque quisquam. Enim perspiciatis vero laudantium nemo cum!
</div>
<div class="card-footer">
<button class="btn">Details</button>
<button class="btn btn-outline">Contact Seller</button>
</div>
</div>
<div class="card card-shadow">
<div class="card-header card-image">
<img src="https://source.unsplash.com/eWqOgJ-lfiI" />
</div>
<div class="card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt expedita nulla nobis cumque quisquam. Enim perspiciatis vero laudantium nemo cum!
</div>
<div class="card-footer">
<button class="btn">Details</button>
<button class="btn btn-outline">Contact Seller</button>
</div>
</div>
</div>.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
align-items: flex-start;
}
.card {
--padding: 1rem;
background: white;
border: 1px solid #777;
border-radius: .25rem;
overflow: hidden;
}
.card.card-shadow {
border: none;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2);
}
.card-header {
font-size: 1.5rem;
padding: var(--padding);
padding-bottom: 0;
margin-bottom: .5rem;
}
.card-header.card-image {
padding: 0;
overflow: hidden;
}
.card-header.card-image > img {
display: block;
width: 100%;
max-height: 200px;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
transition: 200ms transform ease-in-out;
}
.card:hover > .card-header.card-image > img {
transform: scale(1.025);
}
.card-body {
font-size: .9rem;
padding: 0 var(--padding);
}
.card-footer {
margin-top: 1rem;
padding: var(--padding);
padding-top: 0;
}
.btn {
--color: hsl(200, 50%, 50%);
background: var(--color);
color: white;
border: none;
font-size: 1rem;
padding: .5em .75em;
border-radius: .25em;
cursor: pointer;
}
.btn:hover, .btn:focus {
background: hsl(200, 50%, 60%);
}
.btn.btn-outline {
background: none;
border: 1px solid var(--color);
color: var(--color);
}
.btn.btn-outline:hover, .btn.btn-outline:focus {
background: hsl(200, 50%, 90%);
}
.btn + .btn {
margin-left: .25rem;
}<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
Готовые Css карточки для сайта
Открыть элемент
Css parallax для сайта
<div class="wrapper">
<header>
<img src="Ваше изображение" class="background">
<img src="Ваше изображение" class="foreground">
<h1 class="title">Welcome!</h1>
</header>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse facilis unde illo neque at hic quisquam, nulla consectetur, itaque maxime sit iusto aliquam culpa reiciendis eaque recusandae vitae modi, animi expedita perferendis inventore. Culpa incidunt odit dicta quibusdam ullam facilis eum magnam, consectetur voluptates praesentium, pariatur eos nihil! Natus in, autem aut facere repellat eveniet commodi illo ullam hic fugit deserunt explicabo esse atque reprehenderit optio, dicta suscipit sed! Porro fugiat numquam vel magni, iure provident consequuntur velit ut quia itaque repudiandae molestiae, nobis sequi incidunt autem! Cum impedit accusamus laboriosam eaque necessitatibus consectetur incidunt a exercitationem molestias doloribus tenetur amet, ullam at repudiandae, quos reprehenderit adipisci assumenda dolor enim voluptas natus! Assumenda praesentium voluptate culpa quidem quasi impedit unde incidunt odit velit, dolore officiis distinctio, fugit, optio sed. Quos nesciunt eius reprehenderit ipsa consectetur tempora, fugiat provident corporis perspiciatis veritatis totam temporibus voluptates soluta vitae mollitia molestias reiciendis expedita doloribus est. Maxime et fugit expedita id sed cumque harum dignissimos aperiam voluptatum quos obcaecati illo tempore consectetur, sunt perferendis eius aliquid soluta praesentium voluptatem assumenda ex fuga. Iusto, possimus? Dolores deleniti eaque, aperiam consequuntur odit culpa, architecto, quas veniam provident inventore eius. Laboriosam in reprehenderit quidem? Officiis illum molestiae, praesentium velit, illo debitis quasi fuga laborum veritatis necessitatibus fugiat cupiditate! Quia animi provident maxime numquam porro itaque! Provident, rerum. Aliquid cum quo ducimus ad? Repellat nihil, saepe beatae rerum sint eveniet voluptate officiis velit autem officia tempore deserunt sequi quod quae culpa sed. Reprehenderit eveniet ipsum nihil ipsam quam facilis, possimus modi placeat ratione soluta voluptate obcaecati error minima enim, fugiat quaerat architecto, iure dignissimos a eum quidem eos at fuga. Consectetur, quisquam at reprehenderit in exercitationem inventore incidunt dolorum quos adipisci labore? Fugiat facilis ipsum minus, officiis eos modi sequi distinctio pariatur reprehenderit accusantium labore obcaecati, recusandae saepe?</section>
</div>.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.background {
transform: translateZ(-10px) scale(2);
}
.foreground {
transform: translateZ(-5px) scale(1.5);
}
.background,
.foreground {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
}
.title {
font-size: 7rem;
color: white;
text-shadow: 0 0 5px black;;
}
section {
font-size: 2rem;
padding: 2rem;
background-color: #333;
color: white;
}Css parallax для сайта
Открыть элемент
Карточки для сайта
<div class="container">
<div class="card">
<div class="left-component">
<h6>FRON END DEVELOPMENT</h6>
<h2>HTML5</h2>
<i class="fab fa-html5"></i>
</div>
<div class="right-component">
<h2>HTML5 BASICS</h2>
<div class="difficulty">
<h4>DIFFICULTY</h4>
<h6 class="badge">BEGINNER</h6>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quis omnis velit nulla quia,
at ducimus illo atque quo nostrum numquam?
</p>
<button class="button">ENROLL</button>
</div>
</div>
<div class="card">
<div class="left-component">
<h6>FRON END DEVELOPMENT</h6>
<h2>CSS3</h2>
<i class="fab fa-css3-alt"></i>
</div>
<div class="right-component">
<h2>CSS3 BASICS</h2>
<div class="difficulty">
<h4>DIFFICULTY</h4>
<h6 class="badge">BEGINNER</h6>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quis omnis velit nulla quia,
at ducimus illo atque quo nostrum numquam?
</p>
<button class="button">ENROLL</button>
</div>
</div>
<div class="card">
<div class="left-component">
<h6>VERSION CONTROL</h6>
<h2>GITHUB</h2>
<i class="fab fa-github"></i>
</div>
<div class="right-component">
<h2>GITHUB BASICS</h2>
<div class="difficulty">
<h4>DIFFICULTY</h4>
<h6 class="badge">BEGINNER</h6>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quis omnis velit nulla quia,
at ducimus illo atque quo nostrum numquam?
</p>
<button class="button">ENROLL</button>
</div>
</div>
</div>@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap");
*,
*::before,
*::after {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
border: none;
}
body {
background: #ddb698;
font-family: "Rajdhani", sans-serif;
}
.container {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(80%, 90%))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(80%, 90%));
grid-gap: .5rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: .5rem;
margin: 1rem auto;
overflow: hidden;
}
.container .card {
position: relative;
height: 20rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #fff;
border-radius: .5rem;
-webkit-box-shadow: 0 5px 20px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 20px 1px rgba(0, 0, 0, 0.2);
margin: .5rem;
}
.container .card h6 {
opacity: .7;
letter-spacing: 2px;
}
.container .card h2 {
color: #444242;
letter-spacing: 2px;
margin: 1rem 0;
}
.container .card .right-component {
padding: 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background: #f0ecec;
border-radius: 0 0 .5rem 0;
}
.container .card .right-component h2 {
color: #fff;
position: absolute;
width: auto;
top: 0rem;
right: -1.2rem;
left: 9.2rem;
text-align: center;
background: -webkit-gradient(linear, right top, left top, from(#fe8c00), to(#f83600));
background: linear-gradient(to left, #fe8c00, #f83600);
letter-spacing: 3px;
border-radius: 0 .5rem 0 0;
padding: .8rem 1rem;
margin: 0;
}
.container .card .right-component h2::before {
position: absolute;
content: '';
right: 0px;
top: 55px;
height: 0px;
width: 0px;
border: .6rem solid #f83600a1;
border-bottom: .6rem solid transparent;
border-right: .6rem solid transparent;
}
.container .card .right-component .difficulty {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 2rem;
}
.container .card .right-component .difficulty .badge {
padding: .3rem .8rem;
border-radius: 1rem;
background: #222222;
color: #fff;
margin-left: 1rem;
}
.container .card .right-component p {
font-size: .9rem;
text-align: justify;
}
.container .card .right-component .button {
cursor: pointer;
font-family: inherit;
font-weight: bold;
border-radius: .8rem;
color: #fff;
background: -webkit-gradient(linear, right top, left top, from(#fe8c00), to(#f83600));
background: linear-gradient(to left, #fe8c00, #f83600);
padding: .7rem 1.2rem;
letter-spacing: 2px;
-ms-flex-item-align: end;
align-self: flex-end;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.container .card .right-component .button:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: .9;
}
.container .card .left-component {
background: -webkit-gradient(linear, left bottom, left top, from(#fe8c00), to(#f83600));
background: linear-gradient(to top, #fe8c00, #f83600);
color: #fff;
padding: 2rem;
max-width: 10rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-radius: .5rem 0 0 .5rem;
}
.container .card .left-component h2 {
color: #fff;
}
.container .card .left-component i {
font-size: 5rem;
color: #fff;
}
.container .card:nth-child(2) .left-component {
background: -webkit-gradient(linear, left bottom, left top, from(#1488cc), to(#2b32b2));
background: linear-gradient(to top, #1488cc, #2b32b2);
}
.container .card:nth-child(2) .right-component h2 {
background: -webkit-gradient(linear, right top, left top, from(#1488cc), to(#2b32b2));
background: linear-gradient(to left, #1488cc, #2b32b2);
}
.container .card:nth-child(2) .right-component h2::before {
border-color: #2b32b29d;
border-bottom: .6rem solid transparent;
border-right: .6rem solid transparent;
}
.container .card:nth-child(2) .right-component .button {
background: -webkit-gradient(linear, left bottom, left top, from(#1488cc), to(#2b32b2));
background: linear-gradient(to top, #1488cc, #2b32b2);
}
.container .card:nth-child(3) .left-component {
background: -webkit-gradient(linear, left top, left bottom, from(#6b0f1a), color-stop(74%, #b91372));
background: linear-gradient(to bottom, #6b0f1a 0%, #b91372 74%);
}
.container .card:nth-child(3) .right-component h2 {
background: -webkit-gradient(linear, left top, right top, from(#6b0f1a), color-stop(74%, #b91372));
background: linear-gradient(to right, #6b0f1a 0%, #b91372 74%);
left: 9rem;
}
.container .card:nth-child(3) .right-component h2::before {
border-color: #6b0f1a9a;
border-bottom: .6rem solid transparent;
border-right: .6rem solid transparent;
}
.container .card:nth-child(3) .right-component .button {
background: -webkit-gradient(linear, left top, left bottom, from(#6b0f1a), color-stop(74%, #b91372));
background: linear-gradient(to bottom, #6b0f1a 0%, #b91372 74%);
}
@media screen and (min-width: 920px) {
.container {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(47%, 48%))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(47%, 48%));
grid-gap: .5rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: .5rem;
margin: 1rem auto;
overflow: hidden;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media screen and (min-width: 1350px) {
.container {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(31%, 32.5%))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(31%, 32.5%));
grid-gap: .5rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: .5rem;
margin: 1rem auto;
overflow: hidden;
min-height: 100vh;
margin: 0;
}
}Scss
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap');
// variables
$white-color: #fff;
$black-color: rgb(68, 66, 66);
$light-background: rgb(221, 182, 152);
$font: 'Rajdhani', sans-serif;
// mixins
@mixin grid($min-value, $max-value) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax($min-value, $max-value));
grid-gap: .5rem;
justify-content: center;
padding: .5rem;
margin: 1rem auto;
overflow: hidden;
}
@mixin flex-center($content, $items, $direction) {
display: flex;
justify-content: $content;
align-items: $items;
flex-direction: $direction;
flex-wrap: wrap;
}
// base styles
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
border: none;
}
body {
background: $light-background;
font-family: $font;
}
.container {
@include grid(80%, 90%);
.card {
position: relative;
height: 20rem;
display: flex;
background: $white-color;
border-radius: .5rem;
box-shadow: 0 5px 20px 1px rgba(0,0,0, .2);
margin: .5rem;
h6 {
opacity: .7;
letter-spacing: 2px;
}
h2 {
color: $black-color;
letter-spacing: 2px;
margin: 1rem 0;
}
.right-component {
padding: 2rem;
@include flex-center(space-between, flex-start, column);
background: rgb(240, 236, 236);
border-radius: 0 0 .5rem 0;
h2 {
color: $white-color;
position: absolute;
width: auto;
top: 0rem;
right: -1.2rem;
left: 9.2rem;
text-align: center;
background: linear-gradient(to left, #fe8c00, #f83600);
letter-spacing: 3px;
border-radius: 0 .5rem 0 0;
padding: .8rem 1rem;
margin: 0;
&::before {
position: absolute;
content: '';
right: 0px;
top: 55px;
height: 0px;
width: 0px;
border: .6rem solid #f83600a1;
border-bottom: .6rem solid transparent;
border-right: .6rem solid transparent;
}
}
.difficulty {
width: 100%;
@include flex-center(space-between, center, row);
margin-top: 2rem;
.badge {
padding: .3rem .8rem;
border-radius: 1rem;
background: rgb(34, 34, 34);
color: $white-color;
margin-left: 1rem;
}
}
p {
font-size: .9rem;
text-align: justify;
}
.button {
cursor: pointer;
font-family: inherit;
font-weight: bold;
border-radius: .8rem;
color: $white-color;
background: linear-gradient(to left, #fe8c00, #f83600);
padding: .7rem 1.2rem;
letter-spacing: 2px;
align-self: flex-end;
transition: all .2s ease-in-out;
&:hover {
transform: scale(1.1);
opacity: .9;
}
}
}
.left-component {
background: linear-gradient(to top, #fe8c00, #f83600);
color: $white-color;
padding: 2rem;
max-width: 10rem;
@include flex-center(space-between, center, column);
border-radius: .5rem 0 0 .5rem;
h2 {
color: $white-color;
}
i {
font-size: 5rem;
color: $white-color;
}
}
&:nth-child(2) {
.left-component {
background: linear-gradient(to top, #1488cc, #2b32b2);
}
.right-component {
h2 {
background: linear-gradient(to left, #1488cc, #2b32b2);
&::before {
border-color: #2b32b29d;
border-bottom: .6rem solid transparent;
border-right: .6rem solid transparent;
}
}
.button {
background: linear-gradient(to top, #1488cc, #2b32b2);
}
}
}
&:nth-child(3) {
.left-component {
background: linear-gradient(to bottom, #6b0f1a 0%, #b91372 74%);
}
.right-component {
h2 {
background: linear-gradient(to right, #6b0f1a 0%, #b91372 74%);
left: 9rem;
&::before {
border-color: #6b0f1a9a;
border-bottom: .6rem solid transparent;
border-right: .6rem solid transparent;
}
}
.button {
background: linear-gradient(to bottom, #6b0f1a 0%, #b91372 74%);
}
}
}
}
@media screen and (min-width: 920px) {
@include grid(47%, 48%);
align-items: center;
}
@media screen and (min-width: 1350px) {
@include grid(31%, 32.5%);
min-height: 100vh;
margin: 0;
}
}Карточки для сайта
Открыть элемент
Parallax для сайта
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Scroll Paralax Effect</title>
</head>
<body>
<div class="container">
<section id="home" class="parallax">
<h1>Parallax</h1>
</section>
<section id="about">
<h1>Всем привет!</h1>
</section>
</div>
<script src="script.js"></script>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Ubuntu', sans-serif;
}
body {
background: #222;
}
.container {
width: 100%;
height: auto;
}
section {
display: flex;
height: 100vh;
width: 100%;
align-items: center;
justify-content: center;
}
section h1 {
color: #fff;
font-size: 10rem;
}
section#home {
background: linear-gradient(45deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)), url('bg_img.jpg');
background-size: cover;
}let parallax = document.querySelector('.parallax');
window.onscroll = () => {
let scrollTop = document.documentElement.scrollTop;
parallax.style.backgroundPositionY = scrollTop * 0.7 + 'px';
}Parallax для сайта
Открыть элемент
Parallax для сайта
<section id="first-section">
<nav>
<div class="nav-wrapper">
<h4>Ready co.</h4>
<a class="button" href="#">Sign Up</a>
</div>
</nav>
<div class="container">
<div class="title">Nature.</div>
<div class="images">
<div class="image-wrapper" id="first">
<img src="./img/6.png" />
</div>
<div class="image-wrapper" id="second">
<img src="./img/5.png" />
</div>
<div class="image-wrapper" id="third">
<img src="./img/4.png" />
</div>
<div class="image-wrapper" id="forth">
<img src="./img/3.png" />
</div>
<div class="image-wrapper" id="fifth">
<img src="./img/2.png" />
</div>
<div class="image-wrapper" id="sixth">
<img src="./img/1.png" />
</div>
<div class="blur"></div>
</div>
<footer>
<div class="footer-wrapper">
<ul>
<li>Instagram.</li>
<li>Facebook.</li>
<li>Dribble.</li>
<li>Twitter.</li>
</ul>
</div>
</footer>
<div class="content">
<div class="content-wrapper">
<div class="content-images">
<div class="content-image-wrapper one">
<img
src="https://images.unsplash.com/photo-1550422086-b9589ec2d371?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80"
/>
<h4>W</h4>
</div>
<div class="content-image-wrapper two">
<img
src="https://images.unsplash.com/photo-1550433251-d1a8ff40ff05?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
/>
<h4>E</h4>
</div>
<div class="content-image-wrapper three">
<img
src="https://images.unsplash.com/photo-1550364387-ffbad4f8e9b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
/>
<h4>S</h4>
</div>
<div class="content-image-wrapper four">
<img
src="https://images.unsplash.com/photo-1550183203-8d3ca82400c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
/>
<h4>T</h4>
</div>
</div>
<p class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has
survived not only five centuries.Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a
type specimen book.
</p>
</div>
</div>
</div>
</section>*{
margin: 0;
padding: 0;
color: #fff;
font-family: 'Poppins', sans-serif;
}
section{
height: 100vh;
width: 100%;
}
.container{
width: 100%;
height: 100vh;
}
.nav-wrapper{
width: 100%;
display: flex;
justify-content: space-between;
position: absolute;
top: 0;
align-items: center;
padding: 20px 0;
}
.nav-wrapper h4{
color: #fff;
font-family: 'Montserrat', sans-serif;
margin-left: 30px;
}
.nav-wrapper .button {
text-decoration: none;
color: #fff;
font-family: 'Montserrat', sans-serif;
padding: 10px 20px;
background-color: #030000;
margin-right: 30px;
border-radius: 20px;
font-size: 0.8em;
}
.title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 100px;
}
.images{
width: 100%;
height: 110%;
position: relative;
z-index: -1;
top: -10%;
}
.image-wrapper{
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
}
.image-wrapper img{
width: 100%;
height: 100%;
}
.blur {
width: 120%;
margin-left: -10%;
height: 250px;
background-color: #030000;
position: absolute;
bottom: -180px;
filter: blur(40px);
z-index: 999;
}
.footer-wrapper{
position: absolute;
bottom: 0;
right: 0;
}
ul {
list-style: none;
margin-bottom: 20px;
margin-right: 30px;
}
li {
display: inline;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 0.8em;
margin-left: 20px;
}
.content {
height: 100%;
width: 100%;
background-color: #030000;
z-index: 0;
top: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.content-wrapper{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.content-images {
width: 70%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.content-image-wrapper {
height: 220px;
width: 150px;
text-align: center;
position: relative;
}
.content-image-wrapper img{
max-width: 100%;
width: 100%;
max-height: 100%;
height: 100%;
}
.one {
top: -10px;
}
.two {
top: -50px;
}
.three {
top: 20px;
}
.four {
top: -20px;
}
.content-image-wrapper h4 {
font-size: 1.8em;
position: relative;
top: -30px;
opacity: 0.6;
}
.text {
padding-top: 100px;
width: 60%;
font-size: 0.8em;
text-align: center;
}document.addEventListener('DOMContentLoaded', () => {
let controller = new ScrollMagic.Controller();
let timeline = new TimelineMax();
timeline
.to('#sixth', 6, {
y: -700
})
.to('#fifth', 6, {
y: -500
}, '-=6')
.to('#forth', 6, {
y: -400
}, '-=6')
.to('#third', 6, {
y: -300
}, '-=6')
.to('#second', 6, {
y: -200
}, '-=6')
.to('#first', 6, {
y: -100
}, '-=6')
.to('.content, .blur', 6, {
top: '0%'
}, '-=6')
.to('.title, nav, .footer-wrapper', 6, {
y: -600,
}, '-=6')
.from('.one', 3, {
top: '40px',
autoAlpha: 0
}, '-=4')
.from('.two', 3, {
top: '40px',
autoAlpha: 0
}, '-=3.5')
.from('.three', 3, {
top: '40px',
autoAlpha: 0
}, '-=3.5')
.from('.four', 3, {
top: '40px',
autoAlpha: 0
}, '-=3.5')
.from('.text', 3, {
y: 60,
autoAlpha: 0
}, '-=4')
let scene = new ScrollMagic.Scene({
triggerElement: 'section',
duration: '200%',
triggerHook: 0
})
.setTween(timeline)
.setPin('section')
.addTo(controller);
})Parallax для сайта
Открыть элемент
Элемент для сайта раздел Услуги
<div class="container">
<h1 class="heading">our services</h1>
<div class="box-container">
<div class="box">
<img src="image/icon-1.png" alt="">
<h3>HTML 5</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
<a href="#" class="btn">read more</a>
</div>
<div class="box">
<img src="image/icon-2.png" alt="">
<h3>CSS 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
<a href="#" class="btn">read more</a>
</div>
<div class="box">
<img src="image/icon-3.png" alt="">
<h3>JavaScript</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
<a href="#" class="btn">read more</a>
</div>
<div class="box">
<img src="image/icon-4.png" alt="">
<h3>SASS</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
<a href="#" class="btn">read more</a>
</div>
<div class="box">
<img src="image/icon-5.png" alt="">
<h3>JQuery</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
<a href="#" class="btn">read more</a>
</div>
<div class="box">
<img src="image/icon-6.png" alt="">
<h3>React.js</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
<a href="#" class="btn">read more</a>
</div>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
*{
font-family: 'Poppins', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
transition: .2s linear;
}
.container{
background:linear-gradient(45deg, blueviolet, lightgreen);
padding:15px 9%;
padding-bottom: 100px;
}
.container .heading{
text-align: center;
padding-bottom: 15px;
color:#fff;
text-shadow: 0 5px 10px rgba(0,0,0,.2);
font-size: 50px;
}
.container .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap:15px;
}
.container .box-container .box{
box-shadow: 0 5px 10px rgba(0,0,0,.2);
border-radius: 5px;
background: #fff;
text-align: center;
padding:30px 20px;
}
.container .box-container .box img{
height: 80px;
}
.container .box-container .box h3{
color:#444;
font-size: 22px;
padding:10px 0;
}
.container .box-container .box p{
color:#777;
font-size: 15px;
line-height: 1.8;
}
.container .box-container .box .btn{
margin-top: 10px;
display: inline-block;
background:#333;
color:#fff;
font-size: 17px;
border-radius: 5px;
padding: 8px 25px;
}
.container .box-container .box .btn:hover{
letter-spacing: 1px;
}
.container .box-container .box:hover{
box-shadow: 0 10px 15px rgba(0,0,0,.3);
transform: scale(1.03);
}
@media (max-width:768px){
.container{
padding:20px;
}
}Элемент для сайта раздел Услуги
Открыть элемент
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="icon"><i class="fa fa-bars"></i></div>
</nav>ul {
background-color: white;
border-radius: 4px;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: -7px 9px 17px 0px #00000017;
}
li a {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
color: black;
}
li:hover a {
color: crimson;
}
nav {
position: relative;
}
.icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -80px;
height: 60px;
width: 60px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
cursor: pointer;
box-shadow: 0px 0px 17px 0px #00000017;
transition: 0.5s ease transform;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
}
.icon.close {
transform: translateY(-50%) rotate(360deg);
background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg);
}
ul {
width: 0px;
overflow: hidden;
transform: translateX(50px);
opacity: 0;
pointer-events: none;
transition: 0.5s ease;
padding: 20px;
}
nav.show ul {
width: 450px;
transform: translate(0px);
opacity: 1;
pointer-events: all;
}
nav {
position: absolute;
top: 10px;
right: 100px;
}
@media only screen and (max-width: 768px) {
body {
font-size: 14px;
}
li a {
padding: 5px 10px;
}
nav ul {
padding: 15px;
}
nav.show ul {
width: 260px;
}
.icon {
width: 45px;
height: 45px;
right: -50px;
}
nav {
top: 10px;
right: 60px;
}
}const icon = document.querySelector(".icon");
const nav = document.querySelector("nav");
let faBars = document.querySelector('.fa-bars');
let links = document.querySelectorAll('nav a');
icon.addEventListener("click", () => {
icon.classList.toggle("close");
nav.classList.toggle("show");
if (icon.classList.contains('close')) {
faBars.setAttribute('class', 'fa fa-times');
} else if (!icon.classList.contains('close')) {
faBars.setAttribute('class', 'fa fa-bars');
}
});
links.forEach((link) => {
link.addEventListener('click', () => {
icon.classList.toggle("close");
nav.classList.toggle("show");
faBars.setAttribute('class', 'fa fa-bars');
});
})<!-- Cdn style icons fontawesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <!-- Cdn script icons fontawesome --> <script src="https://kit.fontawesome.com/a81368914c.js"></script>
Анимированное меню для навигации по сайту
Установите к себе на сайте анимированное CSS-меню со значком гамбургера. Он полностью адаптивный, и имеет классную, плавную анимацию.
Открыть элемент
<!-- Toggle Hammer Icon Section-->
<div class="menu-icon">
<span class="menu-icon__line menu-icon__line-left"></span>
<span class="menu-icon__line"></span>
<span class="menu-icon__line menu-icon__line-right"></span>
</div>
<!-- Menu Navigation -->
<div class="nav">
<div class="nav__content">
<ul class="nav__list">
<li class="nav__list-item">Home</li>
<li class="nav__list-item">About</li>
<li class="nav__list-item">Projects</li>
<li class="nav__list-item">Contact</li>
</ul>
</div>
</div>
<div class="site-content">
<h1 class="site-content__headline">
Toggle Menu Animation
</h1>
</div>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
body{
background-color: #1e2023;
font-family: "poppins", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.nav__content {
position: fixed;
top: 50%;
width: 100%;
text-align: center;
font-size: calc(2vw + 10px);
font-weight: 200;
cursor: pointer;
transform: translate(0%, -50%);
}
.nav__list-item {
position: relative;
display: inline-block;
margin-right: 25px;
transform: translate(0%, 100%);
transition-delay: 0.8s;
transition: opacity 0.2s ease, transform 0.3s ease;
opacity: 0;
}
.nav__list-item:before {
content: "";
position: absolute;
background-color: #000;
width: 20px;
height: 1px;
top: 100%;
z-index: -1;
transform: translate(0%, 0%);
transition: all 0.3s ease;
}
.nav__list-item:hover:before {
width: 100%;
}
.menu-icon{
width: 30px;
height: 30px;
position: fixed;
z-index: 2;
left: 50px;
top: 30px;
cursor: pointer;
}
.menu-icon__line{
width: 30px;
height: 2px;
display: block;
background-color: #fff;
margin-bottom: 4px;
transition: transform 0.2s ease, background-color 0.5s ease;
}
.menu-icon__line-left {
width: 15px;
}
.menu-icon__line-right {
width: 15px;
float: right;
}
body.nav-active .menu-icon__line {
background-color: #000;
transform: translateX(0px) rotate(-45deg);
}
.nav{
position: fixed;
z-index: 1;
}
.nav:before, .nav:after{
content: "";
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(234, 234, 234, 0.2);
z-index: -1;
transform: translateX(0%) translateY(-100%);
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
}
.nav:after{
background-color: #fff;
transition-delay: 0s;
}
.nav:before {
transition-delay: 0.1s;
}
body.nav-active .nav {
visibility: visible;
}
body.nav-active .nav:before, body.nav-active .nav:after {
transform: translateX(0%) translateY(0%);
}
body.nav-active .nav:after {
transition-delay: 0.1s;
}
body.nav-active .nav:before {
transition-delay: 0s;
}
body.nav-active .nav__list-item {
opacity: 1;
transform: translateX(0%);
transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
body.nav-active .nav__list-item:nth-child(0) {
transition-delay: 0.5s;
}
body.nav-active .nav__list-item:nth-child(1) {
transition-delay: 0.6s;
}
body.nav-active .nav__list-item:nth-child(2) {
transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(3) {
transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(4) {
transition-delay: 0.9s;
}
.site-content {
width: 100%;
height: 100vh;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}
.site-content__headline {
background: url(bg-1.jpg) no-repeat center center;
background-size: cover;
width: 100%;
height: 100vh;
color: #fff;
font-size: calc(2vw + 10px);
justify-content: center;
align-items: center;
display: flex;
text-transform: uppercase;
}console.clear();
const app = (() => {
let body;
let menu;
let menuItems;
const init = () => {
body = document.querySelector('body');
menu = document.querySelector('.menu-icon');
menuItems = document.querySelectorAll('.nav__list-item');
applyListeners();
}
const applyListeners = () => {
menu.addEventListener('click', () => toggleClass(body, 'nav-active'));
}
const toggleClass = (element, stringClass) => {
if(element.classList.contains(stringClass))
element.classList.remove(stringClass);
else
element.classList.add(stringClass);
}
init();
})();Картинка
https://github.com/valekutce/Menu2-elements/blob/main/bg-1.jpg?raw=true
Адаптивное выпадающее меню по клику на бургер
Открыть элемент
Адаптивное боковое меню
<!--========== HEADER ==========-->
<header class="header">
<div class="header__container">
<img src="assets/img/perfil.jpg" alt="" class="header__img">
<a href="#" class="header__logo">Bedimcode</a>
<div class="header__search">
<input type="search" placeholder="Search" class="header__input">
<i class='bx bx-search header__icon'></i>
</div>
<div class="header__toggle">
<i class='bx bx-menu' id="header-toggle"></i>
</div>
</div>
</header>
<!--========== NAV ==========-->
<div class="nav" id="navbar">
<nav class="nav__container">
<div>
<a href="#" class="nav__link nav__logo">
<i class='bx bxs-disc nav__icon'></i>
<span class="nav__logo-name">Bedimcode</span>
</a>
<div class="nav__list">
<div class="nav__items">
<h3 class="nav__subtitle">Profile</h3>
<a href="#" class="nav__link active">
<i class='bx bx-home nav__icon'></i>
<span class="nav__name">Home</span>
</a>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='bx bx-user nav__icon'></i>
<span class="nav__name">Profile</span>
<i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">Passwords</a>
<a href="#" class="nav__dropdown-item">Mail</a>
<a href="#" class="nav__dropdown-item">Accounts</a>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class='bx bx-message-rounded nav__icon'></i>
<span class="nav__name">Messages</span>
</a>
</div>
<div class="nav__items">
<h3 class="nav__subtitle">Menu</h3>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='bx bx-bell nav__icon'></i>
<span class="nav__name">Notifications</span>
<i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">Blocked</a>
<a href="#" class="nav__dropdown-item">Silenced</a>
<a href="#" class="nav__dropdown-item">Publish</a>
<a href="#" class="nav__dropdown-item">Program</a>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class='bx bx-compass nav__icon'></i>
<span class="nav__name">Explore</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-bookmark nav__icon'></i>
<span class="nav__name">Saved</span>
</a>
</div>
</div>
</div>
<a href="#" class="nav__link nav__logout">
<i class='bx bx-log-out nav__icon'></i>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>
<!--========== CONTENTS ==========-->
<main>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni
molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni
molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni
molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
</section>
</main>/*========== VARIABLES CSS ==========*/
:root {
--header-height: 3.5rem;
--nav-width: 219px;
/*========== Colors ==========*/
--first-color: #6923D0;
--first-color-light: #F4F0FA;
--title-color: #19181B;
--text-color: #58555E;
--text-color-light: #A5A1AA;
--body-color: #F9F6FD;
--container-color: #FFFFFF;
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--normal-font-size: .938rem;
--small-font-size: .75rem;
--smaller-font-size: .75rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== z index ==========*/
--z-fixed: 100;
}
@media screen and (min-width: 1024px) {
:root {
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*========== BASE ==========*/
*, ::before, ::after {
box-sizing: border-box;
}
body {
margin: var(--header-height) 0 0 0;
padding: 1rem 1rem 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h3 {
margin: 0;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
/*========== HEADER ==========*/
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--container-color);
box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1);
padding: 0 1rem;
z-index: var(--z-fixed);
}
.header__container {
display: flex;
align-items: center;
height: var(--header-height);
justify-content: space-between;
}
.header__img {
width: 35px;
height: 35px;
border-radius: 50%;
}
.header__logo {
color: var(--title-color);
font-weight: var(--font-medium);
display: none;
}
.header__search {
display: flex;
padding: .40rem .75rem;
background-color: var(--first-color-light);
border-radius: .25rem;
}
.header__input {
width: 100%;
border: none;
outline: none;
background-color: var(--first-color-light);
}
.header__input::placeholder {
font-family: var(--body-font);
color: var(--text-color);
}
.header__icon,
.header__toggle {
font-size: 1.2rem;
}
.header__toggle {
color: var(--title-color);
cursor: pointer;
}
/*========== NAV ==========*/
.nav {
position: fixed;
top: 0;
left: -100%;
height: 100vh;
padding: 1rem 1rem 0;
background-color: var(--container-color);
box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
z-index: var(--z-fixed);
transition: .4s;
}
.nav__container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 3rem;
overflow: auto;
scrollbar-width: none; /* For mozilla */
}
/* For Google Chrome and others */
.nav__container::-webkit-scrollbar {
display: none;
}
.nav__logo {
font-weight: var(--font-semi-bold);
margin-bottom: 2.5rem;
}
.nav__list,
.nav__items {
display: grid;
}
.nav__list {
row-gap: 2.5rem;
}
.nav__items {
row-gap: 1.5rem;
}
.nav__subtitle {
font-size: var(--normal-font-size);
text-transform: uppercase;
letter-spacing: .1rem;
color: var(--text-color-light);
}
.nav__link {
display: flex;
align-items: center;
color: var(--text-color);
}
.nav__link:hover {
color: var(--first-color);
}
.nav__icon {
font-size: 1.2rem;
margin-right: .5rem;
}
.nav__name {
font-size: var(--small-font-size);
font-weight: var(--font-medium);
white-space: nowrap;
}
.nav__logout {
margin-top: 5rem;
}
/* Dropdown */
.nav__dropdown {
overflow: hidden;
max-height: 21px;
transition: .4s ease-in-out;
}
.nav__dropdown-collapse {
background-color: var(--first-color-light);
border-radius: .25rem;
margin-top: 1rem;
}
.nav__dropdown-content {
display: grid;
row-gap: .5rem;
padding: .75rem 2.5rem .75rem 1.8rem;
}
.nav__dropdown-item {
font-size: var(--smaller-font-size);
font-weight: var(--font-medium);
color: var(--text-color);
}
.nav__dropdown-item:hover {
color: var(--first-color);
}
.nav__dropdown-icon {
margin-left: auto;
transition: .4s;
}
/* Show dropdown collapse */
.nav__dropdown:hover {
max-height: 100rem;
}
/* Rotate icon arrow */
.nav__dropdown:hover .nav__dropdown-icon {
transform: rotate(180deg);
}
/*===== Show menu =====*/
.show-menu {
left: 0;
}
/*===== Active link =====*/
.active {
color: var(--first-color);
}
/* ========== MEDIA QUERIES ==========*/
/* For small devices reduce search*/
@media screen and (max-width: 320px) {
.header__search {
width: 70%;
}
}
@media screen and (min-width: 768px) {
body {
padding: 1rem 3rem 0 6rem;
}
.header {
padding: 0 3rem 0 6rem;
}
.header__container {
height: calc(var(--header-height) + .5rem);
}
.header__search {
width: 300px;
padding: .55rem .75rem;
}
.header__toggle {
display: none;
}
.header__logo {
display: block;
}
.header__img {
width: 40px;
height: 40px;
order: 1;
}
.nav {
left: 0;
padding: 1.2rem 1.5rem 0;
width: 68px; /* Reduced navbar */
}
.nav__items {
row-gap: 1.7rem;
}
.nav__icon {
font-size: 1.3rem;
}
/* Element opacity */
.nav__logo-name,
.nav__name,
.nav__subtitle,
.nav__dropdown-icon {
opacity: 0;
transition: .3s;
}
/* Navbar expanded */
.nav:hover {
width: var(--nav-width);
}
/* Visible elements */
.nav:hover .nav__logo-name {
opacity: 1;
}
.nav:hover .nav__subtitle {
opacity: 1;
}
.nav:hover .nav__name {
opacity: 1;
}
.nav:hover .nav__dropdown-icon {
opacity: 1;
}
}/*==================== SHOW NAVBAR ====================*/
const showMenu = (headerToggle, navbarId) =>{
const toggleBtn = document.getElementById(headerToggle),
nav = document.getElementById(navbarId)
// Validate that variables exist
if(headerToggle && navbarId){
toggleBtn.addEventListener('click', ()=>{
// We add the show-menu class to the div tag with the nav__menu class
nav.classList.toggle('show-menu')
// change icon
toggleBtn.classList.toggle('bx-x')
})
}
}
showMenu('header-toggle','navbar')
/*==================== LINK ACTIVE ====================*/
const linkColor = document.querySelectorAll('.nav__link')
function colorLink(){
linkColor.forEach(l => l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l => l.addEventListener('click', colorLink))<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
Scss
/*========== GOOGLE FONTS ==========*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
/*========== VARIABLES CSS ==========*/
:root{
--header-height: 3.5rem;
--nav-width: 219px;
/*========== Colors ==========*/
--first-color: #6923D0;
--first-color: purple;
--first-color-light: #F4F0FA;
--title-color: #19181B;
--text-color: #58555E;
--text-color-light: #A5A1AA;
--body-color: #F9F6FD;
--container-color: #FFFFFF;
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--normal-font-size: .938rem;
--small-font-size: .75rem;
--smaller-font-size: .75rem;
@media screen and (min-width: 1024px){
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== z index ==========*/
--z-fixed: 100;
}
/*========== BASE ==========*/
*,::before,::after{
box-sizing: border-box;
}
body{
margin: var(--header-height) 0 0 0;
padding: 1rem 1rem 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h3{
margin: 0;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
}
/*========== HEADER ==========*/
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--container-color);
box-shadow: 0 1px 0 rgba(22, 8, 43, .1);
padding: 0 1rem;
z-index: var(--z-fixed);
&__container{
display: flex;
align-items: center;
height: var(--header-height);
justify-content: space-between;
}
&__img{
width: 35px;
height: 35px;
border-radius: 50%;
}
&__logo{
color: var(--title-color);
font-weight: var(--font-medium);
display: none;
}
&__search{
display: flex;
padding: .40rem .75rem;
background-color: var(--first-color-light);
border-radius: .25rem;
}
&__input{
width: 100%;
border: none;
outline: none;
background-color: var(--first-color-light);
&::placeholder{
font-family: var(--body-font);
color: var(--text-color);
}
}
&__icon,
&__toggle{
font-size: 1.2rem;
}
&__toggle{
color: var(--title-color);
cursor: pointer;
}
}
/*========== NAV ==========*/
.nav{
position: fixed;
top: 0;
left: -100%;
height: 100vh;
padding: 1rem 1rem 0;
background-color: var(--container-color);
box-shadow: 1px 0 0 rgba(22, 8, 43, .1);
z-index: var(--z-fixed);
transition: .4s;
&__container{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 3rem;
overflow: auto;
scrollbar-width: none; /* For mozilla */
/* For Google Chrome and others */
&::-webkit-scrollbar {
display: none;
}
}
&__logo{
font-weight: var(--font-semi-bold);
margin-bottom: 2.5rem;
}
&__list,
&__items{
display: grid;
}
&__list{
row-gap: 2.5rem;
}
&__items{
row-gap: 1.5rem;
}
&__subtitle{
font-size: var(--normal-font-size);
text-transform: uppercase;
letter-spacing: .1rem;
color: var(--text-color-light);
}
&__link{
display: flex;
align-items: center;
color: var(--text-color);
&:hover{
color: var(--first-color);
}
}
&__icon{
font-size: 1.2rem;
margin-right: .5rem;
}
&__name{
font-size: var(--small-font-size);
font-weight: var(--font-medium);
white-space: nowrap;
}
&__logout{
margin-top: 5rem;
}
/* Dropdown */
&__dropdown{
overflow: hidden;
max-height: 21px;
transition: .4s ease-in-out;
&-collapse{
background-color: var(--first-color-light);
border-radius: .25rem;
margin-top: 1rem;
}
&-content{
display: grid;
row-gap: .5rem;
padding: .75rem 2.5rem .75rem 1.8rem;
}
&-item{
font-size: var(--smaller-font-size);
font-weight: var(--font-medium);
color: var(--text-color);
&:hover{
color: var(--first-color);
}
}
&-icon{
margin-left: auto;
transition: .4s;
}
/* Show collapse */
&:hover{
max-height: 100rem;
}
/*Rotate icon arrow*/
&:hover &-icon{
transform: rotate(180deg);
}
}
}
/*===== Show menu =====*/
.show-menu{
left: 0;
}
/*===== Active link =====*/
.active{
color: var(--first-color);
}
/* ========== MEDIA QUERIES ==========*/
/* For small devices reduce search*/
@media screen and (max-width: 320px){
.header{
&__search{
width: 70%;
}
}
}
@media screen and (min-width: 768px){
body{
padding: 1rem 3rem 0 6rem;
}
.header{
padding: 0 3rem 0 6rem;
&__container{
height: calc(var(--header-height) + .5rem);
}
&__search{
width: 300px;
padding: .55rem .75rem;
}
&__toggle{
display: none;
}
&__logo{
display: block;
}
&__img{
width: 40px;
height: 40px;
order: 1;
}
}
.nav{
left: 0;
padding: 1.2rem 1.5rem 0;
width: 68px;
&__items{
row-gap: 1.7rem;
}
&__icon{
font-size: 1.3rem;
}
&__logo-name,
&__name,
&__subtitle,
&__dropdown-icon{
opacity: 0;
transition: .3s;
}
&:hover{
width: var(--nav-width);
}
&:hover &__logo-name{
opacity: 1;
}
&:hover &__subtitle{
opacity: 1;
}
&:hover &__name{
opacity: 1;
}
&:hover &__dropdown-icon{
opacity: 1;
}
}
}Адаптивное боковое меню
Открыть элемент
Адаптивное анимированное боковое меню
<nav>
<div class="sidebar-top">
<span class="shrink-btn">
<i class='bx bx-chevron-left'></i>
</span>
<img src="./img/logo.png" class="logo" alt="">
<h3 class="hide">Aqumex</h3>
</div>
<div class="search">
<i class='bx bx-search'></i>
<input type="text" class="hide" placeholder="Quick Search ...">
</div>
<div class="sidebar-links">
<ul>
<div class="active-tab"></div>
<li class="tooltip-element" data-tooltip="0">
<a href="#" class="active" data-active="0">
<div class="icon">
<i class='bx bx-tachometer'></i>
<i class='bx bxs-tachometer'></i>
</div>
<span class="link hide">Dashboard</span>
</a>
</li>
<li class="tooltip-element" data-tooltip="1">
<a href="#" data-active="1">
<div class="icon">
<i class='bx bx-folder'></i>
<i class='bx bxs-folder'></i>
</div>
<span class="link hide">Projects</span>
</a>
</li>
<li class="tooltip-element" data-tooltip="2">
<a href="#" data-active="2">
<div class="icon">
<i class='bx bx-message-square-detail'></i>
<i class='bx bxs-message-square-detail'></i>
</div>
<span class="link hide">Messages</span>
</a>
</li>
<li class="tooltip-element" data-tooltip="3">
<a href="#" data-active="3">
<div class="icon">
<i class='bx bx-bar-chart-square'></i>
<i class='bx bxs-bar-chart-square'></i>
</div>
<span class="link hide">Analytics</span>
</a>
</li>
<div class="tooltip">
<span class="show">Dashboard</span>
<span>Projects</span>
<span>Messages</span>
<span>Analytics</span>
</div>
</ul>
<h4 class="hide">Shortcuts</h4>
<ul>
<li class="tooltip-element" data-tooltip="0">
<a href="#" data-active="4">
<div class="icon">
<i class='bx bx-notepad'></i>
<i class='bx bxs-notepad'></i>
</div>
<span class="link hide">Tasks</span>
</a>
</li>
<li class="tooltip-element" data-tooltip="1">
<a href="#" data-active="5">
<div class="icon">
<i class='bx bx-help-circle'></i>
<i class='bx bxs-help-circle'></i>
</div>
<span class="link hide">Help</span>
</a>
</li>
<li class="tooltip-element" data-tooltip="2">
<a href="#" data-active="6">
<div class="icon">
<i class='bx bx-cog'></i>
<i class='bx bxs-cog'></i>
</div>
<span class="link hide">Settings</span>
</a>
</li>
<div class="tooltip">
<span class="show">Tasks</span>
<span>Help</span>
<span>Settings</span>
</div>
</ul>
</div>
<div class="sidebar-footer">
<a href="#" class="account tooltip-element" data-tooltip="0">
<i class='bx bx-user'></i>
</a>
<div class="admin-user tooltip-element" data-tooltip="1">
<div class="admin-profile hide">
<img src="./img/face-1.png" alt="">
<div class="admin-info">
<h3>John Doe</h3>
<h5>Admin</h5>
</div>
</div>
<a href="#" class="log-out">
<i class='bx bx-log-out'></i>
</a>
</div>
<div class="tooltip">
<span class="show">John Doe</span>
<span>Logout</span>
</div>
</div>
</nav>
<main>
<h1>My Dashboard</h1>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur animi voluptatibus cum maxime distinctio
iste quod deleniti eius, autem voluptates cumque suscipit iure quasi eligendi ullam. Sapiente eligendi porro
reprehenderit corrupti error facilis quo, fugiat fugit? Maiores aliquam ad, molestiae iste nihil, commodi
doloremque tempore excepturi aut id ducimus unde?
</p>
<p class="copyright">
© 2021 - <span>Aqumex</span> All Rights Reserved.
</p>
</main>@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
--main-color: #3d5af1;
--main-color-dark: #3651d4;
--main-color-light: #5872f5;
--text-color: #cfcde7;
}
body {
font-family: "Poppins", sans-serif;
overflow-x: hidden;
background-color: #e4e2f5;
min-height: 100vh;
display: flex;
position: relative;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
nav {
position: sticky;
top: 0;
left: 0;
height: 100vh;
background-color: var(--main-color);
width: 16rem;
padding: 1.8rem 0.85rem;
color: #fff;
display: flex;
flex-direction: column;
transition: width 0.5s ease-in-out;
}
nav::before {
content: "";
position: absolute;
width: 2rem;
height: 100%;
top: 0;
left: 100%;
}
main {
flex: 1;
padding: 2rem;
color: #1f2027;
display: flex;
flex-direction: column;
}
main h1 {
margin-bottom: 1rem;
}
main .copyright {
margin-top: auto;
font-size: 0.9rem;
}
main .copyright span {
color: var(--main-color);
font-weight: 500;
cursor: pointer;
}
.sidebar-top {
position: relative;
display: flex;
align-items: center;
}
.sidebar-top .logo {
width: 2.1rem;
margin: 0 0.8rem;
}
.sidebar-top h3 {
padding-left: 0.5rem;
font-weight: 600;
font-size: 1.15rem;
}
.shrink-btn {
position: absolute;
top: 50%;
height: 27px;
padding: 0 0.3rem;
background-color: var(--main-color);
border-radius: 6px;
cursor: pointer;
box-shadow: 0 3px 10px -3px rgba(70, 46, 118, 0.3);
right: -2.65rem;
transform: translateY(-50%) translateX(-8px);
opacity: 0;
pointer-events: none;
transition: 0.3s;
}
.shrink-btn i {
line-height: 27px;
transition: 0.3s;
}
.shrink-btn:hover {
background-color: var(--main-color-dark);
}
nav:hover .shrink-btn,
.shrink-btn.hovered {
transform: translateY(-50%) translateX(0px);
opacity: 1;
pointer-events: all;
}
.search {
min-height: 2.7rem;
background-color: var(--main-color-light);
margin: 2rem 0.5rem 1.7rem;
display: grid;
grid-template-columns: 2.7rem 1fr;
align-items: center;
text-align: center;
border-radius: 50px;
cursor: pointer;
}
.search input {
height: 100%;
border: none;
background: none;
outline: none;
color: #fff;
caret-color: #fff;
font-family: inherit;
}
.search input::placeholder {
color: var(--text-color);
}
.sidebar-links ul {
position: relative;
}
.sidebar-links li {
position: relative;
padding: 2.5px 0;
}
.sidebar-links a {
color: var(--text-color);
font-weight: 400;
font-size: 0.9rem;
display: flex;
align-items: center;
height: 53px;
}
.icon {
font-size: 1.3rem;
text-align: center;
min-width: 3.7rem;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.icon i {
grid-column: 1 / 2;
grid-row: 1 / 2;
transition: 0.3s;
}
.icon i:last-child {
opacity: 0;
color: #fff;
}
.sidebar-links a.active,
.sidebar-links a:hover {
color: #fff;
}
.sidebar-links a .link {
transition: opacity 0.3s 0.2s, color 0.3s;
}
.sidebar-links a.active i:first-child {
opacity: 0;
}
.sidebar-links a.active i:last-child {
opacity: 1;
}
.active-tab {
width: 100%;
height: 53px;
background-color: var(--main-color-dark);
border-radius: 10px;
position: absolute;
top: 2.5px;
left: 0;
transition: top 0.3s;
}
.sidebar-links h4 {
position: relative;
font-size: 0.8rem;
text-transform: uppercase;
font-weight: 600;
padding: 0 0.8rem;
color: var(--text-color);
letter-spacing: 0.5px;
height: 45px;
line-height: 45px;
transition: opacity 0.3s 0.2s, height 0.5s 0s;
}
.sidebar-footer {
position: relative;
margin-top: auto;
}
.account {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
color: var(--text-color);
height: 53px;
width: 3.7rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s 0s, color 0.3s 0s;
}
.account:hover {
color: #fff;
}
.admin-user {
display: flex;
align-items: center;
}
.admin-profile {
white-space: nowrap;
max-width: 100%;
transition: opacity 0.3s 0.2s, max-width 0.7s 0s ease-in-out;
display: flex;
align-items: center;
flex: 1;
overflow: hidden;
}
.admin-user img {
width: 2.9rem;
border-radius: 50%;
margin: 0 0.4rem;
}
.admin-info {
padding-left: 0.3rem;
}
.admin-info h3 {
font-weight: 500;
font-size: 1rem;
line-height: 1;
}
.admin-info h5 {
font-weight: 400;
font-size: 0.75rem;
color: var(--text-color);
margin-top: 0.3rem;
line-height: 1;
}
.log-out {
display: flex;
height: 40px;
min-width: 2.4rem;
background-color: var(--main-color-dark);
color: var(--text-color);
align-items: center;
justify-content: center;
font-size: 1.15rem;
border-radius: 10px;
margin: 0 0.65rem;
transition: color 0.3s;
}
.log-out:hover {
color: #fff;
}
.tooltip {
background-color: var(--main-color);
position: absolute;
right: -1.2rem;
top: 0;
transform: translateX(100%) translateY(-50%);
padding: 0 0.8rem;
font-size: 0.85rem;
display: none;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
height: 30px;
align-items: center;
border-radius: 7px;
box-shadow: 0 3px 10px -3px rgba(70, 46, 118, 0.3);
opacity: 0;
pointer-events: none;
transition: all 0.3s;
text-align: center;
white-space: nowrap;
}
.tooltip span {
grid-column: 1 / 2;
grid-row: 1 / 2;
opacity: 0;
transition: 0.3s;
}
.tooltip span.show {
opacity: 1;
}
.tooltip-element:hover ~ .tooltip {
opacity: 1;
pointer-events: all;
}
/* When the menu shrinks */
.hide {
transition: opacity 0.3s 0.2s;
}
body.shrink nav {
width: 5.4rem;
}
body.shrink .hide {
opacity: 0;
pointer-events: none;
transition-delay: 0s;
}
body.shrink .shrink-btn i {
transform: rotate(-180deg);
}
body.shrink .sidebar-links h4 {
height: 10px;
}
body.shrink .account {
opacity: 1;
pointer-events: all;
transition: opacity 0.3s 0.3s, color 0.3s 0s;
}
body.shrink .admin-profile {
max-width: 0;
transition: opacity 0.3s 0s, max-width 0.7s 0s ease-in-out;
}
body.shrink .tooltip {
display: grid;
}const shrink_btn = document.querySelector(".shrink-btn");
const search = document.querySelector(".search");
const sidebar_links = document.querySelectorAll(".sidebar-links a");
const active_tab = document.querySelector(".active-tab");
const shortcuts = document.querySelector(".sidebar-links h4");
const tooltip_elements = document.querySelectorAll(".tooltip-element");
let activeIndex;
shrink_btn.addEventListener("click", () => {
document.body.classList.toggle("shrink");
setTimeout(moveActiveTab, 400);
shrink_btn.classList.add("hovered");
setTimeout(() => {
shrink_btn.classList.remove("hovered");
}, 500);
});
search.addEventListener("click", () => {
document.body.classList.remove("shrink");
search.lastElementChild.focus();
});
function moveActiveTab() {
let topPosition = activeIndex * 58 + 2.5;
if (activeIndex > 3) {
topPosition += shortcuts.clientHeight;
}
active_tab.style.top = `${topPosition}px`;
}
function changeLink() {
sidebar_links.forEach((sideLink) => sideLink.classList.remove("active"));
this.classList.add("active");
activeIndex = this.dataset.active;
moveActiveTab();
}
sidebar_links.forEach((link) => link.addEventListener("click", changeLink));
function showTooltip() {
let tooltip = this.parentNode.lastElementChild;
let spans = tooltip.children;
let tooltipIndex = this.dataset.tooltip;
Array.from(spans).forEach((sp) => sp.classList.remove("show"));
spans[tooltipIndex].classList.add("show");
tooltip.style.top = `${(100 / (spans.length * 2)) * (tooltipIndex * 2 + 1)}%`;
}
tooltip_elements.forEach((elem) => {
elem.addEventListener("mouseover", showTooltip);
});<link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
Адаптивное анимированное боковое меню
Открыть элемент
Гамбургер-меню на чистом CSS
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="content">
<h2>Welcome</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard.</p>
<a href="#" class="btn">Read more</a>
</div>
</div>.container{
position: relative;
height: 100vh;
width: 100vw;
background: url("../img/bg.jpg") no-repeat;
background-size: cover;
background-position: 50% 36%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.container:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
.content{
position: relative;
max-width: 700px;
padding: 2rem;
z-index: 1;
}
.content h2{
color: #fff44f;
font-family: 'Neucha', cursive;
font-size: 4.3rem;
margin-bottom: 0.8rem;
}
.content p{
color: white;
font-size: 1.2rem;
font-weight: 100;
}
.btn{
padding: 0.75rem 1.25rem;
text-transform: uppercase;
color: #fff44f;
font-weight: 550;
font-size: 1.1rem;
font-family: 'Neucha', cursive;
text-decoration: none;
background-color: #111;
display: inline-block;
margin-top: .8rem;
cursor: pointer;
transition: .3s;
}
.btn:hover{
opacity: 0.8;
}
.menu-wrap{
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
.toggler{
position: absolute;
top: 0.5rem;
left: 0.5rem;
width: 60px;
height: 60px;
z-index: 3;
opacity: 0;
cursor: pointer;
}
.hamburger{
position: absolute;
top: 0.5rem;
left: 0.5rem;
width: 60px;
height: 60px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #111;
}
.hamburger>div{
position: absolute;
width: 60%;
height: 3px;
border-radius: 1.5px;
background-color: #fff44f;
transition: .4s;
}
.hamburger>div:before{
content: '';
position: absolute;
width: 100%;
height: 3px;
border-radius: 1.5px;
background-color: #fff44f;
top: -10px;
left: 0;
transition: .4s;
}
.hamburger>div:after{
content: '';
position: absolute;
width: 100%;
height: 3px;
border-radius: 1.5px;
background-color: #fff44f;
top: 10px;
left: 0;
transition: .4s;
}
.toggler:checked + .hamburger>div{
transform: rotate(135deg);
}
.toggler:checked:hover + .hamburger>div{
transform: rotate(225deg);
}
.toggler:checked + .hamburger>div:before, .toggler:checked + .hamburger>div:after{
top: 0;
transform: rotate(90deg);
}
.menu{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
transition: .6s;
}
.menu > div{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-150%) translateY(-50%);
width: 1600px;
height: 1600px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
transition: .6s;
}
.menu > div > div{
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: .6s;
}
.menu > div > div > ul > li{
list-style: none;
}
.menu > div > div > ul > li > a{
text-decoration: none;
color: #fff;
font-weight: 550;
text-transform: uppercase;
margin: .5rem;
transition: .3s;
font-size: 1.2rem;
display: inline-block;
}
.menu > div > div > ul > li > a:hover{
color: #fff44f;
}
.toggler:checked ~ .menu{
visibility: visible;
}
.toggler:checked ~ .menu > div{
transform: translateX(-50%) translateY(-50%);
}
.toggler:checked ~ .menu > div > div{
opacity: 1;
}Гамбургер-меню на чистом CSS
Открыть элемент
3D-навигация
<div class="container">
<div class="navbar">
<div class="menu">
<h3 class="logo">Brand<span>Name</span></h3>
<div class="hamburger-menu">
<div class="bar"></div>
</div>
</div>
</div>
<div class="main-container">
<div class="main">
<header>
<div class="overlay">
<div class="inner">
<h2 class="title">Future is here</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Laudantium illum tenetur consequatur veritatis?
</p>
<button class="btn">Read more</button>
</div>
</div>
</header>
</div>
<div class="shadow one"></div>
<div class="shadow two"></div>
</div>
<div class="links">
<ul>
<li>
<a href="#" style="--i: 0.05s;">Home</a>
</li>
<li>
<a href="#" style="--i: 0.1s;">Services</a>
</li>
<li>
<a href="#" style="--i: 0.15s;">Portfolio</a>
</li>
<li>
<a href="#" style="--i: 0.2s;">Testimonials</a>
</li>
<li>
<a href="#" style="--i: 0.25s;">About</a>
</li>
<li>
<a href="#" style="--i: 0.3s;">Contact</a>
</li>
</ul>
</div>
</div>@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body,
button {
font-family: "Poppins", sans-serif;
}
.container {
min-height: 100vh;
width: 100%;
background-color: #485461;
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
overflow-x: hidden;
transform-style: preserve-3d;
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
height: 3rem;
}
.menu {
max-width: 72rem;
width: 100%;
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
}
.logo {
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 4rem;
}
.logo span {
font-weight: 300;
}
.hamburger-menu {
height: 4rem;
width: 3rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-end;
}
.bar {
width: 1.9rem;
height: 1.5px;
border-radius: 2px;
background-color: #eee;
transition: 0.5s;
position: relative;
}
.bar:before,
.bar:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: #eee;
transition: 0.5s;
}
.bar:before {
transform: translateY(-9px);
}
.bar:after {
transform: translateY(9px);
}
.main {
position: relative;
width: 100%;
left: 0;
z-index: 5;
overflow: hidden;
transform-origin: left;
transform-style: preserve-3d;
transition: 0.5s;
}
header {
min-height: 100vh;
width: 100%;
background: url("bg.jpg") no-repeat top center / cover;
position: relative;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(43, 51, 59, 0.8);
display: flex;
justify-content: center;
align-items: center;
}
.inner {
max-width: 35rem;
text-align: center;
color: #fff;
padding: 0 2rem;
}
.title {
font-size: 2.7rem;
}
.btn {
margin-top: 1rem;
padding: 0.6rem 1.8rem;
background-color: #1179e7;
border: none;
border-radius: 25px;
color: #fff;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
}
.container.active .bar {
transform: rotate(360deg);
background-color: transparent;
}
.container.active .bar:before {
transform: translateY(0) rotate(45deg);
}
.container.active .bar:after {
transform: translateY(0) rotate(-45deg);
}
.container.active .main {
animation: main-animation 0.5s ease;
cursor: pointer;
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}
@keyframes main-animation {
from {
transform: translate(0);
}
to {
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}
}
.links {
position: absolute;
width: 30%;
right: 0;
top: 0;
height: 100vh;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
ul {
list-style: none;
}
.links a {
text-decoration: none;
color: #eee;
padding: 0.7rem 0;
display: inline-block;
font-size: 1rem;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.3s;
opacity: 0;
transform: translateY(10px);
animation: hide 0.5s forwards ease;
}
.links a:hover {
color: #fff;
}
.container.active .links a {
animation: appear 0.5s forwards ease var(--i);
}
@keyframes appear {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0px);
}
}
@keyframes hide {
from {
opacity: 1;
transform: translateY(0px);
}
to {
opacity: 0;
transform: translateY(10px);
}
}
.shadow {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
transform-style: preserve-3d;
transform-origin: left;
transition: 0.5s;
background-color: white;
}
.shadow.one {
z-index: -1;
opacity: 0.15;
}
.shadow.two {
z-index: -2;
opacity: 0.1;
}
.container.active .shadow.one {
animation: shadow-one 0.6s ease-out;
transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);
}
@keyframes shadow-one {
0% {
transform: translate(0);
}
5% {
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}
100% {
transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);
}
}
.container.active .shadow.two {
animation: shadow-two 0.6s ease-out;
transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);
}
@keyframes shadow-two {
0% {
transform: translate(0);
}
20% {
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
}
100% {
transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);
}
}
.container.active .main:hover + .shadow.one {
transform: perspective(1300px) rotateY(20deg) translateZ(230px) scale(0.5);
}
.container.active .main:hover {
transform: perspective(1300px) rotateY(20deg) translateZ(340px) scale(0.5);
}const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");
hamburger_menu.addEventListener("click", () => {
container.classList.toggle("active");
});Фоновая картинка элемента
https://valekutce.github.io/3D-Navigation-elements/bg.jpg
3D-навигация
Открыть элемент
Выпадающий список
<div class="container">
<div class="box">
<ul class="by_default">
<li>
<div class="sharing">
<div class="share-icon">
<i class="fab fa-instagram fa-2x"></i>
</div>
<p>Instagram</p>
</div>
</li>
</ul>
<ul class="options">
<li>
<div class="sharing">
<div class="share-icon">
<i class="fab fa-instagram fa-2x"></i>
</div>
<p>Instagram</p>
</div>
</li>
<li>
<div class="sharing">
<div class="share-icon">
<i class="fab fa-snapchat fa-2x"></i>
</div>
<p>Snapchat</p>
</div>
</li>
<li>
<div class="sharing">
<div class="share-icon">
<i class="fab fa-facebook fa-2x"></i>
</div>
<p>Facebook</p>
</div>
</li>
<li>
<div class="sharing">
<div class="share-icon"><i class="fab fa-twitter fa-2x"></i></div>
<p>Twitter</p>
</div>
</li>
</ul>
</div>
</div>h1{
text-align: center;
margin: 50px 0;
}
p {
font-size: 1.2rem;
}
.container {
height: 25rem;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
.box {
width: 15rem;
height: 100%;
position: relative;
user-select: none;
overflow: hidden;
border-radius: 5px;
}
.box .by_default {
background: #dde1e7;
margin: 10px;
box-shadow: -3px -3px 7px #fffdfdcc,
3px 3px 5px rgba(94, 104, 121, 0.342);
border-radius: 5px;
position: relative;
cursor: pointer;
z-index: 2;
}
.box .by_default li {
padding: 1rem;
}
.box .by_default:before {
content: "";
position: absolute;
top: 1.5rem;
right: 1rem;
width: 0.5rem;
height: 0.5rem;
border: 2.5px solid;
border-color: transparent transparent #333 #333;
transform: rotate(-45deg);
}
.box .options {
position: absolute;
top: 4rem;
left: 0;
width: 13.5rem;
border-radius: 5px;
transform: translateY(-100%);
transition: all 0.3s ease;
opacity: 0;
margin: 12px;
margin-top: 20px;
box-shadow: -3px -3px 7px #fffdfdcc,
3px 3px 5px rgba(94, 104, 121, 0.342);
}
.box .options li {
padding: 1rem;
cursor: pointer;
}
.box .sharing {
display: flex;
align-items: center;
}
.box .sharing .share-icon {
margin-right: 1.1rem;
margin-left: 0.9rem;
}
.box.active .options {
opacity: 1;
transform: translateY(0%);
}
.box.active .by_default:before {
top: 28px;
transform: rotate(-225deg);
}
.fa-facebook {
color: #3b5998;
}
.fa-instagram {
color: #e1306c;
}
.fa-snapchat {
color: #fffc00;
}
.fa-twitter {
color: #1da1f2;
}$(".by_default").click(function(){
$(this).parent().toggleClass("active");
})
$(".options li").click(function(){
var defaultShare = $(this).html();
$(".by_default li").html(defaultShare);
$(this).parents(".box").removeClass("active");
})<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Выпадающий список
Открыть элемент
Анимированные кнопки социальных сетей
<div class="container" onclick="expand()"> <i class="fa fa-plus" id="plus"></i> </div> <div class="menu_group" id="menu"> <a href="#"><img src="https://img.icons8.com/color/48/000000/whatsapp.png"/></a> <a href="#"><img src="https://img.icons8.com/fluent/48/000000/instagram-new.png"/></a> <a href="#"><img src="https://img.icons8.com/officel/80/000000/facebook-circled.png"/></a> <a href="#"><img src="https://img.icons8.com/fluent/96/000000/gmail.png"/></a> <a href="#"><img src="https://img.icons8.com/color/96/000000/telegram-app.png"/></a> <a href="#"><img src="https://img.icons8.com/officel/80/000000/google-logo.png"/></a> </div>
.container{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
height: 100px;
width: 100px;
background: #002651;
text-align: center;
border-radius: 50%;
}
.fa-plus{
margin-top: 25px;
font-size: 50px;
display: block;
color: white;
cursor: pointer;
transition: .7s;
}
.menu_group{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100px;
width: 100px;
margin: auto;
background: #775ada;
border-color: #581b98;
border-radius: 50%;
z-index: -1;
transform: scale(0);
transition: .7s;
}
.menu_group a{
position: absolute;
display: inline-block;
font-size: 12px;
color: #364f6b;
}
a:hover{
color: #2c3e50;
}
a:nth-child(1){
top: 6px;
left: 45px;
}
a:nth-child(2){
top: 24px;
left: 77px;
}
a:nth-child(3){
top: 58px;
left: 76px;
}
a:nth-child(4){
top: 78px;
left: 42px;
}
a:nth-child(5){
top: 58px;
left: 10px;
}
a:nth-child(6){
top: 23px;
left: 12px;
}
img{
height: 15px;
}var menu = document.getElementById('menu');
var plus = document.getElementById('plus');
var abc = 0;
function expand(){
if (abc == 0) {
menu.style.transform = "scale(3)";
plus.style.transform = "rotate(360deg)";
abc = 1;
}else{
menu.style.transform = "scale(0)";
plus.style.transform = "rotate(0deg)";
abc = 0;
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Анимированные кнопки социальных сетей
Открыть элемент
Социальные иконки
<div class="main">
<h1>SOCIAL MEDIA ICONS</h1>
<div class="ul__wrap">
<ul>
<li>
<a href="#"><i class="fab fa-facebook"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-whatsapp"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-youtube"></i></a>
</li>
</ul>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Neucha&family=Poppins:wght@100&family=Source+Sans+Pro:wght@300&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Neucha', cursive;
background-color: #fff;
}
.main{
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(230, 230, 230);
padding: 100px 0;
}
.main h1{
font-size: 40px;
font-weight: normal;
color: #444;
text-align: center;
margin-bottom: 50px;
}
.ul__wrap{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.main ul{
display: flex;
}
.main ul li{
list-style-type: none;
width: 80px;
height: 80px;
background-color: rgb(230, 230, 230);
margin: 0 30px;
display: grid;
place-items: center;
border-radius: 5px;
box-shadow: 9px 9px 15px rgba(0, 0, 0, 0.299),
-7px -7px 10px rgba(255, 255, 255, .8);
transition: all .4s ease-in-out;
cursor: pointer;
}
ul li a{
font-size: 40px;
color: #444;
transition: all .4s ease-in-out;
}
.main ul li:hover{
box-shadow: inset 7px 7px 8px rgba(0, 0, 0, 0.299),
inset -5px -5px 6px rgba(255, 255, 255, .8);
}
.main ul li:hover a{
transform: translateY(3px);
font-size: 37px;
}
ul li:hover .fa-facebook{
color: #3b5998;
}
ul li:hover .fa-instagram{
color: #c32a6a;
}
ul li:hover .fa-twitter{
color: #55acee;
}
ul li:hover .fa-whatsapp{
color: #00cf18;
}
ul li:hover .fa-youtube{
color: #cd201f;
}
@media (max-width: 667px){
.main ul li{
margin: 0 15px;
}
}
@media (max-width: 425px){
.main ul li{
width: 50px;
height: 50px;
}
}
@media (max-width: 375px){
.main ul li {
margin: 0 10px;
}
ul li a {
font-size: 30px;
}
}
@media (max-width: 320px){
.main ul li{
width: 40px;
height: 40px;
}
}<script src="https://use.fontawesome.com/ebd19701ea.js"></script>
Социальные иконки
Открыть элемент
Адаптивное боковое меню
<div class="main">
<div class="sidebar">
<!-- Top Row -->
<div class="top-row">
<div class="logo">
<i class="uil uil-airplay"></i>
<p>Crown Coder</p>
</div>
<i class="uil uil-bars hamburgur"></i>
<i class="uil uil-times close"></i>
</div>
<!-- MIddle Row -->
<div class="middle-row">
<li class="search-bar">
<a href="#">
<i class="uil uil-search"></i>
<p>
<input type="text" placeholder="Search...">
</p>
</a>
</li>
<li class="links">
<a href="#">
<i class="uil uil-estate"></i>
<p>Home</p>
</a>
<span class="outter-name">Home</span>
</li>
<li class="links">
<a href="#">
<i class="uil uil-meeting-board"></i>
<p>Service</p>
</a>
<span class="outter-name">Service</span>
</li>
<li class="links">
<a href="#">
<i class="uil uil-images"></i>
<p>Gallery</p>
</a>
<span class="outter-name">Gallery</span>
</li>
<li class="links">
<a href="#">
<i class="uil uil-clipboard-notes"></i>
<p>Portfolio</p>
</a>
<span class="outter-name">Portfolio</span>
</li>
<li class="links">
<a href="#">
<i class="uil uil-chart"></i>
<p>Skills</p>
</a>
<span class="outter-name">Skills</span>
</li>
<li class="links">
<a href="#">
<i class="uil uil-user"></i>
<p>About Us</p>
</a>
<span class="outter-name">About Us</span>
</li>
<li class="links">
<a href="#">
<i class="uil uil-location-arrow"></i>
<p>Contact Us</p>
</a>
<span class="outter-name">Contact Us</span>
</li>
</div>
<!-- Bottom Row -->
<div class="bottom-row">
<p>Nitin Jangir</p>
<i class="uil uil-setting"></i>
</div>
</div>
</div>*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
@font-face {
font-family: poppins;
src: url(./Fonts/Poppins-Medium.ttf);
}
.main{
width: 100%;
height: 100vh;
background-color: rgb(235, 235, 235);
font-family: poppins;
}
.sidebar{
width: 260px;
height: 100vh;
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all .6s ease;
}
.sidebar .uil{
font-size: 21px;
}
/* Top Row Started */
.top-row{
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
display: flex;
align-items: center;
white-space: nowrap;
transition: all .5s ease;
}
.logo p{
margin-left: 6px;
font-size: 18px;
}
.top-row .hamburgur + .close{
cursor: pointer;
}
.top-row .uil{
font-size: 26px;
}
.top-row .hamburgur{
display: none;
}
/* Middle Row Started */
.middle-row{
width: 100%;
color: #fff;
}
.middle-row li{
list-style: none;
position: relative;
}
.middle-row li a{
width: 100%;
height: 50px;
display: flex;
align-items: center;
color: #fff;
text-decoration: none;
border-radius: 10px;
padding: 14px;
transition: all .5s ease;
}
.middle-row .links a:hover{
background-color: #fff;
color: #333;
}
.middle-row li a p{
margin-left: 12px;
transition: all .5s ease;
}
.middle-row .search-bar{
background-color: rgba(255, 255, 255, 0.236);
border-radius: 10px;
}
.middle-row .search-bar input{
border: none;
outline: none;
background-color: transparent;
height: 100%;
color: #fff;
font-size: 16px;
}
::placeholder{
color: #fff;
}
.middle-row li .outter-name{
position: absolute;
bottom: 50%;
left: 160%;
transform: translateY(50%);
background-color: #333;
color: #fff;
padding: 8px 15px;
border-radius: 6px;
white-space: nowrap;
transition: all .6s ease;
opacity: 0;
}
.active .middle-row li:hover .outter-name{
opacity: 1;
}
.active .bottom-row p{
display: none;
}
/* Bottom Row Started */
.bottom-row{
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: rgba(255, 255, 255, 0.236);
border-radius: 10px;
padding: 0 12px;
}
.bottom-row .uil-setting{
cursor: pointer;
}
.bottom-row .uil{
font-size: 26px;
}
.bottom-row p{
white-space: nowrap;
transition: all .5s ease;
}
/* Active Sidebar Css */
.active{
width: 80px;
padding: 20px 15px;
}
.active .top-row{
justify-content: center;
}
.active .top-row .logo{
display: none;
transition: all .5s ease;
}
.active .middle-row li a p{
display: none;
}
.active .middle-row li a{
justify-content: center;
}
.active .top-row .close{
display: none;
}
.active .top-row .hamburgur{
display: block;
}const ham = document.querySelector(".hamburgur");
const close = document.querySelector(".close");
const sideBar = document.querySelector(".sidebar");
ham.onclick = function() {
sideBar.classList.remove("active")
}
close.onclick = function() {
sideBar.classList.add("active")
}<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
Адаптивное боковое меню
Открыть элемент
Открывающее меню CSS Checkbox
<input type="checkbox" class="check" id="checked">
<label class="menu-btn" for="checked">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
<span class="menu-btn__text">MENU</span>
</label>
<label class="close-menu" for="checked"></label>
<nav class="drawer-menu">
<ul>
<li><a href="#">Side Menu Name</a></li>
<li><a href="#">Side Menu Name</a></li>
<li><a href="#">Side Menu Name</a></li>
<li><a href="#">Side Menu Name</a></li>
<li><a href="#">Side Menu Name</a></li>
</ul>
</nav>
<div class="contents">
<div class="contents__inner">
<h1>Открывающее меню CSS Checkbox</h1>
<p>Только на чистом <span>CSS</span> без js.</p>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Neucha&family=Poppins:wght@100&family=Source+Sans+Pro:wght@300&display=swap');
/* common */
body {
font-family: 'Neucha', cursive;
margin: 0;
padding: 0;
background: #666;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* contents */
.contents {
display: table;
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
background: #f6bc60;
box-shadow: 0 0 50px 0 rgba(0,0,0,.8);
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-delay: .3s;
transition-delay: .3s;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
.contents__inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.contents__inner h1 {
margin: 0;
padding: 0;
color: #fff;
font-size: 40px;
font-family: 'Neucha', cursive;
font-style: italic;
}
.contents__inner p {
margin-top: 20px;
color: #fff;
font-size: 20px;
}
.contents__inner p span {
border-bottom: 1px solid #fff;
}
/* drawer menu */
.drawer-menu {
box-sizing: border-box;
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 100%;
padding: 120px 0;
background: #222;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: perspective(500px) rotateY(-90deg);
transform: perspective(500px) rotateY(-90deg);
opacity: 0;
}
.drawer-menu li {
text-align: center;
}
.drawer-menu li a {
display: block;
height: 50px;
line-height: 50px;
font-size: 14px;
color: #fff;
-webkit-transition: all .8s;
transition: all .8s;
}
.drawer-menu li a:hover {
color: #1a1e24;
background: #fff;
}
/* checkbox */
.check {
display: none;
}
/* menu button - label tag */
.menu-btn {
position: fixed;
display: block;
top: 40px;
right: 40px;
display: block;
width: 40px;
height: 40px;
font-size: 10px;
text-align: center;
cursor: pointer;
z-index: 3;
}
.bar {
position: absolute;
top: 0;
left: 0;
display: block;
width: 40px;
height: 1px;
background: #fff;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
}
.bar.middle {
top: 15px;
opacity: 1;
}
.bar.bottom {
top: 30px;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
}
.menu-btn__text {
position: absolute;
bottom: -15px;
left: 0;
right: 0;
margin: auto;
color: #fff;
-webkit-transition: all .5s;
transition: all .5s;
display: block;
visibility: visible;
opacity: 1;
}
.menu-btn:hover .bar {
background: #999;
}
.menu-btn:hover .menu-btn__text {
color: #999;
}
.close-menu {
position: fixed;
top: 0;
right: 300px;
width: 100%;
height: 100vh;
background: rgba(0,0,0,0);
cursor: url(http://theorthodoxworks.com/demo/images/cross.svg),auto;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
visibility: hidden;
opacity: 0;
}
/* checked */
.check:checked ~ .drawer-menu {
-webkit-transition-delay: .3s;
transition-delay: .3s;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
z-index: 2;
}
.check:checked ~ .contents {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
}
.check:checked ~ .menu-btn .menu-btn__text {
visibility: hidden;
opacity: 0;
}
.check:checked ~ .menu-btn .bar.top {
width: 56px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.check:checked ~ .menu-btn .bar.middle {
opacity: 0;
}
.check:checked ~ .menu-btn .bar.bottom {
width: 56px;
top: 40px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.check:checked ~ .close-menu {
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-delay: .3s;
transition-delay: .3s;
background: rgba(0,0,0,.5);
visibility: visible;
opacity: 1;
z-index: 3;
}Открывающее меню CSS Checkbox
Открыть элемент
Menu Hover effect
<nav>
<ul>
<li><a href="#">Home
<span></span>
<span></span>
<span></span>
<span></span>
</a></li>
<li><a href="#">About
<span></span>
<span></span>
<span></span>
<span></span>
</a></li>
<li><a href="#">Services
<span></span>
<span></span>
<span></span>
<span></span>
</a></li>
<li><a href="#">Team
<span></span>
<span></span>
<span></span>
<span></span>
</a></li>
<li><a href="#">Contact
<span></span>
<span></span>
<span></span>
<span></span>
</a></li>
</ul>
</nav>body {
height: 100vh;
display: flex;
justify-content: center;
background: #fcdada;
align-items: center;
}
nav {
background: #5c969e;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
}
ul li span {
position: absolute;
width: 25%;
height: 100%;
background-color: #ffa5a5;
z-index: -1;
left: 0;
top: 0;
transform: scaleY(0);
transition: all 0.5s;
transform-origin: top;
}
ul li span:nth-child(2) {
left: 25%;
transition-delay: 0.15s;
}
ul li span:nth-child(3) {
left: 50%;
transition-delay: 0.3s;
}
ul li span:nth-child(4) {
left: 75%;
transition-delay: 0.45s;
}
ul li a {
display: block;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
color: #ededed;
z-index: 2;
text-transform: capitalize;
text-decoration: none;
position: relative;
transition: all 0.5s;
}
ul li a:hover {
color: #3d7ea6;
}
ul li a:hover span {
transform: scaleY(1);
}Scss
body {
height: 100vh;
display: flex;
justify-content: center;
background: #fcdada;
align-items: center;
}
nav {
background: #5c969e;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
li {
span {
position: absolute;
width: 25%;
height: 100%;
background-color: #ffa5a5;
z-index: -1;
left: 0;
top: 0;
transform: scaleY(0);
transition: all 0.5s;
transform-origin: top;
}
span:nth-child(2) {
left: 25%;
transition-delay: 0.15s;
}
span:nth-child(3) {
left: 50%;
transition-delay: 0.3s;
}
span:nth-child(4) {
left: 75%;
transition-delay: 0.45s;
}
a {
display: block;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
color: #ededed;
z-index: 2;
text-transform: capitalize;
text-decoration: none;
position: relative;
transition: all 0.5s;
&:hover {
color: #3d7ea6;
span {
transform: scaleY(1);
}
}
}
}
}
Menu Hover effect
Открыть элемент
Панель вкладок навигации магнитного индикатора
<div class="wrapper">
<ul>
<li class="active"><a href="#">
<span class="icon">
<ion-icon name="home"></ion-icon>
</span>
<span class="text">Home</span>
</a></li>
<li><a href="#">
<span class="icon"><ion-icon name="search"></ion-icon></span>
<span class="text">Search</span>
</a></li>
<li><a href="#">
<span class="icon"><ion-icon name="heart"></ion-icon></span>
<span class="text">likes</span>
</a></li>
<li><a href="#">
<span class="icon"><ion-icon name="notifications"></ion-icon></span>
<span class="text">Info</span>
</a></li>
<li><a href="#">
<span class="icon"><ion-icon name="person"></ion-icon></span>
<span class="text">Profile</span>
</a></li>
<div class="pointer">
<div class="dot"></div>
</div>
</ul>
</div>@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
list-style: none;
text-decoration: none;
}
body{
background: #4448ff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper{
width: auto;
height: 100px;
background: #fff;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
}
.wrapper ul{
display: flex;
position: relative;
}
.wrapper ul li{
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.wrapper ul li a{
color: #d0d3da;
display: block;
text-align: center;
}
.wrapper ul li a span{
display: block;
}
.wrapper ul li a .icon{
font-size: 32px;
margin-bottom: 5px;
transition: 0.5s ease;
}
.wrapper ul li a .text{
font-size: 10px;
letter-spacing: 3px;
opacity: 1;
font-weight: 700;
transition: 0.5s ease;
}
.wrapper .pointer{
position: absolute;
bottom: 23px;
left: 45px;
width: 10px;
height: 10px;
background: #4448ff;
border-radius: 50%;
transition: 0.5s ease;
}
.wrapper ul li.active .text{
opacity: 0;
}
.wrapper ul li.active .icon{
color: #4448ff;
}
.wrapper ul li:nth-child(1).active ~ .pointer{
transform: translateX(0);
}
.wrapper ul li:nth-child(2).active ~ .pointer{
transform: translateX(100px);
}
.wrapper ul li:nth-child(3).active ~ .pointer{
transform: translateX(200px);
}
.wrapper ul li:nth-child(4).active ~ .pointer{
transform: translateX(300px);
}
.wrapper ul li:nth-child(5).active ~ .pointer{
transform: translateX(400px);
}var list_items = document.querySelectorAll(".wrapper ul li");
list_items.forEach(function(item){
item.addEventListener("click", function(){
list_items.forEach(function(item){
item.classList.remove("active");
});
item.classList.add("active");
});
})Панель вкладок навигации магнитного индикатора
Открыть элемент
Магнитная анимация вкладок на HTML CSS и Javascript
<div class="wrapper">
<ul>
<li class="active"><a href="#">
<span class="icon">
<ion-icon name="home"></ion-icon>
</span>
<span class="text">Home</span>
</a></li>
<li><a href="#">
<span class="icon"><ion-icon name="search"></ion-icon></span>
<span class="text">Search</span>
</a></li>
<li><a href="#">
<span class="icon"><ion-icon name="heart"></ion-icon></span>
<span class="text">likes</span>
</a></li>
<li><a href="#">
<span class="icon"><ion-icon name="notifications"></ion-icon></span>
<span class="text">Info</span>
</a></li>
<li><a href="#">
<span class="icon"><ion-icon name="person"></ion-icon></span>
<span class="text">Profile</span>
</a></li>
<div class="pointer">
<div class="dot"></div>
</div>
</ul>
</div>@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
list-style: none;
text-decoration: none;
}
body{
background: #ff0031;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper{
width: auto;
height: 100px;
background: #fff;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 25px;
}
.wrapper ul{
display: flex;
position: relative;
}
.wrapper ul li{
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper ul li a{
color: #c5c5c5;
display: block;
text-align: center;
padding-top: 15px;
transition: 0.5s ease;
}
.wrapper ul li a span{
display: block;
}
.wrapper ul li a .icon{
font-size: 32px;
}
.wrapper ul li a .text{
font-size: 10px;
letter-spacing: 2px;
font-weight: 700;
}
.wrapper ul li.active a{
color: #ff0031;
}
.wrapper .pointer{
position: absolute;
top: -125px;
left: 0px;
width: 100px;
height: 150px;
background: #ff0031;
border-radius: 50%;
transition: 0.5s ease;
}
.wrapper .pointer:before{
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 22px;
height: 25px;
background: transparent;
border-top-right-radius: 20px;
box-shadow: 0 -17px 0 0 #ff0031;
}
.wrapper .pointer:after{
content: "";
position: absolute;
bottom: 0px;
right: 0px;
width: 22px;
height: 25px;
background: transparent;
border-top-left-radius: 20px;
box-shadow: 0 -17px 0 #ff0031;
}
.wrapper .pointer .dot{
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
transition: 0.5s ease;
transition-delay: 2s;
}
.wrapper ul li:nth-child(1).active ~ .pointer{
transform: translateX(0);
}
.wrapper ul li:nth-child(2).active ~ .pointer{
transform: translateX(100px);
}
.wrapper ul li:nth-child(3).active ~ .pointer{
transform: translateX(200px);
}
.wrapper ul li:nth-child(4).active ~ .pointer{
transform: translateX(300px);
}
.wrapper ul li:nth-child(5).active ~ .pointer{
transform: translateX(400px);
}var list_items = document.querySelectorAll(".wrapper ul li");
list_items.forEach(function(item){
item.addEventListener("click", function(){
list_items.forEach(function(item){
item.classList.remove("active");
});
item.classList.add("active");
});
})<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
Магнитная анимация вкладок на HTML CSS и Javascript
Открыть элемент
Выпадающее меню социальных сетей в HTML, CSS и Javascript
<div class="wrapper">
<div class="social_share_wrap">
<div class="ss_wrap ss_wrap_1">
<div class="ss_btn">
<span class="icon">
<ion-icon name="share-social"></ion-icon>
</span>
</div>
<div class="dd_list">
<ul>
<li><a href="#" class="facebook active">
<span class="icon">
<ion-icon name="logo-facebook"></ion-icon>
</span>
</a></li>
<li><a href="#" class="twitter">
<span class="icon">
<ion-icon name="logo-twitter"></ion-icon>
</span>
</a></li>
<li><a href="#" class="instagram ">
<span class="icon">
<ion-icon name="logo-instagram"></ion-icon>
</span>
</a></li>
<li><a href="#" class="reddit">
<span class="icon">
<ion-icon name="logo-reddit"></ion-icon>
</span>
</a></li>
</ul>
</div>
</div>
<div class="ss_wrap ss_wrap_2">
<div class="ss_btn">
<span class="icon">
<ion-icon name="share-social"></ion-icon>
</span>
</div>
<div class="dd_list">
<ul>
<li><a href="#" class="facebook">
<span class="icon">
<ion-icon name="logo-facebook"></ion-icon>
</span>
</a></li>
<li><a href="#" class="twitter active">
<span class="icon">
<ion-icon name="logo-twitter"></ion-icon>
</span>
</a></li>
<li><a href="#" class="instagram">
<span class="icon">
<ion-icon name="logo-instagram"></ion-icon>
</span>
</a></li>
<li><a href="#" class="reddit">
<span class="icon">
<ion-icon name="logo-reddit"></ion-icon>
</span>
</a></li>
</ul>
</div>
</div>
<div class="ss_wrap ss_wrap_3">
<div class="ss_btn">
<span class="icon">
<ion-icon name="share-social"></ion-icon>
</span>
</div>
<div class="dd_list">
<ul>
<li><a href="#" class="facebook">
<span class="icon">
<ion-icon name="logo-facebook"></ion-icon>
</span>
<span class="text">
Facebook
</span>
</a></li>
<li><a href="#" class="twitter">
<span class="icon">
<ion-icon name="logo-twitter"></ion-icon>
</span>
<span class="text">
Twitter
</span>
</a></li>
<li><a href="#" class="instagram">
<span class="icon">
<ion-icon name="logo-instagram"></ion-icon>
</span>
<span class="text">
Instagram
</span>
</a></li>
<li><a href="#" class="reddit">
<span class="icon">
<ion-icon name="logo-reddit"></ion-icon>
</span>
<span class="text">
Reddit
</span>
</a></li>
</ul>
</div>
</div>
</div>
</div>@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
:root {
--white: #fff;
--icon-clr: #aaaaaa;
--bg1-clr: #f173c6;
--bg2-clr: #fd6b9a;
--facebook-clr: #3b5998;
--twitter-clr: #55acee;
--instagram-clr: #bc2a8d;
--reddit-clr: #ff4500;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: "Open Sans", sans-serif;
user-select: none;
}
body {
background: linear-gradient(to right, var(--bg1-clr), var(--bg2-clr));
}
.wrapper {
display: flex;
justify-content: center;
margin: 100px 0;
}
.ss_wrap {
position: relative;
margin-bottom: 30px;
}
.ss_wrap .ss_btn {
background: var(--white);
color: var(--icon-clr);
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
border-radius: 50%;
cursor: pointer;
}
.ss_wrap .ss_btn:hover,
.ss_wrap .ss_btn.active{
color: var(--bg1-clr);
}
.ss_btn .icon {
display: flex;
}
.ss_wrap .dd_list {
position: absolute;
}
.ss_wrap .dd_list ul {
display: none;
width: auto;
background: var(--white);
margin: 0 10px;
border-radius: 25px;
position: relative;
}
.ss_wrap .dd_list ul li a {
display: flex;
width: 50px;
height: 50px;
margin: 0 10px;
justify-content: center;
align-items: center;
color: var(--icon-clr);
}
.ss_wrap .dd_list ul:before {
content: "";
position: absolute;
border: 8px solid;
}
/* social share 1 */
.ss_wrap.ss_wrap_1 .dd_list {
top: 0;
left: 60px;
}
.ss_wrap.ss_wrap_1 .dd_list ul:before {
top: 50%;
transform: translateY(-50%);
left: -15px;
border-color: transparent var(--white) transparent transparent;
}
/* social share 2 */
.ss_wrap.ss_wrap_2 .ss_btn {
border-radius: 5px;
}
.ss_wrap.ss_wrap_2 .dd_list {
top: 0;
right: 60px;
}
.ss_wrap.ss_wrap_2 .dd_list ul {
border-radius: 5px;
}
.ss_wrap.ss_wrap_2 .dd_list ul:before {
top: 50%;
transform: translateY(-50%);
right: -15px;
border-color: transparent transparent transparent var(--white);
}
/* social share 3 */
.ss_wrap.ss_wrap_3 {
margin-bottom: 100px;
}
.ss_wrap.ss_wrap_3 .dd_list {
top: 70px;
left: 50%;
transform: translateX(-50%);
}
.ss_wrap.ss_wrap_3 .dd_list ul {
flex-direction: column;
width: 175px;
border-radius: 5px;
}
.ss_wrap.ss_wrap_3 .dd_list ul li a {
width: 100%;
margin: 0;
justify-content: unset;
padding: 0 40px;
}
.ss_wrap.ss_wrap_3 .dd_list ul li a span {
display: flex;
}
.ss_wrap.ss_wrap_3 .dd_list ul li a span.icon {
width: 25px;
margin-right: 10px;
}
.ss_wrap.ss_wrap_3 .dd_list ul li a span.text {
width: 125px;
}
.ss_wrap.ss_wrap_3 .dd_list ul:before {
top: -15px;
left: 50%;
transform: translateX(-50%);
border-color: transparent transparent var(--white) transparent;
}
.ss_wrap.ss_wrap_3 .dd_list ul li a.facebook span.icon,
.ss_wrap.ss_wrap_3 .dd_list ul li a.facebook span.text:hover,
.ss_wrap.ss_wrap_1 .dd_list ul li a.facebook.active span.icon,
.ss_wrap.ss_wrap_2 .dd_list ul li a.facebook span.icon:hover {
color: var(--facebook-clr);
}
.ss_wrap.ss_wrap_3 .dd_list ul li a.twitter span.icon,
.ss_wrap.ss_wrap_3 .dd_list ul li a.twitter span.text:hover,
.ss_wrap.ss_wrap_1 .dd_list ul li a.twitter span.icon:hover,
.ss_wrap.ss_wrap_2 .dd_list ul li a.twitter.active span.icon {
color: var(--twitter-clr);
}
.ss_wrap.ss_wrap_3 .dd_list ul li a.instagram span.icon,
.ss_wrap.ss_wrap_3 .dd_list ul li a.instagram span.text:hover,
.ss_wrap.ss_wrap_1 .dd_list ul li a.instagram span.icon:hover,
.ss_wrap.ss_wrap_2 .dd_list ul li a.instagram span.icon:hover {
color: var(--instagram-clr);
}
.ss_wrap.ss_wrap_3 .dd_list ul li a.reddit span.icon,
.ss_wrap.ss_wrap_3 .dd_list ul li a.reddit span.text:hover,
.ss_wrap.ss_wrap_1 .dd_list ul li a.reddit span.icon:hover,
.ss_wrap.ss_wrap_2 .dd_list ul li a.reddit span.icon:hover {
color: var(--reddit-clr);
}
.ss_wrap .ss_btn.active + .dd_list ul {
display: flex;
}var ss_btn_1 = document.querySelector(".ss_wrap_1 .ss_btn");
var ss_btn_2 = document.querySelector(".ss_wrap_2 .ss_btn");
var ss_btn_3 = document.querySelector(".ss_wrap_3 .ss_btn");
ss_btn_1.addEventListener("click", function () {
this.classList.toggle("active");
});
ss_btn_2.addEventListener("click", function () {
this.classList.toggle("active");
});
ss_btn_3.addEventListener("click", function () {
this.classList.toggle("active");
});<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
Выпадающее меню социальных сетей в HTML, CSS и Javascript
Открыть элемент
<div class="wrapper">
<div class="top_navbar">
<div class="hamburger">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="top_menu">
<div class="logo">logo</div>
<ul>
<li><a href="#">
<i class="fas fa-search"></i></a></li>
<li><a href="#">
<i class="fas fa-bell"></i>
</a></li>
<li><a href="#">
<i class="fas fa-user"></i>
</a></li>
</ul>
</div>
</div>
<div class="sidebar">
<ul>
<li><a href="#">
<span class="icon"><i class="fas fa-book"></i></span>
<span class="title">Books</span></a></li>
<li><a href="#">
<span class="icon"><i class="fas fa-file-video"></i></span>
<span class="title">Movies</span>
</a></li>
<li><a href="#">
<span class="icon"><i class="fas fa-volleyball-ball"></i></span>
<span class="title">Sports</span>
</a></li>
<li><a href="#" class="active">
<span class="icon"><i class="fas fa-blog"></i></span>
<span class="title">Blogs</span>
</a></li>
<li><a href="#">
<span class="icon"><i class="fas fa-leaf"></i></span>
<span class="title">Nature</span>
</a></li>
</ul>
</div>
<div class="main_container">
<div class="item">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut sapiente adipisci nemo atque eligendi reprehenderit minima blanditiis eum quae aspernatur!
</div>
<div class="item">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut sapiente adipisci nemo atque eligendi reprehenderit minima blanditiis eum quae aspernatur!
</div>
<div class="item">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut sapiente adipisci nemo atque eligendi reprehenderit minima blanditiis eum quae aspernatur!
</div>
<div class="item">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut sapiente adipisci nemo atque eligendi reprehenderit minima blanditiis eum quae aspernatur!
</div>
</div>
</div>@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body{
background: #e1ecf2;
}
.wrapper{
margin: 10px;
}
.wrapper .top_navbar{
width: calc(100% - 20px);
height: 60px;
display: flex;
position: fixed;
top: 10px;
}
.wrapper .top_navbar .hamburger{
width: 70px;
height: 100%;
background: #2e4ead;
padding: 15px 17px;
border-top-left-radius: 20px;
cursor: pointer;
}
.wrapper .top_navbar .hamburger div{
width: 35px;
height: 4px;
background: #92a6e2;
margin: 5px 0;
border-radius: 5px;
}
.wrapper .top_navbar .top_menu{
width: calc(100% - 70px);
height: 100%;
background: #fff;
border-top-right-radius: 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.wrapper .top_navbar .top_menu .logo{
color: #2e4ead;
font-size: 20px;
font-weight: 700;
letter-spacing: 3px;
}
.wrapper .top_navbar .top_menu ul{
display: flex;
}
.wrapper .top_navbar .top_menu ul li a{
display: block;
margin: 0 10px;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
border: 1px solid #2e4ead;
border-radius: 50%;
color: #2e4ead;
}
.wrapper .top_navbar .top_menu ul li a:hover{
background: #4360b5;
color: #fff;
}
.wrapper .top_navbar .top_menu ul li a:hover i{
color: #fff;
}
.wrapper .sidebar{
position: fixed;
top: 70px;
left: 10px;
background: #2e4ead;
width: 200px;
height: calc(100% - 80px);
border-bottom-left-radius: 20px;
transition: all 0.3s ease;
}
.wrapper .sidebar ul li a{
display: block;
padding: 20px;
color: #fff;
position: relative;
margin-bottom: 1px;
color: #92a6e2;
white-space: nowrap;
}
.wrapper .sidebar ul li a:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: #92a6e2;
display: none;
}
.wrapper .sidebar ul li a span.icon{
margin-right: 10px;
display: inline-block;
}
.wrapper .sidebar ul li a span.title{
display: inline-block;
}
.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active{
background: #4360b5;
color: #fff;
}
.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before{
display: block;
}
.wrapper .main_container{
width: (100% - 200px);
margin-top: 70px;
margin-left: 200px;
padding: 15px;
transition: all 0.3s ease;
}
.wrapper .main_container .item{
background: #fff;
margin-bottom: 10px;
padding: 15px;
font-size: 14px;
line-height: 22px;
}
.wrapper.collapse .sidebar{
width: 70px;
}
.wrapper.collapse .sidebar ul li a{
text-align: center;
}
.wrapper.collapse .sidebar ul li a span.icon{
margin: 0;
}
.wrapper.collapse .sidebar ul li a span.title{
display: none;
}
.wrapper.collapse .main_container{
width: (100% - 70px);
margin-left: 70px;
}$(document).ready(function(){
$(".hamburger").click(function(){
$(".wrapper").toggleClass("collapse");
});
});<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
Адаптивная боковая панель навигации на HTML CSS и Jquery
Открыть элемент
SIDEBAR MENU
<div class="wrapper">
<div class="top_navbar">
<div class="hamburger">
<div class="hamburger__inner">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
<div class="menu">
<div class="logo">
SideBar Menu
</div>
<div class="right_menu">
<ul>
<li><i class="fas fa-user"></i>
<div class="profile_dd">
<div class="dd_item">Profile</div>
<div class="dd_item">Change Password</div>
<div class="dd_item">Logout</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="main_container">
<div class="sidebar">
<div class="sidebar__inner">
<div class="profile">
<div class="img">
<img src="https://i.imgur.com/Ctwf8HA.png" alt="profile_pic">
</div>
<div class="profile_info">
<p>Welcome</p>
<p class="profile_name">Alex John</p>
</div>
</div>
<ul>
<li>
<a href="#" class="active">
<span class="icon"><i class="fas fa-dice-d6"></i></span>
<span class="title">Dashboard</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fab fa-delicious"></i></span>
<span class="title">Forms</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fab fa-elementor"></i></span>
<span class="title">UI Elements</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-chart-pie"></i></span>
<span class="title">Charts</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="fas fa-border-all"></i></span>
<span class="title">Tables</span>
</a>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab a nesciunt doloribus. Explicabo minus cumque, molestiae tempore repellendus iusto enim maiores pariatur officiis perferendis excepturi, ut dolore laborum eligendi laudantium placeat aspernatur! Quos dolorum unde officiis labore est animi excepturi neque, provident, inventore nobis expedita facilis aspernatur, nihil in atque?
</div>
<div class="item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab a nesciunt doloribus. Explicabo minus cumque, molestiae tempore repellendus iusto enim maiores pariatur officiis perferendis excepturi, ut dolore laborum eligendi laudantium placeat aspernatur! Quos dolorum unde officiis labore est animi excepturi neque, provident, inventore nobis expedita facilis aspernatur, nihil in atque?
</div>
<div class="item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab a nesciunt doloribus. Explicabo minus cumque, molestiae tempore repellendus iusto enim maiores pariatur officiis perferendis excepturi, ut dolore laborum eligendi laudantium placeat aspernatur! Quos dolorum unde officiis labore est animi excepturi neque, provident, inventore nobis expedita facilis aspernatur, nihil in atque?
</div>
<div class="item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab a nesciunt doloribus. Explicabo minus cumque, molestiae tempore repellendus iusto enim maiores pariatur officiis perferendis excepturi, ut dolore laborum eligendi laudantium placeat aspernatur! Quos dolorum unde officiis labore est animi excepturi neque, provident, inventore nobis expedita facilis aspernatur, nihil in atque?
</div>
<div class="item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab a nesciunt doloribus. Explicabo minus cumque, molestiae tempore repellendus iusto enim maiores pariatur officiis perferendis excepturi, ut dolore laborum eligendi laudantium placeat aspernatur! Quos dolorum unde officiis labore est animi excepturi neque, provident, inventore nobis expedita facilis aspernatur, nihil in atque?
</div>
<div class="item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab a nesciunt doloribus. Explicabo minus cumque, molestiae tempore repellendus iusto enim maiores pariatur officiis perferendis excepturi, ut dolore laborum eligendi laudantium placeat aspernatur! Quos dolorum unde officiis labore est animi excepturi neque, provident, inventore nobis expedita facilis aspernatur, nihil in atque?
</div>
<div class="item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab a nesciunt doloribus. Explicabo minus cumque, molestiae tempore repellendus iusto enim maiores pariatur officiis perferendis excepturi, ut dolore laborum eligendi laudantium placeat aspernatur! Quos dolorum unde officiis labore est animi excepturi neque, provident, inventore nobis expedita facilis aspernatur, nihil in atque?
</div>
</div>
</div>
</div> @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}
.wrapper{
width: 100%;
height: 100%;
}
.top_navbar{
background: #80CBC4;
height: 60px;
display: flex;
position: fixed;
width: 100%;
top: 0;
}
.top_navbar .hamburger{
width: 80px;
background: #004D40;
position: relative;
font-size: 28px;
}
.top_navbar .hamburger .hamburger__inner{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
cursor: pointer;
width: 40px;
height: 20px;
}
.top_navbar .hamburger__inner > div{
width: 30px;
height: 2px;
background: #fff;
position: absolute;
top: 0;
left: 0;
}
.top_navbar .hamburger div.two{
top: 10px;
width: 40px;
}
.top_navbar .hamburger div.three{
top: 20px;
}
.top_navbar .menu{
width: calc(100% - 80px);
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.top_navbar .menu .logo{
color: #004D40;
text-transform: uppercase;
letter-spacing: 2px;
}
.top_navbar .menu .right_menu ul{
display: flex;
}
.top_navbar .menu .right_menu ul li{
position: relative;
}
.top_navbar .menu .right_menu ul li .fas{
font-size: 22px;
cursor: pointer;
color: #004D40;
}
.top_navbar .menu .right_menu ul li .profile_dd{
position: absolute;
top: 35px;
right: -10px;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,0.5);
padding: 10px 0;
width: 180px;
border-radius: 3px;
display: none;
user-select: none;
}
.top_navbar .menu .right_menu ul li .profile_dd.active{
display: block;
}
.top_navbar .menu .right_menu ul li .profile_dd .dd_item{
padding: 10px;
cursor: pointer;
color: #004D40;
}
.top_navbar .menu .right_menu ul li .profile_dd .dd_item:hover{
background: #E0F2F1;
}
.top_navbar .menu .right_menu ul li .profile_dd:before{
content: "";
position: absolute;
top: -20px;
right: 10px;
border: 10px solid;
border-color: transparent transparent #fff transparent;
}
.main_container .sidebar{
position: fixed;
top: 60px;
left: 0;
width: 225px;
height: 100%;
background: #004D40;
transition: all 0.3s ease;
}
.main_container .sidebar .sidebar__inner{
position: relative;
}
.main_container .sidebar .profile{
display: flex;
align-items: center;
color: #fff;
padding: 20px 0;
white-space: nowrap;
transition: all 0.3s ease;
}
.main_container .sidebar .profile .img{
padding: 0 18px;
}
.main_container .sidebar .profile img{
width: 45px;
}
.main_container .sidebar .profile p:first-child{
font-size: 14px;
color: #80CBC4;
margin-bottom: 3px;
}
.main_container .container{
margin-top: 60px;
width: calc(100% - 225px);
margin-left: 225px;
padding: 30px;
transition: all 0.3s ease;
}
.main_container .sidebar ul li a{
color: #fff;
font-size: 18px;
padding: 20px 30px;
white-space: nowrap;
display: flex;
align-items: center;
margin-bottom: 1px;
transition: all 0.3s ease;
}
.main_container .sidebar ul li a .icon{
margin-right: 15px;
font-size: 28px;
}
.main_container .sidebar ul li a span{
display: inline-block;
}
.main_container .sidebar ul li a:hover,
.main_container .sidebar ul li a.active{
background: #fff;
color: #004D40;
}
.main_container .container .item{
background: #fff;
border: 1px solid #E0F2F1;
margin-bottom: 30px;
padding: 20px;
font-size: 14px;
line-height: 22px;
}
/* after adding active class */
.wrapper.active .sidebar{
width: 80px;
}
.wrapper.active .sidebar ul li a span.title,
.wrapper.active .profile_info
{
display: none;
}
.wrapper.active .main_container .container{
width: calc(100% - 80px);
margin-left: 80px;
}$(document).ready(function(){
$(".hamburger .hamburger__inner").click(function(){
$(".wrapper").toggleClass("active")
})
$(".top_navbar .fas").click(function(){
$(".profile_dd").toggleClass("active");
});
})<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
SIDEBAR MENU
Открыть элемент
Menu hover
<ul>
<li style="--clr:#00ade1">
<a href="#" data-text=" Home"> Home </a>
</li>
<li style="--clr:#ff6492">
<a href="#" data-text=" About"> About </a>
</li>
<li style="--clr:#ffdd1c">
<a href="#" data-text=" Services"> Services </a>
</li>
<li style="--clr:#00dc82">
<a href="#" data-text=" Blog"> Blog </a>
</li>
<li style="--clr:#dc00d4">
<a href="#" data-text=" Contact"> Contact </a>
</li>
</ul>@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Mochiy Pop One', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #252839;
}
ul {
position: relative;
display: flex;
flex-direction: column;
gap: 30px;
}
ul li {
position: relative;
list-style: none;
}
ul li a {
font-size: 4em;
text-decoration: none;
letter-spacing: 2px;
line-height: 1em;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}
ul li a::before {
content: attr(data-text);
position: absolute;
color: var(--clr);
width: 0;
overflow: hidden;
transition: 1s;
border-right: 8px solid var(--clr);
-webkit-text-stroke: 1px var(--clr);
}
ul li a:hover::before {
width: 100%;
filter: drop-shadow(0 0 25px var(--clr))
}Menu hover
Открыть элемент
Sidebar Menu
<div id="navbar" class="l-navbar">
<nav class="nav">
<div>
<a href="" class="nav__logo">
<i class='bx bxs-copyright nav__logo-icon'></i>
<span class="nav__logo-text">BRANDING</span>
</a>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bxs-chevron-right'></i>
</div>
<ul class="nav__list">
<a href="" class="nav__link">
<i class='bx bxl-windows nav__icon'></i>
<span class="nav__text">Windows</span>
</a>
<a href="" class="nav__link">
<i class='bx bxl-apple nav__icon'></i>
<span class="nav__text">Apple</span>
</a>
<a href="" class="nav__link">
<i class='bx bxl-android nav__icon'></i>
<span class="nav__text">Andriod</span>
</a>
<a href="" class="nav__link">
<i class='bx bxl-skype nav__icon'></i>
<span class="nav__text">Skype</span>
</a>
<a href="" class="nav__link">
<i class='bx bxl-telegram nav__icon'></i>
<span class="nav__text">Telegran</span>
</a>
<a href="" class="nav__link">
<i class='bx bxl-slack nav__icon'></i>
<span class="nav__text">Slack</span>
</a>
</ul>
</div>
<a href="" class="nav__link">
<i class='bx bx-log-out-circle nav__icon'></i>
<span class="nav__text">Logout</span>
</a>
</nav>
</div>
<h2>RESPONSIVE LEFTNAV NAVIGATION</h2>@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
*, ::before, ::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
padding: 1rem 0 0 5rem;
font-family: "poppins", sans-serif;
background: #23232a;
-webkit-transition: .5s;
transition: .5s;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
a {
text-decoration: none;
}
/*===== NAV =====*/
.l-navbar {
position: fixed;
top: 0;
left: 0;
width: 56px;
height: 100vh;
background-color: #2b2b32;
padding: 1.25rem .5rem 2rem;
-webkit-transition: .5s;
transition: .5s;
z-index: 100;
}
.nav__toggle {
position: absolute;
top: 1.2rem;
right: -2.2rem;
width: 25px;
height: 25px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
font-size: 1.25rem;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
-webkit-transition: .5s;
transition: .5s;
}
.show {
width: 250px;
}
.rotate {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: .5s;
transition: .5s;
}
.expander {
padding: 1rem 0 0 12rem;
-webkit-transition: .5s;
transition: .5s;
padding-left: 275px;
margin-top: 2rem;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
overflow: hidden;
}
.nav__logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 1.3rem;
padding: 0 .5rem;
}
.nav__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: .5rem;
margin-bottom: 1rem;
border-radius: .5rem;
color: #fff;
-webkit-transition: .3s;
transition: .3s;
}
.nav__link:hover {
background-color: rgba(255, 255, 255, 0.2);
color: #12192C;
}
.nav__icon {
font-size: 1.5rem;
margin-right: 1rem;
color: #fff;
}
.nav__logo-icon {
margin-right: 1.2rem;
font-size: 1.6rem;
color: #fff;
}
.active {
background-color: rgba(255, 255, 255, 0.2);
color: #12192C;
}
/*After JS Update*/
.nav__logo-text {
color: #fff;
font-weight: 700;
}
.nav__text {
font-weight: 400;
color: rgba(255, 255, 255, 1);
}// SHOW MENU
const showMenu = (toggleId, navbarId,bodyId) =>{
const toggle = document.getElementById(toggleId),
navbar = document.getElementById(navbarId),
bodypadding = document.getElementById(bodyId)
if(toggle && navbar){
toggle.addEventListener('click', ()=>{
navbar.classList.toggle('show')
toggle.classList.toggle('rotate')
bodypadding.classList.toggle('expander')
})
}
}
showMenu('nav-toggle','navbar','body')
// LINK ACTIVE COLOR
const linkColor = document.querySelectorAll('.nav__link');
function colorLink(){
linkColor.forEach(l => l.classList.remove('active'));
this.classList.add('active');
}
linkColor.forEach(l => l.addEventListener('click', colorLink));Sidebar Menu
Открыть элемент
Hover menu для сайта
<div class="dropdown">
<div class="background">
<div class="svg-container">
<svg class="distort" width="350" height="450" viewBox="0 0 350 450">
<filter id="distortionFilter">
<feTurbulence
type="turbulence"
baseFrequency="0.07 0.01"
numOctaves="5"
seed="2"
stitchTiles="stitch"
x="0%"
y="0%"
width="100%"
height="100%"
result="noise"
/>
<feDisplacementMap
in="SourceGraphic"
in2="noise"
scale="0"
xChannelSelector="R"
yChannelSelector="B"
x="0%"
y="0%"
width="100%"
height="100%"
filterUnits="userSpaceOnUse"
/>
</filter>
<g filter="url(#distortionFilter)">
<image
class="distort__img"
x="50"
y="50"
xlink:href="img/1.jpg"
height="350"
width="250"
/>
<image
class="distort__img"
x="50"
y="50"
xlink:href="img/2.jpg"
height="350"
width="250"
/>
<image
class="distort__img"
x="50"
y="50"
xlink:href="img/3.jpg"
height="350"
width="250"
/>
</g>
</svg>
</div>
<div class="options">
<div class="text-wrapper">
<h2 class="outlined">MOBILES</h2>
<h2 class="back">MOBILES</h2>
</div>
<div class="text-wrapper">
<h2 class="outlined">LAPTOPS</h2>
<h2 class="back">LAPTOPS</h2>
</div>
<div class="text-wrapper">
<h2 class="outlined">ACCESS</h2>
<h2 class="back">ACCESS</h2>
</div>
</div>
</div>
</div>
<nav>
<h4>Logo</h4>
<div>
<i class="fa fa-bars menu-btn"></i>
</div>
</nav>* {
margin: 0;
padding: 0;
font-family: "Poppins";
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #1c1c28;
}
nav {
width: 80%;
padding: 40px 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: fixed;
z-index: 99;
color: #fff;
}
nav h4 {
font-size: 18px;
display: inline-block;
}
.svg-container {
position: absolute;
width: 100vw;
height: 100%;
}
.distort {
position: absolute;
pointer-events: none;
will-change: transform;
z-index: 98;
}
.distort__img {
opacity: 1;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.background {
position: absolute;
width: 140%;
left: -20%;
height: 120%;
background-color: #28293d;
-webkit-transform: rotateZ(10deg);
transform: rotateZ(10deg);
top: -140%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
z-index: 2;
}
.options {
position: absolute;
top: 40%;
width: 70vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
}
.text-wrapper {
position: relative;
width: 100%;
height: 200px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.text-wrapper h2 {
position: absolute;
font-family: "Oswald";
-webkit-transform: scaleY(1.2);
transform: scaleY(1.2);
font-size: 62px;
color: transparent;
}
.text-wrapper .outlined {
color: transparent;
-webkit-text-stroke: 1px #fff;
z-index: 99;
}
section {
padding: 200px 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
section .list {
padding-right: 20px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
section .image {
padding-left: 20px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: 400px;
overflow: hidden;
}
section .image img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.list-wrapper {
padding: 20px 0;
color: gray;
cursor: pointer;
}
.list-wrapper p {
font-family: "Oswald";
}
.list-wrapper h4 {
font-size: 24px;
}
.list-wrapper:hover p {
color: salmon;
}
.list-wrapper:hover h4 {
color: white;
}document.addEventListener("DOMContentLoaded", () => {
const lineEq = (y2, y1, x2, x1, currentVal) => {
// y = mx + b
var m = (y2 - y1) / (x2 - x1),
b = y1 - m * x1;
return m * currentVal + b;
};
const lerp = (a, b, n) => (1 - n) * a + n * b;
const distance = (x1, x2, y1, y2) => {
var a = x1 - x2;
var b = y1 - y2;
return Math.hypot(a, b);
};
const getMousePos = (e) => {
let posx = 0;
let posy = 0;
if (!e) e = window.event;
posx = e.pageX;
posy = e.pageY;
return { x: posx, y: posy };
};
const feDisplacementMapEl = document.querySelector("feDisplacementMap");
class Menu {
constructor() {
this.DOM = {
// The SVG element
svg: document.querySelector("svg.distort"),
// The menu element
menu: document.querySelector(".options"),
bg: document.getElementsByClassName("background")[0],
menuBtn: document.getElementsByClassName("menu-btn")[0],
};
// The images (one per menu link)
this.DOM.imgs = [...this.DOM.svg.querySelectorAll("g > image")];
// The menu links
this.DOM.menuLinks = [...this.DOM.menu.querySelectorAll(".text-wrapper")];
// Mouse position
this.mousePos = { x: 0, y: 0 };
// Last mouse positions (one to consider for the image translation movement, another for the scale value of the feDisplacementMap element)
this.lastMousePos = {
translation: { x: 0, y: 0 },
displacement: { x: 0, y: 0 },
};
// feDisplacementMap scale value
this.dmScale = 0;
// Current menu link position
this.current = -1;
this.initEvents();
requestAnimationFrame(() => this.render());
}
reveal() {
TweenMax.to(this.DOM.bg, 1, {
ease: Power3.easeOut,
top: "0%",
rotationZ: 0,
height: "80%",
});
}
hide() {
TweenMax.to(this.DOM.bg, 1.5, {
ease: Power3.easeOut,
top: "-140%",
rotationZ: "10deg",
});
}
initEvents() {
// Update mouse position
window.addEventListener(
"mousemove",
(ev) => {
this.mousePos = getMousePos(ev);
// requestAnimationFrame(() => this.render());
});
this.DOM.menuBtn.addEventListener("mouseenter", () => {
this.reveal();
this.DOM.menuBtn.style.display = 'none';
});
this.DOM.bg.addEventListener("mouseleave", () => {
this.hide();
this.DOM.menuBtn.style.display = 'block';
});
this.DOM.menuLinks.forEach((item, pos) => {
// Create spans for each letter
const mouseenterFn = () => {
// Hide the previous menu image.
if (this.current !== -1) {
TweenMax.set(this.DOM.imgs[this.current], { opacity: 0 });
}
// Update current.
this.current = pos;
TweenMax.to(this.DOM.imgs[this.current], 0.5, {
ease: Quad.easeOut,
opacity: 1,
});
TweenMax.set(item.querySelector(".back"), { color: "#fff" });
};
const mouseLeaveFn = () => {
TweenMax.set(item.querySelector(".back"), { color: "transparent" });
};
item.addEventListener("mouseenter", mouseenterFn);
item.addEventListener("mouseleave", mouseLeaveFn);
});
const mousemenuenterFn = () => (this.fade = true);
const mousemenuleaveFn = () =>
TweenMax.to(this.DOM.imgs[this.current], 0.2, {
ease: Quad.easeOut,
opacity: 0,
});
this.DOM.menu.addEventListener("mouseenter", mousemenuenterFn);
this.DOM.menu.addEventListener("mouseleave", mousemenuleaveFn);
}
render() {
// Translate the image on mousemove
// this.lastMousePos.translation.x = lerp(
// this.lastMousePos.translation.x,
// this.mousePos.x,
// 0.07
// );
// this.lastMousePos.translation.y = lerp(
// this.lastMousePos.translation.y,
// this.mousePos.y,
// 0.07
// );
// this.DOM.svg.style.transform = `translateX(${
// this.lastMousePos.translation.x -
// this.DOM.svg.getBoundingClientRect().width / 2
// }px) translateY(${
// this.lastMousePos.translation.y -
// this.DOM.svg.getBoundingClientRect().height / 2
// }px)`;
TweenMax.to(this.DOM.svg, 1, {
left: this.mousePos.x - this.DOM.svg.getBoundingClientRect().width / 2,
top: this.mousePos.y - this.DOM.svg.getBoundingClientRect().height / 2
});
//this.DOM.svg.style.left = "0px";
//this.DOM.svg.style.top = "0px";
// Scale goes from 0 to 50 for mouseDistance values between 0 to 140
// this.lastMousePos.displacement.x = lerp(
// this.lastMousePos.displacement.x,
// this.mousePos.x,
// 0.1
// );
// this.lastMousePos.displacement.y = lerp(
// this.lastMousePos.displacement.y,
// this.mousePos.y,
// 0.1
// );
const mouseDistance = distance(
this.lastMousePos.displacement.x,
this.mousePos.x,
this.lastMousePos.displacement.y,
this.mousePos.y
);
this.lastMousePos.displacement.x = this.mousePos.x;
this.lastMousePos.displacement.y = this.mousePos.y;
//console.log("Mouse distance", mouseDistance);
this.dmScale = Math.min(lineEq(50, 0, 140, 0, mouseDistance * 3), 50);
// console.log(this.dmScale);
feDisplacementMapEl.scale.baseVal = this.dmScale;
console.log(feDisplacementMapEl.scale.baseVal);
requestAnimationFrame(() => this.render());
}
}
new Menu();
});Scss
* {
margin: 0;
padding: 0;
font-family: "Poppins";
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #1c1c28;
}
nav {
width: 80%;
padding: 40px 120px;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 99;
color: #fff;
h4 {
font-size: 18px;
display: inline-block;
}
}
.svg-container {
position: absolute;
width: 100vw;
height: 100%;
}
.distort {
position: absolute;
pointer-events: none;
will-change: transform;
z-index: 98;
}
.distort__img {
opacity: 1;
transition: all 0.3s;
}
.background {
position: absolute;
width: 140%;
left: -20%;
height: 120%;
background-color: #28293d;
transform: rotateZ(10deg);
top: -140%;
display: flex;
justify-content: center;
z-index: 2;
}
.options {
position: absolute;
top: 40%;
width: 70vw;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.text-wrapper {
position: relative;
width: 100%;
height: 200px;
display: flex;
justify-content: center;
}
.text-wrapper h2 {
position: absolute;
font-family: "Oswald";
transform: scaleY(1.2);
font-size: 62px;
color: transparent;
}
.text-wrapper .outlined {
color: transparent;
-webkit-text-stroke: 1px #fff;
z-index: 99;
}
section {
padding: 200px 120px;
display: flex;
align-items: center;
justify-content: space-between;
.list {
padding-right: 20px;
flex: 1;
}
.image {
padding-left: 20px;
flex: 1;
height: 400px;
overflow: hidden;
img {
width: 100%;
object-fit: cover;
}
}
}
.list-wrapper {
padding: 20px 0;
color: gray;
cursor: pointer;
p {
font-family: "Oswald";
}
h4 {
font-size: 24px;
}
}
.list-wrapper:hover {
p {
color: salmon;
}
h4 {
color: white;
}
}Дополнительный файл TweenMax.min.js
/*!
* VERSION: 2.1.2
* DATE: 2019-03-01
* UPDATES AND DOCS AT: http://greensock.com
*
* Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin
*
* @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
* This work is subject to the terms at http://greensock.com/standard-license or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @author: Jack Doyle, jack@greensock.com
**/
var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("TweenMax",["core.Animation","core.SimpleTimeline","TweenLite"],function(a,b,c){var d=function(a){var b,c=[],d=a.length;for(b=0;b!==d;c.push(a[b++]));return c},e=function(a,b,c){var d,e,f=a.cycle;for(d in f)e=f[d],a[d]="function"==typeof e?e(c,b[c],b):e[c%e.length];delete a.cycle},f=function(a){if("function"==typeof a)return a;var b="object"==typeof a?a:{each:a},c=b.ease,d=b.from||0,e=b.base||0,f={},g=isNaN(d),h=b.axis,i={center:.5,end:1}[d]||0;return function(a,j,k){var l,m,n,o,p,q,r,s,t,u=(k||b).length,v=f[u];if(!v){if(t="auto"===b.grid?0:(b.grid||[1/0])[0],!t){for(r=-(1/0);r<(r=k[t++].getBoundingClientRect().left)&&u>t;);t--}for(v=f[u]=[],l=g?Math.min(t,u)*i-.5:d%t,m=g?u*i/t-.5:d/t|0,r=0,s=1/0,q=0;u>q;q++)n=q%t-l,o=m-(q/t|0),v[q]=p=h?Math.abs("y"===h?o:n):Math.sqrt(n*n+o*o),p>r&&(r=p),s>p&&(s=p);v.max=r-s,v.min=s,v.v=u=b.amount||b.each*(t>u?u:h?"y"===h?u/t:t:Math.max(t,u/t))||0,v.b=0>u?e-u:e}return u=(v[a]-v.min)/v.max,v.b+(c?c.getRatio(u):u)*v.v}},g=function(a,b,d){c.call(this,a,b,d),this._cycle=0,this._yoyo=this.vars.yoyo===!0||!!this.vars.yoyoEase,this._repeat=this.vars.repeat||0,this._repeatDelay=this.vars.repeatDelay||0,this._repeat&&this._uncache(!0),this.render=g.prototype.render},h=1e-8,i=c._internals,j=i.isSelector,k=i.isArray,l=g.prototype=c.to({},.1,{}),m=[];g.version="2.1.2",l.constructor=g,l.kill()._gc=!1,g.killTweensOf=g.killDelayedCallsTo=c.killTweensOf,g.getTweensOf=c.getTweensOf,g.lagSmoothing=c.lagSmoothing,g.ticker=c.ticker,g.render=c.render,g.distribute=f,l.invalidate=function(){return this._yoyo=this.vars.yoyo===!0||!!this.vars.yoyoEase,this._repeat=this.vars.repeat||0,this._repeatDelay=this.vars.repeatDelay||0,this._yoyoEase=null,this._uncache(!0),c.prototype.invalidate.call(this)},l.updateTo=function(a,b){var d,e=this,f=e.ratio,g=e.vars.immediateRender||a.immediateRender;b&&e._startTime<e._timeline._time&&(e._startTime=e._timeline._time,e._uncache(!1),e._gc?e._enabled(!0,!1):e._timeline.insert(e,e._startTime-e._delay));for(d in a)e.vars[d]=a[d];if(e._initted||g)if(b)e._initted=!1,g&&e.render(0,!0,!0);else if(e._gc&&e._enabled(!0,!1),e._notifyPluginsOfEnabled&&e._firstPT&&c._onPluginEvent("_onDisable",e),e._time/e._duration>.998){var h=e._totalTime;e.render(0,!0,!1),e._initted=!1,e.render(h,!0,!1)}else if(e._initted=!1,e._init(),e._time>0||g)for(var i,j=1/(1-f),k=e._firstPT;k;)i=k.s+k.c,k.c*=j,k.s=i-k.c,k=k._next;return e},l.render=function(a,b,d){this._initted||0===this._duration&&this.vars.repeat&&this.invalidate();var e,f,g,j,k,l,m,n,o,p=this,q=p._dirty?p.totalDuration():p._totalDuration,r=p._time,s=p._totalTime,t=p._cycle,u=p._duration,v=p._rawPrevTime;if(a>=q-h&&a>=0?(p._totalTime=q,p._cycle=p._repeat,p._yoyo&&0!==(1&p._cycle)?(p._time=0,p.ratio=p._ease._calcEnd?p._ease.getRatio(0):0):(p._time=u,p.ratio=p._ease._calcEnd?p._ease.getRatio(1):1),p._reversed||(e=!0,f="onComplete",d=d||p._timeline.autoRemoveChildren),0===u&&(p._initted||!p.vars.lazy||d)&&(p._startTime===p._timeline._duration&&(a=0),(0>v||0>=a&&a>=-h||v===h&&"isPause"!==p.data)&&v!==a&&(d=!0,v>h&&(f="onReverseComplete")),p._rawPrevTime=n=!b||a||v===a?a:h)):h>a?(p._totalTime=p._time=p._cycle=0,p.ratio=p._ease._calcEnd?p._ease.getRatio(0):0,(0!==s||0===u&&v>0)&&(f="onReverseComplete",e=p._reversed),a>-h?a=0:0>a&&(p._active=!1,0===u&&(p._initted||!p.vars.lazy||d)&&(v>=0&&(d=!0),p._rawPrevTime=n=!b||a||v===a?a:h)),p._initted||(d=!0)):(p._totalTime=p._time=a,0!==p._repeat&&(j=u+p._repeatDelay,p._cycle=p._totalTime/j>>0,0!==p._cycle&&p._cycle===p._totalTime/j&&a>=s&&p._cycle--,p._time=p._totalTime-p._cycle*j,p._yoyo&&0!==(1&p._cycle)&&(p._time=u-p._time,o=p._yoyoEase||p.vars.yoyoEase,o&&(p._yoyoEase||(o!==!0||p._initted?p._yoyoEase=o=o===!0?p._ease:o instanceof Ease?o:Ease.map[o]:(o=p.vars.ease,p._yoyoEase=o=o?o instanceof Ease?o:"function"==typeof o?new Ease(o,p.vars.easeParams):Ease.map[o]||c.defaultEase:c.defaultEase)),p.ratio=o?1-o.getRatio((u-p._time)/u):0)),p._time>u?p._time=u:p._time<0&&(p._time=0)),p._easeType&&!o?(k=p._time/u,l=p._easeType,m=p._easePower,(1===l||3===l&&k>=.5)&&(k=1-k),3===l&&(k*=2),1===m?k*=k:2===m?k*=k*k:3===m?k*=k*k*k:4===m&&(k*=k*k*k*k),p.ratio=1===l?1-k:2===l?k:p._time/u<.5?k/2:1-k/2):o||(p.ratio=p._ease.getRatio(p._time/u))),r===p._time&&!d&&t===p._cycle)return void(s!==p._totalTime&&p._onUpdate&&(b||p._callback("onUpdate")));if(!p._initted){if(p._init(),!p._initted||p._gc)return;if(!d&&p._firstPT&&(p.vars.lazy!==!1&&p._duration||p.vars.lazy&&!p._duration))return p._time=r,p._totalTime=s,p._rawPrevTime=v,p._cycle=t,i.lazyTweens.push(p),void(p._lazy=[a,b]);!p._time||e||o?e&&this._ease._calcEnd&&!o&&(p.ratio=p._ease.getRatio(0===p._time?0:1)):p.ratio=p._ease.getRatio(p._time/u)}for(p._lazy!==!1&&(p._lazy=!1),p._active||!p._paused&&p._time!==r&&a>=0&&(p._active=!0),0===s&&(2===p._initted&&a>0&&p._init(),p._startAt&&(a>=0?p._startAt.render(a,!0,d):f||(f="_dummyGS")),p.vars.onStart&&(0!==p._totalTime||0===u)&&(b||p._callback("onStart"))),g=p._firstPT;g;)g.f?g.t[g.p](g.c*p.ratio+g.s):g.t[g.p]=g.c*p.ratio+g.s,g=g._next;p._onUpdate&&(0>a&&p._startAt&&p._startTime&&p._startAt.render(a,!0,d),b||(p._totalTime!==s||f)&&p._callback("onUpdate")),p._cycle!==t&&(b||p._gc||p.vars.onRepeat&&p._callback("onRepeat")),f&&(!p._gc||d)&&(0>a&&p._startAt&&!p._onUpdate&&p._startTime&&p._startAt.render(a,!0,d),e&&(p._timeline.autoRemoveChildren&&p._enabled(!1,!1),p._active=!1),!b&&p.vars[f]&&p._callback(f),0===u&&p._rawPrevTime===h&&n!==h&&(p._rawPrevTime=0))},g.to=function(a,b,c){return new g(a,b,c)},g.from=function(a,b,c){return c.runBackwards=!0,c.immediateRender=0!=c.immediateRender,new g(a,b,c)},g.fromTo=function(a,b,c,d){return d.startAt=c,d.immediateRender=0!=d.immediateRender&&0!=c.immediateRender,new g(a,b,d)},g.staggerTo=g.allTo=function(a,b,h,i,l,n,o){var p,q,r,s,t=[],u=f(h.stagger||i),v=h.cycle,w=(h.startAt||m).cycle;for(k(a)||("string"==typeof a&&(a=c.selector(a)||a),j(a)&&(a=d(a))),a=a||[],p=a.length-1,r=0;p>=r;r++){q={};for(s in h)q[s]=h[s];if(v&&(e(q,a,r),null!=q.duration&&(b=q.duration,delete q.duration)),w){w=q.startAt={};for(s in h.startAt)w[s]=h.startAt[s];e(q.startAt,a,r)}q.delay=u(r,a[r],a)+(q.delay||0),r===p&&l&&(q.onComplete=function(){h.onComplete&&h.onComplete.apply(h.onCompleteScope||this,arguments),l.apply(o||h.callbackScope||this,n||m)}),t[r]=new g(a[r],b,q)}return t},g.staggerFrom=g.allFrom=function(a,b,c,d,e,f,h){return c.runBackwards=!0,c.immediateRender=0!=c.immediateRender,g.staggerTo(a,b,c,d,e,f,h)},g.staggerFromTo=g.allFromTo=function(a,b,c,d,e,f,h,i){return d.startAt=c,d.immediateRender=0!=d.immediateRender&&0!=c.immediateRender,g.staggerTo(a,b,d,e,f,h,i)},g.delayedCall=function(a,b,c,d,e){return new g(b,0,{delay:a,onComplete:b,onCompleteParams:c,callbackScope:d,onReverseComplete:b,onReverseCompleteParams:c,immediateRender:!1,useFrames:e,overwrite:0})},g.set=function(a,b){return new g(a,0,b)},g.isTweening=function(a){return c.getTweensOf(a,!0).length>0};var n=function(a,b){for(var d=[],e=0,f=a._first;f;)f instanceof c?d[e++]=f:(b&&(d[e++]=f),d=d.concat(n(f,b)),e=d.length),f=f._next;return d},o=g.getAllTweens=function(b){return n(a._rootTimeline,b).concat(n(a._rootFramesTimeline,b))};g.killAll=function(a,c,d,e){null==c&&(c=!0),null==d&&(d=!0);var f,g,h,i=o(0!=e),j=i.length,k=c&&d&&e;for(h=0;j>h;h++)g=i[h],(k||g instanceof b||(f=g.target===g.vars.onComplete)&&d||c&&!f)&&(a?g.totalTime(g._reversed?0:g.totalDuration()):g._enabled(!1,!1))},g.killChildTweensOf=function(a,b){if(null!=a){var e,f,h,l,m,n=i.tweenLookup;if("string"==typeof a&&(a=c.selector(a)||a),j(a)&&(a=d(a)),k(a))for(l=a.length;--l>-1;)g.killChildTweensOf(a[l],b);else{e=[];for(h in n)for(f=n[h].target.parentNode;f;)f===a&&(e=e.concat(n[h].tweens)),f=f.parentNode;for(m=e.length,l=0;m>l;l++)b&&e[l].totalTime(e[l].totalDuration()),e[l]._enabled(!1,!1)}}};var p=function(a,c,d,e){c=c!==!1,d=d!==!1,e=e!==!1;for(var f,g,h=o(e),i=c&&d&&e,j=h.length;--j>-1;)g=h[j],(i||g instanceof b||(f=g.target===g.vars.onComplete)&&d||c&&!f)&&g.paused(a)};return g.pauseAll=function(a,b,c){p(!0,a,b,c)},g.resumeAll=function(a,b,c){p(!1,a,b,c)},g.globalTimeScale=function(b){var d=a._rootTimeline,e=c.ticker.time;return arguments.length?(b=b||h,d._startTime=e-(e-d._startTime)*d._timeScale/b,d=a._rootFramesTimeline,e=c.ticker.frame,d._startTime=e-(e-d._startTime)*d._timeScale/b,d._timeScale=a._rootTimeline._timeScale=b,b):d._timeScale},l.progress=function(a,b){return arguments.length?this.totalTime(this.duration()*(this._yoyo&&0!==(1&this._cycle)?1-a:a)+this._cycle*(this._duration+this._repeatDelay),b):this._time/this.duration()},l.totalProgress=function(a,b){return arguments.length?this.totalTime(this.totalDuration()*a,b):this._totalTime/this.totalDuration()},l.time=function(a,b){if(!arguments.length)return this._time;this._dirty&&this.totalDuration();var c=this._duration,d=this._cycle,e=d*(c+this._repeatDelay);return a>c&&(a=c),this.totalTime(this._yoyo&&1&d?c-a+e:this._repeat?a+e:a,b)},l.duration=function(b){return arguments.length?a.prototype.duration.call(this,b):this._duration},l.totalDuration=function(a){return arguments.length?-1===this._repeat?this:this.duration((a-this._repeat*this._repeatDelay)/(this._repeat+1)):(this._dirty&&(this._totalDuration=-1===this._repeat?999999999999:this._duration*(this._repeat+1)+this._repeatDelay*this._repeat,this._dirty=!1),this._totalDuration)},l.repeat=function(a){return arguments.length?(this._repeat=a,this._uncache(!0)):this._repeat},l.repeatDelay=function(a){return arguments.length?(this._repeatDelay=a,this._uncache(!0)):this._repeatDelay},l.yoyo=function(a){return arguments.length?(this._yoyo=a,this):this._yoyo},g},!0),_gsScope._gsDefine("TimelineLite",["core.Animation","core.SimpleTimeline","TweenLite"],function(a,b,c){var d=function(a){b.call(this,a);var c,d,e=this,f=e.vars;e._labels={},e.autoRemoveChildren=!!f.autoRemoveChildren,e.smoothChildTiming=!!f.smoothChildTiming,e._sortChildren=!0,e._onUpdate=f.onUpdate;for(d in f)c=f[d],i(c)&&-1!==c.join("").indexOf("{self}")&&(f[d]=e._swapSelfInParams(c));i(f.tweens)&&e.add(f.tweens,0,f.align,f.stagger)},e=1e-8,f=c._internals,g=d._internals={},h=f.isSelector,i=f.isArray,j=f.lazyTweens,k=f.lazyRender,l=_gsScope._gsDefine.globals,m=function(a){var b,c={};for(b in a)c[b]=a[b];return c},n=function(a,b,c){var d,e,f=a.cycle;for(d in f)e=f[d],a[d]="function"==typeof e?e(c,b[c],b):e[c%e.length];delete a.cycle},o=g.pauseCallback=function(){},p=function(a){var b,c=[],d=a.length;for(b=0;b!==d;c.push(a[b++]));return c},q=function(a,b,c,d){var e="immediateRender";return e in b||(b[e]=!(c&&c[e]===!1||d)),b},r=function(a){if("function"==typeof a)return a;var b="object"==typeof a?a:{each:a},c=b.ease,d=b.from||0,e=b.base||0,f={},g=isNaN(d),h=b.axis,i={center:.5,end:1}[d]||0;return function(a,j,k){var l,m,n,o,p,q,r,s,t,u=(k||b).length,v=f[u];if(!v){if(t="auto"===b.grid?0:(b.grid||[1/0])[0],!t){for(r=-(1/0);r<(r=k[t++].getBoundingClientRect().left)&&u>t;);t--}for(v=f[u]=[],l=g?Math.min(t,u)*i-.5:d%t,m=g?u*i/t-.5:d/t|0,r=0,s=1/0,q=0;u>q;q++)n=q%t-l,o=m-(q/t|0),v[q]=p=h?Math.abs("y"===h?o:n):Math.sqrt(n*n+o*o),p>r&&(r=p),s>p&&(s=p);v.max=r-s,v.min=s,v.v=u=b.amount||b.each*(t>u?u:h?"y"===h?u/t:t:Math.max(t,u/t))||0,v.b=0>u?e-u:e}return u=(v[a]-v.min)/v.max,v.b+(c?c.getRatio(u):u)*v.v}},s=d.prototype=new b;return d.version="2.1.2",d.distribute=r,s.constructor=d,s.kill()._gc=s._forcingPlayhead=s._hasPause=!1,s.to=function(a,b,d,e){var f=d.repeat&&l.TweenMax||c;return b?this.add(new f(a,b,d),e):this.set(a,d,e)},s.from=function(a,b,d,e){return this.add((d.repeat&&l.TweenMax||c).from(a,b,q(this,d)),e)},s.fromTo=function(a,b,d,e,f){var g=e.repeat&&l.TweenMax||c;return e=q(this,e,d),b?this.add(g.fromTo(a,b,d,e),f):this.set(a,e,f)},s.staggerTo=function(a,b,e,f,g,i,j,k){var l,o,q=new d({onComplete:i,onCompleteParams:j,callbackScope:k,smoothChildTiming:this.smoothChildTiming}),s=r(e.stagger||f),t=e.startAt,u=e.cycle;for("string"==typeof a&&(a=c.selector(a)||a),a=a||[],h(a)&&(a=p(a)),o=0;o<a.length;o++)l=m(e),t&&(l.startAt=m(t),t.cycle&&n(l.startAt,a,o)),u&&(n(l,a,o),null!=l.duration&&(b=l.duration,delete l.duration)),q.to(a[o],b,l,s(o,a[o],a));return this.add(q,g)},s.staggerFrom=function(a,b,c,d,e,f,g,h){return c.runBackwards=!0,this.staggerTo(a,b,q(this,c),d,e,f,g,h)},s.staggerFromTo=function(a,b,c,d,e,f,g,h,i){return d.startAt=c,this.staggerTo(a,b,q(this,d,c),e,f,g,h,i)},s.call=function(a,b,d,e){return this.add(c.delayedCall(0,a,b,d),e)},s.set=function(a,b,d){return this.add(new c(a,0,q(this,b,null,!0)),d)},d.exportRoot=function(a,b){a=a||{},null==a.smoothChildTiming&&(a.smoothChildTiming=!0);var e,f,g,h,i=new d(a),j=i._timeline;for(null==b&&(b=!0),j._remove(i,!0),i._startTime=0,i._rawPrevTime=i._time=i._totalTime=j._time,g=j._first;g;)h=g._next,b&&g instanceof c&&g.target===g.vars.onComplete||(f=g._startTime-g._delay,0>f&&(e=1),i.add(g,f)),g=h;return j.add(i,0),e&&i.totalDuration(),i},s.add=function(e,f,g,h){var j,k,l,m,n,o,p=this;if("number"!=typeof f&&(f=p._parseTimeOrLabel(f,0,!0,e)),!(e instanceof a)){if(e instanceof Array||e&&e.push&&i(e)){for(g=g||"normal",h=h||0,j=f,k=e.length,l=0;k>l;l++)i(m=e[l])&&(m=new d({tweens:m})),p.add(m,j),"string"!=typeof m&&"function"!=typeof m&&("sequence"===g?j=m._startTime+m.totalDuration()/m._timeScale:"start"===g&&(m._startTime-=m.delay())),j+=h;return p._uncache(!0)}if("string"==typeof e)return p.addLabel(e,f);if("function"!=typeof e)throw"Cannot add "+e+" into the timeline; it is not a tween, timeline, function, or string.";e=c.delayedCall(0,e)}if(b.prototype.add.call(p,e,f),(e._time||!e._duration&&e._initted)&&(j=(p.rawTime()-e._startTime)*e._timeScale,(!e._duration||Math.abs(Math.max(0,Math.min(e.totalDuration(),j)))-e._totalTime>1e-5)&&e.render(j,!1,!1)),(p._gc||p._time===p._duration)&&!p._paused&&p._duration<p.duration())for(n=p,o=n.rawTime()>e._startTime;n._timeline;)o&&n._timeline.smoothChildTiming?n.totalTime(n._totalTime,!0):n._gc&&n._enabled(!0,!1),n=n._timeline;return p},s.remove=function(b){if(b instanceof a){this._remove(b,!1);var c=b._timeline=b.vars.useFrames?a._rootFramesTimeline:a._rootTimeline;return b._startTime=(b._paused?b._pauseTime:c._time)-(b._reversed?b.totalDuration()-b._totalTime:b._totalTime)/b._timeScale,this}if(b instanceof Array||b&&b.push&&i(b)){for(var d=b.length;--d>-1;)this.remove(b[d]);return this}return"string"==typeof b?this.removeLabel(b):this.kill(null,b)},s._remove=function(a,c){b.prototype._remove.call(this,a,c);var d=this._last;return d?this._time>this.duration()&&(this._time=this._duration,this._totalTime=this._totalDuration):this._time=this._totalTime=this._duration=this._totalDuration=0,this},s.append=function(a,b){return this.add(a,this._parseTimeOrLabel(null,b,!0,a))},s.insert=s.insertMultiple=function(a,b,c,d){return this.add(a,b||0,c,d)},s.appendMultiple=function(a,b,c,d){return this.add(a,this._parseTimeOrLabel(null,b,!0,a),c,d)},s.addLabel=function(a,b){return this._labels[a]=this._parseTimeOrLabel(b),this},s.addPause=function(a,b,d,e){var f=c.delayedCall(0,o,d,e||this);return f.vars.onComplete=f.vars.onReverseComplete=b,f.data="isPause",this._hasPause=!0,this.add(f,a)},s.removeLabel=function(a){return delete this._labels[a],this},s.getLabelTime=function(a){return null!=this._labels[a]?this._labels[a]:-1},s._parseTimeOrLabel=function(b,c,d,e){var f,g;if(e instanceof a&&e.timeline===this)this.remove(e);else if(e&&(e instanceof Array||e.push&&i(e)))for(g=e.length;--g>-1;)e[g]instanceof a&&e[g].timeline===this&&this.remove(e[g]);if(f="number"!=typeof b||c?this.duration()>99999999999?this.recent().endTime(!1):this._duration:0,"string"==typeof c)return this._parseTimeOrLabel(c,d&&"number"==typeof b&&null==this._labels[c]?b-f:0,d);if(c=c||0,"string"!=typeof b||!isNaN(b)&&null==this._labels[b])null==b&&(b=f);else{if(g=b.indexOf("="),-1===g)return null==this._labels[b]?d?this._labels[b]=f+c:c:this._labels[b]+c;c=parseInt(b.charAt(g-1)+"1",10)*Number(b.substr(g+1)),b=g>1?this._parseTimeOrLabel(b.substr(0,g-1),0,d):f}return Number(b)+c},s.seek=function(a,b){return this.totalTime("number"==typeof a?a:this._parseTimeOrLabel(a),b!==!1)},s.stop=function(){return this.paused(!0)},s.gotoAndPlay=function(a,b){return this.play(a,b)},s.gotoAndStop=function(a,b){return this.pause(a,b)},s.render=function(a,b,c){this._gc&&this._enabled(!0,!1);var d,f,g,h,i,l,m,n,o=this,p=o._time,q=o._dirty?o.totalDuration():o._totalDuration,r=o._startTime,s=o._timeScale,t=o._paused;if(p!==o._time&&(a+=o._time-p),a>=q-e&&a>=0)o._totalTime=o._time=q,o._reversed||o._hasPausedChild()||(f=!0,h="onComplete",i=!!o._timeline.autoRemoveChildren,0===o._duration&&(0>=a&&a>=-e||o._rawPrevTime<0||o._rawPrevTime===e)&&o._rawPrevTime!==a&&o._first&&(i=!0,o._rawPrevTime>e&&(h="onReverseComplete"))),o._rawPrevTime=o._duration||!b||a||o._rawPrevTime===a?a:e,a=q+1e-4;else if(e>a)if(o._totalTime=o._time=0,a>-e&&(a=0),(0!==p||0===o._duration&&o._rawPrevTime!==e&&(o._rawPrevTime>0||0>a&&o._rawPrevTime>=0))&&(h="onReverseComplete",f=o._reversed),0>a)o._active=!1,o._timeline.autoRemoveChildren&&o._reversed?(i=f=!0,h="onReverseComplete"):o._rawPrevTime>=0&&o._first&&(i=!0),o._rawPrevTime=a;else{if(o._rawPrevTime=o._duration||!b||a||o._rawPrevTime===a?a:e,0===a&&f)for(d=o._first;d&&0===d._startTime;)d._duration||(f=!1),d=d._next;a=0,o._initted||(i=!0)}else{if(o._hasPause&&!o._forcingPlayhead&&!b){if(a>=p)for(d=o._first;d&&d._startTime<=a&&!l;)d._duration||"isPause"!==d.data||d.ratio||0===d._startTime&&0===o._rawPrevTime||(l=d),d=d._next;else for(d=o._last;d&&d._startTime>=a&&!l;)d._duration||"isPause"===d.data&&d._rawPrevTime>0&&(l=d),d=d._prev;l&&(o._time=o._totalTime=a=l._startTime,n=o._startTime+a/o._timeScale)}o._totalTime=o._time=o._rawPrevTime=a}if(o._time!==p&&o._first||c||i||l){if(o._initted||(o._initted=!0),o._active||!o._paused&&o._time!==p&&a>0&&(o._active=!0),0===p&&o.vars.onStart&&(0===o._time&&o._duration||b||o._callback("onStart")),m=o._time,m>=p)for(d=o._first;d&&(g=d._next,m===o._time&&(!o._paused||t));)(d._active||d._startTime<=m&&!d._paused&&!d._gc)&&(l===d&&(o.pause(),o._pauseTime=n),d._reversed?d.render((d._dirty?d.totalDuration():d._totalDuration)-(a-d._startTime)*d._timeScale,b,c):d.render((a-d._startTime)*d._timeScale,b,c)),d=g;else for(d=o._last;d&&(g=d._prev,m===o._time&&(!o._paused||t));){if(d._active||d._startTime<=p&&!d._paused&&!d._gc){if(l===d){for(l=d._prev;l&&l.endTime()>o._time;)l.render(l._reversed?l.totalDuration()-(a-l._startTime)*l._timeScale:(a-l._startTime)*l._timeScale,b,c),l=l._prev;l=null,o.pause(),o._pauseTime=n}d._reversed?d.render((d._dirty?d.totalDuration():d._totalDuration)-(a-d._startTime)*d._timeScale,b,c):d.render((a-d._startTime)*d._timeScale,b,c)}d=g}o._onUpdate&&(b||(j.length&&k(),o._callback("onUpdate"))),h&&(o._gc||(r===o._startTime||s!==o._timeScale)&&(0===o._time||q>=o.totalDuration())&&(f&&(j.length&&k(),o._timeline.autoRemoveChildren&&o._enabled(!1,!1),o._active=!1),!b&&o.vars[h]&&o._callback(h)))}},s._hasPausedChild=function(){for(var a=this._first;a;){if(a._paused||a instanceof d&&a._hasPausedChild())return!0;a=a._next}return!1},s.getChildren=function(a,b,d,e){e=e||-9999999999;for(var f=[],g=this._first,h=0;g;)g._startTime<e||(g instanceof c?b!==!1&&(f[h++]=g):(d!==!1&&(f[h++]=g),a!==!1&&(f=f.concat(g.getChildren(!0,b,d)),h=f.length))),g=g._next;return f},s.getTweensOf=function(a,b){var d,e,f=this._gc,g=[],h=0;for(f&&this._enabled(!0,!0),d=c.getTweensOf(a),e=d.length;--e>-1;)(d[e].timeline===this||b&&this._contains(d[e]))&&(g[h++]=d[e]);return f&&this._enabled(!1,!0),g},s.recent=function(){return this._recent},s._contains=function(a){for(var b=a.timeline;b;){if(b===this)return!0;b=b.timeline}return!1},s.shiftChildren=function(a,b,c){c=c||0;for(var d,e=this._first,f=this._labels;e;)e._startTime>=c&&(e._startTime+=a),e=e._next;if(b)for(d in f)f[d]>=c&&(f[d]+=a);return this._uncache(!0)},s._kill=function(a,b){if(!a&&!b)return this._enabled(!1,!1);for(var c=b?this.getTweensOf(b):this.getChildren(!0,!0,!1),d=c.length,e=!1;--d>-1;)c[d]._kill(a,b)&&(e=!0);return e},s.clear=function(a){var b=this.getChildren(!1,!0,!0),c=b.length;for(this._time=this._totalTime=0;--c>-1;)b[c]._enabled(!1,!1);return a!==!1&&(this._labels={}),this._uncache(!0)},s.invalidate=function(){for(var b=this._first;b;)b.invalidate(),b=b._next;return a.prototype.invalidate.call(this)},s._enabled=function(a,c){if(a===this._gc)for(var d=this._first;d;)d._enabled(a,!0),d=d._next;return b.prototype._enabled.call(this,a,c)},s.totalTime=function(b,c,d){this._forcingPlayhead=!0;var e=a.prototype.totalTime.apply(this,arguments);return this._forcingPlayhead=!1,e},s.duration=function(a){return arguments.length?(0!==this.duration()&&0!==a&&this.timeScale(this._duration/a),this):(this._dirty&&this.totalDuration(),this._duration)},s.totalDuration=function(a){if(!arguments.length){if(this._dirty){for(var b,c,d=0,e=this,f=e._last,g=999999999999;f;)b=f._prev,f._dirty&&f.totalDuration(),f._startTime>g&&e._sortChildren&&!f._paused&&!e._calculatingDuration?(e._calculatingDuration=1,e.add(f,f._startTime-f._delay),e._calculatingDuration=0):g=f._startTime,f._startTime<0&&!f._paused&&(d-=f._startTime,e._timeline.smoothChildTiming&&(e._startTime+=f._startTime/e._timeScale,e._time-=f._startTime,e._totalTime-=f._startTime,e._rawPrevTime-=f._startTime),e.shiftChildren(-f._startTime,!1,-9999999999),g=0),c=f._startTime+f._totalDuration/f._timeScale,c>d&&(d=c),f=b;e._duration=e._totalDuration=d,e._dirty=!1}return this._totalDuration}return a&&this.totalDuration()?this.timeScale(this._totalDuration/a):this},s.paused=function(b){if(b===!1&&this._paused)for(var c=this._first;c;)c._startTime===this._time&&"isPause"===c.data&&(c._rawPrevTime=0),c=c._next;return a.prototype.paused.apply(this,arguments)},s.usesFrames=function(){for(var b=this._timeline;b._timeline;)b=b._timeline;return b===a._rootFramesTimeline},s.rawTime=function(a){return a&&(this._paused||this._repeat&&this.time()>0&&this.totalProgress()<1)?this._totalTime%(this._duration+this._repeatDelay):this._paused?this._totalTime:(this._timeline.rawTime(a)-this._startTime)*this._timeScale},d},!0),_gsScope._gsDefine("TimelineMax",["TimelineLite","TweenLite","easing.Ease"],function(a,b,c){var d=function(b){a.call(this,b),this._repeat=this.vars.repeat||0,this._repeatDelay=this.vars.repeatDelay||0,this._cycle=0,this._yoyo=!!this.vars.yoyo,this._dirty=!0},e=1e-8,f=b._internals,g=f.lazyTweens,h=f.lazyRender,i=_gsScope._gsDefine.globals,j=new c(null,null,1,0),k=d.prototype=new a;return k.constructor=d,k.kill()._gc=!1,d.version="2.1.2",k.invalidate=function(){return this._yoyo=!!this.vars.yoyo,this._repeat=this.vars.repeat||0,this._repeatDelay=this.vars.repeatDelay||0,this._uncache(!0),a.prototype.invalidate.call(this)},k.addCallback=function(a,c,d,e){return this.add(b.delayedCall(0,a,d,e),c)},k.removeCallback=function(a,b){if(a)if(null==b)this._kill(null,a);else for(var c=this.getTweensOf(a,!1),d=c.length,e=this._parseTimeOrLabel(b);--d>-1;)c[d]._startTime===e&&c[d]._enabled(!1,!1);return this},k.removePause=function(b){return this.removeCallback(a._internals.pauseCallback,b)},k.tweenTo=function(a,c){c=c||{};var d,e,f,g={ease:j,useFrames:this.usesFrames(),immediateRender:!1,lazy:!1},h=c.repeat&&i.TweenMax||b;for(e in c)g[e]=c[e];return g.time=this._parseTimeOrLabel(a),d=Math.abs(Number(g.time)-this._time)/this._timeScale||.001,f=new h(this,d,g),g.onStart=function(){f.target.paused(!0),f.vars.time===f.target.time()||d!==f.duration()||f.isFromTo||f.duration(Math.abs(f.vars.time-f.target.time())/f.target._timeScale).render(f.time(),!0,!0),c.onStart&&c.onStart.apply(c.onStartScope||c.callbackScope||f,c.onStartParams||[])},f},k.tweenFromTo=function(a,b,c){c=c||{},a=this._parseTimeOrLabel(a),c.startAt={onComplete:this.seek,onCompleteParams:[a],callbackScope:this},c.immediateRender=c.immediateRender!==!1;var d=this.tweenTo(b,c);return d.isFromTo=1,d.duration(Math.abs(d.vars.time-a)/this._timeScale||.001)},k.render=function(a,b,c){this._gc&&this._enabled(!0,!1);var d,f,i,j,k,l,m,n,o,p=this,q=p._time,r=p._dirty?p.totalDuration():p._totalDuration,s=p._duration,t=p._totalTime,u=p._startTime,v=p._timeScale,w=p._rawPrevTime,x=p._paused,y=p._cycle;if(q!==p._time&&(a+=p._time-q),a>=r-e&&a>=0)p._locked||(p._totalTime=r,p._cycle=p._repeat),p._reversed||p._hasPausedChild()||(f=!0,j="onComplete",k=!!p._timeline.autoRemoveChildren,0===p._duration&&(0>=a&&a>=-e||0>w||w===e)&&w!==a&&p._first&&(k=!0,w>e&&(j="onReverseComplete"))),p._rawPrevTime=p._duration||!b||a||p._rawPrevTime===a?a:e,p._yoyo&&1&p._cycle?p._time=a=0:(p._time=s,a=s+1e-4);else if(e>a)if(p._locked||(p._totalTime=p._cycle=0),p._time=0,a>-e&&(a=0),(0!==q||0===s&&w!==e&&(w>0||0>a&&w>=0)&&!p._locked)&&(j="onReverseComplete",f=p._reversed),0>a)p._active=!1,p._timeline.autoRemoveChildren&&p._reversed?(k=f=!0,j="onReverseComplete"):w>=0&&p._first&&(k=!0),p._rawPrevTime=a;else{if(p._rawPrevTime=s||!b||a||p._rawPrevTime===a?a:e,0===a&&f)for(d=p._first;d&&0===d._startTime;)d._duration||(f=!1),d=d._next;a=0,p._initted||(k=!0)}else if(0===s&&0>w&&(k=!0),p._time=p._rawPrevTime=a,p._locked||(p._totalTime=a,0!==p._repeat&&(l=s+p._repeatDelay,p._cycle=p._totalTime/l>>0,p._cycle&&p._cycle===p._totalTime/l&&a>=t&&p._cycle--,p._time=p._totalTime-p._cycle*l,p._yoyo&&1&p._cycle&&(p._time=s-p._time),p._time>s?(p._time=s,a=s+1e-4):p._time<0?p._time=a=0:a=p._time)),p._hasPause&&!p._forcingPlayhead&&!b){if(a=p._time,a>=q||p._repeat&&y!==p._cycle)for(d=p._first;d&&d._startTime<=a&&!m;)d._duration||"isPause"!==d.data||d.ratio||0===d._startTime&&0===p._rawPrevTime||(m=d),d=d._next;else for(d=p._last;d&&d._startTime>=a&&!m;)d._duration||"isPause"===d.data&&d._rawPrevTime>0&&(m=d),d=d._prev;m&&(o=p._startTime+m._startTime/p._timeScale,m._startTime<s&&(p._time=p._rawPrevTime=a=m._startTime,p._totalTime=a+p._cycle*(p._totalDuration+p._repeatDelay)))}if(p._cycle!==y&&!p._locked){var z=p._yoyo&&0!==(1&y),A=z===(p._yoyo&&0!==(1&p._cycle)),B=p._totalTime,C=p._cycle,D=p._rawPrevTime,E=p._time;if(p._totalTime=y*s,p._cycle<y?z=!z:p._totalTime+=s,p._time=q,p._rawPrevTime=0===s?w-1e-4:w,p._cycle=y,p._locked=!0,q=z?0:s,p.render(q,b,0===s),b||p._gc||p.vars.onRepeat&&(p._cycle=C,p._locked=!1,p._callback("onRepeat")),q!==p._time)return;if(A&&(p._cycle=y,p._locked=!0,q=z?s+1e-4:-1e-4,p.render(q,!0,!1)),p._locked=!1,p._paused&&!x)return;p._time=E,p._totalTime=B,p._cycle=C,p._rawPrevTime=D}if(!(p._time!==q&&p._first||c||k||m))return void(t!==p._totalTime&&p._onUpdate&&(b||p._callback("onUpdate")));if(p._initted||(p._initted=!0),p._active||!p._paused&&p._totalTime!==t&&a>0&&(p._active=!0),0===t&&p.vars.onStart&&(0===p._totalTime&&p._totalDuration||b||p._callback("onStart")),n=p._time,n>=q)for(d=p._first;d&&(i=d._next,n===p._time&&(!p._paused||x));)(d._active||d._startTime<=p._time&&!d._paused&&!d._gc)&&(m===d&&(p.pause(),p._pauseTime=o),d._reversed?d.render((d._dirty?d.totalDuration():d._totalDuration)-(a-d._startTime)*d._timeScale,b,c):d.render((a-d._startTime)*d._timeScale,b,c)),d=i;else for(d=p._last;d&&(i=d._prev,n===p._time&&(!p._paused||x));){if(d._active||d._startTime<=q&&!d._paused&&!d._gc){if(m===d){for(m=d._prev;m&&m.endTime()>p._time;)m.render(m._reversed?m.totalDuration()-(a-m._startTime)*m._timeScale:(a-m._startTime)*m._timeScale,b,c),m=m._prev;m=null,p.pause(),p._pauseTime=o}d._reversed?d.render((d._dirty?d.totalDuration():d._totalDuration)-(a-d._startTime)*d._timeScale,b,c):d.render((a-d._startTime)*d._timeScale,b,c)}d=i}p._onUpdate&&(b||(g.length&&h(),p._callback("onUpdate"))),j&&(p._locked||p._gc||(u===p._startTime||v!==p._timeScale)&&(0===p._time||r>=p.totalDuration())&&(f&&(g.length&&h(),p._timeline.autoRemoveChildren&&p._enabled(!1,!1),p._active=!1),!b&&p.vars[j]&&p._callback(j)))},k.getActive=function(a,b,c){var d,e,f=[],g=this.getChildren(a||null==a,b||null==a,!!c),h=0,i=g.length;for(d=0;i>d;d++)e=g[d],e.isActive()&&(f[h++]=e);return f},k.getLabelAfter=function(a){a||0!==a&&(a=this._time);var b,c=this.getLabelsArray(),d=c.length;for(b=0;d>b;b++)if(c[b].time>a)return c[b].name;return null},k.getLabelBefore=function(a){null==a&&(a=this._time);for(var b=this.getLabelsArray(),c=b.length;--c>-1;)if(b[c].time<a)return b[c].name;return null},k.getLabelsArray=function(){var a,b=[],c=0;for(a in this._labels)b[c++]={time:this._labels[a],name:a};return b.sort(function(a,b){return a.time-b.time}),b},k.invalidate=function(){return this._locked=!1,a.prototype.invalidate.call(this)},k.progress=function(a,b){return arguments.length?this.totalTime(this.duration()*(this._yoyo&&0!==(1&this._cycle)?1-a:a)+this._cycle*(this._duration+this._repeatDelay),b):this._time/this.duration()||0},k.totalProgress=function(a,b){return arguments.length?this.totalTime(this.totalDuration()*a,b):this._totalTime/this.totalDuration()||0},k.totalDuration=function(b){return arguments.length?-1!==this._repeat&&b?this.timeScale(this.totalDuration()/b):this:(this._dirty&&(a.prototype.totalDuration.call(this),this._totalDuration=-1===this._repeat?999999999999:this._duration*(this._repeat+1)+this._repeatDelay*this._repeat),this._totalDuration)},k.time=function(a,b){if(!arguments.length)return this._time;this._dirty&&this.totalDuration();var c=this._duration,d=this._cycle,e=d*(c+this._repeatDelay);return a>c&&(a=c),this.totalTime(this._yoyo&&1&d?c-a+e:this._repeat?a+e:a,b)},k.repeat=function(a){return arguments.length?(this._repeat=a,this._uncache(!0)):this._repeat},k.repeatDelay=function(a){return arguments.length?(this._repeatDelay=a,this._uncache(!0)):this._repeatDelay},k.yoyo=function(a){return arguments.length?(this._yoyo=a,this):this._yoyo},k.currentLabel=function(a){return arguments.length?this.seek(a,!0):this.getLabelBefore(this._time+e)},d},!0),function(){var a=180/Math.PI,b=[],c=[],d=[],e={},f=_gsScope._gsDefine.globals,g=function(a,b,c,d){c===d&&(c=d-(d-b)/1e6),a===b&&(b=a+(c-a)/1e6),this.a=a,this.b=b,this.c=c,this.d=d,this.da=d-a,this.ca=c-a,this.ba=b-a},h=",x,y,z,left,top,right,bottom,marginTop,marginLeft,marginRight,marginBottom,paddingLeft,paddingTop,paddingRight,paddingBottom,backgroundPosition,backgroundPosition_y,",i=function(a,b,c,d){var e={a:a},f={},g={},h={c:d},i=(a+b)/2,j=(b+c)/2,k=(c+d)/2,l=(i+j)/2,m=(j+k)/2,n=(m-l)/8;return e.b=i+(a-i)/4,f.b=l+n,e.c=f.a=(e.b+f.b)/2,f.c=g.a=(l+m)/2,g.b=m-n,h.b=k+(d-k)/4,g.c=h.a=(g.b+h.b)/2,[e,f,g,h]},j=function(a,e,f,g,h){var j,k,l,m,n,o,p,q,r,s,t,u,v,w=a.length-1,x=0,y=a[0].a;for(j=0;w>j;j++)n=a[x],k=n.a,l=n.d,m=a[x+1].d,h?(t=b[j],u=c[j],v=(u+t)*e*.25/(g?.5:d[j]||.5),o=l-(l-k)*(g?.5*e:0!==t?v/t:0),p=l+(m-l)*(g?.5*e:0!==u?v/u:0),q=l-(o+((p-o)*(3*t/(t+u)+.5)/4||0))):(o=l-(l-k)*e*.5,p=l+(m-l)*e*.5,q=l-(o+p)/2),o+=q,p+=q,n.c=r=o,0!==j?n.b=y:n.b=y=n.a+.6*(n.c-n.a),n.da=l-k,n.ca=r-k,n.ba=y-k,f?(s=i(k,y,r,l),a.splice(x,1,s[0],s[1],s[2],s[3]),x+=4):x++,y=p;n=a[x],n.b=y,n.c=y+.4*(n.d-y),n.da=n.d-n.a,n.ca=n.c-n.a,n.ba=y-n.a,f&&(s=i(n.a,y,n.c,n.d),a.splice(x,1,s[0],s[1],s[2],s[3]))},k=function(a,d,e,f){var h,i,j,k,l,m,n=[];if(f)for(a=[f].concat(a),i=a.length;--i>-1;)"string"==typeof(m=a[i][d])&&"="===m.charAt(1)&&(a[i][d]=f[d]+Number(m.charAt(0)+m.substr(2)));if(h=a.length-2,0>h)return n[0]=new g(a[0][d],0,0,a[0][d]),n;for(i=0;h>i;i++)j=a[i][d],k=a[i+1][d],n[i]=new g(j,0,0,k),e&&(l=a[i+2][d],b[i]=(b[i]||0)+(k-j)*(k-j),c[i]=(c[i]||0)+(l-k)*(l-k));return n[i]=new g(a[i][d],0,0,a[i+1][d]),n},l=function(a,f,g,i,l,m){var n,o,p,q,r,s,t,u,v={},w=[],x=m||a[0];l="string"==typeof l?","+l+",":h,null==f&&(f=1);for(o in a[0])w.push(o);if(a.length>1){for(u=a[a.length-1],t=!0,n=w.length;--n>-1;)if(o=w[n],Math.abs(x[o]-u[o])>.05){t=!1;break}t&&(a=a.concat(),m&&a.unshift(m),a.push(a[1]),m=a[a.length-3])}for(b.length=c.length=d.length=0,n=w.length;--n>-1;)o=w[n],e[o]=-1!==l.indexOf(","+o+","),v[o]=k(a,o,e[o],m);for(n=b.length;--n>-1;)b[n]=Math.sqrt(b[n]),c[n]=Math.sqrt(c[n]);if(!i){for(n=w.length;--n>-1;)if(e[o])for(p=v[w[n]],s=p.length-1,q=0;s>q;q++)r=p[q+1].da/c[q]+p[q].da/b[q]||0,d[q]=(d[q]||0)+r*r;for(n=d.length;--n>-1;)d[n]=Math.sqrt(d[n]);
}for(n=w.length,q=g?4:1;--n>-1;)o=w[n],p=v[o],j(p,f,g,i,e[o]),t&&(p.splice(0,q),p.splice(p.length-q,q));return v},m=function(a,b,c){b=b||"soft";var d,e,f,h,i,j,k,l,m,n,o,p={},q="cubic"===b?3:2,r="soft"===b,s=[];if(r&&c&&(a=[c].concat(a)),null==a||a.length<q+1)throw"invalid Bezier data";for(m in a[0])s.push(m);for(j=s.length;--j>-1;){for(m=s[j],p[m]=i=[],n=0,l=a.length,k=0;l>k;k++)d=null==c?a[k][m]:"string"==typeof(o=a[k][m])&&"="===o.charAt(1)?c[m]+Number(o.charAt(0)+o.substr(2)):Number(o),r&&k>1&&l-1>k&&(i[n++]=(d+i[n-2])/2),i[n++]=d;for(l=n-q+1,n=0,k=0;l>k;k+=q)d=i[k],e=i[k+1],f=i[k+2],h=2===q?0:i[k+3],i[n++]=o=3===q?new g(d,e,f,h):new g(d,(2*e+d)/3,(2*e+f)/3,f);i.length=n}return p},n=function(a,b,c){for(var d,e,f,g,h,i,j,k,l,m,n,o=1/c,p=a.length;--p>-1;)for(m=a[p],f=m.a,g=m.d-f,h=m.c-f,i=m.b-f,d=e=0,k=1;c>=k;k++)j=o*k,l=1-j,d=e-(e=(j*j*g+3*l*(j*h+l*i))*j),n=p*c+k-1,b[n]=(b[n]||0)+d*d},o=function(a,b){b=b>>0||6;var c,d,e,f,g=[],h=[],i=0,j=0,k=b-1,l=[],m=[];for(c in a)n(a[c],g,b);for(e=g.length,d=0;e>d;d++)i+=Math.sqrt(g[d]),f=d%b,m[f]=i,f===k&&(j+=i,f=d/b>>0,l[f]=m,h[f]=j,i=0,m=[]);return{length:j,lengths:h,segments:l}},p=_gsScope._gsDefine.plugin({propName:"bezier",priority:-1,version:"1.3.8",API:2,global:!0,init:function(a,b,c){this._target=a,b instanceof Array&&(b={values:b}),this._func={},this._mod={},this._props=[],this._timeRes=null==b.timeResolution?6:parseInt(b.timeResolution,10);var d,e,f,g,h,i=b.values||[],j={},k=i[0],n=b.autoRotate||c.vars.orientToBezier;this._autoRotate=n?n instanceof Array?n:[["x","y","rotation",n===!0?0:Number(n)||0]]:null;for(d in k)this._props.push(d);for(f=this._props.length;--f>-1;)d=this._props[f],this._overwriteProps.push(d),e=this._func[d]="function"==typeof a[d],j[d]=e?a[d.indexOf("set")||"function"!=typeof a["get"+d.substr(3)]?d:"get"+d.substr(3)]():parseFloat(a[d]),h||j[d]!==i[0][d]&&(h=j);if(this._beziers="cubic"!==b.type&&"quadratic"!==b.type&&"soft"!==b.type?l(i,isNaN(b.curviness)?1:b.curviness,!1,"thruBasic"===b.type,b.correlate,h):m(i,b.type,j),this._segCount=this._beziers[d].length,this._timeRes){var p=o(this._beziers,this._timeRes);this._length=p.length,this._lengths=p.lengths,this._segments=p.segments,this._l1=this._li=this._s1=this._si=0,this._l2=this._lengths[0],this._curSeg=this._segments[0],this._s2=this._curSeg[0],this._prec=1/this._curSeg.length}if(n=this._autoRotate)for(this._initialRotations=[],n[0]instanceof Array||(this._autoRotate=n=[n]),f=n.length;--f>-1;){for(g=0;3>g;g++)d=n[f][g],this._func[d]="function"==typeof a[d]?a[d.indexOf("set")||"function"!=typeof a["get"+d.substr(3)]?d:"get"+d.substr(3)]:!1;d=n[f][2],this._initialRotations[f]=(this._func[d]?this._func[d].call(this._target):this._target[d])||0,this._overwriteProps.push(d)}return this._startRatio=c.vars.runBackwards?1:0,!0},set:function(b){var c,d,e,f,g,h,i,j,k,l,m=this._segCount,n=this._func,o=this._target,p=b!==this._startRatio;if(this._timeRes){if(k=this._lengths,l=this._curSeg,b*=this._length,e=this._li,b>this._l2&&m-1>e){for(j=m-1;j>e&&(this._l2=k[++e])<=b;);this._l1=k[e-1],this._li=e,this._curSeg=l=this._segments[e],this._s2=l[this._s1=this._si=0]}else if(b<this._l1&&e>0){for(;e>0&&(this._l1=k[--e])>=b;);0===e&&b<this._l1?this._l1=0:e++,this._l2=k[e],this._li=e,this._curSeg=l=this._segments[e],this._s1=l[(this._si=l.length-1)-1]||0,this._s2=l[this._si]}if(c=e,b-=this._l1,e=this._si,b>this._s2&&e<l.length-1){for(j=l.length-1;j>e&&(this._s2=l[++e])<=b;);this._s1=l[e-1],this._si=e}else if(b<this._s1&&e>0){for(;e>0&&(this._s1=l[--e])>=b;);0===e&&b<this._s1?this._s1=0:e++,this._s2=l[e],this._si=e}h=(e+(b-this._s1)/(this._s2-this._s1))*this._prec||0}else c=0>b?0:b>=1?m-1:m*b>>0,h=(b-c*(1/m))*m;for(d=1-h,e=this._props.length;--e>-1;)f=this._props[e],g=this._beziers[f][c],i=(h*h*g.da+3*d*(h*g.ca+d*g.ba))*h+g.a,this._mod[f]&&(i=this._mod[f](i,o)),n[f]?o[f](i):o[f]=i;if(this._autoRotate){var q,r,s,t,u,v,w,x=this._autoRotate;for(e=x.length;--e>-1;)f=x[e][2],v=x[e][3]||0,w=x[e][4]===!0?1:a,g=this._beziers[x[e][0]],q=this._beziers[x[e][1]],g&&q&&(g=g[c],q=q[c],r=g.a+(g.b-g.a)*h,t=g.b+(g.c-g.b)*h,r+=(t-r)*h,t+=(g.c+(g.d-g.c)*h-t)*h,s=q.a+(q.b-q.a)*h,u=q.b+(q.c-q.b)*h,s+=(u-s)*h,u+=(q.c+(q.d-q.c)*h-u)*h,i=p?Math.atan2(u-s,t-r)*w+v:this._initialRotations[e],this._mod[f]&&(i=this._mod[f](i,o)),n[f]?o[f](i):o[f]=i)}}}),q=p.prototype;p.bezierThrough=l,p.cubicToQuadratic=i,p._autoCSS=!0,p.quadraticToCubic=function(a,b,c){return new g(a,(2*b+a)/3,(2*b+c)/3,c)},p._cssRegister=function(){var a=f.CSSPlugin;if(a){var b=a._internals,c=b._parseToProxy,d=b._setPluginRatio,e=b.CSSPropTween;b._registerComplexSpecialProp("bezier",{parser:function(a,b,f,g,h,i){b instanceof Array&&(b={values:b}),i=new p;var j,k,l,m=b.values,n=m.length-1,o=[],q={};if(0>n)return h;for(j=0;n>=j;j++)l=c(a,m[j],g,h,i,n!==j),o[j]=l.end;for(k in b)q[k]=b[k];return q.values=o,h=new e(a,"bezier",0,0,l.pt,2),h.data=l,h.plugin=i,h.setRatio=d,0===q.autoRotate&&(q.autoRotate=!0),!q.autoRotate||q.autoRotate instanceof Array||(j=q.autoRotate===!0?0:Number(q.autoRotate),q.autoRotate=null!=l.end.left?[["left","top","rotation",j,!1]]:null!=l.end.x?[["x","y","rotation",j,!1]]:!1),q.autoRotate&&(g._transform||g._enableTransforms(!1),l.autoRotate=g._target._gsTransform,l.proxy.rotation=l.autoRotate.rotation||0,g._overwriteProps.push("rotation")),i._onInitTween(l.proxy,q,g._tween),h}})}},q._mod=function(a){for(var b,c=this._overwriteProps,d=c.length;--d>-1;)b=a[c[d]],b&&"function"==typeof b&&(this._mod[c[d]]=b)},q._kill=function(a){var b,c,d=this._props;for(b in this._beziers)if(b in a)for(delete this._beziers[b],delete this._func[b],c=d.length;--c>-1;)d[c]===b&&d.splice(c,1);if(d=this._autoRotate)for(c=d.length;--c>-1;)a[d[c][2]]&&d.splice(c,1);return this._super._kill.call(this,a)}}(),_gsScope._gsDefine("plugins.CSSPlugin",["plugins.TweenPlugin","TweenLite"],function(a,b){var c,d,e,f,g=function(){a.call(this,"css"),this._overwriteProps.length=0,this.setRatio=g.prototype.setRatio},h=_gsScope._gsDefine.globals,i={},j=g.prototype=new a("css");j.constructor=g,g.version="2.1.0",g.API=2,g.defaultTransformPerspective=0,g.defaultSkewType="compensated",g.defaultSmoothOrigin=!0,j="px",g.suffixMap={top:j,right:j,bottom:j,left:j,width:j,height:j,fontSize:j,padding:j,margin:j,perspective:j,lineHeight:""};var k,l,m,n,o,p,q,r,s=/(?:\-|\.|\b)(\d|\.|e\-)+/g,t=/(?:\d|\-\d|\.\d|\-\.\d|\+=\d|\-=\d|\+=.\d|\-=\.\d)+/g,u=/(?:\+=|\-=|\-|\b)[\d\-\.]+[a-zA-Z0-9]*(?:%|\b)/gi,v=/(?![+-]?\d*\.?\d+|[+-]|e[+-]\d+)[^0-9]/g,w=/(?:\d|\-|\+|=|#|\.)*/g,x=/opacity *= *([^)]*)/i,y=/opacity:([^;]*)/i,z=/alpha\(opacity *=.+?\)/i,A=/^(rgb|hsl)/,B=/([A-Z])/g,C=/-([a-z])/gi,D=/(^(?:url\(\"|url\())|(?:(\"\))$|\)$)/gi,E=function(a,b){return b.toUpperCase()},F=/(?:Left|Right|Width)/i,G=/(M11|M12|M21|M22)=[\d\-\.e]+/gi,H=/progid\:DXImageTransform\.Microsoft\.Matrix\(.+?\)/i,I=/,(?=[^\)]*(?:\(|$))/gi,J=/[\s,\(]/i,K=Math.PI/180,L=180/Math.PI,M={},N={style:{}},O=_gsScope.document||{createElement:function(){return N}},P=function(a,b){return b&&O.createElementNS?O.createElementNS(b,a):O.createElement(a)},Q=P("div"),R=P("img"),S=g._internals={_specialProps:i},T=(_gsScope.navigator||{}).userAgent||"",U=function(){var a=T.indexOf("Android"),b=P("a");return m=-1!==T.indexOf("Safari")&&-1===T.indexOf("Chrome")&&(-1===a||parseFloat(T.substr(a+8,2))>3),o=m&&parseFloat(T.substr(T.indexOf("Version/")+8,2))<6,n=-1!==T.indexOf("Firefox"),(/MSIE ([0-9]{1,}[\.0-9]{0,})/.exec(T)||/Trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/.exec(T))&&(p=parseFloat(RegExp.$1)),b?(b.style.cssText="top:1px;opacity:.55;",/^0.55/.test(b.style.opacity)):!1}(),V=function(a){return x.test("string"==typeof a?a:(a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100:1},W=function(a){_gsScope.console&&console.log(a)},X="",Y="",Z=function(a,b){b=b||Q;var c,d,e=b.style;if(void 0!==e[a])return a;for(a=a.charAt(0).toUpperCase()+a.substr(1),c=["O","Moz","ms","Ms","Webkit"],d=5;--d>-1&&void 0===e[c[d]+a];);return d>=0?(Y=3===d?"ms":c[d],X="-"+Y.toLowerCase()+"-",Y+a):null},$="undefined"!=typeof window?window:O.defaultView||{getComputedStyle:function(){}},_=function(a){return $.getComputedStyle(a)},aa=g.getStyle=function(a,b,c,d,e){var f;return U||"opacity"!==b?(!d&&a.style[b]?f=a.style[b]:(c=c||_(a))?f=c[b]||c.getPropertyValue(b)||c.getPropertyValue(b.replace(B,"-$1").toLowerCase()):a.currentStyle&&(f=a.currentStyle[b]),null==e||f&&"none"!==f&&"auto"!==f&&"auto auto"!==f?f:e):V(a)},ba=S.convertToPixels=function(a,c,d,e,f){if("px"===e||!e&&"lineHeight"!==c)return d;if("auto"===e||!d)return 0;var h,i,j,k=F.test(c),l=a,m=Q.style,n=0>d,o=1===d;if(n&&(d=-d),o&&(d*=100),"lineHeight"!==c||e)if("%"===e&&-1!==c.indexOf("border"))h=d/100*(k?a.clientWidth:a.clientHeight);else{if(m.cssText="border:0 solid red;position:"+aa(a,"position")+";line-height:0;","%"!==e&&l.appendChild&&"v"!==e.charAt(0)&&"rem"!==e)m[k?"borderLeftWidth":"borderTopWidth"]=d+e;else{if(l=a.parentNode||O.body,-1!==aa(l,"display").indexOf("flex")&&(m.position="absolute"),i=l._gsCache,j=b.ticker.frame,i&&k&&i.time===j)return i.width*d/100;m[k?"width":"height"]=d+e}l.appendChild(Q),h=parseFloat(Q[k?"offsetWidth":"offsetHeight"]),l.removeChild(Q),k&&"%"===e&&g.cacheWidths!==!1&&(i=l._gsCache=l._gsCache||{},i.time=j,i.width=h/d*100),0!==h||f||(h=ba(a,c,d,e,!0))}else i=_(a).lineHeight,a.style.lineHeight=d,h=parseFloat(_(a).lineHeight),a.style.lineHeight=i;return o&&(h/=100),n?-h:h},ca=S.calculateOffset=function(a,b,c){if("absolute"!==aa(a,"position",c))return 0;var d="left"===b?"Left":"Top",e=aa(a,"margin"+d,c);return a["offset"+d]-(ba(a,b,parseFloat(e),e.replace(w,""))||0)},da=function(a,b){var c,d,e,f={};if(b=b||_(a,null))if(c=b.length)for(;--c>-1;)e=b[c],(-1===e.indexOf("-transform")||Ea===e)&&(f[e.replace(C,E)]=b.getPropertyValue(e));else for(c in b)(-1===c.indexOf("Transform")||Da===c)&&(f[c]=b[c]);else if(b=a.currentStyle||a.style)for(c in b)"string"==typeof c&&void 0===f[c]&&(f[c.replace(C,E)]=b[c]);return U||(f.opacity=V(a)),d=Sa(a,b,!1),f.rotation=d.rotation,f.skewX=d.skewX,f.scaleX=d.scaleX,f.scaleY=d.scaleY,f.x=d.x,f.y=d.y,Ga&&(f.z=d.z,f.rotationX=d.rotationX,f.rotationY=d.rotationY,f.scaleZ=d.scaleZ),f.filters&&delete f.filters,f},ea=function(a,b,c,d,e){var f,g,h,i={},j=a.style;for(g in c)"cssText"!==g&&"length"!==g&&isNaN(g)&&(b[g]!==(f=c[g])||e&&e[g])&&-1===g.indexOf("Origin")&&("number"==typeof f||"string"==typeof f)&&(i[g]="auto"!==f||"left"!==g&&"top"!==g?""!==f&&"auto"!==f&&"none"!==f||"string"!=typeof b[g]||""===b[g].replace(v,"")?f:0:ca(a,g),void 0!==j[g]&&(h=new ta(j,g,j[g],h)));if(d)for(g in d)"className"!==g&&(i[g]=d[g]);return{difs:i,firstMPT:h}},fa={width:["Left","Right"],height:["Top","Bottom"]},ga=["marginLeft","marginRight","marginTop","marginBottom"],ha=function(a,b,c){if("svg"===(a.nodeName+"").toLowerCase())return(c||_(a))[b]||0;if(a.getCTM&&Pa(a))return a.getBBox()[b]||0;var d=parseFloat("width"===b?a.offsetWidth:a.offsetHeight),e=fa[b],f=e.length;for(c=c||_(a,null);--f>-1;)d-=parseFloat(aa(a,"padding"+e[f],c,!0))||0,d-=parseFloat(aa(a,"border"+e[f]+"Width",c,!0))||0;return d},ia=function(a,b){if("contain"===a||"auto"===a||"auto auto"===a)return a+" ";(null==a||""===a)&&(a="0 0");var c,d=a.split(" "),e=-1!==a.indexOf("left")?"0%":-1!==a.indexOf("right")?"100%":d[0],f=-1!==a.indexOf("top")?"0%":-1!==a.indexOf("bottom")?"100%":d[1];if(d.length>3&&!b){for(d=a.split(", ").join(",").split(","),a=[],c=0;c<d.length;c++)a.push(ia(d[c]));return a.join(",")}return null==f?f="center"===e?"50%":"0":"center"===f&&(f="50%"),("center"===e||isNaN(parseFloat(e))&&-1===(e+"").indexOf("="))&&(e="50%"),a=e+" "+f+(d.length>2?" "+d[2]:""),b&&(b.oxp=-1!==e.indexOf("%"),b.oyp=-1!==f.indexOf("%"),b.oxr="="===e.charAt(1),b.oyr="="===f.charAt(1),b.ox=parseFloat(e.replace(v,"")),b.oy=parseFloat(f.replace(v,"")),b.v=a),b||a},ja=function(a,b){return"function"==typeof a&&(a=a(r,q)),"string"==typeof a&&"="===a.charAt(1)?parseInt(a.charAt(0)+"1",10)*parseFloat(a.substr(2)):parseFloat(a)-parseFloat(b)||0},ka=function(a,b){"function"==typeof a&&(a=a(r,q));var c="string"==typeof a&&"="===a.charAt(1);return"string"==typeof a&&"v"===a.charAt(a.length-2)&&(a=(c?a.substr(0,2):0)+window["inner"+("vh"===a.substr(-2)?"Height":"Width")]*(parseFloat(c?a.substr(2):a)/100)),null==a?b:c?parseInt(a.charAt(0)+"1",10)*parseFloat(a.substr(2))+b:parseFloat(a)||0},la=function(a,b,c,d){var e,f,g,h,i,j=1e-6;return"function"==typeof a&&(a=a(r,q)),null==a?h=b:"number"==typeof a?h=a:(e=360,f=a.split("_"),i="="===a.charAt(1),g=(i?parseInt(a.charAt(0)+"1",10)*parseFloat(f[0].substr(2)):parseFloat(f[0]))*(-1===a.indexOf("rad")?1:L)-(i?0:b),f.length&&(d&&(d[c]=b+g),-1!==a.indexOf("short")&&(g%=e,g!==g%(e/2)&&(g=0>g?g+e:g-e)),-1!==a.indexOf("_cw")&&0>g?g=(g+9999999999*e)%e-(g/e|0)*e:-1!==a.indexOf("ccw")&&g>0&&(g=(g-9999999999*e)%e-(g/e|0)*e)),h=b+g),j>h&&h>-j&&(h=0),h},ma={aqua:[0,255,255],lime:[0,255,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,255],navy:[0,0,128],white:[255,255,255],fuchsia:[255,0,255],olive:[128,128,0],yellow:[255,255,0],orange:[255,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[255,0,0],pink:[255,192,203],cyan:[0,255,255],transparent:[255,255,255,0]},na=function(a,b,c){return a=0>a?a+1:a>1?a-1:a,255*(1>6*a?b+(c-b)*a*6:.5>a?c:2>3*a?b+(c-b)*(2/3-a)*6:b)+.5|0},oa=g.parseColor=function(a,b){var c,d,e,f,g,h,i,j,k,l,m;if(a)if("number"==typeof a)c=[a>>16,a>>8&255,255&a];else{if(","===a.charAt(a.length-1)&&(a=a.substr(0,a.length-1)),ma[a])c=ma[a];else if("#"===a.charAt(0))4===a.length&&(d=a.charAt(1),e=a.charAt(2),f=a.charAt(3),a="#"+d+d+e+e+f+f),a=parseInt(a.substr(1),16),c=[a>>16,a>>8&255,255&a];else if("hsl"===a.substr(0,3))if(c=m=a.match(s),b){if(-1!==a.indexOf("="))return a.match(t)}else g=Number(c[0])%360/360,h=Number(c[1])/100,i=Number(c[2])/100,e=.5>=i?i*(h+1):i+h-i*h,d=2*i-e,c.length>3&&(c[3]=Number(c[3])),c[0]=na(g+1/3,d,e),c[1]=na(g,d,e),c[2]=na(g-1/3,d,e);else c=a.match(s)||ma.transparent;c[0]=Number(c[0]),c[1]=Number(c[1]),c[2]=Number(c[2]),c.length>3&&(c[3]=Number(c[3]))}else c=ma.black;return b&&!m&&(d=c[0]/255,e=c[1]/255,f=c[2]/255,j=Math.max(d,e,f),k=Math.min(d,e,f),i=(j+k)/2,j===k?g=h=0:(l=j-k,h=i>.5?l/(2-j-k):l/(j+k),g=j===d?(e-f)/l+(f>e?6:0):j===e?(f-d)/l+2:(d-e)/l+4,g*=60),c[0]=g+.5|0,c[1]=100*h+.5|0,c[2]=100*i+.5|0),c},pa=function(a,b){var c,d,e,f=a.match(qa)||[],g=0,h="";if(!f.length)return a;for(c=0;c<f.length;c++)d=f[c],e=a.substr(g,a.indexOf(d,g)-g),g+=e.length+d.length,d=oa(d,b),3===d.length&&d.push(1),h+=e+(b?"hsla("+d[0]+","+d[1]+"%,"+d[2]+"%,"+d[3]:"rgba("+d.join(","))+")";return h+a.substr(g)},qa="(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3}){1,2}\\b";for(j in ma)qa+="|"+j+"\\b";qa=new RegExp(qa+")","gi"),g.colorStringFilter=function(a){var b,c=a[0]+" "+a[1];qa.test(c)&&(b=-1!==c.indexOf("hsl(")||-1!==c.indexOf("hsla("),a[0]=pa(a[0],b),a[1]=pa(a[1],b)),qa.lastIndex=0},b.defaultStringFilter||(b.defaultStringFilter=g.colorStringFilter);var ra=function(a,b,c,d){if(null==a)return function(a){return a};var e,f=b?(a.match(qa)||[""])[0]:"",g=a.split(f).join("").match(u)||[],h=a.substr(0,a.indexOf(g[0])),i=")"===a.charAt(a.length-1)?")":"",j=-1!==a.indexOf(" ")?" ":",",k=g.length,l=k>0?g[0].replace(s,""):"";return k?e=b?function(a){var b,m,n,o;if("number"==typeof a)a+=l;else if(d&&I.test(a)){for(o=a.replace(I,"|").split("|"),n=0;n<o.length;n++)o[n]=e(o[n]);return o.join(",")}if(b=(a.match(qa)||[f])[0],m=a.split(b).join("").match(u)||[],n=m.length,k>n--)for(;++n<k;)m[n]=c?m[(n-1)/2|0]:g[n];return h+m.join(j)+j+b+i+(-1!==a.indexOf("inset")?" inset":"")}:function(a){var b,f,m;if("number"==typeof a)a+=l;else if(d&&I.test(a)){for(f=a.replace(I,"|").split("|"),m=0;m<f.length;m++)f[m]=e(f[m]);return f.join(",")}if(b=a.match(u)||[],m=b.length,k>m--)for(;++m<k;)b[m]=c?b[(m-1)/2|0]:g[m];return h+b.join(j)+i}:function(a){return a}},sa=function(a){return a=a.split(","),function(b,c,d,e,f,g,h){var i,j=(c+"").split(" ");for(h={},i=0;4>i;i++)h[a[i]]=j[i]=j[i]||j[(i-1)/2>>0];return e.parse(b,h,f,g)}},ta=(S._setPluginRatio=function(a){this.plugin.setRatio(a);for(var b,c,d,e,f,g=this.data,h=g.proxy,i=g.firstMPT,j=1e-6;i;)b=h[i.v],i.r?b=i.r(b):j>b&&b>-j&&(b=0),i.t[i.p]=b,i=i._next;if(g.autoRotate&&(g.autoRotate.rotation=g.mod?g.mod.call(this._tween,h.rotation,this.t,this._tween):h.rotation),1===a||0===a)for(i=g.firstMPT,f=1===a?"e":"b";i;){if(c=i.t,c.type){if(1===c.type){for(e=c.xs0+c.s+c.xs1,d=1;d<c.l;d++)e+=c["xn"+d]+c["xs"+(d+1)];c[f]=e}}else c[f]=c.s+c.xs0;i=i._next}},function(a,b,c,d,e){this.t=a,this.p=b,this.v=c,this.r=e,d&&(d._prev=this,this._next=d)}),ua=(S._parseToProxy=function(a,b,c,d,e,f){var g,h,i,j,k,l=d,m={},n={},o=c._transform,p=M;for(c._transform=null,M=b,d=k=c.parse(a,b,d,e),M=p,f&&(c._transform=o,l&&(l._prev=null,l._prev&&(l._prev._next=null)));d&&d!==l;){if(d.type<=1&&(h=d.p,n[h]=d.s+d.c,m[h]=d.s,f||(j=new ta(d,"s",h,j,d.r),d.c=0),1===d.type))for(g=d.l;--g>0;)i="xn"+g,h=d.p+"_"+i,n[h]=d.data[i],m[h]=d[i],f||(j=new ta(d,i,h,j,d.rxp[i]));d=d._next}return{proxy:m,end:n,firstMPT:j,pt:k}},S.CSSPropTween=function(a,b,d,e,g,h,i,j,k,l,m){this.t=a,this.p=b,this.s=d,this.c=e,this.n=i||b,a instanceof ua||f.push(this.n),this.r=j?"function"==typeof j?j:Math.round:j,this.type=h||0,k&&(this.pr=k,c=!0),this.b=void 0===l?d:l,this.e=void 0===m?d+e:m,g&&(this._next=g,g._prev=this)}),va=function(a,b,c,d,e,f){var g=new ua(a,b,c,d-c,e,-1,f);return g.b=c,g.e=g.xs0=d,g},wa=g.parseComplex=function(a,b,c,d,e,f,h,i,j,l){c=c||f||"","function"==typeof d&&(d=d(r,q)),h=new ua(a,b,0,0,h,l?2:1,null,!1,i,c,d),d+="",e&&qa.test(d+c)&&(d=[c,d],g.colorStringFilter(d),c=d[0],d=d[1]);var m,n,o,p,u,v,w,x,y,z,A,B,C,D=c.split(", ").join(",").split(" "),E=d.split(", ").join(",").split(" "),F=D.length,G=k!==!1;for((-1!==d.indexOf(",")||-1!==c.indexOf(","))&&(-1!==(d+c).indexOf("rgb")||-1!==(d+c).indexOf("hsl")?(D=D.join(" ").replace(I,", ").split(" "),E=E.join(" ").replace(I,", ").split(" ")):(D=D.join(" ").split(",").join(", ").split(" "),E=E.join(" ").split(",").join(", ").split(" ")),F=D.length),F!==E.length&&(D=(f||"").split(" "),F=D.length),h.plugin=j,h.setRatio=l,qa.lastIndex=0,m=0;F>m;m++)if(p=D[m],u=E[m]+"",x=parseFloat(p),x||0===x)h.appendXtra("",x,ja(u,x),u.replace(t,""),G&&-1!==u.indexOf("px")?Math.round:!1,!0);else if(e&&qa.test(p))B=u.indexOf(")")+1,B=")"+(B?u.substr(B):""),C=-1!==u.indexOf("hsl")&&U,z=u,p=oa(p,C),u=oa(u,C),y=p.length+u.length>6,y&&!U&&0===u[3]?(h["xs"+h.l]+=h.l?" transparent":"transparent",h.e=h.e.split(E[m]).join("transparent")):(U||(y=!1),C?h.appendXtra(z.substr(0,z.indexOf("hsl"))+(y?"hsla(":"hsl("),p[0],ja(u[0],p[0]),",",!1,!0).appendXtra("",p[1],ja(u[1],p[1]),"%,",!1).appendXtra("",p[2],ja(u[2],p[2]),y?"%,":"%"+B,!1):h.appendXtra(z.substr(0,z.indexOf("rgb"))+(y?"rgba(":"rgb("),p[0],u[0]-p[0],",",Math.round,!0).appendXtra("",p[1],u[1]-p[1],",",Math.round).appendXtra("",p[2],u[2]-p[2],y?",":B,Math.round),y&&(p=p.length<4?1:p[3],h.appendXtra("",p,(u.length<4?1:u[3])-p,B,!1))),qa.lastIndex=0;else if(v=p.match(s)){if(w=u.match(t),!w||w.length!==v.length)return h;for(o=0,n=0;n<v.length;n++)A=v[n],z=p.indexOf(A,o),h.appendXtra(p.substr(o,z-o),Number(A),ja(w[n],A),"",G&&"px"===p.substr(z+A.length,2)?Math.round:!1,0===n),o=z+A.length;h["xs"+h.l]+=p.substr(o)}else h["xs"+h.l]+=h.l||h["xs"+h.l]?" "+u:u;if(-1!==d.indexOf("=")&&h.data){for(B=h.xs0+h.data.s,m=1;m<h.l;m++)B+=h["xs"+m]+h.data["xn"+m];h.e=B+h["xs"+m]}return h.l||(h.type=-1,h.xs0=h.e),h.xfirst||h},xa=9;for(j=ua.prototype,j.l=j.pr=0;--xa>0;)j["xn"+xa]=0,j["xs"+xa]="";j.xs0="",j._next=j._prev=j.xfirst=j.data=j.plugin=j.setRatio=j.rxp=null,j.appendXtra=function(a,b,c,d,e,f){var g=this,h=g.l;return g["xs"+h]+=f&&(h||g["xs"+h])?" "+a:a||"",c||0===h||g.plugin?(g.l++,g.type=g.setRatio?2:1,g["xs"+g.l]=d||"",h>0?(g.data["xn"+h]=b+c,g.rxp["xn"+h]=e,g["xn"+h]=b,g.plugin||(g.xfirst=new ua(g,"xn"+h,b,c,g.xfirst||g,0,g.n,e,g.pr),g.xfirst.xs0=0),g):(g.data={s:b+c},g.rxp={},g.s=b,g.c=c,g.r=e,g)):(g["xs"+h]+=b+(d||""),g)};var ya=function(a,b){b=b||{},this.p=b.prefix?Z(a)||a:a,i[a]=i[this.p]=this,this.format=b.formatter||ra(b.defaultValue,b.color,b.collapsible,b.multi),b.parser&&(this.parse=b.parser),this.clrs=b.color,this.multi=b.multi,this.keyword=b.keyword,this.dflt=b.defaultValue,this.allowFunc=b.allowFunc,this.pr=b.priority||0},za=S._registerComplexSpecialProp=function(a,b,c){"object"!=typeof b&&(b={parser:c});var d,e,f=a.split(","),g=b.defaultValue;for(c=c||[g],d=0;d<f.length;d++)b.prefix=0===d&&b.prefix,b.defaultValue=c[d]||g,e=new ya(f[d],b)},Aa=S._registerPluginProp=function(a){if(!i[a]){var b=a.charAt(0).toUpperCase()+a.substr(1)+"Plugin";za(a,{parser:function(a,c,d,e,f,g,j){var k=h.com.greensock.plugins[b];return k?(k._cssRegister(),i[d].parse(a,c,d,e,f,g,j)):(W("Error: "+b+" js file not loaded."),f)}})}};j=ya.prototype,j.parseComplex=function(a,b,c,d,e,f){var g,h,i,j,k,l,m=this.keyword;if(this.multi&&(I.test(c)||I.test(b)?(h=b.replace(I,"|").split("|"),i=c.replace(I,"|").split("|")):m&&(h=[b],i=[c])),i){for(j=i.length>h.length?i.length:h.length,g=0;j>g;g++)b=h[g]=h[g]||this.dflt,c=i[g]=i[g]||this.dflt,m&&(k=b.indexOf(m),l=c.indexOf(m),k!==l&&(-1===l?h[g]=h[g].split(m).join(""):-1===k&&(h[g]+=" "+m)));b=h.join(", "),c=i.join(", ")}return wa(a,this.p,b,c,this.clrs,this.dflt,d,this.pr,e,f)},j.parse=function(a,b,c,d,f,g,h){return this.parseComplex(a.style,this.format(aa(a,this.p,e,!1,this.dflt)),this.format(b),f,g)},g.registerSpecialProp=function(a,b,c){za(a,{parser:function(a,d,e,f,g,h,i){var j=new ua(a,e,0,0,g,2,e,!1,c);return j.plugin=h,j.setRatio=b(a,d,f._tween,e),j},priority:c})},g.useSVGTransformAttr=!0;var Ba,Ca="scaleX,scaleY,scaleZ,x,y,z,skewX,skewY,rotation,rotationX,rotationY,perspective,xPercent,yPercent".split(","),Da=Z("transform"),Ea=X+"transform",Fa=Z("transformOrigin"),Ga=null!==Z("perspective"),Ha=S.Transform=function(){this.perspective=parseFloat(g.defaultTransformPerspective)||0,this.force3D=g.defaultForce3D!==!1&&Ga?g.defaultForce3D||"auto":!1},Ia=_gsScope.SVGElement,Ja=function(a,b,c){var d,e=O.createElementNS("http://www.w3.org/2000/svg",a),f=/([a-z])([A-Z])/g;for(d in c)e.setAttributeNS(null,d.replace(f,"$1-$2").toLowerCase(),c[d]);return b.appendChild(e),e},Ka=O.documentElement||{},La=function(){var a,b,c,d=p||/Android/i.test(T)&&!_gsScope.chrome;return O.createElementNS&&!d&&(a=Ja("svg",Ka),b=Ja("rect",a,{width:100,height:50,x:100}),c=b.getBoundingClientRect().width,b.style[Fa]="50% 50%",b.style[Da]="scaleX(0.5)",d=c===b.getBoundingClientRect().width&&!(n&&Ga),Ka.removeChild(a)),d}(),Ma=function(a,b,c,d,e,f){var h,i,j,k,l,m,n,o,p,q,r,s,t,u,v=a._gsTransform,w=Ra(a,!0);v&&(t=v.xOrigin,u=v.yOrigin),(!d||(h=d.split(" ")).length<2)&&(n=a.getBBox(),0===n.x&&0===n.y&&n.width+n.height===0&&(n={x:parseFloat(a.hasAttribute("x")?a.getAttribute("x"):a.hasAttribute("cx")?a.getAttribute("cx"):0)||0,y:parseFloat(a.hasAttribute("y")?a.getAttribute("y"):a.hasAttribute("cy")?a.getAttribute("cy"):0)||0,width:0,height:0}),b=ia(b).split(" "),h=[(-1!==b[0].indexOf("%")?parseFloat(b[0])/100*n.width:parseFloat(b[0]))+n.x,(-1!==b[1].indexOf("%")?parseFloat(b[1])/100*n.height:parseFloat(b[1]))+n.y]),c.xOrigin=k=parseFloat(h[0]),c.yOrigin=l=parseFloat(h[1]),d&&w!==Qa&&(m=w[0],n=w[1],o=w[2],p=w[3],q=w[4],r=w[5],s=m*p-n*o,s&&(i=k*(p/s)+l*(-o/s)+(o*r-p*q)/s,j=k*(-n/s)+l*(m/s)-(m*r-n*q)/s,k=c.xOrigin=h[0]=i,l=c.yOrigin=h[1]=j)),v&&(f&&(c.xOffset=v.xOffset,c.yOffset=v.yOffset,v=c),e||e!==!1&&g.defaultSmoothOrigin!==!1?(i=k-t,j=l-u,v.xOffset+=i*w[0]+j*w[2]-i,v.yOffset+=i*w[1]+j*w[3]-j):v.xOffset=v.yOffset=0),f||a.setAttribute("data-svg-origin",h.join(" "))},Na=function(a){var b,c=P("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),d=this.parentNode,e=this.nextSibling,f=this.style.cssText;if(Ka.appendChild(c),c.appendChild(this),this.style.display="block",a)try{b=this.getBBox(),this._originalGetBBox=this.getBBox,this.getBBox=Na}catch(g){}else this._originalGetBBox&&(b=this._originalGetBBox());return e?d.insertBefore(this,e):d.appendChild(this),Ka.removeChild(c),this.style.cssText=f,b},Oa=function(a){try{return a.getBBox()}catch(b){return Na.call(a,!0)}},Pa=function(a){return!(!Ia||!a.getCTM||a.parentNode&&!a.ownerSVGElement||!Oa(a))},Qa=[1,0,0,1,0,0],Ra=function(a,b){var c,d,e,f,g,h,i,j=a._gsTransform||new Ha,k=1e5,l=a.style;if(Da?d=aa(a,Ea,null,!0):a.currentStyle&&(d=a.currentStyle.filter.match(G),d=d&&4===d.length?[d[0].substr(4),Number(d[2].substr(4)),Number(d[1].substr(4)),d[3].substr(4),j.x||0,j.y||0].join(","):""),c=!d||"none"===d||"matrix(1, 0, 0, 1, 0, 0)"===d,Da&&c&&!a.offsetParent&&(f=l.display,l.display="block",i=a.parentNode,i&&a.offsetParent||(g=1,h=a.nextSibling,Ka.appendChild(a)),d=aa(a,Ea,null,!0),c=!d||"none"===d||"matrix(1, 0, 0, 1, 0, 0)"===d,f?l.display=f:Wa(l,"display"),g&&(h?i.insertBefore(a,h):i?i.appendChild(a):Ka.removeChild(a))),(j.svg||a.getCTM&&Pa(a))&&(c&&-1!==(l[Da]+"").indexOf("matrix")&&(d=l[Da],c=0),e=a.getAttribute("transform"),c&&e&&(e=a.transform.baseVal.consolidate().matrix,d="matrix("+e.a+","+e.b+","+e.c+","+e.d+","+e.e+","+e.f+")",c=0)),c)return Qa;for(e=(d||"").match(s)||[],xa=e.length;--xa>-1;)f=Number(e[xa]),e[xa]=(g=f-(f|=0))?(g*k+(0>g?-.5:.5)|0)/k+f:f;return b&&e.length>6?[e[0],e[1],e[4],e[5],e[12],e[13]]:e},Sa=S.getTransform=function(a,c,d,e){if(a._gsTransform&&d&&!e)return a._gsTransform;var f,h,i,j,k,l,m=d?a._gsTransform||new Ha:new Ha,n=m.scaleX<0,o=2e-5,p=1e5,q=Ga?parseFloat(aa(a,Fa,c,!1,"0 0 0").split(" ")[2])||m.zOrigin||0:0,r=parseFloat(g.defaultTransformPerspective)||0;if(m.svg=!(!a.getCTM||!Pa(a)),m.svg&&(Ma(a,aa(a,Fa,c,!1,"50% 50%")+"",m,a.getAttribute("data-svg-origin")),Ba=g.useSVGTransformAttr||La),f=Ra(a),f!==Qa){if(16===f.length){var s,t,u,v,w,x=f[0],y=f[1],z=f[2],A=f[3],B=f[4],C=f[5],D=f[6],E=f[7],F=f[8],G=f[9],H=f[10],I=f[12],J=f[13],K=f[14],M=f[11],N=Math.atan2(D,H);m.zOrigin&&(K=-m.zOrigin,I=F*K-f[12],J=G*K-f[13],K=H*K+m.zOrigin-f[14]),m.rotationX=N*L,N&&(v=Math.cos(-N),w=Math.sin(-N),s=B*v+F*w,t=C*v+G*w,u=D*v+H*w,F=B*-w+F*v,G=C*-w+G*v,H=D*-w+H*v,M=E*-w+M*v,B=s,C=t,D=u),N=Math.atan2(-z,H),m.rotationY=N*L,N&&(v=Math.cos(-N),w=Math.sin(-N),s=x*v-F*w,t=y*v-G*w,u=z*v-H*w,G=y*w+G*v,H=z*w+H*v,M=A*w+M*v,x=s,y=t,z=u),N=Math.atan2(y,x),m.rotation=N*L,N&&(v=Math.cos(N),w=Math.sin(N),s=x*v+y*w,t=B*v+C*w,u=F*v+G*w,y=y*v-x*w,C=C*v-B*w,G=G*v-F*w,x=s,B=t,F=u),m.rotationX&&Math.abs(m.rotationX)+Math.abs(m.rotation)>359.9&&(m.rotationX=m.rotation=0,m.rotationY=180-m.rotationY),N=Math.atan2(B,C),m.scaleX=(Math.sqrt(x*x+y*y+z*z)*p+.5|0)/p,m.scaleY=(Math.sqrt(C*C+D*D)*p+.5|0)/p,m.scaleZ=(Math.sqrt(F*F+G*G+H*H)*p+.5|0)/p,x/=m.scaleX,B/=m.scaleY,y/=m.scaleX,C/=m.scaleY,Math.abs(N)>o?(m.skewX=N*L,B=0,"simple"!==m.skewType&&(m.scaleY*=1/Math.cos(N))):m.skewX=0,m.perspective=M?1/(0>M?-M:M):0,m.x=I,m.y=J,m.z=K,m.svg&&(m.x-=m.xOrigin-(m.xOrigin*x-m.yOrigin*B),m.y-=m.yOrigin-(m.yOrigin*y-m.xOrigin*C))}else if(!Ga||e||!f.length||m.x!==f[4]||m.y!==f[5]||!m.rotationX&&!m.rotationY){var O=f.length>=6,P=O?f[0]:1,Q=f[1]||0,R=f[2]||0,S=O?f[3]:1;m.x=f[4]||0,m.y=f[5]||0,i=Math.sqrt(P*P+Q*Q),j=Math.sqrt(S*S+R*R),k=P||Q?Math.atan2(Q,P)*L:m.rotation||0,l=R||S?Math.atan2(R,S)*L+k:m.skewX||0,m.scaleX=i,m.scaleY=j,m.rotation=k,m.skewX=l,Ga&&(m.rotationX=m.rotationY=m.z=0,m.perspective=r,m.scaleZ=1),m.svg&&(m.x-=m.xOrigin-(m.xOrigin*P+m.yOrigin*R),m.y-=m.yOrigin-(m.xOrigin*Q+m.yOrigin*S))}Math.abs(m.skewX)>90&&Math.abs(m.skewX)<270&&(n?(m.scaleX*=-1,m.skewX+=m.rotation<=0?180:-180,m.rotation+=m.rotation<=0?180:-180):(m.scaleY*=-1,m.skewX+=m.skewX<=0?180:-180)),m.zOrigin=q;for(h in m)m[h]<o&&m[h]>-o&&(m[h]=0)}return d&&(a._gsTransform=m,m.svg&&(Ba&&a.style[Da]?b.delayedCall(.001,function(){Wa(a.style,Da)}):!Ba&&a.getAttribute("transform")&&b.delayedCall(.001,function(){a.removeAttribute("transform")}))),m},Ta=function(a){var b,c,d=this.data,e=-d.rotation*K,f=e+d.skewX*K,g=1e5,h=(Math.cos(e)*d.scaleX*g|0)/g,i=(Math.sin(e)*d.scaleX*g|0)/g,j=(Math.sin(f)*-d.scaleY*g|0)/g,k=(Math.cos(f)*d.scaleY*g|0)/g,l=this.t.style,m=this.t.currentStyle;if(m){c=i,i=-j,j=-c,b=m.filter,l.filter="";var n,o,q=this.t.offsetWidth,r=this.t.offsetHeight,s="absolute"!==m.position,t="progid:DXImageTransform.Microsoft.Matrix(M11="+h+", M12="+i+", M21="+j+", M22="+k,u=d.x+q*d.xPercent/100,v=d.y+r*d.yPercent/100;if(null!=d.ox&&(n=(d.oxp?q*d.ox*.01:d.ox)-q/2,o=(d.oyp?r*d.oy*.01:d.oy)-r/2,u+=n-(n*h+o*i),v+=o-(n*j+o*k)),s?(n=q/2,o=r/2,t+=", Dx="+(n-(n*h+o*i)+u)+", Dy="+(o-(n*j+o*k)+v)+")"):t+=", sizingMethod='auto expand')",-1!==b.indexOf("DXImageTransform.Microsoft.Matrix(")?l.filter=b.replace(H,t):l.filter=t+" "+b,(0===a||1===a)&&1===h&&0===i&&0===j&&1===k&&(s&&-1===t.indexOf("Dx=0, Dy=0")||x.test(b)&&100!==parseFloat(RegExp.$1)||-1===b.indexOf(b.indexOf("Alpha"))&&l.removeAttribute("filter")),!s){var y,z,A,B=8>p?1:-1;for(n=d.ieOffsetX||0,o=d.ieOffsetY||0,d.ieOffsetX=Math.round((q-((0>h?-h:h)*q+(0>i?-i:i)*r))/2+u),d.ieOffsetY=Math.round((r-((0>k?-k:k)*r+(0>j?-j:j)*q))/2+v),xa=0;4>xa;xa++)z=ga[xa],y=m[z],c=-1!==y.indexOf("px")?parseFloat(y):ba(this.t,z,parseFloat(y),y.replace(w,""))||0,A=c!==d[z]?2>xa?-d.ieOffsetX:-d.ieOffsetY:2>xa?n-d.ieOffsetX:o-d.ieOffsetY,l[z]=(d[z]=Math.round(c-A*(0===xa||2===xa?1:B)))+"px"}}},Ua=S.set3DTransformRatio=S.setTransformRatio=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,o,p,q,r,s,t,u,v,w,x,y,z=this.data,A=this.t.style,B=z.rotation,C=z.rotationX,D=z.rotationY,E=z.scaleX,F=z.scaleY,G=z.scaleZ,H=z.x,I=z.y,J=z.z,L=z.svg,M=z.perspective,N=z.force3D,O=z.skewY,P=z.skewX;if(O&&(P+=O,B+=O),((1===a||0===a)&&"auto"===N&&(this.tween._totalTime===this.tween._totalDuration||!this.tween._totalTime)||!N)&&!J&&!M&&!D&&!C&&1===G||Ba&&L||!Ga)return void(B||P||L?(B*=K,x=P*K,y=1e5,c=Math.cos(B)*E,f=Math.sin(B)*E,d=Math.sin(B-x)*-F,g=Math.cos(B-x)*F,x&&"simple"===z.skewType&&(b=Math.tan(x-O*K),b=Math.sqrt(1+b*b),d*=b,g*=b,O&&(b=Math.tan(O*K),b=Math.sqrt(1+b*b),c*=b,f*=b)),L&&(H+=z.xOrigin-(z.xOrigin*c+z.yOrigin*d)+z.xOffset,I+=z.yOrigin-(z.xOrigin*f+z.yOrigin*g)+z.yOffset,Ba&&(z.xPercent||z.yPercent)&&(q=this.t.getBBox(),H+=.01*z.xPercent*q.width,I+=.01*z.yPercent*q.height),q=1e-6,q>H&&H>-q&&(H=0),q>I&&I>-q&&(I=0)),u=(c*y|0)/y+","+(f*y|0)/y+","+(d*y|0)/y+","+(g*y|0)/y+","+H+","+I+")",L&&Ba?this.t.setAttribute("transform","matrix("+u):A[Da]=(z.xPercent||z.yPercent?"translate("+z.xPercent+"%,"+z.yPercent+"%) matrix(":"matrix(")+u):A[Da]=(z.xPercent||z.yPercent?"translate("+z.xPercent+"%,"+z.yPercent+"%) matrix(":"matrix(")+E+",0,0,"+F+","+H+","+I+")");if(n&&(q=1e-4,q>E&&E>-q&&(E=G=2e-5),q>F&&F>-q&&(F=G=2e-5),!M||z.z||z.rotationX||z.rotationY||(M=0)),B||P)B*=K,r=c=Math.cos(B),s=f=Math.sin(B),P&&(B-=P*K,r=Math.cos(B),s=Math.sin(B),"simple"===z.skewType&&(b=Math.tan((P-O)*K),b=Math.sqrt(1+b*b),r*=b,s*=b,z.skewY&&(b=Math.tan(O*K),b=Math.sqrt(1+b*b),c*=b,f*=b))),d=-s,g=r;else{if(!(D||C||1!==G||M||L))return void(A[Da]=(z.xPercent||z.yPercent?"translate("+z.xPercent+"%,"+z.yPercent+"%) translate3d(":"translate3d(")+H+"px,"+I+"px,"+J+"px)"+(1!==E||1!==F?" scale("+E+","+F+")":""));c=g=1,d=f=0}k=1,e=h=i=j=l=m=0,o=M?-1/M:0,p=z.zOrigin,q=1e-6,v=",",w="0",B=D*K,B&&(r=Math.cos(B),s=Math.sin(B),i=-s,l=o*-s,e=c*s,h=f*s,k=r,o*=r,c*=r,f*=r),B=C*K,B&&(r=Math.cos(B),s=Math.sin(B),b=d*r+e*s,t=g*r+h*s,j=k*s,m=o*s,e=d*-s+e*r,h=g*-s+h*r,k*=r,o*=r,d=b,g=t),1!==G&&(e*=G,h*=G,k*=G,o*=G),1!==F&&(d*=F,g*=F,j*=F,m*=F),1!==E&&(c*=E,f*=E,i*=E,l*=E),(p||L)&&(p&&(H+=e*-p,I+=h*-p,J+=k*-p+p),L&&(H+=z.xOrigin-(z.xOrigin*c+z.yOrigin*d)+z.xOffset,I+=z.yOrigin-(z.xOrigin*f+z.yOrigin*g)+z.yOffset),q>H&&H>-q&&(H=w),q>I&&I>-q&&(I=w),q>J&&J>-q&&(J=0)),u=z.xPercent||z.yPercent?"translate("+z.xPercent+"%,"+z.yPercent+"%) matrix3d(":"matrix3d(",u+=(q>c&&c>-q?w:c)+v+(q>f&&f>-q?w:f)+v+(q>i&&i>-q?w:i),u+=v+(q>l&&l>-q?w:l)+v+(q>d&&d>-q?w:d)+v+(q>g&&g>-q?w:g),C||D||1!==G?(u+=v+(q>j&&j>-q?w:j)+v+(q>m&&m>-q?w:m)+v+(q>e&&e>-q?w:e),u+=v+(q>h&&h>-q?w:h)+v+(q>k&&k>-q?w:k)+v+(q>o&&o>-q?w:o)+v):u+=",0,0,0,0,1,0,",u+=H+v+I+v+J+v+(M?1+-J/M:1)+")",A[Da]=u};j=Ha.prototype,j.x=j.y=j.z=j.skewX=j.skewY=j.rotation=j.rotationX=j.rotationY=j.zOrigin=j.xPercent=j.yPercent=j.xOffset=j.yOffset=0,
j.scaleX=j.scaleY=j.scaleZ=1,za("transform,scale,scaleX,scaleY,scaleZ,x,y,z,rotation,rotationX,rotationY,rotationZ,skewX,skewY,shortRotation,shortRotationX,shortRotationY,shortRotationZ,transformOrigin,svgOrigin,transformPerspective,directionalRotation,parseTransform,force3D,skewType,xPercent,yPercent,smoothOrigin",{parser:function(a,b,c,d,f,h,i){if(d._lastParsedTransform===i)return f;d._lastParsedTransform=i;var j=i.scale&&"function"==typeof i.scale?i.scale:0;j&&(i.scale=j(r,a));var k,l,m,n,o,p,s,t,u,v=a._gsTransform,w=a.style,x=1e-6,y=Ca.length,z=i,A={},B="transformOrigin",C=Sa(a,e,!0,z.parseTransform),D=z.transform&&("function"==typeof z.transform?z.transform(r,q):z.transform);if(C.skewType=z.skewType||C.skewType||g.defaultSkewType,d._transform=C,"rotationZ"in z&&(z.rotation=z.rotationZ),D&&"string"==typeof D&&Da)l=Q.style,l[Da]=D,l.display="block",l.position="absolute",-1!==D.indexOf("%")&&(l.width=aa(a,"width"),l.height=aa(a,"height")),O.body.appendChild(Q),k=Sa(Q,null,!1),"simple"===C.skewType&&(k.scaleY*=Math.cos(k.skewX*K)),C.svg&&(p=C.xOrigin,s=C.yOrigin,k.x-=C.xOffset,k.y-=C.yOffset,(z.transformOrigin||z.svgOrigin)&&(D={},Ma(a,ia(z.transformOrigin),D,z.svgOrigin,z.smoothOrigin,!0),p=D.xOrigin,s=D.yOrigin,k.x-=D.xOffset-C.xOffset,k.y-=D.yOffset-C.yOffset),(p||s)&&(t=Ra(Q,!0),k.x-=p-(p*t[0]+s*t[2]),k.y-=s-(p*t[1]+s*t[3]))),O.body.removeChild(Q),k.perspective||(k.perspective=C.perspective),null!=z.xPercent&&(k.xPercent=ka(z.xPercent,C.xPercent)),null!=z.yPercent&&(k.yPercent=ka(z.yPercent,C.yPercent));else if("object"==typeof z){if(k={scaleX:ka(null!=z.scaleX?z.scaleX:z.scale,C.scaleX),scaleY:ka(null!=z.scaleY?z.scaleY:z.scale,C.scaleY),scaleZ:ka(z.scaleZ,C.scaleZ),x:ka(z.x,C.x),y:ka(z.y,C.y),z:ka(z.z,C.z),xPercent:ka(z.xPercent,C.xPercent),yPercent:ka(z.yPercent,C.yPercent),perspective:ka(z.transformPerspective,C.perspective)},o=z.directionalRotation,null!=o)if("object"==typeof o)for(l in o)z[l]=o[l];else z.rotation=o;"string"==typeof z.x&&-1!==z.x.indexOf("%")&&(k.x=0,k.xPercent=ka(z.x,C.xPercent)),"string"==typeof z.y&&-1!==z.y.indexOf("%")&&(k.y=0,k.yPercent=ka(z.y,C.yPercent)),k.rotation=la("rotation"in z?z.rotation:"shortRotation"in z?z.shortRotation+"_short":C.rotation,C.rotation,"rotation",A),Ga&&(k.rotationX=la("rotationX"in z?z.rotationX:"shortRotationX"in z?z.shortRotationX+"_short":C.rotationX||0,C.rotationX,"rotationX",A),k.rotationY=la("rotationY"in z?z.rotationY:"shortRotationY"in z?z.shortRotationY+"_short":C.rotationY||0,C.rotationY,"rotationY",A)),k.skewX=la(z.skewX,C.skewX),k.skewY=la(z.skewY,C.skewY)}for(Ga&&null!=z.force3D&&(C.force3D=z.force3D,n=!0),m=C.force3D||C.z||C.rotationX||C.rotationY||k.z||k.rotationX||k.rotationY||k.perspective,m||null==z.scale||(k.scaleZ=1);--y>-1;)u=Ca[y],D=k[u]-C[u],(D>x||-x>D||null!=z[u]||null!=M[u])&&(n=!0,f=new ua(C,u,C[u],D,f),u in A&&(f.e=A[u]),f.xs0=0,f.plugin=h,d._overwriteProps.push(f.n));return D="function"==typeof z.transformOrigin?z.transformOrigin(r,q):z.transformOrigin,C.svg&&(D||z.svgOrigin)&&(p=C.xOffset,s=C.yOffset,Ma(a,ia(D),k,z.svgOrigin,z.smoothOrigin),f=va(C,"xOrigin",(v?C:k).xOrigin,k.xOrigin,f,B),f=va(C,"yOrigin",(v?C:k).yOrigin,k.yOrigin,f,B),(p!==C.xOffset||s!==C.yOffset)&&(f=va(C,"xOffset",v?p:C.xOffset,C.xOffset,f,B),f=va(C,"yOffset",v?s:C.yOffset,C.yOffset,f,B)),D="0px 0px"),(D||Ga&&m&&C.zOrigin)&&(Da?(n=!0,u=Fa,D||(D=(aa(a,u,e,!1,"50% 50%")+"").split(" "),D=D[0]+" "+D[1]+" "+C.zOrigin+"px"),D+="",f=new ua(w,u,0,0,f,-1,B),f.b=w[u],f.plugin=h,Ga?(l=C.zOrigin,D=D.split(" "),C.zOrigin=(D.length>2?parseFloat(D[2]):l)||0,f.xs0=f.e=D[0]+" "+(D[1]||"50%")+" 0px",f=new ua(C,"zOrigin",0,0,f,-1,f.n),f.b=l,f.xs0=f.e=C.zOrigin):f.xs0=f.e=D):ia(D+"",C)),n&&(d._transformType=C.svg&&Ba||!m&&3!==this._transformType?2:3),j&&(i.scale=j),f},allowFunc:!0,prefix:!0}),za("boxShadow",{defaultValue:"0px 0px 0px 0px #999",prefix:!0,color:!0,multi:!0,keyword:"inset"}),za("clipPath",{defaultValue:"inset(0px)",prefix:!0,multi:!0,formatter:ra("inset(0px 0px 0px 0px)",!1,!0)}),za("borderRadius",{defaultValue:"0px",parser:function(a,b,c,f,g,h){b=this.format(b);var i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y=["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius"],z=a.style;for(q=parseFloat(a.offsetWidth),r=parseFloat(a.offsetHeight),i=b.split(" "),j=0;j<y.length;j++)this.p.indexOf("border")&&(y[j]=Z(y[j])),m=l=aa(a,y[j],e,!1,"0px"),-1!==m.indexOf(" ")&&(l=m.split(" "),m=l[0],l=l[1]),n=k=i[j],o=parseFloat(m),t=m.substr((o+"").length),u="="===n.charAt(1),u?(p=parseInt(n.charAt(0)+"1",10),n=n.substr(2),p*=parseFloat(n),s=n.substr((p+"").length-(0>p?1:0))||""):(p=parseFloat(n),s=n.substr((p+"").length)),""===s&&(s=d[c]||t),s!==t&&(v=ba(a,"borderLeft",o,t),w=ba(a,"borderTop",o,t),"%"===s?(m=v/q*100+"%",l=w/r*100+"%"):"em"===s?(x=ba(a,"borderLeft",1,"em"),m=v/x+"em",l=w/x+"em"):(m=v+"px",l=w+"px"),u&&(n=parseFloat(m)+p+s,k=parseFloat(l)+p+s)),g=wa(z,y[j],m+" "+l,n+" "+k,!1,"0px",g);return g},prefix:!0,formatter:ra("0px 0px 0px 0px",!1,!0)}),za("borderBottomLeftRadius,borderBottomRightRadius,borderTopLeftRadius,borderTopRightRadius",{defaultValue:"0px",parser:function(a,b,c,d,f,g){return wa(a.style,c,this.format(aa(a,c,e,!1,"0px 0px")),this.format(b),!1,"0px",f)},prefix:!0,formatter:ra("0px 0px",!1,!0)}),za("backgroundPosition",{defaultValue:"0 0",parser:function(a,b,c,d,f,g){var h,i,j,k,l,m,n="background-position",o=e||_(a,null),q=this.format((o?p?o.getPropertyValue(n+"-x")+" "+o.getPropertyValue(n+"-y"):o.getPropertyValue(n):a.currentStyle.backgroundPositionX+" "+a.currentStyle.backgroundPositionY)||"0 0"),r=this.format(b);if(-1!==q.indexOf("%")!=(-1!==r.indexOf("%"))&&r.split(",").length<2&&(m=aa(a,"backgroundImage").replace(D,""),m&&"none"!==m)){for(h=q.split(" "),i=r.split(" "),R.setAttribute("src",m),j=2;--j>-1;)q=h[j],k=-1!==q.indexOf("%"),k!==(-1!==i[j].indexOf("%"))&&(l=0===j?a.offsetWidth-R.width:a.offsetHeight-R.height,h[j]=k?parseFloat(q)/100*l+"px":parseFloat(q)/l*100+"%");q=h.join(" ")}return this.parseComplex(a.style,q,r,f,g)},formatter:ia}),za("backgroundSize",{defaultValue:"0 0",formatter:function(a){return a+="","co"===a.substr(0,2)?a:ia(-1===a.indexOf(" ")?a+" "+a:a)}}),za("perspective",{defaultValue:"0px",prefix:!0}),za("perspectiveOrigin",{defaultValue:"50% 50%",prefix:!0}),za("transformStyle",{prefix:!0}),za("backfaceVisibility",{prefix:!0}),za("userSelect",{prefix:!0}),za("margin",{parser:sa("marginTop,marginRight,marginBottom,marginLeft")}),za("padding",{parser:sa("paddingTop,paddingRight,paddingBottom,paddingLeft")}),za("clip",{defaultValue:"rect(0px,0px,0px,0px)",parser:function(a,b,c,d,f,g){var h,i,j;return 9>p?(i=a.currentStyle,j=8>p?" ":",",h="rect("+i.clipTop+j+i.clipRight+j+i.clipBottom+j+i.clipLeft+")",b=this.format(b).split(",").join(j)):(h=this.format(aa(a,this.p,e,!1,this.dflt)),b=this.format(b)),this.parseComplex(a.style,h,b,f,g)}}),za("textShadow",{defaultValue:"0px 0px 0px #999",color:!0,multi:!0}),za("autoRound,strictUnits",{parser:function(a,b,c,d,e){return e}}),za("border",{defaultValue:"0px solid #000",parser:function(a,b,c,d,f,g){var h=aa(a,"borderTopWidth",e,!1,"0px"),i=this.format(b).split(" "),j=i[0].replace(w,"");return"px"!==j&&(h=parseFloat(h)/ba(a,"borderTopWidth",1,j)+j),this.parseComplex(a.style,this.format(h+" "+aa(a,"borderTopStyle",e,!1,"solid")+" "+aa(a,"borderTopColor",e,!1,"#000")),i.join(" "),f,g)},color:!0,formatter:function(a){var b=a.split(" ");return b[0]+" "+(b[1]||"solid")+" "+(a.match(qa)||["#000"])[0]}}),za("borderWidth",{parser:sa("borderTopWidth,borderRightWidth,borderBottomWidth,borderLeftWidth")}),za("float,cssFloat,styleFloat",{parser:function(a,b,c,d,e,f){var g=a.style,h="cssFloat"in g?"cssFloat":"styleFloat";return new ua(g,h,0,0,e,-1,c,!1,0,g[h],b)}});var Va=function(a){var b,c=this.t,d=c.filter||aa(this.data,"filter")||"",e=this.s+this.c*a|0;100===e&&(-1===d.indexOf("atrix(")&&-1===d.indexOf("radient(")&&-1===d.indexOf("oader(")?(c.removeAttribute("filter"),b=!aa(this.data,"filter")):(c.filter=d.replace(z,""),b=!0)),b||(this.xn1&&(c.filter=d=d||"alpha(opacity="+e+")"),-1===d.indexOf("pacity")?0===e&&this.xn1||(c.filter=d+" alpha(opacity="+e+")"):c.filter=d.replace(x,"opacity="+e))};za("opacity,alpha,autoAlpha",{defaultValue:"1",parser:function(a,b,c,d,f,g){var h=parseFloat(aa(a,"opacity",e,!1,"1")),i=a.style,j="autoAlpha"===c;return"string"==typeof b&&"="===b.charAt(1)&&(b=("-"===b.charAt(0)?-1:1)*parseFloat(b.substr(2))+h),j&&1===h&&"hidden"===aa(a,"visibility",e)&&0!==b&&(h=0),U?f=new ua(i,"opacity",h,b-h,f):(f=new ua(i,"opacity",100*h,100*(b-h),f),f.xn1=j?1:0,i.zoom=1,f.type=2,f.b="alpha(opacity="+f.s+")",f.e="alpha(opacity="+(f.s+f.c)+")",f.data=a,f.plugin=g,f.setRatio=Va),j&&(f=new ua(i,"visibility",0,0,f,-1,null,!1,0,0!==h?"inherit":"hidden",0===b?"hidden":"inherit"),f.xs0="inherit",d._overwriteProps.push(f.n),d._overwriteProps.push(c)),f}});var Wa=function(a,b){b&&(a.removeProperty?(("ms"===b.substr(0,2)||"webkit"===b.substr(0,6))&&(b="-"+b),a.removeProperty(b.replace(B,"-$1").toLowerCase())):a.removeAttribute(b))},Xa=function(a){if(this.t._gsClassPT=this,1===a||0===a){this.t.setAttribute("class",0===a?this.b:this.e);for(var b=this.data,c=this.t.style;b;)b.v?c[b.p]=b.v:Wa(c,b.p),b=b._next;1===a&&this.t._gsClassPT===this&&(this.t._gsClassPT=null)}else this.t.getAttribute("class")!==this.e&&this.t.setAttribute("class",this.e)};za("className",{parser:function(a,b,d,f,g,h,i){var j,k,l,m,n,o=a.getAttribute("class")||"",p=a.style.cssText;if(g=f._classNamePT=new ua(a,d,0,0,g,2),g.setRatio=Xa,g.pr=-11,c=!0,g.b=o,k=da(a,e),l=a._gsClassPT){for(m={},n=l.data;n;)m[n.p]=1,n=n._next;l.setRatio(1)}return a._gsClassPT=g,g.e="="!==b.charAt(1)?b:o.replace(new RegExp("(?:\\s|^)"+b.substr(2)+"(?![\\w-])"),"")+("+"===b.charAt(0)?" "+b.substr(2):""),a.setAttribute("class",g.e),j=ea(a,k,da(a),i,m),a.setAttribute("class",o),g.data=j.firstMPT,a.style.cssText=p,g=g.xfirst=f.parse(a,j.difs,g,h)}});var Ya=function(a){if((1===a||0===a)&&this.data._totalTime===this.data._totalDuration&&"isFromStart"!==this.data.data){var b,c,d,e,f,g=this.t.style,h=i.transform.parse;if("all"===this.e)g.cssText="",e=!0;else for(b=this.e.split(" ").join("").split(","),d=b.length;--d>-1;)c=b[d],i[c]&&(i[c].parse===h?e=!0:c="transformOrigin"===c?Fa:i[c].p),Wa(g,c);e&&(Wa(g,Da),f=this.t._gsTransform,f&&(f.svg&&(this.t.removeAttribute("data-svg-origin"),this.t.removeAttribute("transform")),delete this.t._gsTransform))}};for(za("clearProps",{parser:function(a,b,d,e,f){return f=new ua(a,d,0,0,f,2),f.setRatio=Ya,f.e=b,f.pr=-10,f.data=e._tween,c=!0,f}}),j="bezier,throwProps,physicsProps,physics2D".split(","),xa=j.length;xa--;)Aa(j[xa]);j=g.prototype,j._firstPT=j._lastParsedTransform=j._transform=null,j._onInitTween=function(a,b,h,j){if(!a.nodeType)return!1;this._target=q=a,this._tween=h,this._vars=b,r=j,k=b.autoRound,c=!1,d=b.suffixMap||g.suffixMap,e=_(a,""),f=this._overwriteProps;var n,p,s,t,u,v,w,x,z,A=a.style;if(l&&""===A.zIndex&&(n=aa(a,"zIndex",e),("auto"===n||""===n)&&this._addLazySet(A,"zIndex",0)),"string"==typeof b&&(t=A.cssText,n=da(a,e),A.cssText=t+";"+b,n=ea(a,n,da(a)).difs,!U&&y.test(b)&&(n.opacity=parseFloat(RegExp.$1)),b=n,A.cssText=t),b.className?this._firstPT=p=i.className.parse(a,b.className,"className",this,null,null,b):this._firstPT=p=this.parse(a,b,null),this._transformType){for(z=3===this._transformType,Da?m&&(l=!0,""===A.zIndex&&(w=aa(a,"zIndex",e),("auto"===w||""===w)&&this._addLazySet(A,"zIndex",0)),o&&this._addLazySet(A,"WebkitBackfaceVisibility",this._vars.WebkitBackfaceVisibility||(z?"visible":"hidden"))):A.zoom=1,s=p;s&&s._next;)s=s._next;x=new ua(a,"transform",0,0,null,2),this._linkCSSP(x,null,s),x.setRatio=Da?Ua:Ta,x.data=this._transform||Sa(a,e,!0),x.tween=h,x.pr=-1,f.pop()}if(c){for(;p;){for(v=p._next,s=t;s&&s.pr>p.pr;)s=s._next;(p._prev=s?s._prev:u)?p._prev._next=p:t=p,(p._next=s)?s._prev=p:u=p,p=v}this._firstPT=t}return!0},j.parse=function(a,b,c,f){var g,h,j,l,m,n,o,p,s,t,u=a.style;for(g in b){if(n=b[g],h=i[g],"function"!=typeof n||h&&h.allowFunc||(n=n(r,q)),h)c=h.parse(a,n,g,this,c,f,b);else{if("--"===g.substr(0,2)){this._tween._propLookup[g]=this._addTween.call(this._tween,a.style,"setProperty",_(a).getPropertyValue(g)+"",n+"",g,!1,g);continue}m=aa(a,g,e)+"",s="string"==typeof n,"color"===g||"fill"===g||"stroke"===g||-1!==g.indexOf("Color")||s&&A.test(n)?(s||(n=oa(n),n=(n.length>3?"rgba(":"rgb(")+n.join(",")+")"),c=wa(u,g,m,n,!0,"transparent",c,0,f)):s&&J.test(n)?c=wa(u,g,m,n,!0,null,c,0,f):(j=parseFloat(m),o=j||0===j?m.substr((j+"").length):"",(""===m||"auto"===m)&&("width"===g||"height"===g?(j=ha(a,g,e),o="px"):"left"===g||"top"===g?(j=ca(a,g,e),o="px"):(j="opacity"!==g?0:1,o="")),t=s&&"="===n.charAt(1),t?(l=parseInt(n.charAt(0)+"1",10),n=n.substr(2),l*=parseFloat(n),p=n.replace(w,"")):(l=parseFloat(n),p=s?n.replace(w,""):""),""===p&&(p=g in d?d[g]:o),n=l||0===l?(t?l+j:l)+p:b[g],o!==p&&(""!==p||"lineHeight"===g)&&(l||0===l)&&j&&(j=ba(a,g,j,o),"%"===p?(j/=ba(a,g,100,"%")/100,b.strictUnits!==!0&&(m=j+"%")):"em"===p||"rem"===p||"vw"===p||"vh"===p?j/=ba(a,g,1,p):"px"!==p&&(l=ba(a,g,l,p),p="px"),t&&(l||0===l)&&(n=l+j+p)),t&&(l+=j),!j&&0!==j||!l&&0!==l?void 0!==u[g]&&(n||n+""!="NaN"&&null!=n)?(c=new ua(u,g,l||j||0,0,c,-1,g,!1,0,m,n),c.xs0="none"!==n||"display"!==g&&-1===g.indexOf("Style")?n:m):W("invalid "+g+" tween value: "+b[g]):(c=new ua(u,g,j,l-j,c,0,g,k!==!1&&("px"===p||"zIndex"===g),0,m,n),c.xs0=p))}f&&c&&!c.plugin&&(c.plugin=f)}return c},j.setRatio=function(a){var b,c,d,e=this._firstPT,f=1e-6;if(1!==a||this._tween._time!==this._tween._duration&&0!==this._tween._time)if(a||this._tween._time!==this._tween._duration&&0!==this._tween._time||this._tween._rawPrevTime===-1e-6)for(;e;){if(b=e.c*a+e.s,e.r?b=e.r(b):f>b&&b>-f&&(b=0),e.type)if(1===e.type)if(d=e.l,2===d)e.t[e.p]=e.xs0+b+e.xs1+e.xn1+e.xs2;else if(3===d)e.t[e.p]=e.xs0+b+e.xs1+e.xn1+e.xs2+e.xn2+e.xs3;else if(4===d)e.t[e.p]=e.xs0+b+e.xs1+e.xn1+e.xs2+e.xn2+e.xs3+e.xn3+e.xs4;else if(5===d)e.t[e.p]=e.xs0+b+e.xs1+e.xn1+e.xs2+e.xn2+e.xs3+e.xn3+e.xs4+e.xn4+e.xs5;else{for(c=e.xs0+b+e.xs1,d=1;d<e.l;d++)c+=e["xn"+d]+e["xs"+(d+1)];e.t[e.p]=c}else-1===e.type?e.t[e.p]=e.xs0:e.setRatio&&e.setRatio(a);else e.t[e.p]=b+e.xs0;e=e._next}else for(;e;)2!==e.type?e.t[e.p]=e.b:e.setRatio(a),e=e._next;else for(;e;){if(2!==e.type)if(e.r&&-1!==e.type)if(b=e.r(e.s+e.c),e.type){if(1===e.type){for(d=e.l,c=e.xs0+b+e.xs1,d=1;d<e.l;d++)c+=e["xn"+d]+e["xs"+(d+1)];e.t[e.p]=c}}else e.t[e.p]=b+e.xs0;else e.t[e.p]=e.e;else e.setRatio(a);e=e._next}},j._enableTransforms=function(a){this._transform=this._transform||Sa(this._target,e,!0),this._transformType=this._transform.svg&&Ba||!a&&3!==this._transformType?2:3};var Za=function(a){this.t[this.p]=this.e,this.data._linkCSSP(this,this._next,null,!0)};j._addLazySet=function(a,b,c){var d=this._firstPT=new ua(a,b,0,0,this._firstPT,2);d.e=c,d.setRatio=Za,d.data=this},j._linkCSSP=function(a,b,c,d){return a&&(b&&(b._prev=a),a._next&&(a._next._prev=a._prev),a._prev?a._prev._next=a._next:this._firstPT===a&&(this._firstPT=a._next,d=!0),c?c._next=a:d||null!==this._firstPT||(this._firstPT=a),a._next=b,a._prev=c),a},j._mod=function(a){for(var b=this._firstPT;b;)"function"==typeof a[b.p]&&(b.r=a[b.p]),b=b._next},j._kill=function(b){var c,d,e,f=b;if(b.autoAlpha||b.alpha){f={};for(d in b)f[d]=b[d];f.opacity=1,f.autoAlpha&&(f.visibility=1)}for(b.className&&(c=this._classNamePT)&&(e=c.xfirst,e&&e._prev?this._linkCSSP(e._prev,c._next,e._prev._prev):e===this._firstPT&&(this._firstPT=c._next),c._next&&this._linkCSSP(c._next,c._next._next,e._prev),this._classNamePT=null),c=this._firstPT;c;)c.plugin&&c.plugin!==d&&c.plugin._kill&&(c.plugin._kill(b),d=c.plugin),c=c._next;return a.prototype._kill.call(this,f)};var $a=function(a,b,c){var d,e,f,g;if(a.slice)for(e=a.length;--e>-1;)$a(a[e],b,c);else for(d=a.childNodes,e=d.length;--e>-1;)f=d[e],g=f.type,f.style&&(b.push(da(f)),c&&c.push(f)),1!==g&&9!==g&&11!==g||!f.childNodes.length||$a(f,b,c)};return g.cascadeTo=function(a,c,d){var e,f,g,h,i=b.to(a,c,d),j=[i],k=[],l=[],m=[],n=b._internals.reservedProps;for(a=i._targets||i.target,$a(a,k,m),i.render(c,!0,!0),$a(a,l),i.render(0,!0,!0),i._enabled(!0),e=m.length;--e>-1;)if(f=ea(m[e],k[e],l[e]),f.firstMPT){f=f.difs;for(g in d)n[g]&&(f[g]=d[g]);h={};for(g in f)h[g]=k[e][g];j.push(b.fromTo(m[e],c,h,f))}return j},a.activate([g]),g},!0),function(){var a=_gsScope._gsDefine.plugin({propName:"roundProps",version:"1.7.0",priority:-1,API:2,init:function(a,b,c){return this._tween=c,!0}}),b=function(a){var b=1>a?Math.pow(10,(a+"").length-2):1;return function(c){return(Math.round(c/a)*a*b|0)/b}},c=function(a,b){for(;a;)a.f||a.blob||(a.m=b||Math.round),a=a._next},d=a.prototype;d._onInitAllProps=function(){var a,d,e,f,g=this._tween,h=g.vars.roundProps,i={},j=g._propLookup.roundProps;if("object"!=typeof h||h.push)for("string"==typeof h&&(h=h.split(",")),e=h.length;--e>-1;)i[h[e]]=Math.round;else for(f in h)i[f]=b(h[f]);for(f in i)for(a=g._firstPT;a;)d=a._next,a.pg?a.t._mod(i):a.n===f&&(2===a.f&&a.t?c(a.t._firstPT,i[f]):(this._add(a.t,f,a.s,a.c,i[f]),d&&(d._prev=a._prev),a._prev?a._prev._next=d:g._firstPT===a&&(g._firstPT=d),a._next=a._prev=null,g._propLookup[f]=j)),a=d;return!1},d._add=function(a,b,c,d,e){this._addTween(a,b,c,c+d,b,e||Math.round),this._overwriteProps.push(b)}}(),function(){_gsScope._gsDefine.plugin({propName:"attr",API:2,version:"0.6.1",init:function(a,b,c,d){var e,f;if("function"!=typeof a.setAttribute)return!1;for(e in b)f=b[e],"function"==typeof f&&(f=f(d,a)),this._addTween(a,"setAttribute",a.getAttribute(e)+"",f+"",e,!1,e),this._overwriteProps.push(e);return!0}})}(),_gsScope._gsDefine.plugin({propName:"directionalRotation",version:"0.3.1",API:2,init:function(a,b,c,d){"object"!=typeof b&&(b={rotation:b}),this.finals={};var e,f,g,h,i,j,k=b.useRadians===!0?2*Math.PI:360,l=1e-6;for(e in b)"useRadians"!==e&&(h=b[e],"function"==typeof h&&(h=h(d,a)),j=(h+"").split("_"),f=j[0],g=parseFloat("function"!=typeof a[e]?a[e]:a[e.indexOf("set")||"function"!=typeof a["get"+e.substr(3)]?e:"get"+e.substr(3)]()),h=this.finals[e]="string"==typeof f&&"="===f.charAt(1)?g+parseInt(f.charAt(0)+"1",10)*Number(f.substr(2)):Number(f)||0,i=h-g,j.length&&(f=j.join("_"),-1!==f.indexOf("short")&&(i%=k,i!==i%(k/2)&&(i=0>i?i+k:i-k)),-1!==f.indexOf("_cw")&&0>i?i=(i+9999999999*k)%k-(i/k|0)*k:-1!==f.indexOf("ccw")&&i>0&&(i=(i-9999999999*k)%k-(i/k|0)*k)),(i>l||-l>i)&&(this._addTween(a,e,g,g+i,e),this._overwriteProps.push(e)));return!0},set:function(a){var b;if(1!==a)this._super.setRatio.call(this,a);else for(b=this._firstPT;b;)b.f?b.t[b.p](this.finals[b.p]):b.t[b.p]=this.finals[b.p],b=b._next}})._autoCSS=!0,_gsScope._gsDefine("easing.Back",["easing.Ease"],function(a){var b,c,d,e,f=_gsScope.GreenSockGlobals||_gsScope,g=f.com.greensock,h=2*Math.PI,i=Math.PI/2,j=g._class,k=function(b,c){var d=j("easing."+b,function(){},!0),e=d.prototype=new a;return e.constructor=d,e.getRatio=c,d},l=a.register||function(){},m=function(a,b,c,d,e){var f=j("easing."+a,{easeOut:new b,easeIn:new c,easeInOut:new d},!0);return l(f,a),f},n=function(a,b,c){this.t=a,this.v=b,c&&(this.next=c,c.prev=this,this.c=c.v-b,this.gap=c.t-a)},o=function(b,c){var d=j("easing."+b,function(a){this._p1=a||0===a?a:1.70158,this._p2=1.525*this._p1},!0),e=d.prototype=new a;return e.constructor=d,e.getRatio=c,e.config=function(a){return new d(a)},d},p=m("Back",o("BackOut",function(a){return(a-=1)*a*((this._p1+1)*a+this._p1)+1}),o("BackIn",function(a){return a*a*((this._p1+1)*a-this._p1)}),o("BackInOut",function(a){return(a*=2)<1?.5*a*a*((this._p2+1)*a-this._p2):.5*((a-=2)*a*((this._p2+1)*a+this._p2)+2)})),q=j("easing.SlowMo",function(a,b,c){b=b||0===b?b:.7,null==a?a=.7:a>1&&(a=1),this._p=1!==a?b:0,this._p1=(1-a)/2,this._p2=a,this._p3=this._p1+this._p2,this._calcEnd=c===!0},!0),r=q.prototype=new a;return r.constructor=q,r.getRatio=function(a){var b=a+(.5-a)*this._p;return a<this._p1?this._calcEnd?1-(a=1-a/this._p1)*a:b-(a=1-a/this._p1)*a*a*a*b:a>this._p3?this._calcEnd?1===a?0:1-(a=(a-this._p3)/this._p1)*a:b+(a-b)*(a=(a-this._p3)/this._p1)*a*a*a:this._calcEnd?1:b},q.ease=new q(.7,.7),r.config=q.config=function(a,b,c){return new q(a,b,c)},b=j("easing.SteppedEase",function(a,b){a=a||1,this._p1=1/a,this._p2=a+(b?0:1),this._p3=b?1:0},!0),r=b.prototype=new a,r.constructor=b,r.getRatio=function(a){return 0>a?a=0:a>=1&&(a=.999999999),((this._p2*a|0)+this._p3)*this._p1},r.config=b.config=function(a,c){return new b(a,c)},c=j("easing.ExpoScaleEase",function(a,b,c){this._p1=Math.log(b/a),this._p2=b-a,this._p3=a,this._ease=c},!0),r=c.prototype=new a,r.constructor=c,r.getRatio=function(a){return this._ease&&(a=this._ease.getRatio(a)),(this._p3*Math.exp(this._p1*a)-this._p3)/this._p2},r.config=c.config=function(a,b,d){return new c(a,b,d)},d=j("easing.RoughEase",function(b){b=b||{};for(var c,d,e,f,g,h,i=b.taper||"none",j=[],k=0,l=0|(b.points||20),m=l,o=b.randomize!==!1,p=b.clamp===!0,q=b.template instanceof a?b.template:null,r="number"==typeof b.strength?.4*b.strength:.4;--m>-1;)c=o?Math.random():1/l*m,d=q?q.getRatio(c):c,"none"===i?e=r:"out"===i?(f=1-c,e=f*f*r):"in"===i?e=c*c*r:.5>c?(f=2*c,e=f*f*.5*r):(f=2*(1-c),e=f*f*.5*r),o?d+=Math.random()*e-.5*e:m%2?d+=.5*e:d-=.5*e,p&&(d>1?d=1:0>d&&(d=0)),j[k++]={x:c,y:d};for(j.sort(function(a,b){return a.x-b.x}),h=new n(1,1,null),m=l;--m>-1;)g=j[m],h=new n(g.x,g.y,h);this._prev=new n(0,0,0!==h.t?h:h.next)},!0),r=d.prototype=new a,r.constructor=d,r.getRatio=function(a){var b=this._prev;if(a>b.t){for(;b.next&&a>=b.t;)b=b.next;b=b.prev}else for(;b.prev&&a<=b.t;)b=b.prev;return this._prev=b,b.v+(a-b.t)/b.gap*b.c},r.config=function(a){return new d(a)},d.ease=new d,m("Bounce",k("BounceOut",function(a){return 1/2.75>a?7.5625*a*a:2/2.75>a?7.5625*(a-=1.5/2.75)*a+.75:2.5/2.75>a?7.5625*(a-=2.25/2.75)*a+.9375:7.5625*(a-=2.625/2.75)*a+.984375}),k("BounceIn",function(a){return(a=1-a)<1/2.75?1-7.5625*a*a:2/2.75>a?1-(7.5625*(a-=1.5/2.75)*a+.75):2.5/2.75>a?1-(7.5625*(a-=2.25/2.75)*a+.9375):1-(7.5625*(a-=2.625/2.75)*a+.984375)}),k("BounceInOut",function(a){var b=.5>a;return a=b?1-2*a:2*a-1,a=1/2.75>a?7.5625*a*a:2/2.75>a?7.5625*(a-=1.5/2.75)*a+.75:2.5/2.75>a?7.5625*(a-=2.25/2.75)*a+.9375:7.5625*(a-=2.625/2.75)*a+.984375,b?.5*(1-a):.5*a+.5})),m("Circ",k("CircOut",function(a){return Math.sqrt(1-(a-=1)*a)}),k("CircIn",function(a){return-(Math.sqrt(1-a*a)-1)}),k("CircInOut",function(a){return(a*=2)<1?-.5*(Math.sqrt(1-a*a)-1):.5*(Math.sqrt(1-(a-=2)*a)+1)})),e=function(b,c,d){var e=j("easing."+b,function(a,b){this._p1=a>=1?a:1,this._p2=(b||d)/(1>a?a:1),this._p3=this._p2/h*(Math.asin(1/this._p1)||0),this._p2=h/this._p2},!0),f=e.prototype=new a;return f.constructor=e,f.getRatio=c,f.config=function(a,b){return new e(a,b)},e},m("Elastic",e("ElasticOut",function(a){return this._p1*Math.pow(2,-10*a)*Math.sin((a-this._p3)*this._p2)+1},.3),e("ElasticIn",function(a){return-(this._p1*Math.pow(2,10*(a-=1))*Math.sin((a-this._p3)*this._p2))},.3),e("ElasticInOut",function(a){return(a*=2)<1?-.5*(this._p1*Math.pow(2,10*(a-=1))*Math.sin((a-this._p3)*this._p2)):this._p1*Math.pow(2,-10*(a-=1))*Math.sin((a-this._p3)*this._p2)*.5+1},.45)),m("Expo",k("ExpoOut",function(a){return 1-Math.pow(2,-10*a)}),k("ExpoIn",function(a){return Math.pow(2,10*(a-1))-.001}),k("ExpoInOut",function(a){return(a*=2)<1?.5*Math.pow(2,10*(a-1)):.5*(2-Math.pow(2,-10*(a-1)))})),m("Sine",k("SineOut",function(a){return Math.sin(a*i)}),k("SineIn",function(a){return-Math.cos(a*i)+1}),k("SineInOut",function(a){return-.5*(Math.cos(Math.PI*a)-1)})),j("easing.EaseLookup",{find:function(b){return a.map[b]}},!0),l(f.SlowMo,"SlowMo","ease,"),l(d,"RoughEase","ease,"),l(b,"SteppedEase","ease,"),p},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()(),function(a,b){"use strict";var c={},d=a.document,e=a.GreenSockGlobals=a.GreenSockGlobals||a,f=e[b];if(f)return"undefined"!=typeof module&&module.exports&&(module.exports=f),f;var g,h,i,j,k,l=function(a){var b,c=a.split("."),d=e;for(b=0;b<c.length;b++)d[c[b]]=d=d[c[b]]||{};return d},m=l("com.greensock"),n=1e-8,o=function(a){var b,c=[],d=a.length;for(b=0;b!==d;c.push(a[b++]));return c},p=function(){},q=function(){var a=Object.prototype.toString,b=a.call([]);return function(c){return null!=c&&(c instanceof Array||"object"==typeof c&&!!c.push&&a.call(c)===b)}}(),r={},s=function(d,f,g,h){this.sc=r[d]?r[d].sc:[],r[d]=this,this.gsClass=null,this.func=g;var i=[];this.check=function(j){for(var k,m,n,o,p=f.length,q=p;--p>-1;)(k=r[f[p]]||new s(f[p],[])).gsClass?(i[p]=k.gsClass,q--):j&&k.sc.push(this);if(0===q&&g){if(m=("com.greensock."+d).split("."),n=m.pop(),o=l(m.join("."))[n]=this.gsClass=g.apply(g,i),h)if(e[n]=c[n]=o,"undefined"!=typeof module&&module.exports)if(d===b){module.exports=c[b]=o;for(p in c)o[p]=c[p]}else c[b]&&(c[b][n]=o);else"function"==typeof define&&define.amd&&define((a.GreenSockAMDPath?a.GreenSockAMDPath+"/":"")+d.split(".").pop(),[],function(){return o});for(p=0;p<this.sc.length;p++)this.sc[p].check()}},this.check(!0)},t=a._gsDefine=function(a,b,c,d){return new s(a,b,c,d)},u=m._class=function(a,b,c){return b=b||function(){},t(a,[],function(){return b},c),b};t.globals=e;var v=[0,0,1,1],w=u("easing.Ease",function(a,b,c,d){this._func=a,this._type=c||0,this._power=d||0,this._params=b?v.concat(b):v},!0),x=w.map={},y=w.register=function(a,b,c,d){for(var e,f,g,h,i=b.split(","),j=i.length,k=(c||"easeIn,easeOut,easeInOut").split(",");--j>-1;)for(f=i[j],e=d?u("easing."+f,null,!0):m.easing[f]||{},g=k.length;--g>-1;)h=k[g],x[f+"."+h]=x[h+f]=e[h]=a.getRatio?a:a[h]||new a};for(i=w.prototype,i._calcEnd=!1,i.getRatio=function(a){if(this._func)return this._params[0]=a,this._func.apply(null,this._params);var b=this._type,c=this._power,d=1===b?1-a:2===b?a:.5>a?2*a:2*(1-a);return 1===c?d*=d:2===c?d*=d*d:3===c?d*=d*d*d:4===c&&(d*=d*d*d*d),1===b?1-d:2===b?d:.5>a?d/2:1-d/2},g=["Linear","Quad","Cubic","Quart","Quint,Strong"],h=g.length;--h>-1;)i=g[h]+",Power"+h,y(new w(null,null,1,h),i,"easeOut",!0),y(new w(null,null,2,h),i,"easeIn"+(0===h?",easeNone":"")),y(new w(null,null,3,h),i,"easeInOut");x.linear=m.easing.Linear.easeIn,x.swing=m.easing.Quad.easeInOut;var z=u("events.EventDispatcher",function(a){this._listeners={},this._eventTarget=a||this});i=z.prototype,i.addEventListener=function(a,b,c,d,e){e=e||0;var f,g,h=this._listeners[a],i=0;for(this!==j||k||j.wake(),null==h&&(this._listeners[a]=h=[]),g=h.length;--g>-1;)f=h[g],f.c===b&&f.s===c?h.splice(g,1):0===i&&f.pr<e&&(i=g+1);h.splice(i,0,{c:b,s:c,up:d,pr:e})},i.removeEventListener=function(a,b){var c,d=this._listeners[a];if(d)for(c=d.length;--c>-1;)if(d[c].c===b)return void d.splice(c,1)},i.dispatchEvent=function(a){var b,c,d,e=this._listeners[a];if(e)for(b=e.length,b>1&&(e=e.slice(0)),c=this._eventTarget;--b>-1;)d=e[b],d&&(d.up?d.c.call(d.s||c,{type:a,target:c}):d.c.call(d.s||c))};var A=a.requestAnimationFrame,B=a.cancelAnimationFrame,C=Date.now||function(){return(new Date).getTime()},D=C();for(g=["ms","moz","webkit","o"],h=g.length;--h>-1&&!A;)A=a[g[h]+"RequestAnimationFrame"],B=a[g[h]+"CancelAnimationFrame"]||a[g[h]+"CancelRequestAnimationFrame"];u("Ticker",function(a,b){var c,e,f,g,h,i=this,l=C(),m=b!==!1&&A?"auto":!1,o=500,q=33,r="tick",s=function(a){var b,d,j=C()-D;j>o&&(l+=j-q),D+=j,i.time=(D-l)/1e3,b=i.time-h,(!c||b>0||a===!0)&&(i.frame++,h+=b+(b>=g?.004:g-b),d=!0),a!==!0&&(f=e(s)),d&&i.dispatchEvent(r)};z.call(i),i.time=i.frame=0,i.tick=function(){s(!0)},i.lagSmoothing=function(a,b){return arguments.length?(o=a||1/n,void(q=Math.min(b,o,0))):1/n>o},i.sleep=function(){null!=f&&(m&&B?B(f):clearTimeout(f),e=p,f=null,i===j&&(k=!1))},i.wake=function(a){null!==f?i.sleep():a?l+=-D+(D=C()):i.frame>10&&(D=C()-o+5),e=0===c?p:m&&A?A:function(a){return setTimeout(a,1e3*(h-i.time)+1|0)},i===j&&(k=!0),s(2)},i.fps=function(a){return arguments.length?(c=a,g=1/(c||60),h=this.time+g,void i.wake()):c},i.useRAF=function(a){return arguments.length?(i.sleep(),m=a,void i.fps(c)):m},i.fps(a),setTimeout(function(){"auto"===m&&i.frame<5&&"hidden"!==(d||{}).visibilityState&&i.useRAF(!1)},1500)}),i=m.Ticker.prototype=new m.events.EventDispatcher,i.constructor=m.Ticker;var E=u("core.Animation",function(a,b){if(this.vars=b=b||{},this._duration=this._totalDuration=a||0,this._delay=Number(b.delay)||0,this._timeScale=1,this._active=!!b.immediateRender,this.data=b.data,this._reversed=!!b.reversed,Z){k||j.wake();var c=this.vars.useFrames?Y:Z;c.add(this,c._time),this.vars.paused&&this.paused(!0)}});j=E.ticker=new m.Ticker,i=E.prototype,i._dirty=i._gc=i._initted=i._paused=!1,i._totalTime=i._time=0,i._rawPrevTime=-1,i._next=i._last=i._onUpdate=i._timeline=i.timeline=null,i._paused=!1;var F=function(){k&&C()-D>2e3&&("hidden"!==(d||{}).visibilityState||!j.lagSmoothing())&&j.wake();var a=setTimeout(F,2e3);a.unref&&a.unref()};F(),i.play=function(a,b){return null!=a&&this.seek(a,b),this.reversed(!1).paused(!1)},i.pause=function(a,b){return null!=a&&this.seek(a,b),this.paused(!0)},i.resume=function(a,b){return null!=a&&this.seek(a,b),this.paused(!1)},i.seek=function(a,b){return this.totalTime(Number(a),b!==!1)},i.restart=function(a,b){return this.reversed(!1).paused(!1).totalTime(a?-this._delay:0,b!==!1,!0)},i.reverse=function(a,b){return null!=a&&this.seek(a||this.totalDuration(),b),this.reversed(!0).paused(!1)},i.render=function(a,b,c){},i.invalidate=function(){return this._time=this._totalTime=0,this._initted=this._gc=!1,this._rawPrevTime=-1,(this._gc||!this.timeline)&&this._enabled(!0),this},i.isActive=function(){var a,b=this._timeline,c=this._startTime;return!b||!this._gc&&!this._paused&&b.isActive()&&(a=b.rawTime(!0))>=c&&a<c+this.totalDuration()/this._timeScale-n},i._enabled=function(a,b){return k||j.wake(),this._gc=!a,this._active=this.isActive(),b!==!0&&(a&&!this.timeline?this._timeline.add(this,this._startTime-this._delay):!a&&this.timeline&&this._timeline._remove(this,!0)),!1},i._kill=function(a,b){return this._enabled(!1,!1)},i.kill=function(a,b){return this._kill(a,b),this},i._uncache=function(a){for(var b=a?this:this.timeline;b;)b._dirty=!0,b=b.timeline;return this},i._swapSelfInParams=function(a){for(var b=a.length,c=a.concat();--b>-1;)"{self}"===a[b]&&(c[b]=this);return c},i._callback=function(a){var b=this.vars,c=b[a],d=b[a+"Params"],e=b[a+"Scope"]||b.callbackScope||this,f=d?d.length:0;switch(f){case 0:c.call(e);break;case 1:c.call(e,d[0]);break;case 2:c.call(e,d[0],d[1]);break;default:c.apply(e,d)}},i.eventCallback=function(a,b,c,d){if("on"===(a||"").substr(0,2)){var e=this.vars;if(1===arguments.length)return e[a];null==b?delete e[a]:(e[a]=b,e[a+"Params"]=q(c)&&-1!==c.join("").indexOf("{self}")?this._swapSelfInParams(c):c,e[a+"Scope"]=d),"onUpdate"===a&&(this._onUpdate=b)}return this},i.delay=function(a){return arguments.length?(this._timeline.smoothChildTiming&&this.startTime(this._startTime+a-this._delay),this._delay=a,this):this._delay},i.duration=function(a){return arguments.length?(this._duration=this._totalDuration=a,this._uncache(!0),this._timeline.smoothChildTiming&&this._time>0&&this._time<this._duration&&0!==a&&this.totalTime(this._totalTime*(a/this._duration),!0),this):(this._dirty=!1,this._duration)},i.totalDuration=function(a){return this._dirty=!1,arguments.length?this.duration(a):this._totalDuration},i.time=function(a,b){return arguments.length?(this._dirty&&this.totalDuration(),this.totalTime(a>this._duration?this._duration:a,b)):this._time},i.totalTime=function(a,b,c){if(k||j.wake(),!arguments.length)return this._totalTime;if(this._timeline){if(0>a&&!c&&(a+=this.totalDuration()),this._timeline.smoothChildTiming){this._dirty&&this.totalDuration();var d=this._totalDuration,e=this._timeline;if(a>d&&!c&&(a=d),this._startTime=(this._paused?this._pauseTime:e._time)-(this._reversed?d-a:a)/this._timeScale,e._dirty||this._uncache(!1),e._timeline)for(;e._timeline;)e._timeline._time!==(e._startTime+e._totalTime)/e._timeScale&&e.totalTime(e._totalTime,!0),e=e._timeline}this._gc&&this._enabled(!0,!1),(this._totalTime!==a||0===this._duration)&&(K.length&&_(),this.render(a,b,!1),K.length&&_())}return this},i.progress=i.totalProgress=function(a,b){var c=this.duration();return arguments.length?this.totalTime(c*a,b):c?this._time/c:this.ratio;
},i.startTime=function(a){return arguments.length?(a!==this._startTime&&(this._startTime=a,this.timeline&&this.timeline._sortChildren&&this.timeline.add(this,a-this._delay)),this):this._startTime},i.endTime=function(a){return this._startTime+(0!=a?this.totalDuration():this.duration())/this._timeScale},i.timeScale=function(a){if(!arguments.length)return this._timeScale;var b,c;for(a=a||n,this._timeline&&this._timeline.smoothChildTiming&&(b=this._pauseTime,c=b||0===b?b:this._timeline.totalTime(),this._startTime=c-(c-this._startTime)*this._timeScale/a),this._timeScale=a,c=this.timeline;c&&c.timeline;)c._dirty=!0,c.totalDuration(),c=c.timeline;return this},i.reversed=function(a){return arguments.length?(a!=this._reversed&&(this._reversed=a,this.totalTime(this._timeline&&!this._timeline.smoothChildTiming?this.totalDuration()-this._totalTime:this._totalTime,!0)),this):this._reversed},i.paused=function(a){if(!arguments.length)return this._paused;var b,c,d=this._timeline;return a!=this._paused&&d&&(k||a||j.wake(),b=d.rawTime(),c=b-this._pauseTime,!a&&d.smoothChildTiming&&(this._startTime+=c,this._uncache(!1)),this._pauseTime=a?b:null,this._paused=a,this._active=this.isActive(),!a&&0!==c&&this._initted&&this.duration()&&(b=d.smoothChildTiming?this._totalTime:(b-this._startTime)/this._timeScale,this.render(b,b===this._totalTime,!0))),this._gc&&!a&&this._enabled(!0,!1),this};var G=u("core.SimpleTimeline",function(a){E.call(this,0,a),this.autoRemoveChildren=this.smoothChildTiming=!0});i=G.prototype=new E,i.constructor=G,i.kill()._gc=!1,i._first=i._last=i._recent=null,i._sortChildren=!1,i.add=i.insert=function(a,b,c,d){var e,f;if(a._startTime=Number(b||0)+a._delay,a._paused&&this!==a._timeline&&(a._pauseTime=this.rawTime()-(a._timeline.rawTime()-a._pauseTime)),a.timeline&&a.timeline._remove(a,!0),a.timeline=a._timeline=this,a._gc&&a._enabled(!0,!0),e=this._last,this._sortChildren)for(f=a._startTime;e&&e._startTime>f;)e=e._prev;return e?(a._next=e._next,e._next=a):(a._next=this._first,this._first=a),a._next?a._next._prev=a:this._last=a,a._prev=e,this._recent=a,this._timeline&&this._uncache(!0),this},i._remove=function(a,b){return a.timeline===this&&(b||a._enabled(!1,!0),a._prev?a._prev._next=a._next:this._first===a&&(this._first=a._next),a._next?a._next._prev=a._prev:this._last===a&&(this._last=a._prev),a._next=a._prev=a.timeline=null,a===this._recent&&(this._recent=this._last),this._timeline&&this._uncache(!0)),this},i.render=function(a,b,c){var d,e=this._first;for(this._totalTime=this._time=this._rawPrevTime=a;e;)d=e._next,(e._active||a>=e._startTime&&!e._paused&&!e._gc)&&(e._reversed?e.render((e._dirty?e.totalDuration():e._totalDuration)-(a-e._startTime)*e._timeScale,b,c):e.render((a-e._startTime)*e._timeScale,b,c)),e=d},i.rawTime=function(){return k||j.wake(),this._totalTime};var H=u("TweenLite",function(b,c,d){if(E.call(this,c,d),this.render=H.prototype.render,null==b)throw"Cannot tween a null target.";this.target=b="string"!=typeof b?b:H.selector(b)||b;var e,f,g,h=b.jquery||b.length&&b!==a&&b[0]&&(b[0]===a||b[0].nodeType&&b[0].style&&!b.nodeType),i=this.vars.overwrite;if(this._overwrite=i=null==i?X[H.defaultOverwrite]:"number"==typeof i?i>>0:X[i],(h||b instanceof Array||b.push&&q(b))&&"number"!=typeof b[0])for(this._targets=g=o(b),this._propLookup=[],this._siblings=[],e=0;e<g.length;e++)f=g[e],f?"string"!=typeof f?f.length&&f!==a&&f[0]&&(f[0]===a||f[0].nodeType&&f[0].style&&!f.nodeType)?(g.splice(e--,1),this._targets=g=g.concat(o(f))):(this._siblings[e]=aa(f,this,!1),1===i&&this._siblings[e].length>1&&ca(f,this,null,1,this._siblings[e])):(f=g[e--]=H.selector(f),"string"==typeof f&&g.splice(e+1,1)):g.splice(e--,1);else this._propLookup={},this._siblings=aa(b,this,!1),1===i&&this._siblings.length>1&&ca(b,this,null,1,this._siblings);(this.vars.immediateRender||0===c&&0===this._delay&&this.vars.immediateRender!==!1)&&(this._time=-n,this.render(Math.min(0,-this._delay)))},!0),I=function(b){return b&&b.length&&b!==a&&b[0]&&(b[0]===a||b[0].nodeType&&b[0].style&&!b.nodeType)},J=function(a,b){var c,d={};for(c in a)W[c]||c in b&&"transform"!==c&&"x"!==c&&"y"!==c&&"width"!==c&&"height"!==c&&"className"!==c&&"border"!==c||!(!T[c]||T[c]&&T[c]._autoCSS)||(d[c]=a[c],delete a[c]);a.css=d};i=H.prototype=new E,i.constructor=H,i.kill()._gc=!1,i.ratio=0,i._firstPT=i._targets=i._overwrittenProps=i._startAt=null,i._notifyPluginsOfEnabled=i._lazy=!1,H.version="2.1.2",H.defaultEase=i._ease=new w(null,null,1,1),H.defaultOverwrite="auto",H.ticker=j,H.autoSleep=120,H.lagSmoothing=function(a,b){j.lagSmoothing(a,b)},H.selector=a.$||a.jQuery||function(b){var c=a.$||a.jQuery;return c?(H.selector=c,c(b)):(d||(d=a.document),d?d.querySelectorAll?d.querySelectorAll(b):d.getElementById("#"===b.charAt(0)?b.substr(1):b):b)};var K=[],L={},M=/(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi,N=/[\+-]=-?[\.\d]/,O=function(a){for(var b,c=this._firstPT,d=1e-6;c;)b=c.blob?1===a&&null!=this.end?this.end:a?this.join(""):this.start:c.c*a+c.s,c.m?b=c.m.call(this._tween,b,this._target||c.t,this._tween):d>b&&b>-d&&!c.blob&&(b=0),c.f?c.fp?c.t[c.p](c.fp,b):c.t[c.p](b):c.t[c.p]=b,c=c._next},P=function(a){return(1e3*a|0)/1e3+""},Q=function(a,b,c,d){var e,f,g,h,i,j,k,l=[],m=0,n="",o=0;for(l.start=a,l.end=b,a=l[0]=a+"",b=l[1]=b+"",c&&(c(l),a=l[0],b=l[1]),l.length=0,e=a.match(M)||[],f=b.match(M)||[],d&&(d._next=null,d.blob=1,l._firstPT=l._applyPT=d),i=f.length,h=0;i>h;h++)k=f[h],j=b.substr(m,b.indexOf(k,m)-m),n+=j||!h?j:",",m+=j.length,o?o=(o+1)%5:"rgba("===j.substr(-5)&&(o=1),k===e[h]||e.length<=h?n+=k:(n&&(l.push(n),n=""),g=parseFloat(e[h]),l.push(g),l._firstPT={_next:l._firstPT,t:l,p:l.length-1,s:g,c:("="===k.charAt(1)?parseInt(k.charAt(0)+"1",10)*parseFloat(k.substr(2)):parseFloat(k)-g)||0,f:0,m:o&&4>o?Math.round:P}),m+=k.length;return n+=b.substr(m),n&&l.push(n),l.setRatio=O,N.test(b)&&(l.end=null),l},R=function(a,b,c,d,e,f,g,h,i){"function"==typeof d&&(d=d(i||0,a));var j,k=typeof a[b],l="function"!==k?"":b.indexOf("set")||"function"!=typeof a["get"+b.substr(3)]?b:"get"+b.substr(3),m="get"!==c?c:l?g?a[l](g):a[l]():a[b],n="string"==typeof d&&"="===d.charAt(1),o={t:a,p:b,s:m,f:"function"===k,pg:0,n:e||b,m:f?"function"==typeof f?f:Math.round:0,pr:0,c:n?parseInt(d.charAt(0)+"1",10)*parseFloat(d.substr(2)):parseFloat(d)-m||0};return("number"!=typeof m||"number"!=typeof d&&!n)&&(g||isNaN(m)||!n&&isNaN(d)||"boolean"==typeof m||"boolean"==typeof d?(o.fp=g,j=Q(m,n?parseFloat(o.s)+o.c+(o.s+"").replace(/[0-9\-\.]/g,""):d,h||H.defaultStringFilter,o),o={t:j,p:"setRatio",s:0,c:1,f:2,pg:0,n:e||b,pr:0,m:0}):(o.s=parseFloat(m),n||(o.c=parseFloat(d)-o.s||0))),o.c?((o._next=this._firstPT)&&(o._next._prev=o),this._firstPT=o,o):void 0},S=H._internals={isArray:q,isSelector:I,lazyTweens:K,blobDif:Q},T=H._plugins={},U=S.tweenLookup={},V=0,W=S.reservedProps={ease:1,delay:1,overwrite:1,onComplete:1,onCompleteParams:1,onCompleteScope:1,useFrames:1,runBackwards:1,startAt:1,onUpdate:1,onUpdateParams:1,onUpdateScope:1,onStart:1,onStartParams:1,onStartScope:1,onReverseComplete:1,onReverseCompleteParams:1,onReverseCompleteScope:1,onRepeat:1,onRepeatParams:1,onRepeatScope:1,easeParams:1,yoyo:1,immediateRender:1,repeat:1,repeatDelay:1,data:1,paused:1,reversed:1,autoCSS:1,lazy:1,onOverwrite:1,callbackScope:1,stringFilter:1,id:1,yoyoEase:1,stagger:1},X={none:0,all:1,auto:2,concurrent:3,allOnStart:4,preexisting:5,"true":1,"false":0},Y=E._rootFramesTimeline=new G,Z=E._rootTimeline=new G,$=30,_=S.lazyRender=function(){var a,b,c=K.length;for(L={},a=0;c>a;a++)b=K[a],b&&b._lazy!==!1&&(b.render(b._lazy[0],b._lazy[1],!0),b._lazy=!1);K.length=0};Z._startTime=j.time,Y._startTime=j.frame,Z._active=Y._active=!0,setTimeout(_,1),E._updateRoot=H.render=function(){var a,b,c;if(K.length&&_(),Z.render((j.time-Z._startTime)*Z._timeScale,!1,!1),Y.render((j.frame-Y._startTime)*Y._timeScale,!1,!1),K.length&&_(),j.frame>=$){$=j.frame+(parseInt(H.autoSleep,10)||120);for(c in U){for(b=U[c].tweens,a=b.length;--a>-1;)b[a]._gc&&b.splice(a,1);0===b.length&&delete U[c]}if(c=Z._first,(!c||c._paused)&&H.autoSleep&&!Y._first&&1===j._listeners.tick.length){for(;c&&c._paused;)c=c._next;c||j.sleep()}}},j.addEventListener("tick",E._updateRoot);var aa=function(a,b,c){var d,e,f=a._gsTweenID;if(U[f||(a._gsTweenID=f="t"+V++)]||(U[f]={target:a,tweens:[]}),b&&(d=U[f].tweens,d[e=d.length]=b,c))for(;--e>-1;)d[e]===b&&d.splice(e,1);return U[f].tweens},ba=function(a,b,c,d){var e,f,g=a.vars.onOverwrite;return g&&(e=g(a,b,c,d)),g=H.onOverwrite,g&&(f=g(a,b,c,d)),e!==!1&&f!==!1},ca=function(a,b,c,d,e){var f,g,h,i;if(1===d||d>=4){for(i=e.length,f=0;i>f;f++)if((h=e[f])!==b)h._gc||h._kill(null,a,b)&&(g=!0);else if(5===d)break;return g}var j,k=b._startTime+n,l=[],m=0,o=0===b._duration;for(f=e.length;--f>-1;)(h=e[f])===b||h._gc||h._paused||(h._timeline!==b._timeline?(j=j||da(b,0,o),0===da(h,j,o)&&(l[m++]=h)):h._startTime<=k&&h._startTime+h.totalDuration()/h._timeScale>k&&((o||!h._initted)&&k-h._startTime<=2*n||(l[m++]=h)));for(f=m;--f>-1;)if(h=l[f],i=h._firstPT,2===d&&h._kill(c,a,b)&&(g=!0),2!==d||!h._firstPT&&h._initted&&i){if(2!==d&&!ba(h,b))continue;h._enabled(!1,!1)&&(g=!0)}return g},da=function(a,b,c){for(var d=a._timeline,e=d._timeScale,f=a._startTime;d._timeline;){if(f+=d._startTime,e*=d._timeScale,d._paused)return-100;d=d._timeline}return f/=e,f>b?f-b:c&&f===b||!a._initted&&2*n>f-b?n:(f+=a.totalDuration()/a._timeScale/e)>b+n?0:f-b-n};i._init=function(){var a,b,c,d,e,f,g=this.vars,h=this._overwrittenProps,i=this._duration,j=!!g.immediateRender,k=g.ease,l=this._startAt;if(g.startAt){l&&(l.render(-1,!0),l.kill()),e={};for(d in g.startAt)e[d]=g.startAt[d];if(e.data="isStart",e.overwrite=!1,e.immediateRender=!0,e.lazy=j&&g.lazy!==!1,e.startAt=e.delay=null,e.onUpdate=g.onUpdate,e.onUpdateParams=g.onUpdateParams,e.onUpdateScope=g.onUpdateScope||g.callbackScope||this,this._startAt=H.to(this.target||{},0,e),j)if(this._time>0)this._startAt=null;else if(0!==i)return}else if(g.runBackwards&&0!==i)if(l)l.render(-1,!0),l.kill(),this._startAt=null;else{0!==this._time&&(j=!1),c={};for(d in g)W[d]&&"autoCSS"!==d||(c[d]=g[d]);if(c.overwrite=0,c.data="isFromStart",c.lazy=j&&g.lazy!==!1,c.immediateRender=j,this._startAt=H.to(this.target,0,c),j){if(0===this._time)return}else this._startAt._init(),this._startAt._enabled(!1),this.vars.immediateRender&&(this._startAt=null)}if(this._ease=k=k?k instanceof w?k:"function"==typeof k?new w(k,g.easeParams):x[k]||H.defaultEase:H.defaultEase,g.easeParams instanceof Array&&k.config&&(this._ease=k.config.apply(k,g.easeParams)),this._easeType=this._ease._type,this._easePower=this._ease._power,this._firstPT=null,this._targets)for(f=this._targets.length,a=0;f>a;a++)this._initProps(this._targets[a],this._propLookup[a]={},this._siblings[a],h?h[a]:null,a)&&(b=!0);else b=this._initProps(this.target,this._propLookup,this._siblings,h,0);if(b&&H._onPluginEvent("_onInitAllProps",this),h&&(this._firstPT||"function"!=typeof this.target&&this._enabled(!1,!1)),g.runBackwards)for(c=this._firstPT;c;)c.s+=c.c,c.c=-c.c,c=c._next;this._onUpdate=g.onUpdate,this._initted=!0},i._initProps=function(b,c,d,e,f){var g,h,i,j,k,l;if(null==b)return!1;L[b._gsTweenID]&&_(),this.vars.css||b.style&&b!==a&&b.nodeType&&T.css&&this.vars.autoCSS!==!1&&J(this.vars,b);for(g in this.vars)if(l=this.vars[g],W[g])l&&(l instanceof Array||l.push&&q(l))&&-1!==l.join("").indexOf("{self}")&&(this.vars[g]=l=this._swapSelfInParams(l,this));else if(T[g]&&(j=new T[g])._onInitTween(b,this.vars[g],this,f)){for(this._firstPT=k={_next:this._firstPT,t:j,p:"setRatio",s:0,c:1,f:1,n:g,pg:1,pr:j._priority,m:0},h=j._overwriteProps.length;--h>-1;)c[j._overwriteProps[h]]=this._firstPT;(j._priority||j._onInitAllProps)&&(i=!0),(j._onDisable||j._onEnable)&&(this._notifyPluginsOfEnabled=!0),k._next&&(k._next._prev=k)}else c[g]=R.call(this,b,g,"get",l,g,0,null,this.vars.stringFilter,f);return e&&this._kill(e,b)?this._initProps(b,c,d,e,f):this._overwrite>1&&this._firstPT&&d.length>1&&ca(b,this,c,this._overwrite,d)?(this._kill(c,b),this._initProps(b,c,d,e,f)):(this._firstPT&&(this.vars.lazy!==!1&&this._duration||this.vars.lazy&&!this._duration)&&(L[b._gsTweenID]=!0),i)},i.render=function(a,b,c){var d,e,f,g,h=this,i=h._time,j=h._duration,k=h._rawPrevTime;if(a>=j-n&&a>=0)h._totalTime=h._time=j,h.ratio=h._ease._calcEnd?h._ease.getRatio(1):1,h._reversed||(d=!0,e="onComplete",c=c||h._timeline.autoRemoveChildren),0===j&&(h._initted||!h.vars.lazy||c)&&(h._startTime===h._timeline._duration&&(a=0),(0>k||0>=a&&a>=-n||k===n&&"isPause"!==h.data)&&k!==a&&(c=!0,k>n&&(e="onReverseComplete")),h._rawPrevTime=g=!b||a||k===a?a:n);else if(n>a)h._totalTime=h._time=0,h.ratio=h._ease._calcEnd?h._ease.getRatio(0):0,(0!==i||0===j&&k>0)&&(e="onReverseComplete",d=h._reversed),a>-n?a=0:0>a&&(h._active=!1,0===j&&(h._initted||!h.vars.lazy||c)&&(k>=0&&(k!==n||"isPause"!==h.data)&&(c=!0),h._rawPrevTime=g=!b||a||k===a?a:n)),(!h._initted||h._startAt&&h._startAt.progress())&&(c=!0);else if(h._totalTime=h._time=a,h._easeType){var l=a/j,m=h._easeType,o=h._easePower;(1===m||3===m&&l>=.5)&&(l=1-l),3===m&&(l*=2),1===o?l*=l:2===o?l*=l*l:3===o?l*=l*l*l:4===o&&(l*=l*l*l*l),h.ratio=1===m?1-l:2===m?l:.5>a/j?l/2:1-l/2}else h.ratio=h._ease.getRatio(a/j);if(h._time!==i||c){if(!h._initted){if(h._init(),!h._initted||h._gc)return;if(!c&&h._firstPT&&(h.vars.lazy!==!1&&h._duration||h.vars.lazy&&!h._duration))return h._time=h._totalTime=i,h._rawPrevTime=k,K.push(h),void(h._lazy=[a,b]);h._time&&!d?h.ratio=h._ease.getRatio(h._time/j):d&&h._ease._calcEnd&&(h.ratio=h._ease.getRatio(0===h._time?0:1))}for(h._lazy!==!1&&(h._lazy=!1),h._active||!h._paused&&h._time!==i&&a>=0&&(h._active=!0),0===i&&(h._startAt&&(a>=0?h._startAt.render(a,!0,c):e||(e="_dummyGS")),h.vars.onStart&&(0!==h._time||0===j)&&(b||h._callback("onStart"))),f=h._firstPT;f;)f.f?f.t[f.p](f.c*h.ratio+f.s):f.t[f.p]=f.c*h.ratio+f.s,f=f._next;h._onUpdate&&(0>a&&h._startAt&&a!==-1e-4&&h._startAt.render(a,!0,c),b||(h._time!==i||d||c)&&h._callback("onUpdate")),e&&(!h._gc||c)&&(0>a&&h._startAt&&!h._onUpdate&&a!==-1e-4&&h._startAt.render(a,!0,c),d&&(h._timeline.autoRemoveChildren&&h._enabled(!1,!1),h._active=!1),!b&&h.vars[e]&&h._callback(e),0===j&&h._rawPrevTime===n&&g!==n&&(h._rawPrevTime=0))}},i._kill=function(a,b,c){if("all"===a&&(a=null),null==a&&(null==b||b===this.target))return this._lazy=!1,this._enabled(!1,!1);b="string"!=typeof b?b||this._targets||this.target:H.selector(b)||b;var d,e,f,g,h,i,j,k,l,m=c&&this._time&&c._startTime===this._startTime&&this._timeline===c._timeline,n=this._firstPT;if((q(b)||I(b))&&"number"!=typeof b[0])for(d=b.length;--d>-1;)this._kill(a,b[d],c)&&(i=!0);else{if(this._targets){for(d=this._targets.length;--d>-1;)if(b===this._targets[d]){h=this._propLookup[d]||{},this._overwrittenProps=this._overwrittenProps||[],e=this._overwrittenProps[d]=a?this._overwrittenProps[d]||{}:"all";break}}else{if(b!==this.target)return!1;h=this._propLookup,e=this._overwrittenProps=a?this._overwrittenProps||{}:"all"}if(h){if(j=a||h,k=a!==e&&"all"!==e&&a!==h&&("object"!=typeof a||!a._tempKill),c&&(H.onOverwrite||this.vars.onOverwrite)){for(f in j)h[f]&&(l||(l=[]),l.push(f));if((l||!a)&&!ba(this,c,b,l))return!1}for(f in j)(g=h[f])&&(m&&(g.f?g.t[g.p](g.s):g.t[g.p]=g.s,i=!0),g.pg&&g.t._kill(j)&&(i=!0),g.pg&&0!==g.t._overwriteProps.length||(g._prev?g._prev._next=g._next:g===this._firstPT&&(this._firstPT=g._next),g._next&&(g._next._prev=g._prev),g._next=g._prev=null),delete h[f]),k&&(e[f]=1);!this._firstPT&&this._initted&&n&&this._enabled(!1,!1)}}return i},i.invalidate=function(){this._notifyPluginsOfEnabled&&H._onPluginEvent("_onDisable",this);var a=this._time;return this._firstPT=this._overwrittenProps=this._startAt=this._onUpdate=null,this._notifyPluginsOfEnabled=this._active=this._lazy=!1,this._propLookup=this._targets?{}:[],E.prototype.invalidate.call(this),this.vars.immediateRender&&(this._time=-n,this.render(a,!1,this.vars.lazy!==!1)),this},i._enabled=function(a,b){if(k||j.wake(),a&&this._gc){var c,d=this._targets;if(d)for(c=d.length;--c>-1;)this._siblings[c]=aa(d[c],this,!0);else this._siblings=aa(this.target,this,!0)}return E.prototype._enabled.call(this,a,b),this._notifyPluginsOfEnabled&&this._firstPT?H._onPluginEvent(a?"_onEnable":"_onDisable",this):!1},H.to=function(a,b,c){return new H(a,b,c)},H.from=function(a,b,c){return c.runBackwards=!0,c.immediateRender=0!=c.immediateRender,new H(a,b,c)},H.fromTo=function(a,b,c,d){return d.startAt=c,d.immediateRender=0!=d.immediateRender&&0!=c.immediateRender,new H(a,b,d)},H.delayedCall=function(a,b,c,d,e){return new H(b,0,{delay:a,onComplete:b,onCompleteParams:c,callbackScope:d,onReverseComplete:b,onReverseCompleteParams:c,immediateRender:!1,lazy:!1,useFrames:e,overwrite:0})},H.set=function(a,b){return new H(a,0,b)},H.getTweensOf=function(a,b){if(null==a)return[];a="string"!=typeof a?a:H.selector(a)||a;var c,d,e,f;if((q(a)||I(a))&&"number"!=typeof a[0]){for(c=a.length,d=[];--c>-1;)d=d.concat(H.getTweensOf(a[c],b));for(c=d.length;--c>-1;)for(f=d[c],e=c;--e>-1;)f===d[e]&&d.splice(c,1)}else if(a._gsTweenID)for(d=aa(a).concat(),c=d.length;--c>-1;)(d[c]._gc||b&&!d[c].isActive())&&d.splice(c,1);return d||[]},H.killTweensOf=H.killDelayedCallsTo=function(a,b,c){"object"==typeof b&&(c=b,b=!1);for(var d=H.getTweensOf(a,b),e=d.length;--e>-1;)d[e]._kill(c,a)};var ea=u("plugins.TweenPlugin",function(a,b){this._overwriteProps=(a||"").split(","),this._propName=this._overwriteProps[0],this._priority=b||0,this._super=ea.prototype},!0);if(i=ea.prototype,ea.version="1.19.0",ea.API=2,i._firstPT=null,i._addTween=R,i.setRatio=O,i._kill=function(a){var b,c=this._overwriteProps,d=this._firstPT;if(null!=a[this._propName])this._overwriteProps=[];else for(b=c.length;--b>-1;)null!=a[c[b]]&&c.splice(b,1);for(;d;)null!=a[d.n]&&(d._next&&(d._next._prev=d._prev),d._prev?(d._prev._next=d._next,d._prev=null):this._firstPT===d&&(this._firstPT=d._next)),d=d._next;return!1},i._mod=i._roundProps=function(a){for(var b,c=this._firstPT;c;)b=a[this._propName]||null!=c.n&&a[c.n.split(this._propName+"_").join("")],b&&"function"==typeof b&&(2===c.f?c.t._applyPT.m=b:c.m=b),c=c._next},H._onPluginEvent=function(a,b){var c,d,e,f,g,h=b._firstPT;if("_onInitAllProps"===a){for(;h;){for(g=h._next,d=e;d&&d.pr>h.pr;)d=d._next;(h._prev=d?d._prev:f)?h._prev._next=h:e=h,(h._next=d)?d._prev=h:f=h,h=g}h=b._firstPT=e}for(;h;)h.pg&&"function"==typeof h.t[a]&&h.t[a]()&&(c=!0),h=h._next;return c},ea.activate=function(a){for(var b=a.length;--b>-1;)a[b].API===ea.API&&(T[(new a[b])._propName]=a[b]);return!0},t.plugin=function(a){if(!(a&&a.propName&&a.init&&a.API))throw"illegal plugin definition.";var b,c=a.propName,d=a.priority||0,e=a.overwriteProps,f={init:"_onInitTween",set:"setRatio",kill:"_kill",round:"_mod",mod:"_mod",initAll:"_onInitAllProps"},g=u("plugins."+c.charAt(0).toUpperCase()+c.substr(1)+"Plugin",function(){ea.call(this,c,d),this._overwriteProps=e||[]},a.global===!0),h=g.prototype=new ea(c);h.constructor=g,g.API=a.API;for(b in f)"function"==typeof a[b]&&(h[f[b]]=a[b]);return g.version=a.version,ea.activate([g]),g},g=a._gsQueue){for(h=0;h<g.length;h++)g[h]();for(i in r)r[i].func||a.console.log("GSAP encountered missing dependency: "+i)}k=!1}("undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window,"TweenMax");<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> <script src="https://apis.google.com/js/platform.js" async defer></script>
Hover menu для сайта
Открыть элемент
Меню для сайта
<header class="header">
<a href="#" class="header__logo">Jhon Doe</a>
<ion-icon name="menu-outline" class="header__toggle" id="nav-toggle"></ion-icon>
<nav class="nav" id="nav-menu">
<div class="nav__content bd-grid">
<ion-icon name="close-outline" class="nav__close" id="nav-close"></ion-icon>
<div class="nav__perfil">
<div class="nav__img">
<img src="assets/img/perfil.png" alt="">
</div>
<div>
<a href="#" class="nav__name">Jhon Doe</a>
<span class="nav__profesion">Web designer</span>
</div>
</div>
<div class="nav__menu">
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link active">Home</a></li>
<li class="nav__item"><a href="#" class="nav__link">About</a></li>
<li class="nav__item"><a href="#" class="nav__link">Skills</a></li>
<li class="nav__item"><a href="#" class="nav__link">Portfolio</a></li>
<li class="nav__item"><a href="#" class="nav__link">Contact</a></li>
</ul>
</div>
<div class="nav__social">
<a href="#" class="nav__social-icon"><ion-icon name="logo-linkedin"></ion-icon></a>
<a href="#" class="nav__social-icon"><ion-icon name="logo-github"></ion-icon></a>
<a href="#" class="nav__social-icon"><ion-icon name="logo-behance"></ion-icon></a>
</div>
</div>
</nav>
</header>/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
/*===== VARIABLES CSS =====*/
:root {
--header-height: 3rem;
/*===== Colores =====*/
--first-color: #3664F4;
--dark-color: #070D1F;
--dark-color-alt: #282B3A;
--white-color: #E6E7E9;
/*===== Fuente y tipografia =====*/
--body-font: 'Poppins', sans-serif;
--normal-font-size: .938rem;
--small-font-size: .813rem;
/*===== z index =====*/
--z-fixed: 100;
}
@media screen and (min-width: 768px) {
:root {
--normal-font-size: 1rem;
--small-font-size: .875rem;
}
}
/*===== BASE =====*/
*, ::before, ::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
font-weight: 500;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
.bd-grid {
max-width: 1024px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 100%;
grid-template-columns: 100%;
margin-left: 1.5rem;
margin-right: 1.5rem;
}
/*===== HEADER =====*/
.header {
width: 100%;
height: var(--header-height);
position: fixed;
top: 0;
left: 0;
padding: 0 1.5rem;
background-color: var(--dark-color);
z-index: var(--z-fixed);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header__logo {
color: var(--white-color);
}
.header__toggle {
font-size: 1.5rem;
color: var(--white-color);
cursor: pointer;
}
/*===== NAV =====*/
@media screen and (max-width: 768px) {
.nav {
position: fixed;
top: 0;
left: -100%;
background-color: var(--dark-color);
color: var(--white-color);
width: 100%;
height: 100vh;
padding: 1.5rem 0;
z-index: var(--z-fixed);
-webkit-transition: .5s;
transition: .5s;
}
}
.nav__content {
height: 100%;
-ms-grid-rows: max-content 1fr max-content;
grid-template-rows: -webkit-max-content 1fr -webkit-max-content;
grid-template-rows: max-content 1fr max-content;
row-gap: 2rem;
}
.nav__close {
position: absolute;
right: 1.5rem;
font-size: 1.3rem;
padding: .25rem;
background-color: var(--dark-color-alt);
border-radius: 50%;
cursor: pointer;
}
.nav__img {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-top: .25rem;
margin-bottom: .8rem;
width: 56px;
height: 56px;
background-color: var(--first-color);
border-radius: 50%;
overflow: hidden;
}
.nav__img img {
width: 46px;
}
.nav__name {
display: block;
color: var(--white-color);
}
.nav__profesion {
font-size: var(--small-font-size);
}
.nav__menu {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.nav__item {
margin: 2.5rem 0;
}
.nav__link {
color: var(--white-color);
}
.nav__social {
padding-top: .5rem;
}
.nav__social-icon {
font-size: 1.2rem;
color: var(--white-color);
margin-right: 1rem;
}
.nav__social-icon:hover {
color: var(--first-color);
}
/*Aparecer menu*/
.show {
left: 0;
}
/*Active menu*/
.active {
color: var(--first-color);
}
/*===== MEDIA QUERIES =====*/
@media screen and (min-width: 768px) {
body {
margin: 0;
}
.header {
height: calc(var(--header-height) + 1rem);
}
.header__logo, .header__toggle {
display: none;
}
.nav {
width: 100%;
}
.nav__content {
-ms-grid-columns: (max-content)[3];
grid-template-columns: repeat(3, -webkit-max-content);
grid-template-columns: repeat(3, max-content);
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
-webkit-column-gap: 1rem;
column-gap: 1rem;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.nav__close, .nav__profesion {
display: none;
}
.nav__perfil {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.nav__img {
width: 32px;
height: 32px;
margin-right: .5rem;
margin-bottom: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.nav__img img {
width: 26px;
}
.nav__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.nav__item {
margin: 0 .25rem;
}
.nav__link {
padding: .5rem .8rem;
border-radius: .25rem;
}
.nav__link:hover {
background-color: var(--first-color);
}
.active {
background-color: var(--first-color);
color: var(--white-color);
}
}
@media screen and (min-width: 1024px) {
.bd-grid {
margin-left: auto;
margin-right: auto;
}
}/*===== MENU SHOW Y HIDDEN =====*/
const navMenu = document.getElementById('nav-menu'),
toggleMenu = document.getElementById('nav-toggle'),
closeMenu = document.getElementById('nav-close')
/*SHOW*/
toggleMenu.addEventListener('click', ()=>{
navMenu.classList.toggle('show')
})
/*HIDDEN*/
closeMenu.addEventListener('click', ()=>{
navMenu.classList.remove('show')
})
/*===== ACTIVE AND REMOVE MENU =====*/
const navLink = document.querySelectorAll('.nav__link');
function linkAction(){
/*Active link*/
navLink.forEach(n => n.classList.remove('active'));
this.classList.add('active');
/*Remove menu mobile*/
navMenu.classList.remove('show')
}
navLink.forEach(n => n.addEventListener('click', linkAction));/*===== GOOGLE FONTS =====*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
/*===== VARIABLES CSS =====*/
:root{
--header-height: 3rem;
/*===== Colores =====*/
--first-color: #3664F4;
--dark-color: #070D1F;
--dark-color-alt: #282B3A;
--white-color: #E6E7E9;
/*===== Fuente y tipografia =====*/
--body-font: 'Poppins', sans-serif;
--normal-font-size: .938rem;
--small-font-size: .813rem;
/*===== z index =====*/
--z-fixed: 100;
}
:root{
@media screen and (min-width: 768px){
--normal-font-size: 1rem;
--small-font-size: .875rem;
}
}
/*===== BASE =====*/
*,::before,::after{
box-sizing: border-box;
}
body{
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
font-weight: 500;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
}
.bd-grid{
max-width: 1024px;
display: grid;
grid-template-columns: 100%;
margin-left: 1.5rem;
margin-right: 1.5rem;
}
/*===== HEADER =====*/
.header{
width: 100%;
height: var(--header-height);
position: fixed;
top: 0;
left: 0;
padding: 0 1.5rem;
background-color: var(--dark-color);
z-index: var(--z-fixed);
display: flex;
justify-content: space-between;
align-items: center;
&__logo{
color: var(--white-color);
}
&__toggle{
font-size: 1.5rem;
color: var(--white-color);
cursor: pointer;
}
}
/*===== NAV =====*/
@media screen and (max-width: 768px){
.nav{
position: fixed;
top: 0;
left: -100%;
background-color: var(--dark-color);
color: var(--white-color);
width: 100%;
height: 100vh;
padding: 1.5rem 0;
z-index: var(--z-fixed);
transition: .5s;
}
}
.nav{
&__content{
height: 100%;
grid-template-rows: max-content 1fr max-content;
row-gap: 2rem;
}
&__close{
position: absolute;
right: 1.5rem;
font-size: 1.3rem;
padding: .25rem;
background-color: var(--dark-color-alt);
border-radius: 50%;
cursor: pointer;
}
&__img{
display: flex;
justify-content: center;
padding-top: .25rem;
margin-bottom: .8rem;
width: 56px;
height: 56px;
background-color: var(--first-color);
border-radius: 50%;
overflow: hidden;
& img{
width: 46px;
}
}
&__name{
display: block;
color: var(--white-color);
}
&__profesion{
font-size: var(--small-font-size);
}
&__menu{
align-self: center;
}
&__item{
margin: 2.5rem 0;
}
&__link{
color: var(--white-color);
}
&__social{
padding-top: .5rem;
&-icon{
font-size: 1.2rem;
color: var(--white-color);
margin-right: 1rem;
&:hover{
color: var(--first-color);
}
}
}
}
/*Aparecer menu*/
.show{
left: 0;
}
/*Active menu*/
.active{
color: var(--first-color);
}
/*===== MEDIA QUERIES =====*/
@media screen and (min-width: 768px){
body{
margin: 0;
}
.header{
height: calc(var(--header-height) + 1rem);
&__logo, &__toggle{
display: none;
}
}
.nav{
width: 100%;
&__content{
grid-template-columns: repeat(3, max-content);
grid-template-rows: 1fr;
column-gap: 1rem;
justify-content: space-between;
}
&__close, &__profesion{
display: none;
}
&__perfil{
display: flex;
align-items: center;
}
&__img{
width: 32px;
height: 32px;
margin-right: .5rem;
margin-bottom: 0;
align-items: center;
& img{
width: 26px;
}
}
&__list{
display: flex;
}
&__item{
margin: 0 .25rem;
}
&__link{
padding: .5rem .8rem;
border-radius: .25rem;
&:hover{
background-color: var(--first-color);
}
}
}
.active{
background-color: var(--first-color);
color: var(--white-color);
}
}
@media screen and(min-width: 1024px){
.bd-grid{
margin-left: auto;
margin-right: auto;
}
}<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
Меню для сайта
Открыть элемент
Боковое меню для сайта hover submenu
<!--========== HEADER ==========-->
<header class="header">
<div class="header__container">
<img src="assets/img/perfil.jpg" alt="" class="header__img">
<a href="#" class="header__logo">Bedimcode</a>
<div class="header__search">
<input type="search" placeholder="Search" class="header__input">
<i class='bx bx-search header__icon'></i>
</div>
<div class="header__toggle">
<i class='bx bx-menu' id="header-toggle"></i>
</div>
</div>
</header>
<!--========== NAV ==========-->
<div class="nav" id="navbar">
<nav class="nav__container">
<div>
<a href="#" class="nav__link nav__logo">
<i class='bx bxs-disc nav__icon' ></i>
<span class="nav__logo-name">Bedimcode</span>
</a>
<div class="nav__list">
<div class="nav__items">
<h3 class="nav__subtitle">Profile</h3>
<a href="#" class="nav__link active">
<i class='bx bx-home nav__icon' ></i>
<span class="nav__name">Home</span>
</a>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='bx bx-user nav__icon' ></i>
<span class="nav__name">Profile</span>
<i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">Passwords</a>
<a href="#" class="nav__dropdown-item">Mail</a>
<a href="#" class="nav__dropdown-item">Accounts</a>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class='bx bx-message-rounded nav__icon' ></i>
<span class="nav__name">Messages</span>
</a>
</div>
<div class="nav__items">
<h3 class="nav__subtitle">Menu</h3>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='bx bx-bell nav__icon' ></i>
<span class="nav__name">Notifications</span>
<i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">Blocked</a>
<a href="#" class="nav__dropdown-item">Silenced</a>
<a href="#" class="nav__dropdown-item">Publish</a>
<a href="#" class="nav__dropdown-item">Program</a>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class='bx bx-compass nav__icon' ></i>
<span class="nav__name">Explore</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-bookmark nav__icon' ></i>
<span class="nav__name">Saved</span>
</a>
</div>
</div>
</div>
<a href="#" class="nav__link nav__logout">
<i class='bx bx-log-out nav__icon' ></i>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>
<!--========== CONTENTS ==========-->
<main>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt vel illum fuga unde cum, voluptates magni molestias eveniet culpa autem ut, totam veniam, suscipit tempore ullam pariatur est at asperiores?</p>
</section>
</main>/*========== GOOGLE FONTS ==========*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
/*========== VARIABLES CSS ==========*/
:root {
--header-height: 3.5rem;
--nav-width: 219px;
/*========== Colors ==========*/
--first-color: #6923D0;
--first-color-light: #F4F0FA;
--title-color: #19181B;
--text-color: #58555E;
--text-color-light: #A5A1AA;
--body-color: #F9F6FD;
--container-color: #FFFFFF;
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--normal-font-size: .938rem;
--small-font-size: .75rem;
--smaller-font-size: .75rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== z index ==========*/
--z-fixed: 100;
}
@media screen and (min-width: 1024px) {
:root {
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*========== BASE ==========*/
*, ::before, ::after {
box-sizing: border-box;
}
body {
margin: var(--header-height) 0 0 0;
padding: 1rem 1rem 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h3 {
margin: 0;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
/*========== HEADER ==========*/
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--container-color);
box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1);
padding: 0 1rem;
z-index: var(--z-fixed);
}
.header__container {
display: flex;
align-items: center;
height: var(--header-height);
justify-content: space-between;
}
.header__img {
width: 35px;
height: 35px;
border-radius: 50%;
}
.header__logo {
color: var(--title-color);
font-weight: var(--font-medium);
display: none;
}
.header__search {
display: flex;
padding: .40rem .75rem;
background-color: var(--first-color-light);
border-radius: .25rem;
}
.header__input {
width: 100%;
border: none;
outline: none;
background-color: var(--first-color-light);
}
.header__input::placeholder {
font-family: var(--body-font);
color: var(--text-color);
}
.header__icon,
.header__toggle {
font-size: 1.2rem;
}
.header__toggle {
color: var(--title-color);
cursor: pointer;
}
/*========== NAV ==========*/
.nav {
position: fixed;
top: 0;
left: -100%;
height: 100vh;
padding: 1rem 1rem 0;
background-color: var(--container-color);
box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
z-index: var(--z-fixed);
transition: .4s;
}
.nav__container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 3rem;
overflow: auto;
scrollbar-width: none; /* For mozilla */
}
/* For Google Chrome and others */
.nav__container::-webkit-scrollbar {
display: none;
}
.nav__logo {
font-weight: var(--font-semi-bold);
margin-bottom: 2.5rem;
}
.nav__list,
.nav__items {
display: grid;
}
.nav__list {
row-gap: 2.5rem;
}
.nav__items {
row-gap: 1.5rem;
}
.nav__subtitle {
font-size: var(--normal-font-size);
text-transform: uppercase;
letter-spacing: .1rem;
color: var(--text-color-light);
}
.nav__link {
display: flex;
align-items: center;
color: var(--text-color);
}
.nav__link:hover {
color: var(--first-color);
}
.nav__icon {
font-size: 1.2rem;
margin-right: .5rem;
}
.nav__name {
font-size: var(--small-font-size);
font-weight: var(--font-medium);
white-space: nowrap;
}
.nav__logout {
margin-top: 5rem;
}
/* Dropdown */
.nav__dropdown {
overflow: hidden;
max-height: 21px;
transition: .4s ease-in-out;
}
.nav__dropdown-collapse {
background-color: var(--first-color-light);
border-radius: .25rem;
margin-top: 1rem;
}
.nav__dropdown-content {
display: grid;
row-gap: .5rem;
padding: .75rem 2.5rem .75rem 1.8rem;
}
.nav__dropdown-item {
font-size: var(--smaller-font-size);
font-weight: var(--font-medium);
color: var(--text-color);
}
.nav__dropdown-item:hover {
color: var(--first-color);
}
.nav__dropdown-icon {
margin-left: auto;
transition: .4s;
}
/* Show dropdown collapse */
.nav__dropdown:hover {
max-height: 100rem;
}
/* Rotate icon arrow */
.nav__dropdown:hover .nav__dropdown-icon {
transform: rotate(180deg);
}
/*===== Show menu =====*/
.show-menu {
left: 0;
}
/*===== Active link =====*/
.active {
color: var(--first-color);
}
/* ========== MEDIA QUERIES ==========*/
/* For small devices reduce search*/
@media screen and (max-width: 320px) {
.header__search {
width: 70%;
}
}
@media screen and (min-width: 768px) {
body {
padding: 1rem 3rem 0 6rem;
}
.header {
padding: 0 3rem 0 6rem;
}
.header__container {
height: calc(var(--header-height) + .5rem);
}
.header__search {
width: 300px;
padding: .55rem .75rem;
}
.header__toggle {
display: none;
}
.header__logo {
display: block;
}
.header__img {
width: 40px;
height: 40px;
order: 1;
}
.nav {
left: 0;
padding: 1.2rem 1.5rem 0;
width: 68px; /* Reduced navbar */
}
.nav__items {
row-gap: 1.7rem;
}
.nav__icon {
font-size: 1.3rem;
}
/* Element opacity */
.nav__logo-name,
.nav__name,
.nav__subtitle,
.nav__dropdown-icon {
opacity: 0;
transition: .3s;
}
/* Navbar expanded */
.nav:hover {
width: var(--nav-width);
}
/* Visible elements */
.nav:hover .nav__logo-name {
opacity: 1;
}
.nav:hover .nav__subtitle {
opacity: 1;
}
.nav:hover .nav__name {
opacity: 1;
}
.nav:hover .nav__dropdown-icon {
opacity: 1;
}
}/*==================== SHOW NAVBAR ====================*/
const showMenu = (headerToggle, navbarId) =>{
const toggleBtn = document.getElementById(headerToggle),
nav = document.getElementById(navbarId)
// Validate that variables exist
if(headerToggle && navbarId){
toggleBtn.addEventListener('click', ()=>{
// We add the show-menu class to the div tag with the nav__menu class
nav.classList.toggle('show-menu')
// change icon
toggleBtn.classList.toggle('bx-x')
})
}
}
showMenu('header-toggle','navbar')
/*==================== LINK ACTIVE ====================*/
const linkColor = document.querySelectorAll('.nav__link')
function colorLink(){
linkColor.forEach(l => l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l => l.addEventListener('click', colorLink))Scss
/*========== GOOGLE FONTS ==========*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
/*========== VARIABLES CSS ==========*/
:root{
--header-height: 3.5rem;
--nav-width: 219px;
/*========== Colors ==========*/
--first-color: #6923D0;
--first-color: purple;
--first-color-light: #F4F0FA;
--title-color: #19181B;
--text-color: #58555E;
--text-color-light: #A5A1AA;
--body-color: #F9F6FD;
--container-color: #FFFFFF;
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--normal-font-size: .938rem;
--small-font-size: .75rem;
--smaller-font-size: .75rem;
@media screen and (min-width: 1024px){
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== z index ==========*/
--z-fixed: 100;
}
/*========== BASE ==========*/
*,::before,::after{
box-sizing: border-box;
}
body{
margin: var(--header-height) 0 0 0;
padding: 1rem 1rem 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h3{
margin: 0;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
}
/*========== HEADER ==========*/
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--container-color);
box-shadow: 0 1px 0 rgba(22, 8, 43, .1);
padding: 0 1rem;
z-index: var(--z-fixed);
&__container{
display: flex;
align-items: center;
height: var(--header-height);
justify-content: space-between;
}
&__img{
width: 35px;
height: 35px;
border-radius: 50%;
}
&__logo{
color: var(--title-color);
font-weight: var(--font-medium);
display: none;
}
&__search{
display: flex;
padding: .40rem .75rem;
background-color: var(--first-color-light);
border-radius: .25rem;
}
&__input{
width: 100%;
border: none;
outline: none;
background-color: var(--first-color-light);
&::placeholder{
font-family: var(--body-font);
color: var(--text-color);
}
}
&__icon,
&__toggle{
font-size: 1.2rem;
}
&__toggle{
color: var(--title-color);
cursor: pointer;
}
}
/*========== NAV ==========*/
.nav{
position: fixed;
top: 0;
left: -100%;
height: 100vh;
padding: 1rem 1rem 0;
background-color: var(--container-color);
box-shadow: 1px 0 0 rgba(22, 8, 43, .1);
z-index: var(--z-fixed);
transition: .4s;
&__container{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 3rem;
overflow: auto;
scrollbar-width: none; /* For mozilla */
/* For Google Chrome and others */
&::-webkit-scrollbar {
display: none;
}
}
&__logo{
font-weight: var(--font-semi-bold);
margin-bottom: 2.5rem;
}
&__list,
&__items{
display: grid;
}
&__list{
row-gap: 2.5rem;
}
&__items{
row-gap: 1.5rem;
}
&__subtitle{
font-size: var(--normal-font-size);
text-transform: uppercase;
letter-spacing: .1rem;
color: var(--text-color-light);
}
&__link{
display: flex;
align-items: center;
color: var(--text-color);
&:hover{
color: var(--first-color);
}
}
&__icon{
font-size: 1.2rem;
margin-right: .5rem;
}
&__name{
font-size: var(--small-font-size);
font-weight: var(--font-medium);
white-space: nowrap;
}
&__logout{
margin-top: 5rem;
}
/* Dropdown */
&__dropdown{
overflow: hidden;
max-height: 21px;
transition: .4s ease-in-out;
&-collapse{
background-color: var(--first-color-light);
border-radius: .25rem;
margin-top: 1rem;
}
&-content{
display: grid;
row-gap: .5rem;
padding: .75rem 2.5rem .75rem 1.8rem;
}
&-item{
font-size: var(--smaller-font-size);
font-weight: var(--font-medium);
color: var(--text-color);
&:hover{
color: var(--first-color);
}
}
&-icon{
margin-left: auto;
transition: .4s;
}
/* Show collapse */
&:hover{
max-height: 100rem;
}
/*Rotate icon arrow*/
&:hover &-icon{
transform: rotate(180deg);
}
}
}
/*===== Show menu =====*/
.show-menu{
left: 0;
}
/*===== Active link =====*/
.active{
color: var(--first-color);
}
/* ========== MEDIA QUERIES ==========*/
/* For small devices reduce search*/
@media screen and (max-width: 320px){
.header{
&__search{
width: 70%;
}
}
}
@media screen and (min-width: 768px){
body{
padding: 1rem 3rem 0 6rem;
}
.header{
padding: 0 3rem 0 6rem;
&__container{
height: calc(var(--header-height) + .5rem);
}
&__search{
width: 300px;
padding: .55rem .75rem;
}
&__toggle{
display: none;
}
&__logo{
display: block;
}
&__img{
width: 40px;
height: 40px;
order: 1;
}
}
.nav{
left: 0;
padding: 1.2rem 1.5rem 0;
width: 68px;
&__items{
row-gap: 1.7rem;
}
&__icon{
font-size: 1.3rem;
}
&__logo-name,
&__name,
&__subtitle,
&__dropdown-icon{
opacity: 0;
transition: .3s;
}
&:hover{
width: var(--nav-width);
}
&:hover &__logo-name{
opacity: 1;
}
&:hover &__subtitle{
opacity: 1;
}
&:hover &__name{
opacity: 1;
}
&:hover &__dropdown-icon{
opacity: 1;
}
}
}Боковое меню для сайта hover submenu
Открыть элемент
Боковое меню для сайта
<div class="l-navbar" id="navbar">
<nav class="nav">
<div>
<div class="nav__brand">
<ion-icon name="menu-outline" class="nav__toggle" id="nav-toggle"></ion-icon>
<a href="#" class="nav__logo">Bedimcode</a>
</div>
<div class="nav__list">
<a href="#" class="nav__link active">
<ion-icon name="home-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Dashboard</span>
</a>
<a href="#" class="nav__link">
<ion-icon name="chatbubbles-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Messenger</span>
</a>
<div class="nav__link collapse">
<ion-icon name="folder-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Projects</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
<a href="#" class="collapse__sublink">Data</a>
<a href="#" class="collapse__sublink">Group</a>
<a href="#" class="collapse__sublink">Members</a>
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="pie-chart-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Analytics</span>
</a>
<div class="nav__link collapse">
<ion-icon name="people-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Team</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
<a href="#" class="collapse__sublink">Data</a>
<a href="#" class="collapse__sublink">Group</a>
<a href="#" class="collapse__sublink">Members</a>
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="settings-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Settings</span>
</a>
</div>
</div>
<a href="#" class="nav__link">
<ion-icon name="log-out-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
/*===== VARIABLES CSS =====*/
:root{
--nav-width: 92px;
/*===== Colores =====*/
--first-color: #0C5DF4;
--bg-color: #12192C;
--sub-color: #B6CEFC;
--white-color: #FFF;
/*===== Fuente y tipografia =====*/
--body-font: 'Poppins', sans-serif;
--normal-font-size: 1rem;
--small-font-size: .875rem;
/*===== z index =====*/
--z-fixed: 100;
}
/*===== BASE =====*/
*,::before,::after{
box-sizing: border-box;
}
body{
position: relative;
margin: 0;
padding: 2rem 0 0 6.75rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s;
}
h1{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
/*===== l NAV =====*/
.l-navbar{
position: fixed;
top: 0;
left: 0;
width: var(--nav-width);
height: 100vh;
background-color: var(--bg-color);
color: var(--white-color);
padding: 1.5rem 1.5rem 2rem;
transition: .5s;
z-index: var(--z-fixed);
}
/*===== NAV =====*/
.nav{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav__brand{
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.nav__toggle{
font-size: 1.25rem;
padding: .75rem;
cursor: pointer;
}
.nav__logo{
color: var(--white-color);
font-weight: 600;
}
.nav__link{
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: .75rem;
padding: .75rem;
color: var(--white-color);
border-radius: .5rem;
margin-bottom: 1rem;
transition: .3s;
cursor: pointer;
}
.nav__link:hover{
background-color: var(--first-color);
}
.nav__icon{
font-size: 1.25rem;
}
.nav__name{
font-size: var(--small-font-size);
}
/*Expander menu*/
.expander{
width: calc(var(--nav-width) + 9.25rem);
}
/*Add padding body*/
.body-pd{
padding: 2rem 0 0 16rem;
}
/*Active links menu*/
.active{
background-color: var(--first-color);
}
/*===== COLLAPSE =====*/
.collapse{
grid-template-columns: 20px max-content 1fr;
}
.collapse__link{
justify-self: flex-end;
transition: .5s;
}
.collapse__menu{
display: none;
padding: .75rem 2.25rem;
}
.collapse__sublink{
color: var(--sub-color);
font-size: var(--small-font-size);
}
.collapse__sublink:hover{
color: var(--white-color);
}
/*Show collapse*/
.showCollapse{
display: block;
}
/*Rotate icon*/
.rotate{
transform: rotate(180deg);
}const showMenu = (toggleId, navbarId, bodyId)=>{
const toggle = document.getElementById(toggleId),
navbar = document.getElementById(navbarId),
bodypadding = document.getElementById(bodyId)
if(toggle && navbar){
toggle.addEventListener('click', ()=>{
navbar.classList.toggle('expander')
bodypadding.classList.toggle('body-pd')
})
}
}
showMenu('nav-toggle','navbar','body-pd')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav__link')
function colorLink(){
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
/*===== COLLAPSE MENU =====*/
const linkCollapse = document.getElementsByClassName('collapse__link')
var i
for(i=0;i<linkCollapse.length;i++){
linkCollapse[i].addEventListener('click', function(){
const collapseMenu = this.nextElementSibling
collapseMenu.classList.toggle('showCollapse')
const rotate = collapseMenu.previousElementSibling
rotate.classList.toggle('rotate')
})
}Scss
/*===== GOOGLE FONTS =====*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
/*===== VARIABLES CSS =====*/
:root{
--nav-width: 92px;
/*===== Colores =====*/
--first-color: #0C5DF4;
--bg-color: #12192C;
--sub-color: #B6CEFC;
--white-color: #FFF;
/*===== Fuente y tipografia =====*/
--body-font: 'Poppins', sans-serif;
--normal-font-size: 1rem;
--small-font-size: .875rem;
/*===== z index =====*/
--z-fixed: 100;
}
/*===== BASE =====*/
*,::before,::after{
box-sizing: border-box;
}
body{
position: relative;
margin: 0;
padding: 2rem 0 0 6.75rem ;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s;
}
h1{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
/*===== l NAV =====*/
.l-navbar{
position: fixed;
top: 0;
left: 0;
width: var(--nav-width);
height: 100vh;
background-color: var(--bg-color);
color: #fff;
padding: 1.5rem 1.5rem 2rem;
transition: .5s;
z-index: var(--z-fixed);
}
/*===== NAV =====*/
.nav{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
&__brand{
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
&__toggle{
font-size: 1.25rem;
padding: .75rem;
cursor: pointer;
}
&__logo{
color: var(--white-color);
font-weight: 600;
}
&__link{
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: .75rem;
padding: .75rem;
color: var(--white-color);
border-radius: .5rem;
margin-bottom: 1rem;
transition: .3s;
cursor: pointer;
&:hover{
background-color: var(--first-color);
}
}
&__icon{
font-size: 1.25rem;
}
&__name{
font-size: var(--small-font-size);
}
}
/*Expander menu*/
.expander{
width: calc(var(--nav-width) + 9.25rem);
}
/*Add padding body*/
.body-pd{
padding: 2rem 0 0 16rem;
}
/*Active links menu*/
.active{
background-color: var(--first-color);
}
/*===== COLLAPSE =====*/
.collapse{
grid-template-columns: 20px max-content 1fr;
&__link{
justify-self: flex-end;
transition: .5s;
}
&__menu{
display: none;
padding: .75rem 2.25rem;
}
&__sublink{
color: var(--sub-color);
font-size: var(--small-font-size);
&:hover{
color: var(--white-color);
}
}
}
/*Show collapse*/
.showCollapse{
display: block;
}
/*Rotate icon*/
.rotate{
transform: rotate(180deg);
}Боковое меню для сайта
Открыть элемент
Перевёрнутая навигация
<div class="container" id="container">
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="fas fa-times"></i>
</button>
<button id="open">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
<div class="content">
<h1>Amazing Article</h1>
<small>by Florin Pop 🤪</small>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem facilis distinctio nisi! Vel eius ab sequi repellendus reiciendis voluptatum id qui dolores earum incidunt nulla, molestias quam quidem dicta odit fuga ratione provident natus quibusdam dolor labore est. Illum nisi voluptatem esse nostrum ipsa accusamus perspiciatis vel quaerat labore in natus voluptatum, sequi harum libero, et cumque nesciunt reiciendis voluptates laudantium deserunt. Placeat aliquid neque commodi nostrum necessitatibus? Accusamus ullam vel ea nesciunt sint suscipit laboriosam eos saepe ducimus quo, nam perspiciatis exercitationem laborum deleniti facilis pariatur minima rem maiores neque fugiat quae rerum, recusandae soluta magni. Praesentium, sed nostrum?</p>
<p>Illum error officiis voluptate maiores consequatur, ad, ducimus magni impedit libero officia dolorum eum nesciunt doloribus exercitationem sunt pariatur excepturi adipisci cumque natus rem tempora accusamus rerum velit sequi. Tempora magni quasi sunt placeat officia rem porro repudiandae optio corrupti aut quam nihil inventore sit, totam quibusdam dolorem, minus eius, expedita architecto quisquam vero pariatur incidunt. Officiis libero exercitationem eveniet modi. Quos enim quasi sit praesentium aut minima maiores doloremque odio magnam culpa, magni cupiditate harum dolorum. Necessitatibus qui rerum consequatur officia amet, aspernatur officiis tempora labore ab. Error, eum asperiores! Consequatur deserunt dolorem aut accusamus cum eius rerum veniam?</p>
<h3>Look a cute doggie! 🥰</h3>
<img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="doggy" />
<p>Maiores, necessitatibus! Deserunt culpa ullam repudiandae pariatur nisi qui veniam nobis, consectetur iste laudantium modi dolores totam quos ratione ipsum aspernatur iure optio? Itaque tenetur nemo aspernatur eveniet maiores, laudantium sequi odio repellat perferendis voluptas. Necessitatibus impedit esse aliquid vero aut quibusdam, culpa iste delectus consectetur quasi cumque, iure distinctio blanditiis, adipisci voluptatum veniam. Maxime iste illo praesentium natus ex? Sapiente dicta rerum dignissimos omnis porro obcaecati quidem fugit. Sit commodi dolor doloribus distinctio odit quaerat possimus asperiores provident aliquam! Magni laboriosam quo quisquam earum accusamus fuga aut tempore labore quos dolorum nobis fugiat cupiditate alias sit, quasi numquam deserunt!</p>
</div>
</div>
<!-- Nav has to be after .container -->
<nav>
<ul>
<li><i class="fas fa-home"></i> Home</li>
<li><i class="fas fa-user-alt"></i> About</li>
<li><i class="fas fa-envelope"></i> Contact</li>
</ul>
</nav>@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
* {
box-sizing: border-box;
}
body {
background-color: #333;
color: #222;
font-family: 'Lato', sans-serif;
margin: 0;
overflow-x: hidden;
}
.container {
background-color: #fafafa;
transform-origin: top left;
transition: transform 0.5s linear;
padding: 50px;
width: 100vw;
min-height: 100vh;
}
.circle-container {
position: fixed;
top: -100px;
left: -100px;
}
.container.show-nav {
transform: rotate(-20deg);
}
.circle {
background-color: #ff7979;
border-radius: 50%;
position: relative;
height: 200px;
width: 200px;
transition: transform 0.5s linear;
}
.container.show-nav .circle {
transform: rotate(-70deg);
}
.circle button {
background: transparent;
border: 0;
color: #fff;
font-size: 26px;
position: absolute;
top: 50%;
left: 50%;
height: 100px;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
cursor: pointer;
}
.circle button#close {
top: 60%;
transform: rotate(90deg);
transform-origin: top left;
cursor: pointer;
}
nav {
color: #fff;
position: fixed;
bottom: 40px;
left: 0;
z-index: 100;
}
nav ul {
list-style-type: none;
padding-left: 30px;
}
nav ul li {
margin: 40px 0;
text-transform: uppercase;
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(.28,.27,.65,1.25);
transition-delay: 0s;
}
.container.show-nav + nav li {
transform: translateX(0);
transition-delay: 0.3s;
}
nav ul li i {
font-size: 20px;
margin-right: 10px;
}
nav ul li + li {
margin-left: 15px;
transform: translateX(-150%);
}
nav ul li + li + li {
margin-left: 30px;
transform: translateX(-200%);
}
.content {
max-width: 1000px;
margin: 50px auto;
}
.content h1 {
margin: 0;
}
.content small {
color: #555;
font-style: italic;
}
.content p {
color: #333;
line-height: 1.5;
}
.content img {
max-width: 100%;
}const open = document.getElementById('open');
const close = document.getElementById('close');
const container = document.getElementById('container');
open.addEventListener('click', () => {
container.classList.add('show-nav');
});
close.addEventListener('click', () => {
container.classList.remove('show-nav');
});<script src="https://use.fontawesome.com/ebd19701ea.js"></script>
Перевёрнутая навигация
Открыть элемент
Breadcrumbs для страницы
<ul class="breadcrumbs">
<li>Home</li>
<li>Portfolio</li>
<li>Projects</li>
<li>Daily UI</li>
<li>Breadcrumbs</li>
</ul>.breadcrumbs {
display: flex;
padding: 0;
list-style-type: none;
overflow: hidden;
}
.breadcrumbs li {
background-color: #0984e3;
border-radius: 5px 50px 50px 5px;
box-shadow: 3px 0 10px #003897;
color: #fff;
display: inline-block;
font-size: 12px;
font-weight: bold;
padding: 12px 30px;
position: relative;
text-transform: uppercase;
}
.breadcrumbs li:nth-of-type(1) {
z-index: 100;
}
.breadcrumbs li:nth-of-type(2) {
z-index: 90;
}
.breadcrumbs li:nth-of-type(3) {
z-index: 80;
}
.breadcrumbs li:nth-of-type(4) {
z-index: 70;
}
.breadcrumbs li:not(:first-of-type) {
padding-left: 40px;
margin-left: -20px;
}
.breadcrumbs li:last-of-type {
box-shadow: none;
background-color: #fff;
color: #0984e3;
}Breadcrumbs для страницы
Открыть элемент
<!--=============== HEADER ===============-->
<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav__logo">Marlon</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link active-link">
<i class='bx bx-home-alt nav__icon'></i>
<span class="nav__name">Home</span>
</a>
</li>
<li class="nav__item">
<a href="#about" class="nav__link">
<i class='bx bx-user nav__icon'></i>
<span class="nav__name">About</span>
</a>
</li>
<li class="nav__item">
<a href="#skills" class="nav__link">
<i class='bx bx-book-alt nav__icon'></i>
<span class="nav__name">Skills</span>
</a>
</li>
<li class="nav__item">
<a href="#portfolio" class="nav__link">
<i class='bx bx-briefcase-alt nav__icon'></i>
<span class="nav__name">Portfolio</span>
</a>
</li>
<li class="nav__item">
<a href="#contactme" class="nav__link">
<i class='bx bx-message-square-detail nav__icon'></i>
<span class="nav__name">Contactme</span>
</a>
</li>
</ul>
</div>
<img src="assets/img/perfil.png" alt="" class="nav__img">
</nav>
</header>
<main>
<!--=============== HOME ===============-->
<section class="container section section__height" id="home">
<h2 class="section__title">Home</h2>
</section>
<!--=============== ABOUT ===============-->
<section class="container section section__height" id="about">
<h2 class="section__title">About</h2>
</section>
<!--=============== SKILLS ===============-->
<section class="container section section__height" id="skills">
<h2 class="section__title">Skills</h2>
</section>
<!--=============== PORTFOLIO ===============-->
<section class="container section section__height" id="portfolio">
<h2 class="section__title">Portfolio</h2>
</section>
<!--=============== CONTACTME ===============-->
<section class="container section section__height" id="contactme">
<h2 class="section__title">Contactme</h2>
</section>
</main>@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3rem;
/*========== Colors ==========*/
--hue: 174;
--sat: 63%;
--first-color: hsl(var(--hue), var(--sat), 40%);
--first-color-alt: hsl(var(--hue), var(--sat), 36%);
--title-color: hsl(var(--hue), 12%, 15%);
--text-color: hsl(var(--hue), 8%, 35%);
--body-color: hsl(var(--hue), 100%, 99%);
--container-color: #FFF;
/*========== Font and typography ==========*/
--body-font: 'Open Sans', sans-serif;
--h1-font-size: 1.5rem;
--normal-font-size: .938rem;
--tiny-font-size: .625rem;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
@media screen and (min-width: 968px) {
:root {
--h1-font-size: 2.25rem;
--normal-font-size: 1rem;
}
}
/*=============== BASE ===============*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
}
body {
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
/*=============== REUSABLE CSS CLASSES ===============*/
.section {
padding: 4.5rem 0 2rem;
}
.section__title {
font-size: var(--h1-font-size);
color: var(--title-color);
text-align: center;
margin-bottom: 1.5rem;
}
.section__height {
height: 100vh;
}
/*=============== LAYOUT ===============*/
.container {
max-width: 968px;
margin-left: 1rem;
margin-right: 1rem;
}
/*=============== HEADER ===============*/
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--container-color);
z-index: var(--z-fixed);
transition: .4s;
}
/*=============== NAV ===============*/
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__img {
width: 32px;
border-radius: 50%;
}
.nav__logo {
color: var(--title-color);
font-weight: 600;
}
@media screen and (max-width: 767px) {
.nav__menu {
position: fixed;
bottom: 0;
left: 0;
background-color: var(--container-color);
box-shadow: 0 -1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
width: 100%;
height: 4rem;
padding: 0 1rem;
display: grid;
align-content: center;
border-radius: 1.25rem 1.25rem 0 0;
transition: .4s;
}
}
.nav__list,
.nav__link {
display: flex;
}
.nav__link {
flex-direction: column;
align-items: center;
row-gap: 4px;
color: var(--title-color);
font-weight: 600;
}
.nav__list {
justify-content: space-around;
}
.nav__name {
font-size: var(--tiny-font-size);
/* display: none;*/ /* Minimalist design, hidden labels */
}
.nav__icon {
font-size: 1.5rem;
}
/*Active link*/
.active-link {
position: relative;
color: var(--first-color);
transition: .3s;
}
/* Minimalist design, active link */
/* .active-link::before{
content: '';
position: absolute;
bottom: -.5rem;
width: 4px;
height: 4px;
background-color: var(--first-color);
border-radius: 50%;
} */
/* Change background header */
.scroll-header {
box-shadow: 0 1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
}
/*=============== MEDIA QUERIES ===============*/
/* For small devices */
/* Remove if you choose, the minimalist design */
@media screen and (max-width: 320px) {
.nav__name {
display: none;
}
}
/* For medium devices */
@media screen and (min-width: 576px) {
.nav__list {
justify-content: center;
column-gap: 3rem;
}
}
@media screen and (min-width: 767px) {
body {
margin: 0;
}
.section {
padding: 7rem 0 2rem;
}
.nav {
height: calc(var(--header-height) + 1.5rem); /* 4.5rem */
}
.nav__img {
display: none;
}
.nav__icon {
display: none;
}
.nav__name {
font-size: var(--normal-font-size);
/* display: block; */ /* Minimalist design, visible labels */
}
.nav__link:hover {
color: var(--first-color);
}
/* First design, remove if you choose the minimalist design */
.active-link::before {
content: '';
position: absolute;
bottom: -.75rem;
width: 4px;
height: 4px;
background-color: var(--first-color);
border-radius: 50%;
}
/* Minimalist design */
/* .active-link::before{
bottom: -.75rem;
} */
}
/* For large devices */
@media screen and (min-width: 1024px) {
.container {
margin-left: auto;
margin-right: auto;
}
}const sections = document.querySelectorAll('section[id]')
function scrollActive(){
const scrollY = window.pageYOffset
sections.forEach(current =>{
const sectionHeight = current.offsetHeight,
sectionTop = current.offsetTop - 50,
sectionId = current.getAttribute('id')
if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link')
}else{
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link')
}
})
}
window.addEventListener('scroll', scrollActive)
/*=============== CHANGE BACKGROUND HEADER ===============*/
function scrollHeader(){
const header = document.getElementById('header')
// When the scroll is greater than 80 viewport height, add the scroll-header class to the header tag
if(this.scrollY >= 80) header.classList.add('scroll-header'); else header.classList.remove('scroll-header')
}
window.addEventListener('scroll', scrollHeader)Адаптивная нижняя панель навигации
- Нижняя панель навигации созданная на HTML, CSS и JavaScript.
- Основной дизайн меню, на большом экране, с точками в панели навигации.
- В мобильном разрешении меню становится фиксированным и переносится в нижнюю часть экрана. Добавляются иконки.
- Плавная прокрутка в каждому разделу.
- Элемент разрабатывался по методологии Mobile First, а затем для настольных компьютеров.
- Совместим со всеми мобильными устройствами, имеет красивый и приятный пользовательский интерфейс.
Открыть элемент
Боковое меню для сайта
<nav class="nav" id="nav">
<div class="nav__menu container" id="nav-menu">
<div class="nav__shape"></div>
<div class="nav__close" id="nav-close">
<i class='bx bx-x'></i>
</div>
<div class="nav__data">
<div class="nav__mask">
<!-- Change your profile picture -->
<img src="assets/img/perfil.png" alt="" class="nav__img">
</div>
<span class="nav__greeting">Hi, I'm</span>
<h1 class="nav__name">Bales <br> Vegas</h1>
</div>
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link active-link">
<i class='bx bx-home' ></i> Home
</a>
</li>
<li class="nav__item">
<a href="#about" class="nav__link">
<i class='bx bx-user'></i> About
</a>
</li>
<li class="nav__item">
<a href="#portfolio" class="nav__link">
<i class='bx bx-briefcase-alt-2'></i> Portfolio
</a>
</li>
<li class="nav__item">
<a href="#skills" class="nav__link">
<i class='bx bx-bookmark'></i> Skills
</a>
</li>
<li class="nav__item">
<a href="#contact" class="nav__link">
<i class='bx bx-message-square-detail'></i> Contact
</a>
</li>
</ul>
</div>
</nav>
<!--=============== MAIN ===============-->
<main class="main" id="main">
<!--=============== HEADER ===============-->
<header class="header" id="header">
<nav class="header__nav container">
<a href="#" class="header__logo">
Bales
</a>
<!-- Toggle button -->
<div class="header__toggle" id="header-toggle">
<i class='bx bx-grid-alt'></i>
</div>
</nav>
</header>
<!-- When inserting your content into sections, remove the section__height class -->
<!--=============== HOME ===============-->
<section class="section section__height container" id="home">
<h1>HOME</h1>
</section>
<!--=============== ABOUT ===============-->
<section class="section section__height container" id="about">
<h1>ABOUT</h1>
</section>
<!--=============== PORTFOLIO ===============-->
<section class="section section__height container" id="portfolio">
<h1>PORTFOLIO</h1>
</section>
<!--=============== SKILLS ===============-->
<section class="section section__height container" id="skills">
<h1>SKILLS</h1>
</section>
<!--=============== CONTACT ===============-->
<section class="section section__height container" id="contact">
<h1>CONTACT</h1>
</section>
</main>/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3.5rem;
/*========== Colors ==========*/
--first-color: hsl(273, 97%, 66%);
--first-color-shape: hsl(253, 33%, 32%);
--title-color: hsl(273, 8%, 15%);
--text-color: hsl(273, 4%, 45%);
--body-color: hsl(273, 100%, 99%);
--container-color: #fff;
--title-color-dark: hsl(273, 83%, 98%);
--text-color-dark: hsl(273, 21%, 56%);
--container-color-dark: hsl(273, 80%, 14%);
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--big-font-size: 1.5rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
/*========== z index ==========*/
--z-fixed: 100;
}
@media screen and (min-width: 968px) {
:root {
--big-font-size: 2rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
}
}
/*=============== BASE ===============*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
font-family: var(--body-font);
font-size: var(--normal-font-size);
color: var(--text-color);
overflow-x: hidden;
}
h1, h2, h3 {
color: var(--title-color);
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
/*=============== REUSABLE CSS CLASSES ===============*/
.container {
max-width: 1024px;
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.section {
padding: 4.5rem 0 1rem;
}
.section__height {
height: 100vh;
}
/*=============== HEADER Y NAV ===============*/
.nav {
background-color: var(--container-color-dark);
padding-top: 2rem;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.nav__shape {
width: 200px;
height: 200px;
background-color: var(--first-color-shape);
border-radius: 50%;
position: absolute;
top: -2rem;
left: -2rem;
filter: blur(90px);
}
.nav__close {
position: relative;
display: inline-flex;
font-size: 1.8rem;
color: var(--text-color-dark);
cursor: pointer;
margin-bottom: 3.5rem;
}
.nav__img {
width: 70px;
}
.nav__mask {
width: 80px;
height: 80px;
background: linear-gradient(224deg, #a22fe9 -2%, #ddaafe 97%);
border-radius: 1.5rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-end;
margin-bottom: 1rem;
}
.nav__data {
position: relative;
margin-bottom: 3rem;
}
.nav__greeting {
display: block;
color: var(--text-color-dark);
font-size: var(--small-font-size);
font-weight: 500;
margin-bottom: .25rem;
}
.nav__name {
color: var(--title-color-dark);
font-size: var(--big-font-size);
line-height: 130%;
}
.nav__list {
display: flex;
flex-direction: column;
row-gap: 1.5rem;
}
.nav__link {
color: var(--text-color-dark);
display: inline-flex;
align-items: center;
column-gap: 1rem;
font-size: var(--small-font-size);
font-weight: 500;
transition: .3s;
}
.nav__link i {
font-size: 1.15rem;
}
.nav__link:hover {
color: var(--title-color-dark);
}
.main {
position: relative;
background-color: var(--body-color);
transition: .4s;
}
.header {
width: 100%;
background-color: var(--body-color);
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
}
.header__nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.header__logo, .header__toggle {
color: var(--title-color);
}
.header__logo {
font-weight: 500;
}
.header__toggle {
font-size: 1.15rem;
cursor: pointer;
}
/* Show menu */
.show-menu {
transform: translate(70%);
}
/* Change background header */
.scroll-header {
box-shadow: 0 1px 4px rgba(40, 37, 37, 0.1);
}
/* Active link */
.active-link {
color: var(--title-color-dark);
}
/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
.container {
margin-left: 1rem;
margin-right: 1rem;
}
}
/* For medium devices */
@media screen and (min-width: 767px) {
.show-menu {
transform: translate(40%);
}
}
/* For large devices */
@media screen and (min-width: 1024px) {
.container {
margin-left: auto;
margin-right: auto;
}
.section {
padding: 7rem 0 2rem;
}
.header__nav {
height: calc(var(--header-height) + 1.5rem);
}
.nav__shape {
width: 350px;
height: 350px;
}
.nav__mask {
width: 100px;
height: 100px;
border-radius: 2rem;
margin-bottom: 2rem;
}
.nav__img {
width: 90px;
}
.nav__link {
font-size: var(--normal-font-size);
}
.nav__link i {
font-size: 1.25rem;
}
}const headerToggle = document.getElementById('header-toggle'),
main = document.getElementById('main'),
navClose = document.getElementById('nav-close')
/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(headerToggle){
headerToggle.addEventListener('click', () =>{
main.classList.add('show-menu')
})
}
/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
navClose.addEventListener('click', () =>{
main.classList.remove('show-menu')
})
}
/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')
function linkAction(){
const main = document.getElementById('main')
// When we click on each nav__link, we remove the show-menu class
main.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))
/*=============== CHANGE BACKGROUND HEADER ===============*/
function scrollHeader(){
const header = document.getElementById('header')
// When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
if(this.scrollY >= 50) header.classList.add('scroll-header'); else header.classList.remove('scroll-header')
}
window.addEventListener('scroll', scrollHeader)
/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
const sections = document.querySelectorAll('section[id]')
function scrollActive(){
const scrollY = window.pageYOffset
sections.forEach(current =>{
const sectionHeight = current.offsetHeight,
sectionTop = current.offsetTop - 58,
sectionId = current.getAttribute('id')
if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link')
}else{
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link')
}
})
}
window.addEventListener('scroll', scrollActive)<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
Боковое меню для сайта
Открыть элемент
Боковое меню для сайта
<div class="l-navbar" id="navbar">
<nav class="nav">
<div>
<a href="#" class="nav__logo">
<img src="assets/icons/logo.svg" alt="" class="nav__logo-icon">
<span class="nav__logo-text">Bedimcode</span>
</a>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-chevron-right'></i>
</div>
<ul class="nav__list">
<a href="#" class="nav__link active">
<i class='bx bx-grid-alt nav__icon'></i>
<span class="nav__text">Home</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-user nav__icon' ></i>
<span class="nav__text">User</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-bell nav__icon' ></i>
<span class="nav__text">Notification</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-heart nav__icon'></i>
<span class="nav__text">Favorites</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-bookmark nav__icon'></i>
<span class="nav__text">Saved</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-message-rounded nav__icon' ></i>
<span class="nav__text">Chat</span>
</a>
</ul>
</div>
<a href="#" class="nav__link">
<i class='bx bx-log-out-circle nav__icon'></i>
<span class="nav__text">Close</span>
</a>
</nav>
</div>
<h2>Unete al canal</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Atque optio odio officiis nostrum nesciunt quam libero.
Cumque impedit veritatis, quibusdam nulla accusantium illo.
In velit laboriosam obcaecati quaerat eaque beatae.</p>@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
/*===== VARIABLES CSS Y SASS =====*/
/*Varibles sass*/
/*Variables css*/
/*===== Colores =====*/
:root {
--first-color: #12192C;
--second-color: #F5A623;
--white-color: #EDEDED;
}
/*===== Fuente y tipografia =====*/
:root {
--body-font: 'Quicksand', sans-serif;
--small-font-size: 0.875rem;
}
@media screen and (min-width: 768px) {
:root {
--small-font-size: 0.938rem;
}
}
/*===== z index =====*/
:root {
--z-back: -10;
--z-normal: 1;
--z-tooltip: 10;
--z-fixed: 100;
--z-modal: 1000;
}
/*===== BASE =====*/
*, ::before, ::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
padding: 1rem 0 0 5rem;
font-family: var(--body-font);
background-color: var(--white-color);
-webkit-transition: .5s;
transition: .5s;
}
h1 {
margin: 0;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
/*===== NAV =====*/
.l-navbar {
position: fixed;
top: 0;
left: 0;
width: 56px;
height: 100vh;
background-color: var(--first-color);
padding: 1.25rem .5rem 2rem;
-webkit-transition: .5s;
transition: .5s;
z-index: var(--z-fixed);
}
.nav {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
overflow: hidden;
}
.nav__logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 2rem;
padding: 0 .5rem;
}
.nav__logo-icon {
margin-right: 1.2rem;
}
.nav__logo-text {
color: var(--white-color);
font-weight: 700;
}
.nav__toggle {
position: absolute;
top: 1.10rem;
right: -.6rem;
width: 18px;
height: 18px;
background-color: var(--second-color);
border-radius: 50%;
font-size: 1.25rem;
color: var(--first-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
-webkit-transition: .5s;
transition: .5s;
}
.nav__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: .5rem;
margin-bottom: 1rem;
border-radius: .5rem;
color: var(--white-color);
-webkit-transition: .3s;
transition: .3s;
}
.nav__link:hover {
background-color: var(--second-color);
color: var(--first-color);
}
.nav__icon {
font-size: 1.5rem;
margin-right: 1rem;
}
.nav__text {
font-weight: 700;
}
/*Show menu*/
.show {
width: 168px;
}
/*Rotate toggle*/
.rotate {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: .5s;
transition: .5s;
}
/*Active links menu*/
.active {
background-color: var(--second-color);
color: var(--first-color);
}
/*Add padding body*/
.expander {
padding: 1rem 0 0 12rem;
-webkit-transition: .5s;
transition: .5s;
}const showMenu = (toggleId, navbarId,bodyId) =>{
const toggle = document.getElementById(toggleId),
navbar = document.getElementById(navbarId),
bodypadding = document.getElementById(bodyId)
if(toggle && navbar){
toggle.addEventListener('click', ()=>{
// APARECER MENU
navbar.classList.toggle('show')
// ROTATE TOGGLE
toggle.classList.toggle('rotate')
// PADDING BODY
bodypadding.classList.toggle('expander')
})
}
}
showMenu('nav-toggle','navbar','body')
// LINK ACTIVE COLOR
const linkColor = document.querySelectorAll('.nav__link');
function colorLink(){
linkColor.forEach(l => l.classList.remove('active'));
this.classList.add('active');
}
linkColor.forEach(l => l.addEventListener('click', colorLink));<link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');
/*===== Переменные CSS Y SASS =====*/
/*Переменные sass*/
$nav-width: 56px;
$font-bold: 700;
/*Переменные css*/
/*===== Colores =====*/
:root{
--first-color: #12192C;
--second-color: #F5A623;
--white-color: #EDEDED;
}
/*===== Fuente y tipografia =====*/
:root{
--body-font: 'Quicksand', sans-serif;
--small-font-size: 0.875rem;
@media screen and (min-width: 768px){
--small-font-size: 0.938rem;
}
}
/*===== z index =====*/
:root{
--z-back: -10;
--z-normal: 1;
--z-tooltip: 10;
--z-fixed: 100;
--z-modal: 1000;
}
/*===== BASE =====*/
*,::before,::after{
box-sizing: border-box;
}
body{
position: relative;
margin: 0;
padding: 1rem 0 0 5rem;
font-family: var(--body-font);
background-color: var(--white-color);
transition: .5s;
}
h1{
margin: 0;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
/*===== NAV =====*/
.l-navbar{
position: fixed;
top: 0;
left: 0;
width: $nav-width;
height: 100vh;
background-color: var(--first-color);
padding: 1.25rem .5rem 2rem;
transition: .5s;
z-index: var(--z-fixed);
}
.nav{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
&__logo{
display: flex;
align-items: center;
margin-bottom: 2rem;
padding: 0 .5rem;
&-icon{
margin-right: 1.2rem;
}
&-text{
color: var(--white-color);
font-weight: $font-bold;
}
}
&__toggle{
position: absolute;
top: 1.10rem;
right: -.6rem;
width: 18px;
height: 18px;
background-color: var(--second-color);
border-radius: 50%;
font-size: 1.25rem;
color: var(--first-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: .5s;
}
&__link{
display: flex;
align-items: center;
padding: .5rem;
margin-bottom: 1rem;
border-radius: .5rem;
color: var(--white-color);
transition: .3s;
&:hover{
background-color: var(--second-color);
color: var(--first-color);
}
}
&__icon{
font-size: 1.5rem;
margin-right: 1rem;
}
&__text{
font-weight: $font-bold;
}
}
/*Show menu*/
.show{
width: $nav-width + 112px;
}
/*Rotate toggle*/
.rotate{
transform: rotate(180deg);
transition: .5s;
}
/*Active links menu*/
.active{
background-color: var(--second-color);
color: var(--first-color);
}
/*Add padding body*/
.expander{
padding: 1rem 0 0 12rem;
transition: .5s;
}Боковое меню для сайта
Открыть элемент
Выпадающее меню для сайта
<div class="icon" id="menu"><i class="fas fa-bars" id="toggler"></i></div>
<header id="main">
<nav id="navbar">
<ul id="links">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">design</a></li>
<li><a href="#">contact us</a></li>
</ul>
</nav>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</header>@charset "UTF-8";
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
@keyframes rotate_scale {
0% {
transform: scale(0) rotate(0) translate(25%, -50%);
opacity: 1;
}
100% {
transform: scale(6) rotate(250deg) translate(-50%, -50%);
opacity: 0;
}
}
body {
position: relative;
}
body .icon {
position: fixed;
z-index: 20;
top: 3%;
right: 5%;
text-align: center;
width: 55px;
height: 55px;
line-height: 200%;
border-radius: 50%;
cursor: pointer;
transition: all 1s ease-in;
background-color: rgba(149, 153, 226, 0.3);
}
body .icon.change-backGround {
background-color: #fff;
}
body .icon i {
color: #fff;
font-size: 2em;
line-height: 55px;
transition: all 1s ease-in;
}
body .icon i::before {
transition: all 1s ease-in;
}
body .icon i.clicked::before {
content: "";
color: #9599e2;
transition: 0.3s ease-in;
}
#main {
height: 100vh;
width: 100%;
position: relative;
background: url("https://cdn.pixabay.com/photo/2020/02/24/06/33/crescent-4875339_960_720.jpg") no-repeat center/cover fixed;
overflow: hidden;
}
#main .box {
position: absolute;
bottom: 20%;
left: 10%;
z-index: 5;
width: 25px;
height: 25px;
border: 2px solid #e63946;
transform: scale(0) rotate(0) translate(-50%, -50%);
animation: rotate_scale 11s ease-in-out forwards infinite;
-webkit-animation: rotate_scale 10s ease-in-out forwards infinite;
}
#main .box:nth-child(2) {
border-color: #f1faee;
animation-delay: 2s;
left: 50%;
bottom: 30%;
}
#main .box:nth-child(3) {
border-color: #1d3557;
animation-delay: 4s;
left: 50%;
top: 5%;
}
#main .box:nth-child(4) {
border-color: #457b9d;
animation-delay: 6s;
right: 10%;
top: 20%;
}
#main .box:nth-child(5) {
border-color: #a8dadc;
animation-delay: 8s;
top: 50%;
left: 85%;
}
#main .box:nth-child(6) {
animation-delay: 9s;
top: 50%;
left: 50%;
}
#navbar {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
background-image: linear-gradient(135deg, rgba(139, 198, 236, 0.5) 0%, rgba(149, 153, 226, 0.5) 100%);
display: flex;
transform: translateY(-100%);
transition: 1s ease;
}
#navbar ul#links {
list-style: none;
font-family: sans-serif;
}
#navbar ul#links li {
padding: 5px;
margin: 15px 0 0;
text-align: center;
position: relative;
}
#navbar ul#links li::before {
content: "";
position: absolute;
bottom: -5%;
left: -5%;
width: 10px;
height: 10px;
border: 3px solid #fff;
border-top: none;
border-right: none;
transition: all 0.4s ease-in;
}
#navbar ul#links li:hover::before {
width: 100%;
height: 0;
left: 0;
}
#navbar ul#links li::after {
content: "";
position: absolute;
top: -5%;
right: -5%;
width: 10px;
height: 10px;
border: 3px solid #fff;
border-bottom: none;
border-left: none;
transition: all 0.4s ease-in;
}
#navbar ul#links li:hover::after {
width: 100%;
height: 0;
right: 0;
}
#navbar ul#links li a {
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: 1.5em;
text-transform: uppercase;
height: 100%;
widht: 100%;
}const icon = document.getElementById("toggler");
const nav = document.getElementById("navbar");
// functions
nav.style.display = "none";
const showNav = (e) => {
e.target.parentElement.classList.toggle("change-backGround");
e.target.classList.toggle("clicked");
//setTimeout ==> because when i display:none for elements not animated so i delay it to be smooth
e.target.classList.contains("clicked")
? ((nav.style.cssText = "dispaly: flex;"),
setTimeout(() => (nav.style.transform = "translateY(0)"), 300))
: ((nav.style.transform = "translateY(-100%)"),
setTimeout(() => (nav.style.display = "none"), 700));
};
//events
icon.addEventListener("click", showNav);<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
Выпадающее меню для сайта
Открыть элемент
Hover меню для сайта с выпадающим меню
<div class='nav-container'>
<div class='nav-list-container'>
<div class='nav-list'>
<div class='nav-sect no-dropdown'><a class='url no-dropdown' href='#'>About us</a></div>
<div class='nav-sect no-dropdown'><a class='url no-dropdown' href='#'>Blog</a></div>
<div class='nav-sect no-dropdown'>
<a class='url no-dropdown' href='#'>Contact</a>
</div>
<div class='nav-sect' id='sub-nav'>
<div class='nav-icon'>
<a class='url' href='#'>More</a>
<div>
<div class='svg-arrow'>
<svg class='arrow' viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" width='21' height='15'>
<line class='line-1' x1="10" y1="30" x2="30" y2="30" stroke-linecap="round" />
<line class='line-2' x1="50" y1="30" x2="30" y2="30" stroke-linecap="round" />
</svg>
</div>
</div>
</div>
<div class='nav-sub-list'>
<div class='nav-sub-sect'><a class='sub-url' href='#'>Resources</a></div>
<div class='nav-sub-sect'><a class='sub-url' href='#'>Library</a></div>
<div class='nav-sub-sect'><a class='sub-url' href='#'>Testimonials</a></div>
<div class='nav-sub-sect'><a class='sub-url' href='#'>Community</a></div>
</div>
</div>
</div>
</div>
</div>@import url("https://fonts.googleapis.com/css?family=Muli:300,400,700,900");
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
display: flex;
justify-content: center;
align-items: center;
background: #fbe6d4;
height: 100vh;
font-family: "Muli", Arial, sans-serif;
}
.nav-list-container {
margin-bottom: 40px;
}
.nav-list {
background: #fff;
border-radius: 16px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
width: auto;
height: auto;
border: 14px solid #fff;
border-radius: 16px;
box-shadow: 0 6px 30px -10px #f4bd8e;
}
.nav-sub-sect,
.nav-sect {
position: relative;
padding: 10px 15px;
border-radius: 12px;
cursor: pointer;
transition: background 299ms ease, opacity 199ms ease;
text-align: center;
}
.nav-sub-sect a,
.nav-sect a {
text-decoration: none;
color: #333333;
transition: color 299ms ease;
}
.nav-sect:hover {
transition: background 299ms ease;
background: #fecb89;
}
.nav-sect:hover a.url {
color: #2e291e;
transition: color 299ms ease;
}
.nav-sect:hover .line-1 {
stroke: #643a00;
transition: all 199ms ease;
}
.nav-sect:hover .line-2 {
stroke: #643a00;
transition: all 199ms ease;
}
.nav-icon {
display: flex;
justify-content: center;
flex-wrap: nowrap;
}
.nav-icon .url {
margin-right: 5px;
}
.nav-sect {
opacity: 1;
}
.nav-sub-list {
border-radius: 16px;
position: absolute;
background: #fff;
width: auto;
padding: 15px;
top: 38px;
right: 0;
box-shadow: 0 6px 30px -10px #f4bd8e;
overflow: hidden;
opacity: 0;
transform: scale(0);
transition: opacity 299ms ease 199ms, transform 0ms ease;
}
.nav-sub-sect {
text-align: left;
}
.nav-sub-sect:hover {
transition: background 299ms ease;
background: #fecb89;
}
.nav-sub-sect:hover .sub-url {
color: #2e291e;
transition: color 299ms ease;
}
.nav-sub-list-on {
opacity: 1;
transform: scale(1);
transition: opacity 299ms ease 199ms, transform 0ms ease;
}
.chevron-up {
transform: rotate(0);
transition: color 299ms ease, transform 299ms ease;
}
.op {
opacity: 1;
transition: opacity 299ms ease;
}
.less-op {
opacity: 0.5;
transition: opacity 299ms ease;
}
.less-op:hover {
opacity: 1;
transition: opacity 299ms ease;
}
line {
stroke-width: 5px;
}
.arrow {
transform: translatey(0px);
transition: all 199ms ease;
}
.line-1 {
transform-origin: 17% 48%;
transform: rotate(40deg) translatex(6px);
stroke: #333333;
transition: all 199ms ease;
}
.line-2 {
transform-origin: 83% 48%;
transform: rotate(-40deg) translatex(-6px);
stroke: #333333;
transition: all 199ms ease;
}
.svg-arrow {
transform: scale(1.4);
}
.arrow-active {
transform: translatey(2px);
transition: all 199ms ease;
}
.line-1-active {
transform-origin: 17% 40%;
transform: rotate(0deg) translatex(3px);
stroke: #333333;
transition: all 199ms ease;
}
.line-2-active {
transform-origin: 83% 40%;
transform: rotate(0deg) translatex(-3px);
stroke: #333333;
transition: all 199ms ease;
}
@media only screen and (max-width: 414px) {
.url,
.sub-url {
font-size: 14px;
}
.nav-sect {
min-width: 59px;
padding: 10px;
}
}$(document).ready(function() {
// Dropdown nav
$("#sub-nav").click(function () {
$(".nav-sub-list").toggleClass("nav-sub-list-on");
$(".arrow").toggleClass("arrow-active");
$(".line-1").toggleClass("line-1-active");
$(".line-2").toggleClass("line-2-active");
});
// Select section in nav
$(".nav-sect").click(function (e) {
$(".nav-sect").addClass("less-op");
$(this).removeClass("less-op");
// Close dropdown menu if open when you click other secionts
if ($(e.target).hasClass("no-dropdown") == false) {
} else if ($(e.target).hasClass("no-dropdown") == true) {
$(".nav-sub-list").removeClass("nav-sub-list-on");
$(".arrow").removeClass("arrow-active");
$(".line-1").removeClass("line-1-active");
$(".line-2").removeClass("line-2-active");
}
});
// Reset nav when you click outside
$("html").click(function () {
$(".nav-sect").removeClass("less-op");
$(".nav-sub-list").removeClass("nav-sub-list-on");
$(".arrow").removeClass("arrow-active");
$(".line-1").removeClass("line-1-active");
$(".line-2").removeClass("line-2-active");
});
$(".nav-container").click(function (event) {
event.stopPropagation();
});
})<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
Hover меню для сайта с выпадающим меню
Открыть элемент
Hover меню для сайта
<nav class="basic-nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>nav.basic-nav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 16px;
padding: 0em 0.5em;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
width: auto;
height: auto;
border-radius: 16px;
}
nav.basic-nav ul {
padding: 0;
margin: 0;
display: flex;
}
nav.basic-nav ul li {
list-style: none;
}
nav.basic-nav ul li a {
text-decoration: none;
color: #4d4d4d;
padding: 11px 17px;
font-size: 21px;
display: block;
position: relative;
}
nav.basic-nav ul li a:before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #777bf6;
transform: scaleX(0);
transition: all 0.5s;
transform-origin: left;
}
nav.basic-nav ul li a:after {
content: " ";
position: absolute;
top: calc(100% - 3px);
left: 0;
width: 100%;
height: 3px;
background-color: #777bf6;
transform: scaleX(0);
transition: all 0.5s;
transform-origin: right;
}
nav.basic-nav ul li a:hover:before, nav.basic-nav ul li a:hover:after {
transform: scaleX(1);
}Hover меню для сайта
Открыть элемент
Боковое меню
<div class="side">
<h1>
<img src="./images/my-logo.png" alt="logo image">
My_Logo
</h1>
<ul>
<li class="active"><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-cubes"></i>Products</li>
<li><i class="fas fa-info-circle"></i>About</li>
<li><i class="fas fa-id-card"></i>Contact</li>
</ul>
<button id="toggleBtn">
<i class="fas fa-chevron-right"></i>
<i class="fas fa-chevron-left"></i>
</button>
</div>
<div class="main">
<h1>Main Title</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias saepe accusantium, provident doloribus maxime necessitatibus nemo deleniti velit, sequi eius vitae qui nihil accusamus. Ut possimus labore voluptatem doloremque ipsum!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium tempore maxime ipsa delectus. Deserunt nemo at error ipsam beatae quas ratione consectetur obcaecati, dolorum repudiandae aperiam soluta ipsum, dolores recusandae quaerat! Corporis sapiente ipsum odio eius ab tempore optio perferendis illum officiis modi quibusdam asperiores aut sequi reprehenderit natus totam et impedit, exercitationem possimus illo.</p>
</div>body {
min-height: 100vh;
background-color: #f2f7fb;
display: flex;
}
.main {
padding: 48px;
color: #333;
}
.main h1 {
margin: 24px;
}
.main p {
line-height: 20px;
letter-spacing: 0.7px;
margin-bottom: 8px;
}
.side {
background-color: #263544;
color: #e0e0e0;
position: relative;
min-height: 100vh;
width: 250px;
transition: width 0.4s;
}
.side h1 {
text-transform: uppercase;
font-size: 1.5em;
margin: 28px 20px;
display: flex;
align-items: center;
overflow: hidden;
}
.side h1 img {
width: 48px;
margin-right: 24px;
}
.side ul {
list-style: none;
overflow: hidden;
}
.side li {
display: flex;
align-items: center;
cursor: pointer;
padding: 24px 32px;
letter-spacing: 1.5px;
}
.side li i {
font-size: 1.5em;
margin-right: 32px;
}
.side li:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.side li.active {
background-color: #1d2532;
border-left: 5px solid #58a6ff;
}
.side button {
position: absolute;
top: 28px;
right: 0;
transform: translateX(100%);
box-shadow: 0 2px 123px -3px rgba(0, 0, 0, 0.3);
background-color: #58a6ff;
color: #fff;
outline: none;
border: none;
width: 40px;
height: 40px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
cursor: pointer;
font-size: 1.5em;
}
.side i.fa-chevron-right {
display: none;
}
/* ---------- Sidebar close --------- */
.side.closed {
width: 90px;
}
.side.closed i.fa-chevron-right {
display: block;
}
.side.closed i.fa-chevron-left {
display: none;
}
@media (max-width: 600px) {
.side.closed {
width: 0;
}
.main {
padding: 48px 24px;
}
}var side = document.querySelector('.side')
var toggleBtn = document.getElementById('toggleBtn')
toggleBtn.addEventListener('click', () => {
side.classList.toggle('closed')
})<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
Боковое меню
Открыть элемент
Tailwind css mega menu
<body class="h-screen bg-gray-300 font-sans">
<nav class="bg-black text-white">
<div class="max-w-7xl flex justify-between items-center mx-auto relative">
<a href="" class="font-bold text-3xl">TuatTA</a>
<ul class="flex font-semibold">
<li><a href="" class="menu-item">HOME</a></li>
<li class="group">
<a href="" class="menu-item group-hover:border-white">MEGA</a>
<!-- MEGA MENU CONTENT -->
<div class="grid grid-cols-4 w-full p-5 absolute top-full left-0 bg-black mt-14 opacity-0 invisible group-hover:opacity-100 group-hover:visible group-hover:mt-0 transition-all duration-500">
<ul class="p-2">
<li><a href="" class="mega-sub-item-title">Product category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
</ul>
<ul class="p-2">
<li><a href="" class="mega-sub-item-title">Product category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
</ul>
<ul class="p-2">
<li><a href="" class="mega-sub-item-title">Product category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
</ul>
<ul class="p-2">
<li><a href="" class="mega-sub-item-title">Product category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
<li><a href="" class="mega-sub-item">Sub category</a></li>
</ul>
<img src="./static/img/JBL_JR 310BT_Product Image_Hero_Skyblue.png" alt="">
<img src="./static/img/JBL_Quantum_400_Product Image_Hero 02.png" alt="">
<img src="./static/img/kisspng-beats-electronics-headphones-apple-beats-studio-red-headphones.png" alt="">
<img src="./static/img/JBLHorizon_001_dvHAMaster.png" alt="">
</div>
<!-- END MEGA MENU CONTENT -->
</li>
<li class="group relative">
<a href="" class="menu-item group-hover:border-white">DROPDOWN</a>
<ul class="absolute left-0 bg-black w-max mt-14 opacity-0 invisible group-hover:opacity-100 group-hover:visible group-hover:mt-0 transition-all duration-500">
<li><a href="" class="menu-sub-item">Dropdown menu</a></li>
<li><a href="" class="menu-sub-item">Dropdown menu</a></li>
<li class="sub-dropdown relative">
<a href="" class="menu-sub-item">Dropdown menu</a>
<ul class="sub-dropdown-content absolute left-full top-full bg-black w-max opacity-0 invisible transition-all duration-500">
<li><a href="" class="menu-sub-item">Sub dropdown menu</a></li>
<li><a href="" class="menu-sub-item">Sub dropdown menu</a></li>
<li class="sub-dropdown relative">
<a href="" class="menu-sub-item">Dropdown menu</a>
<ul class="sub-dropdown-content absolute left-full top-full bg-black w-max opacity-0 invisible transition-all duration-500">
<li><a href="" class="menu-sub-item">Sub dropdown menu</a></li>
<li><a href="" class="menu-sub-item">Sub dropdown menu</a></li>
<li><a href="" class="menu-sub-item">Sub dropdown menu</a></li>
<li><a href="" class="menu-sub-item">Sub dropdown menu</a></li>
</ul>
</li>
<li><a href="" class="menu-sub-item">Sub dropdown menu</a></li>
</ul>
</li>
<li class="sub-dropdown relative">
<a href="" class="menu-sub-item">Dropdown menu</a>
<ul class="sub-dropdown-content absolute left-full top-full bg-black w-max opacity-0 invisible transition-all duration-500">
<li><a href="" class="menu-sub-item">Sub dropdown menu</a></li>
<li><a href="" class="menu-sub-item">Sub dropdown menu</a></li>
<li><a href="" class="menu-sub-item">Sub dropdown menu</a></li>
<li><a href="" class="menu-sub-item">Sub dropdown menu</a></li>
</ul>
</li>
<li><a href="" class="menu-sub-item">Dropdown menu</a></li>
<li><a href="" class="menu-sub-item">Dropdown menu</a></li>
</ul>
</li>
<li><a href="" class="menu-item">BLOG</a></li>
<li><a href="" class="menu-item">ABOUT</a></li>
</ul>
<ul class="flex font-semibold">
<li><a href="" class="menu-item">ACCOUNT</a></li>
<li><a href="" class="menu-item">CART</a></li>
</ul>
</div>
</nav>
</body>*,
*::before,
*::after {
box-sizing: border-box;
}
/**
Use a more readable tab size (opinionated).
*/
:root {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/*
Sections
========
*/
/**
Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/
body {
font-family:
system-ui,
-apple-system, /* Firefox supports this but not yet `system-ui` */
'Segoe UI',
Roboto,
Helvetica,
Arial,
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji';
}
/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
}
/*
Text-level semantics
====================
*/
/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family:
ui-monospace,
SFMono-Regular,
Consolas,
'Liberation Mono',
Menlo,
monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
}
/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
Correct the inability to style clickable types in iOS and Safari.
*/
button {
-webkit-appearance: button;
}
/**
Remove the inner border and padding in Firefox.
*/
/**
Restore the focus styles unset by the previous rule.
*/
/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
padding: 0;
}
/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: b