Carouhell Effects - opacity rotation
Back to Carouhell
Requirements: effects extension
Effects extension provides abstraction over shift effect. It consists of these phases:
- Custom function u.in(dir) is executed, where dir=-1 for left or +1 for right rotation. If the function is not provided, default rotation is performed. The function should change styles of the carouhell items to launch transition effect.
- The tt waits for transition effect to end.
- It is calculated how many items displays (1 by default, multiple in flex). One by one, first N items are moved to the end of the carouhell in leftwards rotation, or last N items to the beginning in rightwards rotation.
- Custom function u.out(dir) is executed. It should reset the styles. See the note below how to temporarily pause transition. If the function is not provided, all inline styles of all items are removed instead.
The above functions with +1 argument value are launched in right() carouhell method which is also defined in the Button extension. If you use also the Buttons extension, load it before this one.
If you want to temporarily pause transition. It is good to know this.
<![CDATA[
<link rel="stylesheet" type="text/css" href="src/carouhell.css">
<script src="src/carouhell-with-effects.js"></script>
<style>
.carouhell { width: 400px; height: 400px; background: gray; }
.carouhell li { transition: opacity 400ms; }
</style>
<ul id="test" class="carouhell" data-stay="2000">
<li><img src="assets/img1.jpg">
<li><img src="assets/img2.jpg">
<li><img src="assets/img3.jpg">
</ul>
<script>
test.in = function(dir) {
test.children[1].style.cssText = "position: relative; left: -400px";
test.children[0].style.cssText = "position: relative; z-index: 1; opacity: 0"
}
</script>
]]>