El hombre que camina en CSS3

Estos días fueron mis dias de descanso así que perdon por no traerles nada :)



Tengo la meta de traerles 1 artículo al día pero no siempre puede cumplirse… menos si quiero traer cosas de cierta calidad…

Hace unos días me topé con un experimento de Adrew Hoyer, se llama The Walking Man y es todo lo que se puede esperar del nombre.

Un hombre, el mismo, que camina mediante CSS3.
El experimento solo funciona bajo navegadores con webkit (chrome por ejemplo)


Espero lo disfruten, Pagina de Andrew Hoyer, demo

Este es el código completo:

<style type="text/css" media="screen">
    #canvas {
        height: 600px;
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
    }

    #canvas div {
        position: absolute;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
    }

    #canvas:target div:not(.overlay) {
        border: 1px solid black;
    }

    #canvas:target div.me div{
        background: rgba(255, 255, 255, 0.25);
    }

    .me {
        top: 50px; left: 350px;
        -webkit-animation-name: me;
    }

    .me, .me div {
        background-repeat: no-repeat;
        -webkit-animation-duration: 1750ms;
    }

    .torso {
        width: 86px; height: 275px;
        background-image: url(me/torso.png);
    }

    .arm {
        left: 12px;
        -webkit-transform-origin: 20px 10px;
    }

    .right.arm {
        top: 93px;
        -webkit-animation-name: right-bicep;
    }
    .left.arm {
        top: 87px;
        -webkit-animation-name: left-bicep;
    }

    .bicep {
        height: 124px; width: 51px;
    }

    .right.bicep { background-image: url(me/right-bicep.png); }
    .left.bicep { background-image: url(me/left-bicep.png); }

    .forearm {
        top: 108px; left: 14px;
        width: 36px; height: 121px;
        -webkit-transform-origin: 3px 7px;
    }

    .right.forearm {
        background-image: url(me/right-forearm.png);
        -webkit-animation-name: right-forearm;
    }

    .left.forearm {
        background-image: url(me/left-forearm.png);
        -webkit-animation-name: left-forearm;
    }

    .leg {
        left: 6px;
        -webkit-transform-origin: 30px 20px;
        -webkit-animation-name: thigh;
    }

    .right.leg {
        top: 235px;
        -webkit-animation-name: right-thigh;
    }

    .left.leg {
        top: 225px;
        -webkit-animation-name: left-thigh;
    }

    .thigh {
        width: 70px; height: 145px;
    }

    .left.thigh { background-image: url(me/left-thigh.png); }
    .right.thigh { background-image: url(me/right-thigh.png); }

    .shin {
        top: 115px;
        width: 50px; height: 170px;
        background-image: url(me/shin.png);
        -webkit-transform-origin: 30px 25px;
    }

    .right.shin { -webkit-animation-name: right-shin; }
    .left.shin { -webkit-animation-name: left-shin; }

    .foot {
        top: 155px; left: 2px;
        width: 67px; height: 34px;
        background-image: url(me/foot.png);
        -webkit-transform-origin: 0 50%;
    }

    .right.foot { -webkit-animation-name: right-foot; }
    .left.foot { -webkit-animation-name: left-foot; }

    .toes {
        top: 9px; left: 66px;
        width: 28px; height: 25px;
        background-image: url(me/toes.png);
        -webkit-transform-origin: 0% 100%;
    }

    .right.toes { -webkit-animation-name: right-toes; }
    .left.toes { -webkit-animation-name: left-toes; }

    .shadow {
        width: 200px; height: 70px;
        left: 270px; bottom: 5px;
        background-image: url(misc/shadow.png);
        -webkit-animation-name: shadow;
    }

    /* setting proper z-indexes so that limbs show up correctly */

    div.right.arm { z-index: 1; }
    div.left.arm { z-index: -3; }
    div.arm > div.bicep > div.forearm { z-index: -1; }

    div.right.leg { z-index: -1; }
    div.left.leg { z-index: -2; }
    div.leg > div.thigh > div.shin { z-index: -1; }

    /* animations */

    @-webkit-keyframes me {
        0% { -webkit-transform:   rotate(5deg) translate( 5px,   0px); }
        25% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }
        50% { -webkit-transform:  rotate(5deg) translate( 5px,   0px); }
        75% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }
        100% { -webkit-transform: rotate(5deg) translate( 5px,   0px); }
    }

    @-webkit-keyframes right-bicep {
        0%   { -webkit-transform: rotate(26deg); }
        50%  { -webkit-transform: rotate(-20deg); }
        100% { -webkit-transform: rotate(26deg); }
    }

    @-webkit-keyframes left-bicep {
        0%   { -webkit-transform: rotate(-20deg); }
        50%  { -webkit-transform: rotate(26deg); }
        100% { -webkit-transform: rotate(-20deg); }
    }

    @-webkit-keyframes right-forearm {
        0%   { -webkit-transform: rotate(-10deg); }
        50%  { -webkit-transform: rotate(-45deg); }
        100% { -webkit-transform: rotate(-10deg); }
    }

    @-webkit-keyframes left-forearm {
        0%   { -webkit-transform: rotate(-45deg); }
        50%  { -webkit-transform: rotate(-10deg); }
        100% { -webkit-transform: rotate(-45deg); }
    }

    @-webkit-keyframes right-thigh {
        0%   { -webkit-transform: rotate(-45deg); }
        50%  { -webkit-transform: rotate(10deg); }
        100% { -webkit-transform: rotate(-45deg); }
    }

    @-webkit-keyframes left-thigh {
        0%   { -webkit-transform: rotate(10deg); }
        50%  { -webkit-transform: rotate(-45deg); }
        100% { -webkit-transform: rotate(10deg); }
    }

    @-webkit-keyframes right-shin {
        0%   { -webkit-transform: rotate(30deg); }
        25%  { -webkit-transform: rotate(20deg); }
        50%  { -webkit-transform: rotate(20deg); }
        75%  { -webkit-transform: rotate(85deg); }
        100% { -webkit-transform: rotate(30deg); }
    }

    @-webkit-keyframes left-shin {
        0%   { -webkit-transform: rotate(20deg); }
        25%  { -webkit-transform: rotate(85deg); }
        50%  { -webkit-transform: rotate(30deg); }
        75%  { -webkit-transform: rotate(20deg); }
        100% { -webkit-transform: rotate(20deg); }
    }

    @-webkit-keyframes right-foot {
        0%   { -webkit-transform: rotate(-5deg); }
        25%  { -webkit-transform: rotate(-7deg); }
        50%  { -webkit-transform: rotate(-16deg); }
        75%  { -webkit-transform: rotate(-10deg); }
        100% { -webkit-transform: rotate(-5deg); }
    }

    @-webkit-keyframes left-foot {
        0%   { -webkit-transform: rotate(-16deg); }
        25%  { -webkit-transform: rotate(-10deg); }
        50%  { -webkit-transform: rotate(-5deg); }
        75%  { -webkit-transform: rotate(-7deg); }
        100% { -webkit-transform: rotate(-16deg); }
    }

    @-webkit-keyframes right-toes {
        0%   { -webkit-transform: rotate(0deg); }
        25%  { -webkit-transform: rotate(-10deg); }
        50%  { -webkit-transform: rotate(-10deg); }
        75%  { -webkit-transform: rotate(-25deg); }
        100% { -webkit-transform: rotate(0deg); }
    }

    @-webkit-keyframes left-toes {
        0%   { -webkit-transform: rotate(-10deg); }
        25%  { -webkit-transform: rotate(-25deg); }
        50%  { -webkit-transform: rotate(0deg); }
        75%  { -webkit-transform: rotate(-10deg); }
        100% { -webkit-transform: rotate(-10deg); }
    }

    @-webkit-keyframes shadow {
        0%   { opacity: 1; }
        25%  { opacity: 0.75; }
        50%  { opacity: 1; }
        75%  { opacity: 0.75; }
        100% { opacity: 1; }
    }

    .overlay {
        width: 100%; height: 100%;
        background: url(misc/gradient-left.png) repeat-y top left,
                    url(misc/gradient-right.png) repeat-y top right;
    }

    .sky div {
        background-repeat: no-repeat;
        -webkit-animation-name: prop-1200;
    }

    .cloud-1, .cloud-2 {
        width: 82px; height: 90px;
        background-image: url(clouds/1.png);
        -webkit-animation-duration: 120s;
    }

    .cloud-3, .cloud-4 {
        top: 70px;
        width: 159px; height: 90px;
        background-image: url(clouds/2.png);
        -webkit-animation-duration: 80s;
    }

    .cloud-5, .cloud-6 {
        top: 30px;
        width: 287px; height: 62px;
        background-image: url(clouds/3.png);
        -webkit-animation-duration: 140s;
    }

    .cloud-7, .cloud-8 {
        top: 100px;
        width: 94px; height: 81px;
        background-image: url(clouds/4.png);
        -webkit-animation-duration: 90s;
    }

    .cloud-1 { left: 0px; }
    .cloud-2 { left: 1200px; }

    .cloud-3 { left: 250px; }
    .cloud-4 { left: 1450px; }

    .cloud-5 { left: 500px; }
    .cloud-6 { left: 1700px; }

    .cloud-7 { left: 950px; }
    .cloud-8 { left: 2150px; }

    .horizon {
        top: 350px;
        width: 1800px; height: 50px;
        background: url(misc/horizon.png) repeat-x;
        -webkit-animation-name: prop-600;
        -webkit-animation-duration: 40s;
    }

    .ground div {
        background-repeat: no-repeat;
        -webkit-animation-name: prop-2000;
    }

    .sign-all-css {
        width: 160px; height: 188px;
        top: 325px; left: 1600px;
        background-image: url(signs/all-css.png);
        -webkit-animation-duration: 35s;
    }

    .sign-lots-of-divs {
        width: 102px; height: 120px;
        top: 345px; left: 1150px;
        background-image: url(signs/lots-of-divs.png);
        -webkit-animation-duration: 56s;
    }

    .sign-no-js {
        width: 65px; height: 77px;
        top: 348px; left: 1150px;
        background-image: url(signs/no-js.png);
        -webkit-animation-duration: 71s;
    }

    .sign-best {
        width: 43px; height: 50px;
        top: 350px; left: 1000px;
        background-image: url(signs/best.png);
        -webkit-animation-duration: 95s;
    }

    @-webkit-keyframes prop-600 {
        0%   { -webkit-transform: translateX(0px); }
        100% { -webkit-transform: translateX(-600px); }
    }

    @-webkit-keyframes prop-1200 {
        0%   { -webkit-transform: translateX(0px); }
        100% { -webkit-transform: translateX(-1200px); }
    }

    @-webkit-keyframes prop-2000 {
        0%   { -webkit-transform: translateX(0px); }
        100% { -webkit-transform: translateX(-2000px); }
    }

