Escala de tamaño de fuente basado en el DIV padre dinámico de anchura/altura (jQuery)

Abiertos a utilizar: jQuery /Javascript /PHP /CSS3 /HTML5

Lo que estoy tratando de lograr es cambiar dinámicamente el tamaño de fuente de un niño elemento en base a su padre ancho del div & altura. El div padre cambia de tamaño en hover usando jQuery. Ahora, quiero que el texto dentro de él para crecer & reducir junto con él (imaginar un zoom-in y zoom-out efecto).

Una pequeña demostración: http://jsfiddle.net/Aye4h/

El ejemplo de arriba muestra la fuente de cambio de tamaño de forma dinámica en el cambio de tamaño de ventana. Que muestra más o menos lo que estoy tratando de lograr, excepto que no será basando su tamaño de la ventana, pero a partir de su div padre.

… Algo así como el background-size propiedad CSS3, excepto con el texto.

Aquí está el código que he encontrado en internet (ENLACE) que pensé que podría utilizar.

Lo que hace el código es para un span dentro de un padre #sidebar:

<script type="text/javascript">
$(document).ready(function() {
    var originalFontSize = 12;
    var sectionWidth = $('#sidebar').width();

    $('#sidebar span').each(function(){
        var spanWidth = $(this).width();
        var newFontSize = (sectionWidth/spanWidth) * originalFontSize;
        $(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"});
    });
});
</script>

Mientras, aquí está mi código jQuery para los padres DIVs :

(Se las llama .bubbles, y sobre hover se expanden en tamaño)

$(window).bind("load", function() {

//LOAD BUBBLES
    $('.bubble').animate({
    opacity: 1,
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    margin: '-75%'
  }, 400, function() {


//NOW, LOAD HOVER EFFECTS
//THIS EXPANDS BUBBLES BY 20% OF THEIR WIDTH & HEIGHT WHEN HOVERED
        $(".bubble").on('scale', function(e, s) {
            var data = $.data(this, 'size'),
                w = data.width,
                h = data.height;
            $(this).stop().animate({
                width: w * s,
                height: h * s,
                marginLeft: data.marginLeft - w * (s-1) / 2,
                marginTop: data.marginTop - h * (s-1) / 2
            });
        }).each(function() {
            var $this = $(this);
            $.data(this, 'size', {
                width: $this.width(),
                height: $this.height(),
                marginLeft: parseInt($this.css('margin-left')),
                marginTop: parseInt($this.css('margin-top'))
            });
        }).hover(function() {
            $(this).trigger('scale', [1.2])
        }, function() {
            $(this).trigger('scale', [1.0])

            });
        });

 });

DEMOSTRACIÓN EN VIVO : http://174.127.117.20/~interact/

Ahora no sé cómo combinación de los dos. Mi código actual ya guarda el ancho & altura de la burbuja, & amplía la burbuja del 20% de su altura original & ancho a flotar…

Ahora mi pregunta es: cómo hago para incluir texto con este, de un niño elemento H1 (colocado en el interior de .bubble)? Quiero a escala de todo el interior .bubble a coincidir cuando se cambia de tamaño.
He descubierto métodos mencionados arriba, pero no sé cómo ponerlo en práctica con mi código actual, ya que exactamente no se aplican como es.

Toda ayuda sería muy apreciada, muchas gracias por su tiempo!

  • si utiliza px en lugar de % en jsfiddle en esta línea $('body').css('font-size', fontSize + 'px'); ¿qué sucede entonces? como aquí jsfiddle.net/Aye4h/1
  • Gracias por tu respuesta! No veo el modo en que se conecte a mi pregunta? El jsfiddle era simplemente mostrar lo que estoy tratando de lograr, pero no es el código que estoy trabajando con (dado que los cambios de tamaño de fuente basado en su tamaño de la ventana, &, NO de su padre: tamaño del elemento). Estoy tratando de conseguir el segundo.
InformationsquelleAutor Mafia | 2012-11-07

1 Kommentar

  1. 4

    He conseguido usando CSS3 escala:

    (… suponiendo que a.expand contiene nuestro contenido a escala.)

    a.expand {
        transition:all .8s; 
        -moz-transition:all .8s; /* FIREFOX */
        -webkit-transition:all .8s; /* SAFARI and CHROME */
        -o-transition:all .8s; /* OPERA */
    
    
        color: #fff;
        text-align: center;
        font-family: Arial, sans-serif;
        font-size: 2em;
        width: 250px; /* 2x WIDTH HERE */
        height: 250px;  /* 2x HEIGHT HERE */
    
        transform: scale(0.80);
        -webkit-transform: scale(0.80);
        -moz-transform: scale(0.80);
        -o-transform: scale(0.80);
        -ms-transform: scale(0.80);
    }
    
    a.expand:hover {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
    }

    Me inicialmente escala el contenido hacia abajo para evitar la pixelación/efecto borroso cuando se sobre-escalado de un elemento de su tamaño dado. El código anterior funciona perfectamente.


    La solución se hace enteramente con CSS3.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea