11487 sujets

JavaScript, DOM et API Web HTML5

Retarder l'animation de gauges circulaires

Bonsoir,
J'ai mis des gauges sur ma page web qui "s'animent" dès l'ouverture de la page. Les gauges étant en bas de page, l'animation est invisible (car terminée) quand on accède à la div.
Y'a t'il moyen de déclencher l'action uniquement quand accède à la div ?
Voici mon html :
<div id="myStat1" data-dimension="250" data-info="test1" data-width="30" data-fontsize="38" data-percent="80" data-fgcolor="#61a9dc" data-bgcolor="#eee"></div>
<div id="myStat2" data-dimension="250" data-text="85%" data-info="test2" data-width="30" data-fontsize="38" data-percent="85" data-fgcolor="#61a9dc" data-bgcolor="#eee">

et j'utilise le JQuery Circliful dont voici un code pen.
http://codepen.io/jacobhummel/pen/kyugL
Merci pour votre aide,
D.
Il faut passer la valeur du sroll actuel de la fenêtre

window.pageYOffset || document.documentElement.scrollTop

par rapport à la postion de ta <div>

taDiv.offsetTop

Tu fais un petit calcul pour voir où en est le scroll.
Bonsoir Zelalzan et JENCAL,
Merci pour vos réponse Smiley smile .
Je ne peux jouer que sur la position du div par rapport au top, et non par rapport au body (mon site étant responsive). Jusqu'à présent, je n'ai utilisé ce genre de script que pour faire apparaître un div quand il arrive à Xpx du top.
Peut-être as-tu répondu à cette question Zelaltan, mais étant nul en JS Smiley ohwell
Donc pas de % ou de px JENCAL, mais merci pour ton lien et le codepen, j'en suis friand Smiley cligne
Merci pour votre aide et bonne soirée,
D.
dhillig a écrit :
Peut-être as-tu répondu à cette question Zelaltan...

Moi c'est Zelalsan Smiley baille , Zelaltan étant mon grand-père...

Le fait que ton site soit responsif ne change rien à la donne étant donné que la valeur de la position actuelle de ta div se calcule à chaque scroll.
L'exemple de JENCAL est bon. Voilà à peu près le même exemple sans JQuery
Bonsoir Zelalsan,
Désolé pour la faute Smiley cligne
Merci pour ta réponse ainsi que JENCAL pour la sienne. Le problème est que je n'arrive à comprendre le script.
Si la div atteint top:0 via le scoll = animation ?
Voici une page test pour tenter d'y comprendre qq chose Smiley bawling 
<!doctype html>
<html>

<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
    body {
        text-align: center;
        padding: 0px;
        margin: 0px;
    }
    /* clearfix */
.div {
	width: 100%;
	height: 500px;
	background-color: #660066;
}
    .clear:before,
    .clear:after {
        content: "";
        display: table;
    }

    .clear:after {
        clear: both;
    }

    .clear {
        *zoom: 1
	margin-top: 0px;
	margin-top: 0%;
}

    .wrapper {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 30px;
        border: 1px solid #cccccc;
    }

    .gauge {
        display: block;
        float: left;
    }

    #g1 {
	width: 20%;
	margin-top: 0%;
    }

    </style>
</head>

<body>
<div class="wrapper">
<a href="#g1">
<button>g1</button>
</a>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>

<div class="clear">
  <div id="g1" class="gauge"></div>
    </div></div>
    <script src="../raphael-2.1.4.min.js"></script>
    <script src="../justgage-1.1.0.min.js"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var g1;

        var g1 = new JustGage({
            id: "g1",
            value: getRandomInt(0, 1000),
            min: 0,
            max: 1000,
            relativeGaugeSize: true,
            donut: true
        });
    });
    </script>
    <script>
var div = document.getElementById("g1");

window.addEventListener("scroll", function(){
  animer = (window.pageYOffset || document.documentElement.scrollTop) + document.documentElement.clientHeight > div.offsetTop;}, false);
</script>
</body>

</html>

Merci pour votre aide et bonne fin de week-end,
D.
Modifié par dhillig (07 Dec 2015 - 14:37)
Sujet clos
Aller à