Como añadir una animación al scroll to top de tu web.

Durante lo últimos 6 meses me he dado cuenta de que he aprendido bastante, ya he sido capaz de crear mi primera App para iPhone y crear mi primer estúpido script en Github.

Por ahora solo he terminado una animación que consiste en el lanzamiento de un cohete, al hacerle 'click' al icono se pone en marcha la animación. La demo la podéis ver en este blog si hacéis "scroll", pero vayamos por partes.

Para ahorrarnos unas cuantas líneas de código en CSS vamos a usar prefixfree.js de @leaVerou. Este script nos permite poder escribir las propiedades CSS no soportadas por los navegadores sin la necesidad de colocar los "vendor prefix". Este script es muy bonito pero solo nos funcionará si lo utilizamos en un servidor web, de lo contrario sufriremos un error de "cross domain request".

Para utilizarlo tenemos dos opciones:

  1. Descargarlo y colocar la ruta de la carpeta donde se encuentra.
  2. Utilizar un CDN que tenga este script.
HTML
<!DOCTYPE html>  
<html>  
<head>  
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    <!-- Script para ahorrarse los vendor prefix en CSS-->
    <script src="prefixfree.min.js"></script>
</head>  
</body>

    <a href="#" class="scrollup">

        <span id="rocket" class="fa fa-rocket anime_rock"></span>
        <span class="clouds hide">
            <i class="fa fa-cloud cloud_1"></i>
            <i class="fa fa-cloud cloud_2"></i>
        </span>

    </a>

    <!-- Aquí iría todo el contenido!!-->


    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="scroll.js"></script>


</body>  
</html>  
  
CSS

Recuerda el tema de los "vendor prefix".

  
/* Animación para Scroll to top */

@keyframes  cloud_color {

    0%{color:#FFCA0C; opacity:0.8}

    100%{color:#FF2C0B; opacity:0.8}
}

@keyframes  move_rocket {

    0%{bottom:-16px}

    30%{bottom:-10px}

    60%{bottom:-6px}

    100%{bottom:0;font-size:20px}

}

.move_rocket{  
    animation: move_rocket 2s 1
}

.cloud_color{  
    animation: cloud_color 2s 1
}

.scrollup{  
    width: 40px ;
    height: 40px ;
    position: fixed ;
    bottom: 50px ;
    right: 100px ;
    display: none ;
    border-radius: 10px ;
    box-shadow: 0px 1px 5px #333 ;
    background: linear-gradient(to top,#67D4E8,#4595E8);
    z-index: 1;
}

.scrollup:hover{color: black }

.cloud_1,  
.cloud_2{  
    font-size: initial;
    position: relative
}

.cloud_1{  
    top: 18px;
    right: 14px;
    color: grey
}

.cloud_2{  
    top: -15px;
    right: -19px;
    color: #BFBFBF
}

.hide{  
    position: absolute;
    display: block;
    top: -9999px;
    left: -9999px
}    

Y para terminar

jQuery


/* Esperamos a que se carge el documento */

$(document).ready(function(){

    $(window).scroll(function(){

        if($(this).scrollTop() > 150) {

            $('.scrollup').fadeIn();

        } else if($(this).scrollTop()  ==  0){

            $('#rocket').removeClass('move_rocket');

            $('.clouds').addClass('hide');

        }  else {

            $('.scrollup').fadeOut();
        }                
    });

    $('.scrollup').click(function(){

        $('.clouds').removeClass('hide');

        $('.cloud_1').addClass('cloud_color');

        $('#rocket').addClass('move_rocket');

        $('html, body').animate({scrollTop: 0 }, 2000);

        return false;

    });
});  

Esto sería todo, tengo pensado hacer alguna animación más y convertirlo en un plugin. Antes tendría que publicar la App de una vez por todas, para antes de Abril esta fijo. ¿Estas seguro Albert? No

comments powered by Disqus