search

ragnarlotus / vue-flux

Image slider which comes with 20 cool transitions
https://ragnarlotus.github.io/vue-flux-docs/demos/demos
MIT License
542 stars 49 forks source link

is there any way to use these awesome transitions on non-images? #73

Open vesper8 opened 4 years ago

vesper8 commented 4 years ago

love love the transitions in your package.. they're the best i've found on Github.. I'd love to be able to apply them on div content? Is there any way to achieve that? Maybe the only way would be to cheat and create an image with the div content dynamically and then apply the transitions to those?

Would love to hear of any tricks to make this possible

Thanks!

ragnarlotus commented 4 years ago

Hello and thanks for your kind words!

TLDR, it is possible although requires some implications...

The slider positions and shifts images to ensure proper display by settings the images properties using CSS background style. It is possible to achieve the same using absolute or relative position to the content but the slider is not developed for it.

It has been a while I was thinking about giving this feature to the slider but I wanted to feature the videos first, so instead of just images, any resource could be used.

Currently I'm working on finishing the unit tests and bug fixes, then implement videos and then any other resource, although you can imagine this will take me a while.

If you are really interested, I can give you a hand about how to implement what you want and I will be more than glad to add it in next version.

Regards!

vesper8 commented 4 years ago

It's very exciting to hear that you plan to add this functionality in the futureu!

I think a small prototype example showing how you can apply the transitions to a simple div containing text could go a long way in getting this new feature going. If you have the time to put together such an example on codepen or simply by replying here then I'm pretty sure I could extrapolate from that and have it work on more complex content

Cheers!

ragnarlotus commented 4 years ago

Sorry for the delay, had a tough week at work that didn't allow me to spare much free time for personal projects. But don't worry, I didn't forget about you and I've been thinking on the proposal.

Basically two things should be implemented and for this content there is a caveat. The caveat is that everything should be positioned relative or absolute.

For the implementation we need a kind of content, which can be mixed from libraries, there a class must be defined to realize the size of what have to be displayed. The other implementation should be the component that renders and positions the content, being now the only one FluxImage and so FluxMixed.vue or so should be created.

I'm aware that the slider basis should be updated to contemplate any resource and not only images. Let me know if you need and adaptation of what should be updated in order to have mixed content working, but the most important should be components/FluxMixed.vue and libraries/Mixed.js to display everything.

If you need a base code just let me know and I will create a new branch with the updated base code to give you a better understanding and guide on how to proceed.

Like always, don't feel shy to participate and help creating something amazing.

Cheers!