✨ Only 2 Lines of CSS for Amazing Scroll Animations! 🚀 No JS Needed!

hey what's going on guys welcome back to the channel so in this video we're going to be creating onscroll animations using just CSS no JavaScript no external Library just pure CSS magic so by the end of this video you'll be able to add Sleek animations to your website that trigger when the user Scrolls down the page so let's Dive Right In the video so this is the finished project so as you can see if I reload the page it says here scroll to see the magic and as we scroll down we see elements appear from left and right and this happens only when we scroll now this doesn't only trigger on scrolling top to bottom it also reverses the animation as we go from bottom to top so let's look at how to build this using just [Music] CSS first let us look at the HTML structure it's fairly simple so we're going to start off by creating the broer template by clicking or typing the exclamation symbol and then hitting the enter once done it would have something like this where I have added the additional title as scroll animation then would add the necessary CDN in this case we need the remix icons so you're going to go to Google and you're going to type remix icon cdnjs and then the first link that opens up you're going to click onto that and here if you don't find the latest version you're going to just go to the previous version copy the minified CSS and you're going to add that inside of the body tag we add an H1 tag that acts as our main heading encouraging the users to scroll to see the match now just below that we add a div with a class of container now this container will hold all our different card elements now each card would have a company name in the H4 tag a description inside a span tag the CEO's name inside of the paragraph and then the icon inside a div with the class of Icon now these icons are pulled from remix icon so if you want to have or if you want to know the specific icons you can head over to their official site remix icons now this is the basic or the broiler structure of the entire code now we can just paste in the rest of the cards and we're done with our HTML now that we have our HTML structure in place let's move on to the CSS where we'll create the animations that trigger on scroll first we'll start by importing the Poppins font from Google fonts now if you don't know how how to add popins or any Google fonts so you're going to come here in the browser and you're going to search for the desired font in this case which is popins and then right next to it you're going to search for Google fonts you're going to open the first link and here you're going to click onto in this case if this is your first time it would show as get font you're going to click here you're going to get this embedded code you can either link it or you can import it you're going to copy this and you're going to paste it in your CSS file once that is done now we're going to style our body to take the full viewport height and width and we're going to set the margin and padding to zero and also we would apply the desired or the imported font in this case it is popins we also set a background color to make our cards pop the H1 tag is align centered and given a large margin to position it nicely in the viewport the container is then styled as a flex box with column layout aligning the items at the center and also a padding block of 100 pixels so that the first and the last card have proper gapping from top and bottom and also there is set a gap of 100 pixels so that there is a decent amount of space between the cards with the CSS that we have written so far our website looks something like this each card is styled with a fixed width and height and a white background and also given rounded Corners we add a box Shadow to give it some depth and also set it up as a flex box to Center its content now the transition property ensures a smooth transition or smooth animation effect when the card is hovered over since we're going to be adding the hovered animation later down the line notice that we have set the position of the card to relative this is crucial for positioning the icon absolutely within the card we stall the text elements within the cards setting appropriate font sizes margins and alignments the span element has a slightly smaller font size italic style and reduced opacity for a more look the icon is then absolutely positioned in the bottom right corner of the card because the parent card has a relative position the card or the icon inside of the card is positioned absolutely within the card not the whole page with then add a hover effect to scale the card slightly when the user hovers over it adding a bit of interactivity now now let's define the key frame animations for the cards we create two animations one for the elements to slide in from the left and one so that they slide in from the right both animations start with the element being completely transparent and offscreen and end with the element fully visible and in its final position that is translate X as zero finally we apply these animations to the cards odd number cards will slide in from the right while even numbered cards will slide in from the left we also add some margins to the side to create more of a gap between the even and odd numbered so that they're not align straight at the center the animation duration is set to 1 seconds with an ease timing function for smoothness and the forward key word ensures that the animation stays in in its final state after completing now let's dive into the most important properties that will help us create the ons School animations and that is animation timeline and animation range the animation timeline with the view function as its value is a property that allows the animation to be triggered when the element enters the viewport this means that the animation starts when the user Scrolls to the element making our animation trigger precisely when we want them to and then we have our animation range here we have set the entry as 0% and cover as 30% now this property defines when the animation should start and how long it should last as the user Scrolls here entry 0% means the animation starts as soon as the element starts and entering the viewport and cover 30% means the animation continues until 30% of the element is visible in the viewport this creates a smooth scrolling animation effect and that's it with just few lines of CSS we have created a visually peeling scroll animation that enhances the user experience feel free to play around with the animation properties to create your own unique effect facts if you found this tutorial helpful don't forget to like comment and subscribe to the channel for more such amazing content thanks for watching the video meet you in the next till then bye-bye

Channel: Hank The Tank

Views: 1,393

Keywords: CSS Animations, Web Development, Front-End Development, Scroll Animations, CSS, Web Design, Coding Tutorial, No JavaScript, CSS Tricks, On Scroll Animation, Animation Timeline, Animation Range, HTML and CSS, Web Animation, Simple CSS Animations, CSS Effects, Responsive Design, Beginner CSS, CSS3, Web Developer, Modern Web Design, Creative Coding, Interactive Websites, Web Design Tutorial, Pure CSS Animations

Id: d6AcpC2rnlU

Length: 8min 42sec (522 seconds)

Published: Sun Jul 07 2024