Parallax using scroll driven animations

codingjlu — Thu, 23 Nov 2023 02:08:40 +0000

Few things are more satisfying than an immersive and beautiful parallax effect well-placed on a website. Unfortunately, the better-looking more complex effects tend to be, well, more complex (to implement), and parallax isn't an exception.

There are several approaches to creating a parallax effect, perhaps the most common is using JavaScript, where you listen for a user scroll event and update the position of a certain element accordingly. However, it's all too easy to end up with a janky and low-performance result, and making it look smooth takes a ton of work. (Yeah, there are also libraries out there, but that just adds more bloat to your app and often lacks customization.)

Then there's the CSS trick where you play with perspective and 3D translations. The issue here? Embrace it: it's hard, confusing, and doesn't always work.

With that out of the way, recently I looked into the relatively new (and as of now Chrome-only) scroll-driven animation API. This approach allows you to apply CSS animations using a scroll-based (instead of time-based) timeline, in other words, you animate stuff based on the user scrolling, without using JavaScript. You might see where this is headed: we can animate the translation of an element based on the scroll position, giving us a very straightforward and smooth effect. Is this approach necessarily better? I don't know, but it looks a lot more doable (plus, it'll be fun).

Alright, here's some actual code. Define a CSS animation...

@keyframes p-1 {
  from { transform: translateY(0) }
  to { transform: translateY(-100px) }
}

and add it to some element:

#parallax {
  animation-name: p-1;
  animation-timeline: scroll();
  animation-timing-function: linear;
}

Yeah. That's it. Mic drop.

All you have to do is tweak how much you translate a certain element in the animation to determine its "scroll speed".

Oh, and of course, the codepen.

Sponsored by scroll-driven animations. (Just kidding.)

Developing Express and React on the same port

codingjlu — Mon, 17 Jan 2022 05:52:38 +0000

Without CRA.

I was quite annoyed at how difficult it was to integrate React with Express. The process goes something like:

Setup your Express app in one directory
Use CRA to generate the frontend in another directory
Develop backend
Use a proxy for the frontend and mess with CORS
Done. Production? Squash together... mess

Sounds simple? Not for me. This was even... hacky. Creating React apps with Express shouldn't be hard. It's been a long time since React and Express came out, and nothing could be better?

Oh well. I'll just use NextJS or something. Until things get messy. Websockets? Uncheck. Elegant routing? Double uncheck. I just find it hard to work with. The server-side is hard(er than Express; perhaps I'm just lazy though) to configure too.

So, we're now officially stuck. So what's the option? Back to Express...

I set off to make a template. A template to use Express and React—with no mess.

Let's dive in.

To start off, let's fork the template.



git clone https://github.com/codingjlu/express-react-template.git

Then move to the directory:



cd express-react-template

Now we'll have install all the dependencies. Run the install command:



npm install

Then we have to install all the dependencies for the frontend.



cd client



npm install

Now that everything's installed we can start the development server:



npm run dev

Now once stuff stops printing in the console you can open up http://localhost:3000. Boom! Our React app is now up and running, powered by Express. You should see something like this:

We're using React Router, so if you click on the link we should see an instant change to the new location. Cool!

We have also defined a API endpoint using POST at /hello. You should see some JSON like this:

Yay! Our Express React app is up and running, with no junk. We can customize our server and client.

Let's go to index.js in the root of our file and replace



app.post("/hello", (req, res) => {
  res.json({
    hello: "world"
  });
});

With



app.get("/hello/:name", (req, res) => {
  const { name } = req.params;
  res.json({
    message: `Hello, ${name}!`
  });
});

Now visit http://localhost:3000/hello/Bob and see what happens. Experiment and change Bob to something else. When you're comfortable with Express (which you probably already are) you can go ahead and change the server however you like. You can create new files, edit the file, perform backend operations, and more!

We can also customize the client-side (React). Let's make a button on the home page that let's you say hello.

Go to your code and and open up /client/src/routes/home.js and let's add a button to our <Home /> component. Inside of the parentheses after return change the value to:



<>
  <Hello><Link to="/hello">Hello</Link>, world!</Hello>
  <button onClick={() => alert("Hello!!")}>Say hello</button>
</>

Now save the file and reload localhost on your browser. Click on the button and you should get a hello message!

Sounds great? Great!

For the template, the frontend stack uses Styled Components. You can change it to something else, but you might have to edit the webpack config (like if you wanted to do modules or something). Importing images (including SVG) also works.

That's it. If you used the template please tell me what cool things you made with it!

The template repository is https://github.com/codingjlu/express-react-template.

DEV Community: codingjlu

Parallax using scroll driven animations

Developing Express and React on the same port