A few months ago I shared here one of my codes which allowed to realize simply a “double views” effect in CSS.
I put you the direct link to the article here !
Today I decided to improve my project and share it with you. The idea was to create, not a “2 views” but a “3 views” while keeping the original idea (animation, layout, …)
I realized 2 projects, the first one just uses CSS and there is no animation on the width of the views. The second is an evolution of the first and integrates in addition to the Jquery.
Whether for the first version or the second, I decided to go on an HTML list (ul> li), which will allow me to count the elements li.
First version (CSS only)
As you can see, there is no real animation, except a change of opacity when the cursor moves.
Advanced version (CSS + Jquery)
This version adds the animation of the width of the views thanks to the Jquery.
To use the Jquery functions, use the CDN : https://code.jquery.com/jquery-3.3.1.min.js