Carouhell Effects - Media rule event

Back to Carouhell

Requirements: effects extension

In this example, carouhell is turned on only on small screen below 600px width. The effects extension creates a hidden div classed css after the carouhell which can be accessed via .carouhell+.css selector. There you are expected to set its media rule opacity: when the opacity changes, 1ms transitionend event is fired and, if provided, mediaCSS(o) method is executed, where o is 10 times the current opacity as Integer (here, opacity 0.6 yields to 6). This is for safe and convenient comparison (you can't safely write if(o==0.6)).

<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: 400ms; } @media (min-width: 600px) { .carouhell+.css { opacity: 0.6; } .carouhell { width: 100%; height: auto; white-space: normal; margin: 0; padding: 0; } .carouhell li { margin: 1em; width: 200px; height: 200px; } } </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"> <li><img src="assets/img1.jpg"> <li><img src="assets/img2.jpg"> <li><img src="assets/img3.jpg"> </ul> <script> test.mediaCSS = function(o) { if(o==6) clearInterval(test.t); else; } </script>