Frontend Art 03 — YouTrition Ingredients

At YouTrition, we provided people with personalized fitness consumables to maximize the effectiveness of their hard work during exercise. We wanted to be completely transparent about what our customizable pre-workout supplements contain, so I created this ingredients page to describe what our formulas consist of. I used HTML, CSS, JavaScript, and jQuery to build this.

This article is a guide on how to create a similar page. To keep this explanation concise, I will only explain how to make the small black boxes of text slide horizontally as you scroll vertically.

You can find the code on my GitHub here. You should not use React for this because we use jQuery.

Requirements

• Solid understanding of HTML, CSS, JavaScript, and jQuery

The Black Boxes of Text

From now on, each black box of text will be referred to as a “box”. Each full-screen container that holds the image and box will be called an “ingredient”.

Step 1: Create some ingredients

.ingredient {
  width: 100%;
  height: 100vh;
  position: relative;
}

Step 2: Create an event handler function that will be called when the onScroll event is triggered

Every time the function is triggered, it iterates through each ingredient and does the following:

1. Gets top position, relative to the document, of the ingredient container as well as the height of the ingredient container
2. Calculates ratio, which represents how far we have traveled within the container: Math.abs((scrolled2-top)/height) . If the ingredient is odd, we switch the top and scrolled2. We do this because we want the black boxes of the even ingredient containers to move in the opposite direction as the odd ones as we scroll
3. Gives ingredient-space a width, based on the ratio. This element is the invisible div of space between the black box and the left side of the page. 50 is just a constant used to define how fast we want the invisible div to expand and contract. The greater this constant is, the faster the invisible div will change size.
4. Calculates and applies the opacity for the black box. The opacity is always between 0 and 1. We square the opacity to dramatize the animation (i.e. it approaches opacity: 1 faster, it approaches opacity: 0 slower)

Step 3: Attach the event handler to the window

$(document).ready(function() {
  scroller();
  $(window).scroll(scroller);
});

Before attaching the function to the scroll event listener, we invoke it to position the black boxes.

Thank you for reading!
If you have any questions, please feel free to reach out to me at:
ymoondhra@gmail.com