Efecto con prototype -.-

HSSWebs 25 Sep, 2012, 3:03 pm

Buenas llevo horas tratando de hacer unos pequeños efectos con Prototype para mi foro.. pero por mas que trato no me resulta, busque pero la información esta bastante discontinuada & hay poca..

Quiero que el cambio de opacidad sea mas 'suave' ya que es muy brusco.. tengo el siguiente código..

Código PHP:
<?php 

var MK = {

    init: function()

    {    

        document.observe("dom:loaded", function()

        {

            $('logo').setStyle({opacity: 0.9});

            $('logo').observe('mouseover', function()

            {

                Effect.Shake('logo', {

                    duration: 0.7,

                    distance: 7

                });

                $('logo').setStyle({opacity: 1});

            });

            $('logo').observe('mouseout', function()

            {

                $('logo').setStyle({opacity: 0.9});

            });

        });

    }

}

Saludos & gracias :p

Jonatan H. 25 Sep, 2012, 4:01 pm

A que te refieres con "suave"?

¿Que se haga más lento, o que no halla tanta opacidad?

Última modificación: 25 Sep, 2012, 4:02 pm por Diversionl.

HSSWebs 25 Sep, 2012, 4:03 pm

A que el cambio sea como con transición, ya que aquí pasa la opacidad de 0.9 a 1 de golpe.

PD: Le puse esos valores para que no sé note el cambio tan brusco.

Jonatan H. 25 Sep, 2012, 4:36 pm

Con "duration: 0.7" no te cambia el tiempo que tarda en hacer el efecto?

HSSWebs 25 Sep, 2012, 4:39 pm

Si lo cambia por eso lo puse, ya que antes lo hacía mas rapido

Jonatan H. 25 Sep, 2012, 5:11 pm

Código PHP:
<?php 

var MK = {

    init: function()

    {    

        document.observe("dom:loaded", function()

        {

            $('logo').setStyle({opacity: 0.9});

            $('logo').observe('mouseover', function()

            {

                Effect.Shake('logo', {

                    duration: 0.7,

                    distance: 7

                });

                $('logo').animate({opacity: 0.5}, 1000);

            });

            $('logo').observe('mouseout', function()

            {

                $('logo').setStyle({opacity: 0.9});

            });

        });

    }

}

Prueba a ver, de todas maneras ahora que miro mejor el código:

La duratión y el distance es para otra animación que la transparencia, lo que hace es mover la imagen hacia un lado.

HSSWebs 25 Sep, 2012, 5:14 pm

No pasa nada, y deja de funcionar el efecto Shake..

Jonatan H. 25 Sep, 2012, 5:36 pm

Temía que no te funcionara, pasa que intenté editarlo con un elemento JQuery, y ahora revisando la API de prototype no tiene el elemento animate... por lo que pensé que si no la trae de por sí, podría hacerse un "híbrido", añadiéndole las propiedades con CSS, a lo que también descubrí, que solo acepta CSS2... y la mayoría de los efectos como el "Transition" que es el mas indicado para este caso pertenecen a CSS3...

La verdad nunca me había fijado en prototype ni me había documentado, parece que está algo anticuado, y esperemos mybb lo abandone pronto, dado la cantidad de mas extensas y completas librerías que existen a parte de esta...

Referente a tu duda... echa un vistazo a ver si encuentras algo por aquí:

http://api.prototypejs.org/

Escribe "Element" en el buscador para encontrarlos todos... yo lo he ojeado por encima y no vi nada que se asemejase al transition...

Editando....:::

Ahora se me ocurre en hacer un híbrido, pero en vez de entre Prototype y CSS, prototype y JQuery, vamos a probar Tongue

Código PHP:
<?php 

jQuery.noConflict(); 

var MK = {

    init: function()

    {    

        document.observe("dom:loaded", function()

        {

            $('logo').setStyle({opacity: 0.9});

            $('logo').observe('mouseover', function()

            {

                Effect.Shake('logo', {

                    duration: 0.7,

                    distance: 7

                });

                jQuery('logo').animate({opacity: 0.5}, 1000);

            });

            $('logo').observe('mouseout', function()

            {

                $('logo').setStyle({opacity: 0.9});

            });

        });

    }

}

Última modificación: 25 Sep, 2012, 5:45 pm por Diversionl.

HSSWebs 25 Sep, 2012, 5:43 pm

Si & esta descontinuado, pero quiero armar el foro solo con prototype para no tener problemas con otras librerías..

La verdad no lo había pensado & solo me estoy complicando -.- Pero haré el cambio de opacidad con CSS con transiciones & hover :p

Gracias por la ayuda. Aunque igual seguiré usándolo por ahora XD

Jonatan H. 25 Sep, 2012, 5:46 pm

#10

Te edité el post de arriba con una posible solución, pero no sería solo con prototype, ya que tendrías que añadir las librerías JQuery.

Además, no deberías tener problemas en usar prototype junto a jQuery, dado que jquery tiene el no.conflict, que añadiendolo al inicio del código puedes alternar prototype $('element) [etc]y jQuery jQuery('element') [etc].

Solo con prototype, si no me equivoco no es posible.

Última modificación: 25 Sep, 2012, 5:53 pm por Diversionl.