This is an old revision of the document!


Nivo Slider PRO

The Camera Slider obviously has some problems displaying moving HTML-snippets via CSS, so here is an example for the Nivo slider

Let The Captions Fly

It is possible to animate your captions so the can fly in, tumble out or whatever. Just a little CSS and you are done:
plus

.divround{
  background:#aaa;
  position:relative;
  left:50%;
  margin-left:-50px;
  width:100px;
  height:100px;
  border-radius:50%;
}
 
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
 
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
 
@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    -ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
 
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}
 
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
Copyright (c) 2014 Daniel Eden
*/
 
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

This would be possible also:

You can leave the css-field empty and apply your classes to your moving div container instead!

3rd-party-modules/sliderjs/sliderjs_pro/nivo_slider_pro.1408900975.txt.gz · Last modified: 2018/06/03 18:06 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0