Foros del Web » Programando para Internet » Javascript »

Scroll animate

Estas en el tema de Scroll animate en el foro de Javascript en Foros del Web. Hola! Tengo una barra de redes sociales en una web que necesito que cuando haga scroll esté como transparente y más pequeña. Logre que sea ...
  #1 (permalink)  
Antiguo 13/08/2015, 09:04
 
Fecha de Ingreso: junio-2015
Mensajes: 18
Antigüedad: 8 años, 10 meses
Puntos: 0
Scroll animate

Hola!
Tengo una barra de redes sociales en una web que necesito que cuando haga scroll esté como transparente y más pequeña. Logre que sea transparente pero no puedo hacer que se achique.
Cómo puedo hacerlo?
Este es el código html
Código HTML:
<div class="content_fullwidth">
<div id="redes" class="featured_section69" style="text-align:center;position:sticky;bottom:60px;display:block;position:fixed;">
<div class="container">
	<ul>
	<li style="display: inline;margin-right:15px;"><a href="https://www.facebook.com/oficialidp?fref=nf" target="_blank"><img src="images/facebook.png" /></a></li>
	<li style="display: inline;margin-right:15px;"><a href="https://twitter.com/" target="_blank"><img src="images/twitter.png" /></a></li>
	<li style="display: inline;margin-right:15px;"><a href="https://www.linkedin.com/hp/?dnr=nLTRz8eCKiuUR-Je_kFQihjnKiuUR-DAJTFF" target="_blank"><img src="images/linkedin.png" /></a></li>
	<li style="display: inline;margin-right:15px;"><a href="https://plus.google.com/u/1/115557945341348737807/posts" target="_blank"><img src="images/google+.png" /></a></li>
	<li style="display: inline;margin-right:15px;"><a href="http://institutodelpetroleo.educativa.org/acceso.cgi?id_curso=" target="_blank"><img src="images/alumno.png" /></a></li>
	</ul>

 </div>
</div><!-- end featured section 69 -->


<div class="clearfix margin_top12"></div>



</div><!-- end content area --> 
Y este es el código que use para darle la transparencia

Código:
<script type="text/javascript" src="transparente.js"></script>
        <script type="text/javascript">
            $(function() {
                $(window).scroll(function(){
					var scrollTop = $(window).scrollTop();
					if(scrollTop != 0)
						$('#redes').stop().animate({'opacity':'0.2'},400);
					else	
						$('#redes').stop().animate({'opacity':'0.2'},400);
				});
				
				$('#redes').hover(
					function (e) {
						var scrollTop = $(window).scrollTop();
						if(scrollTop != 0){
							$('#redes').stop().animate({'opacity':'1'},400);
						}
					},
					function (e) {
						var scrollTop = $(window).scrollTop();
						if(scrollTop != 0){
							$('#redes').stop().animate({'opacity':'1'},400);
						}
					}
				);
            });
        </script>
Intente con width y con background-size pero nada..

Me ayudan?
Gracias!!!!!

Etiquetas: html, js, scroll
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 16:51.