18041 sujets

Questions générales et questions de débutants

[Résolu] Dessiner différents svg au scroll

Bonjour,

Mon problème est surement simple à résoudre, mais après avoir longtemps testé et cherché je me tourne vers la communauté au sujet de la création de différents svg qui se "dessinent" au scroll.
Il y a beaucoup de tutos à ce sujet mais tous prennent en compte la hauteur de la fenêtre pour réaliser cet effet et ne réalisent l'effet que sur un svg.

Bien que cet effet soit réalisable sans plugin, j'utilise le plugin jquery Draw Svg. Dans la démo, il y a un exemple de l'effet que je souhaite au scroll. Tout fonctionne parfaitement.

Mon problème est que je souhaite réaliser cet effet sur une page composée de différentes sections, chacune d'elle comprenant un svg, l'animation du svg devant commencer quand la section devient visible dans la page ( et si possible se terminer avant d'être en haut de page ).

J'ai un lien de test avec mes essais :
lien vers code pen

La solution réside surement dans le calcul de la variable max ( j'ai déjà essayé de remplacé la hauteur de la fenêtre par la hauteur de ma section, mais ce n'est pas la bonne solution ): 

var $doc = $(document),
    $win = $(window),
    $svg = $('svg').drawsvg(),
    max = $doc.height() - $win.height();
$win.on('scroll', function() {
  var p = $win.scrollTop() / max;
  $svg.drawsvg('progress', p);
});

Je vous serai très reconnaissante de bien vouloir m'aider à trouver une solution. J'ai essayé de me tourner vers différents plugins tels que wyapoints.js , mais en vain...

D'avance merci
Bonsoir Piccolina,
j'ai repris ton code et corrigé pas grand chose pour que cela fonctionne.
Les explications sont en commentaire dans le code...

Bonne soirée,
GJboba


var $doc = $(document)
,	$win = $(window)
, $parents = $('section')
;

$parents.each ( function () {
  var $parent = $(this)
	,	$svg = $parent.find('svg')
	,	$parentHeight = $parent.height()
	;
	
	$win.on('scroll', function() {
    //hsv correspond à la hauteur de la section visible dans l'écran
	  var	hsv = $win.scrollTop() + $win.height() - $parent.offset().top;
    //Calcul d'un coefficient de freinage proportionnel à la place 
    //que prend la section dans la fenêtre pour que l'affichage ne se
    //termine pas dès que toute la section est visible dans la fenêtre
    var frein= $win.height() / $parentHeight;
    //Calcul du pourcentage de la fenêtre visible en fraction
    //sur lequel on applique le frein
    var p = hsv / $parentHeight / frein ;
    //Pour éviter les comportements bizard 
    //j'ai borné le coefficient de 0 à 1
    if (p>1) { p=1 } 
    else if (p<0) {p=0};
	  $svg.drawsvg('progress', p);
	});

});
Meilleure solution
Bonjour GJboba,

Déjà merci de ta réponse, et ensuite un grand merci pour ta solution.

C'est exactement l'effet que je recherchais. En plus ton idée de borner le coefficient est très bien, car en observant dans la console sa valeur, on obtenait parfois des valeurs négatives ou au-dessus de 1 alors que c'était sensé être compris entre 0 et 1.

Juste pour un complément d'info, sans vouloir abuser de ton temps :
- Dans le cas où j'accède à une section de ma page via un ancre par exemple ( donc c'est comme si on avait déjà scrollé ), est-il facilement possible d'initialiser le script à l'arrivée dans la page ? J'ai essayé de répéter le bout de code avant le 
$win.on('scroll'...
histoire d'initialiser les variables lorsque le DOM est chargé, mais ce n'est pas ça...

Mais déjà ta solution me convient très bien Smiley cligne
Encore merci
Sujet clos
Aller à