Zapppa
December 12, 2016, 11:17am
1
I am wondering how to make the ‘scroll down’ icon on the bottom right of the video on the home page animate?
I want to make it a little more visible. Ideally I would like the arrow to animate down and then reset and loop
The link is camlingroup.com
Any help would be greatly appreciated.
PaulOB
December 12, 2016, 12:55pm
2
Maybe this old demo will help. You should be able to work out how to change it to your needs
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.arrowdown{
display:inline-block;
height:0;
width:0;
overflow:hidden;
border-top:8px solid #000;
border-left:8px solid transparent;
border-right:8px solid transparent;
position:relative;
top:-1px;
}
/* arrow bounce */
@-moz-keyframes bounce {
0%, 15%, 25%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
10% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
20% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@-webkit-keyframes bounce {
0%, 15%, 25%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
20% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 15%, 25%, 80%, 100% {
transform: translateY(0);
}
10% {
transform: translateY(-30px);
}
20% {
transform: translateY(-15px);
}
}
.bounce {
-moz-animation: bounce 5s infinite;
-webkit-animation: bounce 5s infinite;
animation: bounce 5s infinite;
}
</style>
</head>
<body>
<div class="arrow-bounce"> <a href="#latest-news" class="btn btn-scroll scroll-link">See More <i class="bounce arrowdown"></i></a> </div>
</body>
</html>
Zapppa
December 12, 2016, 1:32pm
3
Thanks, not having much luck / dont see the connection with what I need to do… I understand the key frames and the gist of what it means, but my code is pseudo css, is this not the best way for me to carry out what I need?
.home:before{
display:block;
position:absolute;
z-index:9; /* if it's needed */
top:100vh; /* the viewport height */
right:0;
margin:-7em 1em 0 0; /* adjust the position */
border-radius:1em;
padding:1em;
background:rgba(0,0,0,.6);
color:#fff;
text-align:center;
font:900 1.2em/1 "frutiger", sans-serif;
white-space:pre; /* to render the new line characters "\a" */
content:"\a\a\25bc";
}
PaulOB
December 12, 2016, 2:21pm
4
I assumed you wanted to bounce the arrow up and down?
This code will do it for you (more or less exactly as posted).
/* arrow bounce */
body.home:before{
-moz-animation: bounce 5s infinite;
-webkit-animation: bounce 5s infinite;
animation: bounce 5s infinite;
}
@-moz-keyframes bounce {
0%, 15%, 25%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
10% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
20% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@-webkit-keyframes bounce {
0%, 15%, 25%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
20% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 15%, 25%, 80%, 100% {
transform: translateY(0);
}
10% {
transform: translateY(-30px);
}
20% {
transform: translateY(-15px);
}
}
If that’s not what you wanted then explain what you need that is different and I’ll try to help.
1 Like
Zapppa
December 12, 2016, 2:38pm
5
That worked great and is pushed live I was having a senior moment, thanks very much for the help!
1 Like
system
Closed
March 13, 2017, 9:38pm
6
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.