Scroll down animated icons

$('<section id="sec-2"></section>').prependTo('.banners-content.body-banners');

<p><a href="#sec-2" id="scroll_down_button"> <span class="scroll-down">&nbsp;</span> </a></p>

.scroll-down {
height: 50px;
width: 30px;
border: 2px solid #fff;
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 #fff;
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;
}
}
html {
scroll-behavior: smooth;
}

 

 

 

 

Nastavení cookies

Používáme cookies, abychom Vám umožnili pohodlné prohlížení webu a díky analýze provozu webu neustále zlepšovali jeho funkce, výkon a použitelnost

Nezbytné (vždy aktivní nelze vypnout)
Tyto cookies jsou potřeba, aby web fungoval správně
Analytické
Pomáhají nám pochopit, jak web používáte. S jejich pomocí ho můžeme zlepšovat
Profilující (marketingové)
Díky těmto cookies vám můžeme zobrazovat relevantní obsah a reklamy, které pro vás mohou být zajímavé a užitečné

Přihlaste se prosím znovu

Omlouváme se, ale Váš CSRF token pravděpodobně vypršel. Abychom mohli udržet Vaši bezpečnost na co největší úrovni potřebujeme, abyste se znovu přihlásili.

Děkujeme za pochopení.

Přihlášení