0
Donc, j'utilise le code suivant pour l'animation SVG sur le défilement. Le code semble fonctionner dans les navigateurs Chrome, Safari et Opera, mais je ne sais pas pourquoi l'animation de course ne fonctionne pas dans Mozilla Firefox et IE.SVG sur l'animation de défilement par défilement (css & jQuery) ne fonctionne pas dans Firefox et IE - Travailler dans Chrome, Safari, Opera
Exemple ici: jsfiddle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG animation on scroll</title>
<style>
.cir {
stroke-dasharray: 308;
stroke-dashoffset: 0;
fill-opacity: 0;
-webkit-animation: dash 1s linear forwards;
-o-animation: dash 1s linear forwards;
-moz-animation: dash 1s linear forwards;
animation: dash 1s linear forwards;
transition: fill-opacity 1s;
transition-delay: 1s;
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}
.circles.start .cir {
-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
animation-play-state: running;
}
.circles.addfill .cir { fill-opacity: 1; }
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 308;
}
100% {
stroke-dashoffset: 0;
}
@keyframes dash {
0% {
stroke-dashoffset: 308;
}
100% {
stroke-dashoffset: 0;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis quis arcu eu mattis. Suspendisse varius libero vitae dictum elementum. Sed eu metus magna. Quisque accumsan volutpat orci vel maximus. Donec et nunc quis justo aliquet dictum vitae vel nulla. Proin justo dui, mollis nec lectus eget, gravida porttitor neque. Curabitur porta eleifend lorem. Fusce a mollis ipsum. Quisque posuere ante et lacinia rhoncus. Proin rutrum venenatis turpis sed tempor.</p>
<p>Quisque semper, mi eget molestie eleifend, urna felis cursus sem, vitae consectetur nibh magna sed mi. Donec viverra fermentum purus, eu pulvinar elit consectetur rutrum. Suspendisse ipsum orci, dapibus at suscipit vitae, convallis sit amet justo. Fusce porta luctus velit eu mollis. Pellentesque rutrum eu nisl sit amet finibus. Phasellus ut risus venenatis, sollicitudin justo in, porta justo. Maecenas ultrices congue nunc eu feugiat. Etiam consectetur ac turpis id convallis. Ut ac fringilla tellus. Donec consectetur mollis massa. Curabitur diam eros, ultricies in gravida lobortis, tempor eget lacus. Aliquam nec metus dui. Nullam consequat erat sed mi dapibus elementum. Aliquam ultricies, sapien nec tempus facilisis, massa neque facilisis tortor, a lacinia nisl lacus at odio.</p>
<p>Aenean euismod semper augue, in dignissim odio congue congue. Cras sollicitudin augue ut varius bibendum. Nullam ut congue ante. Morbi pharetra dui lacinia, vulputate diam nec, ullamcorper risus. Nulla congue enim turpis, ac rhoncus odio dictum id. Fusce fermentum ullamcorper diam at imperdiet. Nulla tempor libero et arcu semper, eu luctus tortor blandit. Vivamus placerat nulla sit amet est accumsan, et tincidunt purus maximus. Sed elementum auctor sapien eu mollis. Vestibulum eu imperdiet lorem. Nam a placerat erat. Praesent dignissim ac enim sit amet malesuada. Maecenas vehicula, lacus eu vestibulum semper, dui magna dapibus odio, at venenatis lacus ex a purus. Pellentesque a nulla id nisl sagittis mattis ut ac odio. Nulla cursus porta ante, interdum rutrum erat ultrices vestibulum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis quis arcu eu mattis. Suspendisse varius libero vitae dictum elementum. Sed eu metus magna. Quisque accumsan volutpat orci vel maximus. Donec et nunc quis justo aliquet dictum vitae vel nulla. Proin justo dui, mollis nec lectus eget, gravida porttitor neque. Curabitur porta eleifend lorem. Fusce a mollis ipsum. Quisque posuere ante et lacinia rhoncus. Proin rutrum venenatis turpis sed tempor.</p>
<p>Quisque semper, mi eget molestie eleifend, urna felis cursus sem, vitae consectetur nibh magna sed mi. Donec viverra fermentum purus, eu pulvinar elit consectetur rutrum. Suspendisse ipsum orci, dapibus at suscipit vitae, convallis sit amet justo. Fusce porta luctus velit eu mollis. Pellentesque rutrum eu nisl sit amet finibus. Phasellus ut risus venenatis, sollicitudin justo in, porta justo. Maecenas ultrices congue nunc eu feugiat. Etiam consectetur ac turpis id convallis. Ut ac fringilla tellus. Donec consectetur mollis massa. Curabitur diam eros, ultricies in gravida lobortis, tempor eget lacus. Aliquam nec metus dui. Nullam consequat erat sed mi dapibus elementum. Aliquam ultricies, sapien nec tempus facilisis, massa neque facilisis tortor, a lacinia nisl lacus at odio.</p>
<p>Aenean euismod semper augue, in dignissim odio congue congue. Cras sollicitudin augue ut varius bibendum. Nullam ut congue ante. Morbi pharetra dui lacinia, vulputate diam nec, ullamcorper risus. Nulla congue enim turpis, ac rhoncus odio dictum id. Fusce fermentum ullamcorper diam at imperdiet. Nulla tempor libero et arcu semper, eu luctus tortor blandit. Vivamus placerat nulla sit amet est accumsan, et tincidunt purus maximus. Sed elementum auctor sapien eu mollis. Vestibulum eu imperdiet lorem. Nam a placerat erat. Praesent dignissim ac enim sit amet malesuada. Maecenas vehicula, lacus eu vestibulum semper, dui magna dapibus odio, at venenatis lacus ex a purus. Pellentesque a nulla id nisl sagittis mattis ut ac odio. Nulla cursus porta ante, interdum rutrum erat ultrices vestibulum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis quis arcu eu mattis. Suspendisse varius libero vitae dictum elementum. Sed eu metus magna. Quisque accumsan volutpat orci vel maximus. Donec et nunc quis justo aliquet dictum vitae vel nulla. Proin justo dui, mollis nec lectus eget, gravida porttitor neque. Curabitur porta eleifend lorem. Fusce a mollis ipsum. Quisque posuere ante et lacinia rhoncus. Proin rutrum venenatis turpis sed tempor.</p>
<p>Quisque semper, mi eget molestie eleifend, urna felis cursus sem, vitae consectetur nibh magna sed mi. Donec viverra fermentum purus, eu pulvinar elit consectetur rutrum. Suspendisse ipsum orci, dapibus at suscipit vitae, convallis sit amet justo. Fusce porta luctus velit eu mollis. Pellentesque rutrum eu nisl sit amet finibus. Phasellus ut risus venenatis, sollicitudin justo in, porta justo. Maecenas ultrices congue nunc eu feugiat. Etiam consectetur ac turpis id convallis. Ut ac fringilla tellus. Donec consectetur mollis massa. Curabitur diam eros, ultricies in gravida lobortis, tempor eget lacus. Aliquam nec metus dui. Nullam consequat erat sed mi dapibus elementum. Aliquam ultricies, sapien nec tempus facilisis, massa neque facilisis tortor, a lacinia nisl lacus at odio.</p>
<p>Aenean euismod semper augue, in dignissim odio congue congue. Cras sollicitudin augue ut varius bibendum. Nullam ut congue ante. Morbi pharetra dui lacinia, vulputate diam nec, ullamcorper risus. Nulla congue enim turpis, ac rhoncus odio dictum id. Fusce fermentum ullamcorper diam at imperdiet. Nulla tempor libero et arcu semper, eu luctus tortor blandit. Vivamus placerat nulla sit amet est accumsan, et tincidunt purus maximus. Sed elementum auctor sapien eu mollis. Vestibulum eu imperdiet lorem. Nam a placerat erat. Praesent dignissim ac enim sit amet malesuada. Maecenas vehicula, lacus eu vestibulum semper, dui magna dapibus odio, at venenatis lacus ex a purus. Pellentesque a nulla id nisl sagittis mattis ut ac odio. Nulla cursus porta ante, interdum rutrum erat ultrices vestibulum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis quis arcu eu mattis. Suspendisse varius libero vitae dictum elementum. Sed eu metus magna. Quisque accumsan volutpat orci vel maximus. Donec et nunc quis justo aliquet dictum vitae vel nulla. Proin justo dui, mollis nec lectus eget, gravida porttitor neque. Curabitur porta eleifend lorem. Fusce a mollis ipsum. Quisque posuere ante et lacinia rhoncus. Proin rutrum venenatis turpis sed tempor.</p>
<p>Quisque semper, mi eget molestie eleifend, urna felis cursus sem, vitae consectetur nibh magna sed mi. Donec viverra fermentum purus, eu pulvinar elit consectetur rutrum. Suspendisse ipsum orci, dapibus at suscipit vitae, convallis sit amet justo. Fusce porta luctus velit eu mollis. Pellentesque rutrum eu nisl sit amet finibus. Phasellus ut risus venenatis, sollicitudin justo in, porta justo. Maecenas ultrices congue nunc eu feugiat. Etiam consectetur ac turpis id convallis. Ut ac fringilla tellus. Donec consectetur mollis massa. Curabitur diam eros, ultricies in gravida lobortis, tempor eget lacus. Aliquam nec metus dui. Nullam consequat erat sed mi dapibus elementum. Aliquam ultricies, sapien nec tempus facilisis, massa neque facilisis tortor, a lacinia nisl lacus at odio.</p>
<p>Aenean euismod semper augue, in dignissim odio congue congue. Cras sollicitudin augue ut varius bibendum. Nullam ut congue ante. Morbi pharetra dui lacinia, vulputate diam nec, ullamcorper risus. Nulla congue enim turpis, ac rhoncus odio dictum id. Fusce fermentum ullamcorper diam at imperdiet. Nulla tempor libero et arcu semper, eu luctus tortor blandit. Vivamus placerat nulla sit amet est accumsan, et tincidunt purus maximus. Sed elementum auctor sapien eu mollis. Vestibulum eu imperdiet lorem. Nam a placerat erat. Praesent dignissim ac enim sit amet malesuada. Maecenas vehicula, lacus eu vestibulum semper, dui magna dapibus odio, at venenatis lacus ex a purus. Pellentesque a nulla id nisl sagittis mattis ut ac odio. Nulla cursus porta ante, interdum rutrum erat ultrices vestibulum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis quis arcu eu mattis. Suspendisse varius libero vitae dictum elementum. Sed eu metus magna. Quisque accumsan volutpat orci vel maximus. Donec et nunc quis justo aliquet dictum vitae vel nulla. Proin justo dui, mollis nec lectus eget, gravida porttitor neque. Curabitur porta eleifend lorem. Fusce a mollis ipsum. Quisque posuere ante et lacinia rhoncus. Proin rutrum venenatis turpis sed tempor.</p>
<p>Quisque semper, mi eget molestie eleifend, urna felis cursus sem, vitae consectetur nibh magna sed mi. Donec viverra fermentum purus, eu pulvinar elit consectetur rutrum. Suspendisse ipsum orci, dapibus at suscipit vitae, convallis sit amet justo. Fusce porta luctus velit eu mollis. Pellentesque rutrum eu nisl sit amet finibus. Phasellus ut risus venenatis, sollicitudin justo in, porta justo. Maecenas ultrices congue nunc eu feugiat. Etiam consectetur ac turpis id convallis. Ut ac fringilla tellus. Donec consectetur mollis massa. Curabitur diam eros, ultricies in gravida lobortis, tempor eget lacus. Aliquam nec metus dui. Nullam consequat erat sed mi dapibus elementum. Aliquam ultricies, sapien nec tempus facilisis, massa neque facilisis tortor, a lacinia nisl lacus at odio.</p>
<div class="circles">
<svg version="1.1" id="svg_circle1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.c1{fill::#000000;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
]]>
</style>
<circle class="c1 cir" cx="50" cy="50" r="49"/>
</svg>
</div>
<div class="circles">
<svg version="1.1" id="svg_circle2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.c2{fill:#f00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
]]>
</style>
<circle class="c2 cir" cx="50" cy="50" r="49" />
</svg>
</div>
<div class="circles">
<svg version="1.1" id="svg_circle3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.c3{fill:#0ff;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
]]>
</style>
<circle class="c3 cir" cx="50" cy="50" r="49"/>
</svg>
</div>
<div class="circles">
<svg version="1.1" id="svg_circle4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.c4{fill:#000000;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
]]>
</style>
<circle class="c4 cir" cx="50" cy="50" r="49"/>
</svg>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var circles = $(".circles");
$(window).on('scroll', function(){
circles.each(function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if(bottom_of_window > bottom_of_object){
$(this).delay(300)
.delay(i*300)
.queue(function(stroke) { $(this).addClass('start'); stroke(); })
.queue(function(fill) { $(this).addClass('addfill'); fill(); });
};
});
});
</script>
</body>
</html>
Merci pour la suggestion! J'ai essayé d'ajouter -moz-animation-play-state, mais ça ne marche toujours pas dans Firefox .. J'ai inspecté en chrome, et il m'a dit -moz-animation-play-state est un nom de propriété inconnu. Aucune idée de ce qui se passe ... Et j'ai testé dans IE11. –
Il a été animation-play-state (et non -moz-animation-play-state) dans Firefox depuis la version 16. –