Como aplicar este estilo?

Namaris #1 Jun '15

Hola,

soy un novato en practicas de CSS y estaba intentando replicar esta animación en CSS que me pareció muy chula:

http://daneden.github.io/animate.css/

Pido paciencia y simplicidad para contestarme porque no estoy todavia al nivel que estan los que trabajan a diario con esto.

Esto es lo que he hecho:

http://rlvconsulting.es/namaris/index.html (imagino que con el Inspector element podreís ver el código)

Porque el resultado no me queda igual que la pagina demo? Con esa bonita fuente y colores cambiando?

Es que a caso se usa algo más que CSS en este caso?

B

[Borrado] #2 Jun '15

#1 Porque es solo un efecto de CSS, tienes que aplicarlo a lo que quieras, una imagen, un texto de colores o lo que quieras, no te queda así como en la primera web ya que tu no tienes ese contenido. En este caso en la primera web a aplicado ese codigo / efecto css a el conjunto (titulo, bloque, etc...)

1 respuesta

Namaris #3 Jun '15

#2 Y donde esta ese codigo para usarlo? Porque con el Inspector Element estoy mirando el codigo de la primera web y no veo mucho más de lo que yo he usado (copiad)

1 respuesta

B

[Borrado] #4 Jun '15

#3 mira bien el código fuente entero, no solo hay CSS hay html, hay header, hay un wrap, hay un titlebox, etc... tu solo estas usando el efecto css en un "hola" si quieres igual que la web pues copia el codigo fuente de la web o haz lo mismo, un title un wrap, un box, etc..

1 respuesta

Namaris #5 Jun '15

#4 Repito que soy nuevo en el tema, pero ya llevo algunos tutoriales leidos y que haya HTML cuando trato de usar CSS es algo obvio. El header, el wrap y el tiitlebox siguen siendo parte del html.

Acabo de copiar todo el codigo para probar y mira lo que ha pasado: http://rlvconsulting.es/namaris/index.html

Y los dos archivos css estan subidos al FTP dentro de la misma carpeta...

1 respuesta

B

[Borrado] #6 Jun '15

#5 acabo de ver tu web y no veo que hayas metido mas que el css, te falta todo este código:

<!DOCTYPE html>
<!-- saved from url=(0037)http://daneden.github.io/animate.css/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Animate.css</title>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, minimal-ui">

  <link rel="dns-prefetch" href="http://fonts.googleapis.com/">
  <link rel="dns-prefetch" href="http://code.jquery.com/">

  <link href="./Animate.css_files/css" rel="stylesheet" type="text/css">

  <link rel="stylesheet" href="http://daneden.github.io/animate.css/animate.min.css">
  <link rel="stylesheet" href="http://daneden.github.io/animate.css/style.css">
</head>
<body>
<header class="site__header island">
  <div class="wrap">
   <span id="animationSandbox" style="display: block;"><h1 class="site__title mega">Animate.css</h1></span>
    <span class="beta subhead">Just-add-water CSS animations</span>
  </div>
</header><!-- /.site__header -->

