Add an Animated Scroll Down

Hi,

Just wondering if it was possible to add one of these: https://codepen.io/dodozhang21/pen/siKtp to the homepage of the Sydney theme? I insert the CSS but nothing changes the page black instead.

Hello there,

Please refer to this topic where I’ve posted the solution. Then to apply the animated arrow as in the pen you shared, you’d need to incorporate the CSS code to .scroll-down-arrow class selector. To add extra custom CSS code to your site, go to Appearance > Customize > Additional CSS.

Regards,
Kharis

1 Like

Thanks Kharis! Is there a way to make it bounce?

Hello there,

To make it bounce, please try adding this CSS code to Appearance > Customize > Additional from your site dashboard.


@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.scroll-down-arrow{
  -webkit-animation-name: bounce;
  -moz-animation-name: bounce;
  -o-animation-name: bounce;
  animation-name: bounce;

  -webkit-animation-fill-mode:both;
  -moz-animation-fill-mode:both;
  -ms-animation-fill-mode:both;
  -o-animation-fill-mode:both;

  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;

  animation-fill-mode:both;
  -webkit-animation-duration:2s;
  -moz-animation-duration:2s;
  -ms-animation-duration:2s;
  -o-animation-duration:2s;
  animation-duration:2s;
}

Regards,
Kharis

1 Like