Carousel - That Drove Me Crazy

I'm impressed while scrolling through this website I realized that each and every section was really well thought with some really sick and Slick animations while all of the sections are really really cool one of the sections that got my attention the way this section unfolds starts animating and then collapses back it's really something recreating this section alone is too much for this short video so I'll be focusing on creating the animation part of this Carousel not focused on the Perfection but to see if I really can take this Challenge and I'm Gonna Leave the link in the description so you can check the whole side out by yourself I'm gonna start by creating some HTML by throwing in some of the images from the site itself as we start on CSS let's set up some basic styles for body and gallery some more base tiles for item and the Left Right sections visually it doesn't look like 50 of the width because the images are stacked more vertically it will get fixed as we move along after setting inert style is let Set overflow to Hidden on left and right section set border and parent and transition on item to visualize things better let's translate all the sex images on x-axis using translate 3D don't worry if you see six images on left and 5 on the right it's part of the plan before moving to the next section we need to understand that visualizing X and Y axis are easier but to understand Z index we need to use perspective to get the idea of how it works providing z-axis value by passing third parameter to translate 3D to make z-axis work we need to provide perspective remember but how do we add it by literally setting the property perspective on the parent class the 3D style needs a little bit fixing cool this needs to start from the right instead of left and stack a little more to the Border as discussed earlier we had an extra last card to fix the six card issue we need to put the last card right before the first card so that it can rotate properly now that we are done with left Parts CSS and HTML let's focus on the right side we need to set the perspective origin to left stick items to the left and then set translation values for each of the items in the right section animations let's extract values of X and z-axis from left and right and put them into respective objects perspectives left and right extracted from CSS should be placed at the top the next thing we need to do is get the left and right cards using the query selector we'll use this method for translating images an empty method setting up a method that keeps calling the animate method on each card for both left and right every thousand millisecond Sweet let's finalize the animation by adding the implementation details for animate cards method using counter from image password positions to your Method Keep incrementing the counter on each and every call and we've done it the idea is to recreate these animations and share it with everyone these might not be perfect but that's how we learn it's a wrap thank you everyone I'll see you in the next one foreign [Music]

Channel: Zain Zafar

Views: 6,204

Keywords:

Id: FH4aM6BgAb8

Length: 3min 23sec (203 seconds)

Published: Sun Dec 18 2022