[SOLUCIONADO] Duda animacion JQuery

synatik · #1 (**permalink**) 01/09/2014, 09:46

Hola, bueno la duda es bastante tonta jeje

Hay alguna manera de que la animacion se active solo quando se muestre en pantalla?

Gracias de antemano ;)

Alexis88 · #2 (**permalink**) 01/09/2014, 10:12

Claro. Solo necesitas verificar que la cantidad de píxeles que se ha desplazado con la barra de desplazamiento vertical coincida con el espacio existente entre el tope de la página y el inicio del elemento. Aquí puedes ver un ejemplo y aquí el código.

Saludos

synatik · #3 (**permalink**) 01/09/2014, 10:31

vale ya he visto lo que me dices, mas o menos lo entiendo pero ando bastante perdido en javascript jeje

este es el codigo de mi animación, es un grafico de barras circulares, donde tendria que poner lo que tu me has dicho?

Tengo que ponerme enserio a estudiar javascript

Código HTML:

<script type="text/javascript">
var chartData = {
    "barCircleWeb":[
        {"index":0.3, "value":100, "fill":"#F70830", "label":"%  Learning"},
        {"index":0.4, "value":80, "fill":"#F82548", "label":"%  Ofimatica"},
        {"index":0.5, "value":80,  "fill":"#F93959", "label":"%  Sony Vegas Pro"},
        {"index":0.6, "value":70, "fill":"#F94D6A", "label":"%  HTML"},
        {"index":0.7, "value":70, "fill":"#FA617A", "label":"%  CSS3"},
        {"index":0.8, "value":60, "fill":"#FB748B", "label":"%  Photoshop"},
        {"index":0.9, "value":50, "fill":"#FB889B", "label":"%  PHP"},
        {"index":1, "value":50, "fill":"#FC9CAC", "label":"%  After Effects"},
        {"index":1.1, "value":50,  "fill":"#FDB0BD", "label":"%  mySQL/phpMyAdmin"},
        {"index":1.2, "value":30, "fill":"#FDC4CD", "label":"%  Javascript"}
    ]
};

function drawBarCircleChart(data,target,values,labels){
    var w = 362,
        h = 362,
        size = data[0].value * 1.15,
        radius = 200,
        sectorWidth = .1,
        radScale = 25,
        sectorScale = 1.45,
        target = d3.select(target),
        valueText = d3.select(values),
        labelText = d3.select(labels);


    var arc = d3.svg.arc()
        .innerRadius(function(d,i){return (d.index/sectorScale) * radius + radScale; })
        .outerRadius(function(d,i){return ((d.index/sectorScale) + (sectorWidth/sectorScale)) * radius + radScale; })
        .startAngle(Math.PI)
        .endAngle(function(d) { return Math.PI + (d.value / size) * 2 * Math.PI; });
    
    var path = target.selectAll("path")
        .data(data);

    //TODO: seperate color and index from data object, make it a pain to update object order
    path.enter().append("svg:path")
        .attr("fill",function(d,i){return d.fill})
        .attr("stroke","#000000")
        .transition()
        .ease("elastic")
        .duration(1000)
        .delay(function(d,i){return i*100})
        .attrTween("d", arcTween);
        
    valueText.selectAll("tspan").data(data).enter()
        .append("tspan")
        .attr({
            x:50,
            y:function(d,i){return i*14},       
            "text-anchor":"end"
        })
        .text(function(d,i){return data[i].value});
    
    labelText.selectAll("tspan").data(data).enter()
        .append("tspan")
        .attr({
            x:0,
            y:function(d,i){return i*14}
        })
        .text(function(d,i){return data[i].label});

    function arcTween(b) {
        var i = d3.interpolate({value: 0}, b);
        return function(t) {
            return arc(i(t));
        };
    }
}

// Animation Queue
setTimeout(function(){drawBarCircleChart(chartData.barCircleWeb,"#circleBar-web-chart","#circleBar-web-values","#circleBar-web-labels")},500);

d3.select("#circleBar-web-icon")
    .transition()
    .delay(500)
    .duration(500)
    .attr("opacity","1");
d3.select("#circleBar-web-text")
    .transition()
    .delay(750)
    .duration(500)
    .attr("opacity","1");

d3.select("#circleBar-web-clipLabels")
    .transition()
    .delay(600)
    .duration(1250)
    .attr("height","150");


</script>

Alexis88 · #4 (**permalink**) 01/09/2014, 10:52

¿Tu efecto se produce automáticamente o en qué momento?

synatik · #5 (**permalink**) 01/09/2014, 12:26

en un principio automaticamente

edit: acabo de ver que tiene un settimeout, pero eso no es problema con lo que quiero hacer yo no?

Alexis88 · #6 (**permalink**) 01/09/2014, 13:07

Depende. El método setTimeout retrasa la ejecución de ese bloque de código durante un tiempo que determines, que en tu caso son 500 milésimas de segundo (medio segundo). Tomando como referencia el ejemplo que te pasé, tu animación debería de estar ocupando el bloque que se ubica entre las líneas 10 y 11. Ojo, en el ejemplo, el efecto solo afecta a los elementos <div>, por lo que debes de adaptarlo a lo que tienes.

Saludos

synatik · #7 (**permalink**) 01/09/2014, 16:08

Seria algo asi?

Código HTML:

var divs = document.querySelectorAll("#circleBarCharts");

