J'essaie de recréer l'animation de la flèche qui rebondit comme sur: http://www.codecomputerlove.com/ mais ça ne se passe pas bien ...
Le plus proche que j'ai avec essayer d'utiliser les animations intégrées dans Layerslider est disponible ici: dev.themarketcreative dot com
J'ai décidé qu'essayer de résoudre ce problème avec Layerslider prenait trop de temps, est-ce que quelqu'un sait comment faire cela?
Le plus éloigné que j’ai découvert est celui-ci: http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_149 mais j’en ai besoin de faire cette animation sur une boucle continue.
Merci
Fait comme ça.
CSS
.bounce {
position:fixed;
left:50%;
bottom:0;
margin-top:-25px;
margin-left:-25px;
height:50px;
width:50px;
background:red;
-webkit-animation:bounce 1s infinite;
}
@-webkit-keyframes bounce {
0% { bottom:5px; }
25%, 75% { bottom:15px; }
50% { bottom:20px; }
100% {bottom:0;}
}
HTML
<div class="bounce"></div>
body {
background: black;
}
.arrow {
position: fixed;
bottom: 0;
left: 50%;
margin-left:-20px;
width: 40px;
height: 40px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
/* Scroll down indicator (bouncing) */
@-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); } }
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
40% {
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px); }
60% {
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px); } }
<body>
<div class="arrow bounce">
</div>
</body>
Vous pouvez le faire manuellement, image par image à l'aide de CSS
ou probablement automatiser avec SCSS
avec un peu de calcul et d'itération.
body{ overflow:hidden; }
.ball{
width: 50px;
height: 50px;
margin: auto;
background-color: red;
border-radius: 50%;
position: absolute;
top: 10px;
left: 0;
right: 0;
animation: bounce 1s infinite;
}
@keyframes bounce {
0% { transform: translateY(6px); }
5% { transform: translateY(8px); }
10% { transform: translateY(12px); }
15% { transform: translateY(20px); }
20% { transform: translateY(38px); }
25% { transform: translateY(72px); }
30% { transform: translateY(100px); }
35% { transform: translateY(152px); }
40% { transform: translateY(154px) scale(1.1, .9); }
50% { transform: translateY(176px) scale(1.4, .6); }
55% { transform: translateY(162px) scale(1.2, .8); }
60% { transform: translateY(138px) scale(1.05, .95); }
65% { transform: translateY(110px); }
70% { transform: translateY(72px); }
75% { transform: translateY(38px); }
80% { transform: translateY(20px); }
85% { transform: translateY(12px); }
90% { transform: translateY(8px); }
95% { transform: translateY(5px); }
100% { transform: translateY(5px); }
}
<div class="ball"></div>
Avec le même code que vous avez fourni, remplacez simplement le javascript par ce code js.
$(document).ready(function() {
function doAnimation()
{
$(".target").effect( "bounce", {times:3}, 300, doAnimation);
}
doAnimation();
});
</script>
Utiliser suivant
<html lang="en">
<head>
<style>
p {
background-color:#bca;
width:200px;
border:1px solid green;
}
div{ width:100px;
height:100px;
background:red;
}
</style>
<script src="http://www.tutorialspoint.com/jquery/jquery-1.3.2.min.js"></script>
<script src="http://www.tutorialspoint.com/jquery/jquery-ui-1.7.2.custom.min.js"></script>
<title>Birman Cats</title>
</head>
<body>
<p>Click the button</p>
<button id="button"> Bounce </button>
<div class="target">
</div>
<script>
$(document).ready(function() {
$(".target").effect( "bounce",
{times:3}, 300 );
function bouncee(){
$(".target").effect( "bounce",{times:3}, 300 );
setTimeout(bouncee(),1000);
}
setTimeout(bouncee(),1000);
});
</script>
</body>
</html>