Thursday, March 28, 2024
HomePHPCreate a Distinctive Scrolling Web site With Locomotive Scroll & Tailwind CSS

Create a Distinctive Scrolling Web site With Locomotive Scroll & Tailwind CSS


To get began with Locomotive Scroll, it’s a must to embody the next recordsdata in your venture:

  • The locomotive-scroll.css file or its minified model
  • The locomotive-scroll.js file or its minified model

You possibly can obtain them by visiting its GitHub repo, utilizing a bundle supervisor (e.g. npm), or loading the required property via a CDN (e.g. jsDelivr). For this tutorial, we’ll select the final possibility.

As mentioned within the introduction, for this demonstration, past the Locomotive recordsdata, we’ll additionally incorporate Tailwind CSS to create the web page structure.

With that in thoughts, for those who look underneath the Settings tab of our demo pen, you’ll see that there are two exterior CSS recordsdata and one exterior JavaScript file.

The required CSS filesThe required CSS filesThe required CSS files
The required JavaScript fileThe required JavaScript fileThe required JavaScript file

1. Structuring the Web page

Locomotive Scroll comes with a number of completely different information attributes for manipulating the weather. We’ll use lots of them, so on the finish of this tutorial you’ll have a very good grasp of what they do and the way you should use them.

Let’s begin by specifying a wrapper ingredient with the data-scroll-container attribute. Inside it we’ll place the web page sections and a back-to-top hyperlink. In a while, we’ll initialize the plugin by focusing on this wrapper.

All web page sections could have the data-scroll-section attribute. Plus, nearly all of them could have an id attribute. This attribute will assist us easily navigate to focus on sections via the menu and back-to-top hyperlinks.

Right here’s the preliminary web page construction:

At this level, we’re able to have a more in-depth have a look at the vital web page sections.

Part #1

The primary part will embody a heading and a paragraph.

The layout of the first sectionThe layout of the first sectionThe layout of the first section

One other vital factor right here: by default, the back-to-top hyperlink received’t seem. As we scroll:

  • If the heading is in view, the hyperlink will probably be/stay invisible.
  • It can seem solely when the heading isn’t in view.
The back-to-top link

To implement this performance, we’ll move the data-scroll, data-scroll-repeat, and data-scroll-call="toggleBackToTop" attributes to the heading. Let’s now focus on somewhat additional the position of those attributes:

  • The job of the data-scroll attribute is to examine if the ingredient is in view. As quickly because it seems for the primary time, the plugin will add the is-inview class to it. This class received’t be eliminated any extra. Discover additionally how the plugin modifies the ingredient’s CSS remodel property to use the completely different results.
The is-inview class added by Locomotive ScrollThe is-inview class added by Locomotive ScrollThe is-inview class added by Locomotive Scroll
  • The job of the data-scroll-repeat attribute is to examine repeatedly if the ingredient is in view. The plugin will toggle the is-inview class relying on the ingredient’s place. In our case, we’ll use this attribute solely in pair with the data-scroll-call attribute that wants it to work correctly.
  • The job of the data-scroll-call attribute is to set off Locomotive’s name occasion. The attribute worth that may be something we would like is handed as a parameter to the occasion callback and permits us to do stuff when the goal ingredient enters or leaves the viewport. It’s a bit arduous to elucidate it with phrases, so it’s higher that you simply see the JavaScript code. We’ll work with it once more within the upcoming sections. As mentioned, keep in mind that we’ll use it along with the data-scroll-repeat attribute.

Right here’s how we construction this part:

Part #2

The second part will embody the menu hyperlinks.

The layout of the second sectionThe layout of the second sectionThe layout of the second section

To navigate easily to web page sections upon clicking a hyperlink, we now have to offer the data-scroll-to attribute to the hyperlinks.

Observe: we’ll move the identical attribute to the back-to-top hyperlink.

Needless to say this attribute isn’t a part of the docs on the time of this writing. Should you’re questioning how I learn about its existence, the reply is that I discovered it by checking the supply code of the plugin’s GitHub Web page.