window.addEventListener("scroll", function(e){
    [].forEach.call(divs, function(div){
        if (this.scrollY > ('#circleBarCharts'.offsetTop - document.documentElement.clientHeight)){
            var chartData = {
    "barCircleWeb":[
        {"index":0.3, "value":100, "fill":"#F70830", "label":"%  Learning"},
        {"index":0.4, "value":80, "fill":"#F82548", "label":"%  Ofimatica"},
        {"index":0.5, "value":80,  "fill":"#F93959", "label":"%  Sony Vegas Pro"},
        {"index":0.6, "value":70, "fill":"#F94D6A", "label":"%  HTML"},
        {"index":0.7, "value":70, "fill":"#FA617A", "label":"%  CSS3"},
        {"index":0.8, "value":60, "fill":"#FB748B", "label":"%  Photoshop"},
        {"index":0.9, "value":50, "fill":"#FB889B", "label":"%  PHP"},
        {"index":1, "value":50, "fill":"#FC9CAC", "label":"%  After Effects"},
        {"index":1.1, "value":50,  "fill":"#FDB0BD", "label":"%  mySQL/phpMyAdmin"},
        {"index":1.2, "value":30, "fill":"#FDC4CD", "label":"%  Javascript"}
    ]
};

function drawBarCircleChart(data,target,values,labels){
    var w = 362,
        h = 362,
        size = data[0].value * 1.15,
        radius = 200,
        sectorWidth = .1,
        radScale = 25,
        sectorScale = 1.45,
        target = d3.select(target),
        valueText = d3.select(values),
        labelText = d3.select(labels);


    var arc = d3.svg.arc()
        .innerRadius(function(d,i){return (d.index/sectorScale) * radius + radScale; })
        .outerRadius(function(d,i){return ((d.index/sectorScale) + (sectorWidth/sectorScale)) * radius + radScale; })
        .startAngle(Math.PI)
        .endAngle(function(d) { return Math.PI + (d.value / size) * 2 * Math.PI; });
    
    var path = target.selectAll("path")
        .data(data);

    //TODO: seperate color and index from data object, make it a pain to update object order
    path.enter().append("svg:path")
        .attr("fill",function(d,i){return d.fill})
        .attr("stroke","#000000")
        .transition()
        .ease("elastic")
        .duration(1000)
        .delay(function(d,i){return i*100})
        .attrTween("d", arcTween);
        
    valueText.selectAll("tspan").data(data).enter()
        .append("tspan")
        .attr({
            x:50,
            y:function(d,i){return i*14},       
            "text-anchor":"end"
        })
        .text(function(d,i){return data[i].value});
    
    labelText.selectAll("tspan").data(data).enter()
        .append("tspan")
        .attr({
            x:0,
            y:function(d,i){return i*14}
        })
        .text(function(d,i){return data[i].label});

    function arcTween(b) {
        var i = d3.interpolate({value: 0}, b);
        return function(t) {
            return arc(i(t));
        };
    }
}

// Animation Queue
setTimeout(function(){drawBarCircleChart(chartData.barCircleWeb,"#circleBar-web-chart","#circleBar-web-values","#circleBar-web-labels")},500);

d3.select("#circleBar-web-icon")
    .transition()
    .delay(500)
    .duration(500)
    .attr("opacity","1");
d3.select("#circleBar-web-text")
    .transition()
    .delay(750)
    .duration(500)
    .attr("opacity","1");

d3.select("#circleBar-web-clipLabels")
    .transition()
    .delay(600)
    .duration(1250)
    .attr("height","150");
        }
        else{
            
        }
    });
}, false);

Alexis88 · #8 (**permalink**) 01/09/2014, 17:02

¿Y en qué momento afectas al/los elemento/s en cuestión?

No copies y pegues el código, adáptalo a lo que necesitas.

Saludos

synatik · #9 (**permalink**) 01/09/2014, 17:50

jajaja lo siento soy muy malo con el javascript

igualmente he cambiado la animación, ara es mucho mas sencilla.

el codigo sigue sin funcionarme xD intenta corregirme porfavor T.T

Código HTML:

var divs = document.querySelector("#animacion");

window.addEventListener("scroll", function(e){
    [].forEach.call(divs, function(animacion){
        if (this.scrollY > ("#animacion".offsetTop - document.documentElement.clientHeight)){
           jQuery(document).ready(function(){
	jQuery('.skillbar').each(function(){
		jQuery(this).find('.skillbar-bar').animate({
			width:jQuery(this).attr('data-percent')
		},6000);
	});
});
        }
        else
        }
    });
}, false);

Muchisimas gracias por todo ;)

Alexis88 · #10 (**permalink**) 01/09/2014, 22:12

Ordenando un poco el código, debería de ser así:

Código Javascript:

Ver originaljQuery(document).ready(function(){
    var div = document.querySelector("#animacion");
 
    window.addEventListener("scroll", function(){
        if (this.scrollY > (div.offsetTop - document.documentElement.clientHeight)){   
            jQuery('.skillbar').each(function(){
                jQuery(this).find('.skillbar-bar').animate({
                    width: jQuery(this).attr('data-percent')
                },6000);
            });
        }
    }, false);
});

No estoy seguro de que vaya a funcionar pues no conozco la estructura que tienes elaborada ni cómo es que debería de realizarse el efecto, pero puedes probar y si no es como lo querías, vuelves y nos lo comentas para ayudarte, pero siempre con un previo análisis tuyo.

Saludos