Nivo Slider PRO

Autor: Claus Szypura (update) http://phoenixmedia.de 2015/02/10

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;
}

You can even use some HTML and CSS

And then 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.txt · Last modified: 2015/02/10 18:35 by Claus
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