Efecto Rollover

Citar

Escrito el 20 Ene 2008 03:07 pm

Soy muy tonto, pero mucho.
Resulta que hoy he entrado aqui (blog muy recomendable) y me he quedado fascinado con ese efecto rollover que se desvanece lentamente... (Pulsad los botones y lo vereis)

¿Es simplemente un gif? ¿jQuery?
Si es solo un gif, ¿como me lo monto ahora que el CS3 no es tan colega con los gifs?

A ver si alguien sabe como hacer esta tontería.
Un saludo

Por Jamal

13 de clabLevel

Envíale un mensaje privado Email Web

Citar

Escrito el 20 Ene 2008 05:28 pm

esto es lo que tiene en el code html

Código :

<a class="blog animate_back" title="BLOG" href="http://rudeworks.com" style="overflow: visible; display: block; opacity: 1;">BLOG</a>

esto es lo que tiene en el code css

Código :

background-color   transparent
background-image   url(http://rudeworks.com/rw3/wp-content/themes/RUDEWORKS_v3/images/m_portfolio-blog.gif)
background-repeat   no-repeat
background-attachment   scroll
opacity   1

el truco del icono es que cuando pasas la propiedad css de opacity va cambiando de 0 a 0.1 y asi hasta 1

lo que no se es como consigue alterar ese atributo pero lo miro y te continuo informando

Por Theos

70 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 20 Ene 2008 05:31 pm

Theos escribió:

esto es lo que tiene en el code html

Código :

<a class="blog animate_back" title="BLOG" href="http://rudeworks.com" style="overflow: visible; display: block; opacity: 1;">BLOG</a>

esto es lo que tiene en el code css

Código :

background-color   transparent
background-image   url(http://rudeworks.com/rw3/wp-content/themes/RUDEWORKS_v3/images/m_portfolio-blog.gif)
background-repeat   no-repeat
background-attachment   scroll
opacity   1

el truco del icono es que cuando pasas la propiedad css de opacity va cambiando de 0 a 0.1 y asi hasta 1

lo que no se es como consigue alterar ese atributo pero lo miro y te continuo informando

y usa estas librerias... debe ser alguna de ella

Código :

<script src="http://rudeworks.com/rw3/wp-content/themes/RUDEWORKS_v3/js/jquery.1.2.1.js" type="text/javascript" charset="utf-8"></script>

      <script src="http://rudeworks.com/rw3/wp-content/themes/RUDEWORKS_v3/js/interface.1.2.js" type="text/javascript" charset="utf-8"></script>
      <script src="http://rudeworks.com/rw3/wp-content/themes/RUDEWORKS_v3/js/thickbox.3.1.js" type="text/javascript" charset="utf-8"></script>
      <script src="http://rudeworks.com/rw3/wp-content/themes/RUDEWORKS_v3/js/slideviewer.1.1.js" type="text/javascript" charset="utf-8"></script>
      <script src="http://rudeworks.com/rw3/wp-content/themes/RUDEWORKS_v3/js/easing.1.2.js" type="text/javascript" charset="utf-8"></script>
      <script src="http://rudeworks.com/rw3/wp-content/themes/RUDEWORKS_v3/js/rudeworks_jquery.js" type="text/javascript" charset="utf-8"></script>

Por Theos

70 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 21 Ene 2008 07:41 am

Muchas gracias Theos, supongo que mediante JS se consigue ese efecto de pasar lentamente la opacidad.
Un saludo y gracias otra vez

Por Jamal

13 de clabLevel

Envíale un mensaje privado Email Web

Citar

Escrito el 22 Ene 2008 11:17 am

Saludos, Jamal.
Theos ha posteado parte de este hilo en "XHTML, CSS, Javascript y AJAX".
Allí he puesto algo de cómo pienso que sería la solución a tu duda.

(en aquél foro, encontrarás más ayuda de JSP, que aquí)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 23 Ene 2008 06:12 am

Muchas gracias Rizome

Por Jamal

13 de clabLevel

Envíale un mensaje privado Email Web

Efecto Rollover

Escribe una respuesta rapida