Bouncing "Scroll Down" Arrow on Hero Sections
Adds a gently bouncing arrow to the bottom of any Cover block with the class "wpide-scroll-hint", inviting visitors to scroll past a full-screen hero.
Opens WPIDE on
Code
.wp-block-cover.wpide-scroll-hint {
position: relative;
}
.wp-block-cover.wpide-scroll-hint::after {
content: "";
position: absolute;
left: 50%;
bottom: 28px;
width: 18px;
height: 18px;
margin-left: -9px;
border-right: 3px solid currentColor;
border-bottom: 3px solid currentColor;
transform: rotate(45deg);
opacity: 0.8;
z-index: 2;
animation: wpide-scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes wpide-scroll-bounce {
0%,
100% {
transform: translateY(0) rotate(45deg);
}
50% {
transform: translateY(8px) rotate(45deg);
}
}
@media (prefers-reduced-motion: reduce) {
.wp-block-cover.wpide-scroll-hint::after {
animation: none;
}
}Notes
Add wpide-scroll-hint to the Cover block's Additional CSS class(es). The arrow is decorative and hidden from screen readers.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.