NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
3rd-party-modules:sliderjs:sliderjs_pro:camera_slider_pro [2014/08/19 14:39] Claus |
3rd-party-modules:sliderjs:sliderjs_pro:camera_slider_pro [2018/06/03 18:08] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Camera Slider PRO ====== | ====== Camera Slider PRO ====== | ||
| + | **Autor:** Claus Szypura (update) http://phoenixmedia.de //2015/02/10 // \\ | ||
| Line 66: | Line 67: | ||
| Promised! | Promised! | ||
| - | ===== Let The Captions Fly ===== | ||
| - | It is even possible to animate your captions so the can fly in, tumble out or whatever. Just a little CSS and you are done: \\ | ||
| - | {{:3rd-party-modules:sliderjs:sliderjs_pro:roll-in.png|}} | ||
| - | plus | ||
| - | <code css> | ||
| - | .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; | ||
| - | } | ||
| - | </code> | ||
| - | This would be possible also:\\ | ||
| - | {{:3rd-party-modules:sliderjs:sliderjs_pro:roll-in2.png|}} \\ | ||
| - | You can leave the css-field empty and apply your classes to your moving div container instead! | ||
