Adding a "blinds" transition to a my version of Flickity carousel

[Ajax30]

I have put together THIS slider (carousel) that uses the captions as controls, with the help of the Flickity plugin.

I need the blinds transition that WOW slider has.

What is the easiest and fastest way to do that? is it a CSS thing only? Do I have to write specific JavaScript for this transition?

The code version of the carousel is HERE.

[Beverleyh]

I need the blinds transition that WOW slider has.

I mentioned this before in an earlier thread (https://css-tricks.com/forums/topic/animate-video-width-only-from-0-to-100/#post-273934), but you can inspect how they’re doing things (for any website) using the developer toolbar – that’s F12, in most browsers, if you weren’t sure.

Looks like each image is made up of 3 container divs;

• div 1 shows the first third of the image
• div 2 shows the middle third of the image
• div 3 shows the last third of the image

is it a CSS thing only?

No, the image is inserted/changed on the fly using JavaScript.

I haven’t looked much deeper at WOW slider, but (through sight alone) it appears that each of the 3 img container divs are animated in, in turn, and at the same time, the background-position of each img moves across slightly.

Do I have to write specific JavaScript for this transition?

Possibly not. I expect that you would use JS to time the reveal of each overall slide, but you could use CSS for the actual animations;

• the start-to-end position of each img container div
• the background-position of each img inside

I mocked up a quick demo using the aforementioned thread as a basis, accounting for the 2 animations noted above https://codepen.io/anon/pen/vapmwB

[Ajax30]

@Beverleyh: I did inspect their code, but there are a lot of JavaScipt files and/or the code is minified. Wich files are responsible the the animation?

[Ajax30]

@beverleyh: Could you add your code to the slider I have put thorougher, to make it better? Thank you!

[Beverleyh]

A lot of JavaScript files? Are we looking at the same thing? When I was looking at the demo page earlier, there were 3 JavaScript files… and one of them was the jQuery library itself, so it won’t have anything to do with that. The other 2 files were a main wowslider.js, and an engine/script.js that contained the initialisation/config settings. Come to think of it, doesn’t the demo page provide the necessary markup to get a slider inserted on a website? If you need help to locate the associated .js/.css files, you could also check there.

Since the engine/script.js contains the initialisation and config settings, I imagine that the wowslider.js file will be the one that has the custom animation script inside. But as you say, it’s minified/obfuscated, so if the developers haven’t provided an unminified/readable version in the download pack, or via GitHub, etc., I guess that they don’t want to make their work publicly available for easy pickings.

But, like I said before, and going back to the developer console, it isn’t just JavaScript that’s responsible for the animation. Look in the CSS file for the accompanying keyframes animation. The overall effect is being done with a combination of JavaScript, which is writing incremental inline translate3d() transforms in the style attribute, and the keyframes animation in the stylesheet. Both work together to perform the overall blinds effect.

[Ajax30]

@Beverleyh: Update: I have found that blinds function. How woud you “blend” it to this carousel?

Which of the files is the one that “is writing incremental inline translate3d()”? I wold like to add it’s code to mine :)

[Beverleyh]

Which of the files is the one that “is writing incremental inline translate3d()”?

The file is that blinds function you linked to – you can see translate3d in the code.

How woud you “blend” it to this carousel?

I wouldn’t. I haven’t a clue how to utilise that standalone function without first downloading the slider pack and picking apart all the associated files to see how the original developer does thing, but unfortunately this isn’t something that I want to look any deeper in to. Knowing the level of effort and time that would take, I can’t imagine that anyone would want to dissect this kind of codebase without already having prior knowledge or being compensated in some way.

Sadly I’m not taking on any more freelance work at the moment, but if I have some spare time and motivation over the coming weeks, I might expand my previous blinds demo into a simple working slideshow (just a list of slides that sequentially activate every few seconds, with my own version of the blinds effect). You’d be welcome to look at the code of that and build upon it yourself, but I don’t know how you’d modify it to incorporate videos. The WOW Slider and my code uses images.

[Author]

Posts