</style>

<p style="text-align: center">This experiment is only designed to work <b>only in webkit browsers</b> (chrome and safari).</p>

<div id="canvas">
    <div class="sky">
        <div class="cloud-1"></div>
        <div class="cloud-2"></div>
        <div class="cloud-3"></div>
        <div class="cloud-4"></div>
        <div class="cloud-5"></div>
        <div class="cloud-6"></div>
        <div class="cloud-7"></div>
        <div class="cloud-8"></div>
    </div>

    <div class="horizon"></div>

    <div class="ground">
        <div class="sign-best"></div>
        <div class="sign-no-js"></div>
        <div class="sign-lots-of-divs"></div>
        <div class="sign-all-css"></div>
    </div>

    <!-- skeleton and shadow -->
    <div class='shadow'></div>

    <div class='me'>

        <div class="torso">
            <div class="left leg">
                <div class="left thigh">
                    <div class="left shin">
                        <div class="left foot">
                            <div class="left toes"></div>
                        </div>
                    </div>
                </div>
            </div> <!-- left leg -->

            <div class="right leg">
                <div class="right thigh">
                    <div class="right shin">
                        <div class="right foot">
                            <div class="right toes"></div>
                        </div>
                    </div>
                </div>
            </div> <!-- right leg -->

            <div class="left arm">
                <div class="left bicep">
                    <div class="left forearm"></div>
                </div>
            </div> <!-- left arm -->

            <div class="right arm">
                <div class="right bicep">
                    <div class="right forearm"></div>
                </div>
            </div> <!-- right arm -->

        </div> <!-- torso -->
    </div> <!-- me -->

    <div class="overlay"></div>

</div> <!-- canvas -->

<p style='text-align: center'><a href='#canvas'>Show</a> / <a href="#">Hide</a> Element Borders.</p>

2 Responses to El hombre que camina en CSS3

  1. skamasle dice:

    Esta es buena, creo que la puse en skamasle un día, se ve bien aunque según que navegador va fatal……

  2. Nax dice:

    La verdad es que sí.

    El problema está en que los transforms de imagenes son pocos navegadores los que lo manejan bien aún.. y eso entre otras cosas…

    Hace ya unos días que he encontrado buenos recursos de css3.
    Hace tiempo vi unos laboratorios bastante curiosos y ahora me estoy topando con sus codigos.. .:P

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">