Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Duda animacion JQuery

Estas en el tema de Duda animacion JQuery en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/09/2014, 09:46
 
Fecha de Ingreso: agosto-2014
Mensajes: 10
Antigüedad: 8 años, 5 meses
Puntos: 0
Duda animacion JQuery

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 ;)
  #2 (permalink)  
Antiguo 01/09/2014, 10:12
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.546
Antigüedad: 11 años, 2 meses
Puntos: 972
Respuesta: Duda animacion JQuery

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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 01/09/2014, 10:31
 
Fecha de Ingreso: agosto-2014
Mensajes: 10
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Duda animacion JQuery

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> 
  #4 (permalink)  
Antiguo 01/09/2014, 10:52
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.546
Antigüedad: 11 años, 2 meses
Puntos: 972
Respuesta: Duda animacion JQuery

¿Tu efecto se produce automáticamente o en qué momento?
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #5 (permalink)  
Antiguo 01/09/2014, 12:26
 
Fecha de Ingreso: agosto-2014
Mensajes: 10
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Duda animacion JQuery

en un principio automaticamente

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

Última edición por synatik; 01/09/2014 a las 12:41
  #6 (permalink)  
Antiguo 01/09/2014, 13:07
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.546
Antigüedad: 11 años, 2 meses
Puntos: 972
Respuesta: Duda animacion JQuery

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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #7 (permalink)  
Antiguo 01/09/2014, 16:08
 
Fecha de Ingreso: agosto-2014
Mensajes: 10
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Duda animacion JQuery

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);
  #8 (permalink)  
Antiguo 01/09/2014, 17:02
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.546
Antigüedad: 11 años, 2 meses
Puntos: 972
Respuesta: Duda animacion JQuery

¿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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #9 (permalink)  
Antiguo 01/09/2014, 17:50
 
Fecha de Ingreso: agosto-2014
Mensajes: 10
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Duda animacion JQuery

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 ;)
  #10 (permalink)  
Antiguo 01/09/2014, 22:12
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.546
Antigüedad: 11 años, 2 meses
Puntos: 972
Respuesta: Duda animacion JQuery

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

Código Javascript:
Ver original
  1. jQuery(document).ready(function(){
  2.     var div = document.querySelector("#animacion");
  3.  
  4.     window.addEventListener("scroll", function(){
  5.         if (this.scrollY > (div.offsetTop - document.documentElement.clientHeight)){  
  6.             jQuery('.skillbar').each(function(){
  7.                 jQuery(this).find('.skillbar-bar').animate({
  8.                     width: jQuery(this).attr('data-percent')
  9.                 },6000);
  10.             });
  11.         }
  12.     }, false);
  13. });

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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: animacion, javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:01.