| Autor |
Mensaje |
-
dangrecks
Junior
Ubicación: México
|
 17-11-2013, 05:38 (UTC)
Título del mensaje: Volver Arriba Con Efecto Deslizante |
|
|
En este tutorial aprenderemos a poner un "Volver Arriba" o también algunos lo conocen como "Ir al Cielo" con un efecto deslizante y apareciendo al hacer scroll. Pueden ver el ejemplo entrando a mi sitio web y haciendo scroll hacia abajo.
Primero empezaremos la apariencia, para esto utilizaremos CSS, que se puede modificar a su gusto (El mismo código presenta lo que es cada parte del código.), Esto lo pegaremos en CSS-Design Sin Style Tags:
Cita: /* Posición */
#nach_oben {
position: fixed;
bottom: 30px;
margin-left: -150px; }
/* Apariencia del botón */
#nach_oben a {
width: auto;
padding: 7px 12px 7px 17px;
display: block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #FFFFFF;
font-size: 11px;
font-family: arial;
background-color: #70BA00;
/* Esquinas redondeadas */
border: 1px solid #c9c9c9;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* Transición */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s; }
/* Al contacto con el Mouse */
#nach_oben a:hover {
color: #fff;
background-color: #548C00;}
Luego seguiremos con la Magia de todo, el Script (No ocupa modificaciones, mas bien si sabes lo que haces, puedes modificárlo), Esto lo pegaremos en Texto Sobre el Diseño:
Cita: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// hide #nach_oben first
$("#nach_oben").hide();
// fade in #nach_oben
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#nach_oben').fadeIn();
} else {
$('#nach_oben').fadeOut();
}
});
// scroll body to 0px on click
$('#nach_oben a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
Y seguiremos con lo que lo hará funcionar, el HTML (Solo modificas el "Volver Arriba" por lo que quieres que diga), Esto lo pegaremos en Texto por Debajo de la Página:
Cita: <p id="nach_oben">
<a href="#top"><strong>Volver Arriba ↑</strong></a>
</p>
Aqui terminamos este Tutorial. Espero haber podido ayudar, Saludos! |
|
|
↑
|
|
 |
-
websoporte
Junior
|
17-11-2013, 21:52 (UTC)
Título del mensaje: |
|
|
Buen aporte  |
|
|
↑
|
|
|
-
design-pwg
Semi-Experto
Ubicación: Argentina
|
30-11-2013, 18:11 (UTC)
Título del mensaje: |
|
|
Hola!,
Este tema será movido a su respectivo Foro de selección próximamente.
Gracias por el aporte!
Moderador Design-PWG.______________ 
10 años ayudando a PWG.
 Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com |
|
|
↑
|
|
|
-
dangrecks
Junior
Ubicación: México
|
30-11-2013, 18:13 (UTC)
Título del mensaje: |
|
|
design-pwg escribió: Hola!,
Este tema será movido a su respectivo Foro de selección próximamente.
Gracias por el aporte!
Moderador Design-PWG.
Ok! Disculpe las Molestias xd
Saludos! |
|
|
↑
|
|
|
-
animetemplates
Junior
Ubicación: Rio Negro - Argentina
|
03-12-2013, 03:27 (UTC)
Título del mensaje: |
|
|
exelente aporte--!!  ______________  |
|
|
↑
|
|
|
-
dangrecks
Junior
Ubicación: México
|
04-12-2013, 21:12 (UTC)
Título del mensaje: |
|
|
animetemplates escribió: exelente aporte--!!
Gracias ! |
|
|
↑
|
|
|
-
aumentarvisitantesweb
Junior
|
05-12-2013, 16:31 (UTC)
Título del mensaje: Re: Volver Arriba Con Efecto Deslizante |
|
|
¡Qué excelente aporte!  ______________ –Ver mi perfil o entrar a mi página web:
 Ver mi perfil
Entrar a mi página web |
|
|
↑
|
|
|
-
dangrecks
Junior
Ubicación: México
|
05-12-2013, 22:06 (UTC)
Título del mensaje: Re: Volver Arriba Con Efecto Deslizante |
|
|
aumentarvisitantesweb escribió: ¡Qué excelente aporte!
Gracias! :D |
|
|
↑
|
|
|
|