The required data-scroll-to attribute for smooth scrolling  The required data-scroll-to attribute for smooth scrolling  The required data-scroll-to attribute for smooth scrolling

Alternatively, for those who don’t need to use this attribute, you may obtain this performance utilizing some JavaScript scrolling strategies.

Right here’s how we construction this part:

Part #3

The third part will embody a heading and a few textual content.

The layout of the third sectionThe layout of the third sectionThe layout of the third section

As we scroll, we’ll pin the heading to the highest. However, for a way lengthy? Properly, till we scroll previous its guardian. At that time, the ingredient will disappear as it’s going to then be a part of the traditional doc circulation.

To implement this performance, we’ll assign the data-scroll, data-scroll-sticky, and data-scroll-target="#about" attributes to the heading. Some notes:

  • As we already know, the data-scroll attribute will detect if our ingredient is in view.
  • The data-scroll-sticky attribute will make it sticky in pair with the data-scroll-target attribute.
  • The worth of the data-scroll-target attribute will decide the ingredient’s preliminary and closing sticky positions.
The sticky durationThe sticky durationThe sticky duration

We’ll observe the identical method within the seventh (purchasers) part, so we’ll skip that one.

Right here’s how we construction this part:

Part #4

The fourth part will embody two Unsplash photographs.

The layout of the fourth sectionThe layout of the fourth sectionThe layout of the fourth section

As we scroll, a parallax impact will occur. To be extra particular, the primary picture will transfer 4 instances quicker than the second.

To implement this performance, we’ll move the data-scroll and data-scroll-speed attributes to the photographs. The worth of the second attribute will decide their scrolling pace. Right here we’ll give data-scroll-speed="4.8" to the primary picture and data-scroll-speed="1.2" to the second.

Right here’s how we construction this part:

Part #5

The fifth part will embody a heading and two textual content banners explaining our companies.

The layout of the fifth sectionThe layout of the fifth sectionThe layout of the fifth section

As we scroll, a number of parallax results will happen:

  • First, the heading’s letters will transfer at completely different speeds. Plus, every time they come into sight, they may obtain a random shade from an inventory of predefined colours.
  • Second, the banners will transfer horizontally in several instructions.

To implement this performance, we’ll do the next:

  • Assign the data-scoll, data-scroll-repeat, data-scroll-speed, and data-scroll-call="randomizeTextColor" attributes to the heading’s letters. As we would like a parallax impact, the worth of the data-scroll-speed attribute will fluctuate for every letter. Keep in mind the position of the data-scroll-call attribute. Right here we’re saying: because the letters enter the viewport and Locomotive’s name occasion fires, do one thing. Should you examine the JavaScript part, you’ll discover that at this level the getRandomColor() perform is firing. Optionally, right here we will additionally put into motion the data-scroll-delay attribute.
  • Assign the data-scroll, data-scroll-direction="horizontal", data-scroll-speed, and data-scroll-target="#companies" attributes to the banners. The data-scroll-direction="horizontal" will transfer the weather horizontally on scroll. Subsequent, by giving them reverse values for the data-scroll-speed attribute, we be sure that they may transfer in several instructions (from left to proper or proper to left). Lastly, the data-scroll-target="#companies" attribute will decide when the horizontal animations ought to begin. To know it, attempt to put the id of one other part e.g. data-scroll-target="#workplace" and reload the web page. Discover that the animations begin a lot ahead of they need to be.

Right here’s how we construction this part:

Part #6

The sixth part will embody three featured case research. Every case examine will include a heading, a picture, and a hyperlink to the case examine’s inside web page.

One of the case studiesOne of the case studiesOne of the case studies

As we scroll, every time a case examine’s heading (identify) comes into view, the background shade of the physique ingredient will change primarily based on the worth of the data-bg attribute of the related part.

The background color that is added when the section's heading comes into viewThe background color that is added when the section's heading comes into viewThe background color that is added when the section's heading comes into view

To implement this performance, we may once more use the name occasion, which might be a extra environment friendly method. However, let’s, this time, reap the benefits of one other occasion that the library offers, the scroll one. Verify the Javascript code for higher element on how we deal with this occasion.

