NAVIGATION
This is an old revision of the document!
Here are some examples what you can do with the PRO Version:
Of course it's possible to
Not enough, that you can do this - it's even possible to do it with every single slide - in a different manner!
.no_1 { background:#000; background-position:fixed; padding: 0 5px; width:50%; left:3%; bottom:3%; position:absolute; height:auto; opacity:.7; border:4px solid #fff; } .no_1 a:link, .no_1 a:visited, .no_1 a:hover, .no_1 a:active{ background-color: #AD000B; color: #fff; padding:0 3px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; text-decoration: none; font-weight:bold; }
and all images are clickable! You saw that nice scroller? Content bigger than the original image area isn't out of sight.
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:
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; }