Scroll-based Animations for WordPress (A lightweight, CSS-only solution! No Plugins or JavaScript!)
HTML-код
- Опубликовано: 30 сен 2024
- Recently my CSS Hero, Kevin Powell, did a video on CSS-only scroll-based animations. He, of course, goes deep into how these animations work and shows you all kinds of different ways you can use them.
But being the simple man that I am, what I really wanted was to have just a simple utility class I could use to make objects on my website fade in and up when they come into the viewport.
So, I took what I learned from Kevin, played with the code a bit, and came up with a pretty simple CSS-only animation that achieves this effect.
In this video, I'm going to show you how to set it up and explain how all the code works (including a quick introduction to keyframe animations).
If these types of subtle animations are something you'd like to be able to easily add to your websites, then stick around, and let's get started!
---
Check out @KevinPowell's video: • Incredible scroll-base...
Get my freebie, "The 6 Essential Tweaks for a Perfect Generate Site": theadminbar.co...
👏 COMMUNITY
Join our free community: theadminbar.co...
(voted best WordPress community!):
🔴 EVENTS
See past and upcoming live interviews & workshops: theadminbar.co...
🎁 PRODUCTS
Sell more care plans with The Website Owner's Manual: theadminbar.co...
Write proposals in less than 15 minutes with this template: theadminbar.co...
Fill your prospect pipeline in this 3-week challenge: theadminbar.co...
5 Airtable templates I use to run my agency: theadminbar.co...
📨 NEWSLETTER
Stay up-to-date with the best from in and around The Admin Bar: theadminbar.co...
🤖 MISC
Visit our website: theadminbar.com
Product endorsements: theadminbar.co...
Kyle on Twitter: / kylevandeusen
I dont see what you see when I click on block. I wnt and added the class in "CSS Classess" in edit with elementor but the effect does not work. Can you help with this
Also, when I add "owd-fade-in" as the class in CSS Classes in Elementor and use your code, there is no effect
Same here. I see “extra class name,” and after entering all of the CSS, it does not apply the effect
Thank you, this is a great video! 🙂
I am a beginner and I could follow the steps easily.
Unfortunately I have problems to apply the code to my page.
Even though it works in the area of customisation, the changes aren't applied to my website.
There are three options for Preprocessor: NONE, LESS or Sass (SCSS Syntax).
Which one should I choose?
Should I choose the option not to use the theme's original CSS?
Should the media width be 400 px?
It would be great if you could help me 🙂
I like Generatepress and GenerateBlocks. Do you think this is still top-notch themes and page-building set-up for 2024?
It's what I plan to continue to use - especially with all the goodies coming to GenerateBlocks this year 🙌 . As far as the future of themes, I envision something more bare-bones (maybe even block-based) with GenerateBlocks doing everything you need. Not sure how far away that is (or if it's a total pipe-dream)
@@TheAdminBarhave you tried Blocksy theme yet? I have recently started using it and it's so good.
Super cool effect! And great addition there at the end for accessibility - learned something new 🙂
It had never occurred to me that there was a setting to reduce animation in a browser. I cannot believe many web designers would know this. Every day is a school day.
Great video as usual, Kyle -- just one point -- you are NOT 'a simple man', you are a SMART man who uses simple solutions! Subtle, but very important dfifference! :-)
Aw, I think you're giving me too much credit - but I'll take it 😅
Nice! But not working for mobile devices, right?
Essentially yes. Since properties "animation-timeline" and "animation-range" are not supported in most browsers, because this is a fairly new functionality and they are experimental properties and not included in the standard CSS specification at the moment. If you don’t care about cross-browser and cross-platform compatibility, then this is your implementation option, if not, then I would advise you to look for another solution. You can go to the site "Can i use" to see in which browsers or devices you can use this properties.
Lovely video, Kyle, BUT. You using a space after `0%` and not after `100%` is triggering my OCD so bad 😂😂
On a more serious note, you said you didn't want to add JavaScript to the website. Is that because you're not that proficient with it, or are there other reasons?
I'm asking because for years, I did my best to avoid JS (because it was foreign to me and seemed tedious to learn every time I tried - to be fair I didn't try very hard due to this perception I had)
And then two years ago I found the right book for me to start, and it just clicked!
@bluetheredpanda - You've got me curious...what is the book?
@@Jim.Hummel it’s a French book, so I don’t know whether it’d be that useful if you don’t speak the language… but it’s called “Oh My Code : Je parle le JavaScript”
Now on a probably more useful note, the ingredients that made it click for me:
1. Doesn’t try and teach you an endless list of syntax or advanced stuff (essentially, doesn’t try to be a dictionary as 99% of programming books do)
2. Very practical. The book is like 12 small projects, each of them is a minimal implementation of real-life, useful features (create a cookie banner, create a dark mode switch (and save the setting between page reloads), create a mini-blog by loading the data from a single-file, flat database (a simple JSON), etc.)
3. It doesn’t take itself too seriously.
Essentially, it’s very clever in the sense it doesn’t try to do too much, but manages to strike the right balance between being written for beginners, and still being practical and a fertile ground for further reflexion (or to say it plainly: it doesn’t baby you).
I’ve since moved on to other books, resources and courses, but I 100% credit the book for bringing me to a place where I’ve been receptive to these other resources. Without it, I’d still be stuck at step 1.
If you can find a resource that does the same for me, especially if it seems to have those same ingredients, I’d definitely go for it. 😉
@@bluetheredpanda - I guess I'll have to learn French first!! LOL Thanks! It's a good starting point and with a bit of research, I might find an equivalent. Yes, the snippet projects are a super method for teaching...just take it chunk by chunk. Programming from scratch has never been in my wheelhouse...I can fix it better than I can write it but I'm trying to make an effort to get more comfortable with these things.
Fortunately, code editors are so much more helpful now with the language libraries loaded so if you have a clue you can just search for the right command. I used to just use a plain text editor and my books would fall apart from referencing them so much!
I appreciate the speedy reply!
Great video! Super simple, to the point, and gives me the confidence to charge ahead. Thanks!
You provide so many useful tips, so grateful! However in this case I don't get the fade in animation to work on tablets or mobile. Is it necessary to add additional css for that functionality?
I always referred wothout plug-in stuff
Wicked cool...A neat animation but what makes it elegant is the media query!
Really good work! =D
Thanks! Glad you enjoyed it!
Great video Kyle, thanks🙌
Thanks, Leonardo!
Great video, kyle!
Thanks, I'm glad you enjoyed it!
Kevin is my hero 🫶
He's the GOAT!