<main class="site__content island" role="content">
  <div class="wrap">
    <form>
      <select class="input input--dropdown js--animations">
        <optgroup label="Attention Seekers">
          <option value="bounce">bounce</option>
          <option value="flash">flash</option>
          <option value="pulse">pulse</option>
          <option value="rubberBand">rubberBand</option>
          <option value="shake">shake</option>
          <option value="swing">swing</option>
          <option value="tada">tada</option>
          <option value="wobble">wobble</option>
          <option value="jello">jello</option>
        </optgroup>

    <optgroup label="Bouncing Entrances">
      <option value="bounceIn">bounceIn</option>
      <option value="bounceInDown">bounceInDown</option>
      <option value="bounceInLeft">bounceInLeft</option>
      <option value="bounceInRight">bounceInRight</option>
      <option value="bounceInUp">bounceInUp</option>
    </optgroup>

    <optgroup label="Bouncing Exits">
      <option value="bounceOut">bounceOut</option>
      <option value="bounceOutDown">bounceOutDown</option>
      <option value="bounceOutLeft">bounceOutLeft</option>
      <option value="bounceOutRight">bounceOutRight</option>
      <option value="bounceOutUp">bounceOutUp</option>
    </optgroup>

    <optgroup label="Fading Entrances">
      <option value="fadeIn">fadeIn</option>
      <option value="fadeInDown">fadeInDown</option>
      <option value="fadeInDownBig">fadeInDownBig</option>
      <option value="fadeInLeft">fadeInLeft</option>
      <option value="fadeInLeftBig">fadeInLeftBig</option>
      <option value="fadeInRight">fadeInRight</option>
      <option value="fadeInRightBig">fadeInRightBig</option>
      <option value="fadeInUp">fadeInUp</option>
      <option value="fadeInUpBig">fadeInUpBig</option>
    </optgroup>

    <optgroup label="Fading Exits">
      <option value="fadeOut">fadeOut</option>
      <option value="fadeOutDown">fadeOutDown</option>
      <option value="fadeOutDownBig">fadeOutDownBig</option>
      <option value="fadeOutLeft">fadeOutLeft</option>
      <option value="fadeOutLeftBig">fadeOutLeftBig</option>
      <option value="fadeOutRight">fadeOutRight</option>
      <option value="fadeOutRightBig">fadeOutRightBig</option>
      <option value="fadeOutUp">fadeOutUp</option>
      <option value="fadeOutUpBig">fadeOutUpBig</option>
    </optgroup>

    <optgroup label="Flippers">
      <option value="flip">flip</option>
      <option value="flipInX">flipInX</option>
      <option value="flipInY">flipInY</option>
      <option value="flipOutX">flipOutX</option>
      <option value="flipOutY">flipOutY</option>
    </optgroup>

    <optgroup label="Lightspeed">
      <option value="lightSpeedIn">lightSpeedIn</option>
      <option value="lightSpeedOut">lightSpeedOut</option>
    </optgroup>

    <optgroup label="Rotating Entrances">
      <option value="rotateIn">rotateIn</option>
      <option value="rotateInDownLeft">rotateInDownLeft</option>
      <option value="rotateInDownRight">rotateInDownRight</option>
      <option value="rotateInUpLeft">rotateInUpLeft</option>
      <option value="rotateInUpRight">rotateInUpRight</option>
    </optgroup>

    <optgroup label="Rotating Exits">
      <option value="rotateOut">rotateOut</option>
      <option value="rotateOutDownLeft">rotateOutDownLeft</option>
      <option value="rotateOutDownRight">rotateOutDownRight</option>
      <option value="rotateOutUpLeft">rotateOutUpLeft</option>
      <option value="rotateOutUpRight">rotateOutUpRight</option>
    </optgroup>

    <optgroup label="Sliding Entrances">
      <option value="slideInUp">slideInUp</option>
      <option value="slideInDown">slideInDown</option>
      <option value="slideInLeft">slideInLeft</option>
      <option value="slideInRight">slideInRight</option>

    </optgroup>
    <optgroup label="Sliding Exits">
      <option value="slideOutUp">slideOutUp</option>
      <option value="slideOutDown">slideOutDown</option>
      <option value="slideOutLeft">slideOutLeft</option>
      <option value="slideOutRight">slideOutRight</option>
      
    </optgroup>
    
    <optgroup label="Zoom Entrances">
      <option value="zoomIn">zoomIn</option>
      <option value="zoomInDown">zoomInDown</option>
      <option value="zoomInLeft">zoomInLeft</option>
      <option value="zoomInRight">zoomInRight</option>
      <option value="zoomInUp">zoomInUp</option>
    </optgroup>
    
    <optgroup label="Zoom Exits">
      <option value="zoomOut">zoomOut</option>
      <option value="zoomOutDown">zoomOutDown</option>
      <option value="zoomOutLeft">zoomOutLeft</option>
      <option value="zoomOutRight">zoomOutRight</option>
      <option value="zoomOutUp">zoomOutUp</option>
    </optgroup>

    <optgroup label="Specials">
      <option value="hinge">hinge</option>
      <option value="rollIn">rollIn</option>
      <option value="rollOut">rollOut</option>
    </optgroup>
  </select>

  <button class="butt js--triggerAnimation">Animate it</button>
</form>
<hr>
<p class="meta"><a href="https://raw.github.com/daneden/animate.css/master/animate.css" download="animate.css">Download Animate.css</a> or <a href="http://github.com/daneden/animate.css">View on GitHub</a></p>
<p><small>Another thing from <a href="http://daneden.me/">Daniel Eden</a>.</small></p>
  </div>
</main><!-- /.site__content -->

<script src="./Animate.css_files/jquery-1.10.2.min.js"></script>
<script>
  function testAnim(x) {
    $('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      $(this).removeClass();
    });
  };

  $(document).ready(function(){
    $('.js--triggerAnimation').click(function(e){
      e.preventDefault();
      var anim = $('.js--animations').val();
      testAnim(anim);
    });

$('.js--animations').change(function(){
  var anim = $(this).val();
  testAnim(anim);
});
  });

</script>



</body></html>

1 respuesta

Namaris #7 Jun '15

#6 Mira ahora

1 respuesta

B

[Borrado] #8 Jun '15

#7 vale ahora solo te queda llamar a los css donde los tengas

1 respuesta

Namaris #9 Jun '15

#8

 <link rel="stylesheet" href="animate.min.css" />
  <link rel="stylesheet" href="style.css" />

Ya lo esta haciendo de antes y no rula, los css estan en la misma carpeta del index

1 respuesta

B

[Borrado] #10 Jun '15

#9 modifica el style.css ya que tiene que ser el mismo de la pagina, el animate.min es esl efecto y para que te quede todo bonito tienes que poner el mismo style.css

1 respuesta

Namaris #11 Jun '15

#10 Los dos archivos CSS contienen el mismo codigo que la pagina, los he bajado del GIT oficial del developer: https://github.com/daneden/animate.css

Ahi va una pregunta de novato:

Veo que el codigo css tiene definido varias "reglas" (@keyframes) para las animaciones, el color de la fuente es uno de ellos (no se cual). ¿Hay que usar alguna sintaxis concreta para aplicarla? Como se aplica una regla a un texto o objeto?

1 respuesta

QuitCat #12 Jun '15 Gafe

#11 Supongo que lo que hace es con jQuery cambiar la clase del titulo, header, wrap o lo que sea. De este modo adopta un estilo diferente, que es el definido en el css para esa nueva clase que le ha asignado.

1 respuesta

DarkSarevok #13 Jun '15

Pues yo lo tengo igual en 5 minutos. No sé porqué a ti no te sale D:

Te lo dejo aquí

Y aquí los archivos por si los quieres:

https://mega.co.nz/#!EUZQjARR!1s7GWA3kA4Czq2xRypzGFC2THF3wiLHY8NlC_VthyvY

1 1 respuesta

Namaris #14 Jun '15

#13 Mil gracias, al final era eso, que no habia subido todos los archivos.

#12 Ni jQuery ni ostias, la animación y el formato es integralmente CSS

1 respuesta

QuitCat #15 Jun '15 Gafe

#14 Has preguntado que como asigna una regla a un objeto.
Yo te digo que CREO que lo hace de la siguiente manera, usando JS y jQuery:
Cuando el documento se genera al principio o cuando el valor del select desplegable con los efectos cambia se ejecuta esto

<script>
  

  $(document).ready(function(){
    $('.js--triggerAnimation').click(function(e){
      e.preventDefault();
      var anim = $('.js--animations').val();
      testAnim(anim);
    });

$('.js--animations').change(function(){
  var anim = $(this).val();
  testAnim(anim);
});
  });

</script>

Y ambas llaman al siguiente, que lo que hace es asignar al texto que se mueve, la clase correspondiente al valor que hay seleccionado en el desplegable

function testAnim(x) {
    $('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      $(this).removeClass();
    });
  };

Como aplicar este estilo?

Usuarios habituales

Tags