Have you learnt that feeling once you discover a web site with a very cool interactive scrolling impact? You recognize, the form of scroll animation that absolutely distracts you want a kitten with a ball of yarn?
If you happen to’re like me, you might need thought it was superior, however means out of your league to create. The excellent news is that it’s not solely attainable, however you possibly can create a scroll animation to your WordPress web site with just some clicks.
I’ll present you 4 strategies to perform it that received’t break your mind:
The primary technique I wish to share is utilizing a brilliant useful plugin referred to as Scrollsequence.
Scrollsequence helps you create a cinematic scroll animation that has a significant visible affect in your guests. It’s particularly well-suited for product shows the place you wish to have the product rotate 360°. The animation will each play and rewind because the consumer scrolls. Try their web site for an eye-opening instance:
The very first thing you’ll want to do is set up the plugin. You may get the free model on their WordPress.org web page, or obtain a premium model on the Scrollsequence web site. They provide a 14-day free trial, so there’s no danger to strive it out in your web site.
Upon getting the plugin put in and activated, navigate to the Scrollsequence menu in your admin dashboard.
The primary part of the menu is a full tutorial on easy methods to use the plugin. I’ll stroll you thru the fundamentals right here simply to get you acquainted.
Slightly than use a GIF or video file, Scrollsequence depends on a sequence of nonetheless frames to create the scrolling video impact. So the very first thing you’ll must do is seize a brief video — 5-10 seconds or so — and export the frames as JPEG sequence recordsdata utilizing your favourite modifying software program. Ezgif converter is a superb, free selection. When you have got the recordsdata saved, head again over to your web site and navigate to Scrollsequence>Add New Scrollsequence.
Click on Add a Scene, and an Picture Sequence* drop down will seem. Click on Choose Attachments, and add the pictures you saved. It might take some time for them to load, relying in your connection velocity.
At this level, you possibly can click on Save Draft, then preview the animation. With out doing any modifying or selecting any settings, right here’s what my default scroll animation regarded like:
Underneath Scrollsequence Settings in the suitable facet menu, you possibly can regulate how quickly the video begins and ends on scroll, and whether or not it’s sticky (fastened in place) or static (flows with the web page).
Whenever you’re happy, click on Publish. Then, head again to Scrollsequence within the admin menu. You’ll see your sequence listed with a shortcode.
Copy and paste the shortcode into any web page the place you wish to show the sequence. You’ll be able to put as many sequences on a web page as you want. As soon as a sequence is completed, it is going to roll into the following routinely.
There are extra options and settings obtainable in Scrollsequence, corresponding to content material animation. If you happen to’d wish to dig deeper into Scrollsequence, take a look at the complete tutorial in our evaluate article.
This one is somewhat totally different, in that we’ll be beginning with a nonetheless picture relatively than a video. We’ll make it transfer from one facet of the display to the opposite because the consumer scrolls.
First, create a brand new web page, then select Edit with Elementor. Then insert a picture onto the web page. The impact works greatest for those who use a clear PNG or SVG file. Set the picture measurement so the motion can be noticeable on scrolling. In my case, I used a picture and set the dimensions to Medium – 300 x 300px.
With the picture chosen, select the Superior tab and transfer all the way down to Movement Results. Toggle on Scrolling Results. I would like my skater to maneuver throughout the web page, so beneath Horizontal Scroll I set Path to To Proper.
Instantly, you possibly can scroll down and check the impact. This was a quite simple instance, however you possibly can see that the probabilities are virtually limitless.
It’s value noting that you could additionally use Scrollsequence in Elementor, and Elementor Professional has a built-in sticky scrolling impact of its personal, even when it’s a bit restricted.
This impact is just like the Scroll Impact in Elementor. If you happen to’re a Divi consumer, you are able to do it too.
First, create a web page and select to Use the Divi Builder. In my instance, I selected certainly one of Divi’s premade layouts — on this case, a tennis teaching web site.
I needed to have a tennis ball roll throughout the display because the consumer scrolled down the web page. Just like the skater I used earlier, I discovered a tennis ball PNG picture on a clear background.
Upon getting your individual picture uploaded, click on Superior beneath the picture settings. Transfer all the way down to Scroll Results. You’ll see a number of decisions beneath Scroll Rework Results. I selected each the Rotate and Horizontal Movement results.
Check your scroll movement, tweak your settings and that’s it. The parents at Divi Prolonged have an much more in-depth tutorial about Divi scroll results that you could be discover useful.
The final technique I wish to share with you shouldn’t be fairly as thrilling because the others, however it provides somewhat little bit of animation to your web site in a easy means.
If you happen to use anchor tags to assist guests leap to content material on the identical web page, you understand how clunky it may look. This technique makes the motion easy scrolling, as if it’s been animated. Right here’s the way it works.
First, arrange anchor tags in your web page. Choose the textual content the place you wish to leap to. In the suitable facet menu beneath Superior, place some textual content within the HTML Anchor area. It doesn’t matter what it’s, so long as you bear in mind it. That is your anchor tag.
Now, choose the textual content you wish to hyperlink to your anchor tag. Add a hyperlink, and within the hyperlink area, enter your anchor textual content with a hashtag in entrance of it, like this: #link-word.
Now Publish or Replace your web page. As I discussed, the motion can be clunky. Let’s repair that. Open your web page, and within the prime admin bar, choose Customise. Scroll all the way down to Extra CSS. Paste this code into the sphere:
html{
scroll-behavior: easy;
}
Click on Publish, and check the hyperlink. Easy!
Use Scroll Animation to Make Your Pages Dynamic
You’ll be able to see that it doesn’t take a professional developer or plenty of work to make your pages as dynamic as Apple or NASA. Whereas I confirmed you 4 totally different strategies, you possibly can mix them to actually wow your guests.
I encourage you to discover Scrollsequence as a result of it’s a brilliant simple option to flip your guests into kittens with balls of yarn. They’ll bear in mind your web site and can be way more prone to share it with their associates.
