Fade In Down Big Animation

[Hernandez]

Installation Guide:
Put this code in the Header or the footer and Replace IMAGE URL with the Picture will shows

SPOILER: Click to show

<img id="animated-example" class="animated fadeInDownBig" src="IMAGE URL">

and put this code in the bottom Admin Home> Themes> Advanced Styles & CSS> Style Sheet

SPOILER: Click to show


#animated-example {
  width: 300px;
  height: 200px;
  border: solid 1px #1A7404;
  position: absolute;
  background-color: #62A80A;
}

.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDownBig {
   0% {
       opacity: 0;
       -webkit-transform: translateY(-2000px);
   }
   100% {
       opacity: 1;
       -webkit-transform: translateY(0);
   }
}
@keyframes fadeInDownBig {
   0% {
       opacity: 0;
       transform: translateY(-2000px);
   }
   100% {
       opacity: 1;
       transform: translateY(0);
   }
}
.fadeInDownBig {
   -webkit-animation-name: fadeInDownBig;
   animation-name: fadeInDownBig;
}


[Mac]

Is there an example of what this looks like?

[Hernandez]

Fade In Down Big Animation , Is a Picture Show Every Refresh , U can Try It

[Former Member]

this is pretty cool not much talk in this thread, and i cant understand why ..... simple and effective

is there a way to have it go down when you first go on to the site ?
it seems to only do it when you look at the image Then refresh.


in other words ... you have to be at the bottom of the page for it to work, which is still cool