Concerning the customized attributes:

  • We’ll give the data-bg-color attribute to every part with the specified shade worth.
  • We’ll add the data-scroll and data-scroll-repeat attributes to the headings so this performance is repeated as we scroll. Observe that we will customise the time that the library toggles the is-inview class through the data-scroll-offset attribute. 

Right here’s how we construction this part:

Should you want the physique shade to alter primarily based on the part’s visibility and never on the heading’s visibility, take away the data-scroll and data-scroll-repeat attributes from the headings, and add them to the sections. Additionally, make the changes wanted on the JavaScript code.

Additionally, you do not have to cease solely on the physique shade. Relying in your structure, you may change the textual content shade of every part, add animations, and so forth.

Part #8

The eighth part will embody a call-to-action heading.

The layout of the seventh sectionThe layout of the seventh sectionThe layout of the seventh section

As we scroll, two issues will occur:

  • First, every time the heading comes into view, it’s going to obtain a random shade, just like the earlier instance.
  • Second, we’ll animate every letter by creating one other parallax (lerp) impact.

To implement this performance, we’ll do the next:

  • Assign the data-scoll, data-scroll-repeat, and data-scroll-call="randomizeTextColor" attributes to the heading. Keep in mind that we’ve already met the data-scroll-call="randomizeTextColor" attribute. It’s completely fantastic to make use of it right here as effectively.
  • Assign the data-scroll, data-scroll-delay, and data-scroll-speed="5" attributes to every letter. All letters will transfer 5 instances quicker than regular scrolling, but with completely different delays. For instance, the primary letter could have data-scroll-delay="0.15" whereas the second data-scroll-delay="0.095". This may create the lerp/staggering impact. Once more you may see lerp results within the plugin’s showcase instance.

Right here’s how we construction this part:

2. Initializing the Plugin

We’ve talked about most of the plugin’s options, but we haven’t initialized it. Let’s try this now.

Right here’s all of the required JavaScript code:

Some fast notes:

  • We’ll maintain its easy habits throughout all units.
  • Discover the parameters of the name occasion callback. The primary one (i.e. worth) holds the values of the data-scroll-call attributes. Utilizing an if situation, we examine to see which values are energetic every time, then whether or not the related components enter or go away the viewport, and at last, we carry out the specified actions.
  • Though not utilized in our case, the callback of the scroll occasion accepts one parameter that gives helpful data. For instance, how a lot have we scrolled and which components are presently in view. Use your browser console to see the output of this parameter.

Conclusion

Congrats, people! We managed to construct a parallax scrolling web site due to Locomotive Scroll. Hopefully, this train has revealed the facility of this tiny library and motivated you to begin creating superior scrolling results effortlessly.

Right here’s a reminder of what we constructed:

Don’t overlook to offer it some love ❤️!

Earlier than closing, let me go away you with a number of ideas:

  • As with each expertise/instrument/library, one of the best ways to study Locomotive Scroll is thru its docs. Go forward, examine the revealed instance and use your browser instruments to examine its supply code. Additionally, examine its GitHub repo for points, how energetic the venture is, how different individuals use the library, or simply for taking some concepts. Should you really feel extra adventurous, examine the plugin’s native code. Right here you’ll study issues like what parameters a perform (e.g. the callback of the name occasion) can settle for, and so forth.
  • Scrolling results can lower a web site’s efficiency. Apart from this truth, the extra advanced the consequences, the extra danger there may be they may encounter points throughout completely different browsers/units. For instance, on cellular units I might keep away from utilizing the horizontal animations we coated.
  • For much more highly effective locomotive scroll results, you may mix Locomotive Scroll with different animation libraries like GSAP and barba.js.

Have you ever ever used Locomotive Scroll and Tailwind to construct a easy scrolling web site? What different plugins have you ever tried in that route?

Final however not least, an enormous due to Locomotive builders for this plugin! As all the time, thanks lots for studying, and make sure to share with us your Locomotive tasks!

Take a look at these different tutorials to study extra about JavaScript and scrolling:



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments