Étiquette : scroll

Un petit snippet pour créer une icone de scroll animée en CSS, pour accompagner les utilisateurs après un splashscreen ou sur un site parallax.
C’est malin, c’est simple et c’est joli.

Le code

<div class="w-scroll-button w-button-1" style="border-color:#000000;color:#000000">
 <a href="#scroll">
 <i></i>
 </a>
</div>

et les css qui vont avec :

@-webkit-keyframes scrollButtonFadeInDown {
 0% {
 opacity: 0;
 -webkit-transform: translateY(-10px);
 }
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 }
}
 
@keyframes scrollButtonFadeInDown {
 0% {
 opacity: 0;
 transform: translateY(-10px);
 }
 100% {
 opacity: 1;
 transform: translateY(0);
 }
}

.scrollButtonFadeInDown {
 -webkit-animation-name: scrollButtonFadeInDown;
 animation-name: scrollButtonFadeInDown;
}
.w-scroll-button {
 position: absolute;
 z-index: 10;
 display: inline-block;
 left: 50%;
 bottom: 50px;
 width: 100px;
 border-color: #fff;
 color: #fff;
 margin-left: -50px;
 text-align: center;
}

.w-scroll-button.w-button-1 a {
 display: inline-block;
 border-width: 1px;
 border-style: solid;
 border-color: inherit;
 color: inherit;
 width: 22px;
 height: 36px;
 border-radius: 20px;
 overflow: hidden;
}

.w-scroll-button.w-button-1 a i::before {
 display: block;
 content: '';
 border-style: solid;
 border-left-width: 1px;
 border-color: inherit;
 color: inherit;
 border-radius: 2px;
 height: 3px;
}

.w-scroll-button.w-button-1 a i {
 display: inline-block;
 position: absolute;
 left: 50%;
 top: 10px;
 height: 8px;
 width: 4px;
 margin-left: -2px;
 border-color: inherit;
 color: inherit;
 -webkit-animation: scrollButtonFadeInDown 1.2s infinite both;
 animation: scrollButtonFadeInDown 1.2s infinite both;
}

Le résultat