Skip to content

Commit

Permalink
chore: update parallax blog to reflect new changes
Browse files Browse the repository at this point in the history
  • Loading branch information
is-it-ayush committed Mar 3, 2024
1 parent 5c1177b commit ed3dd2c
Showing 1 changed file with 8 additions and 1 deletion.
9 changes: 8 additions & 1 deletion content/split-paragraph-into-lines-with-canvas.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,14 @@ Here's the hack.
This isn't a perfect solution since it relies on assumption (divide by 2)
but it approximately mimics the original browser render.

- [Here's the code.](https://github.com/is-it-ayush/measure-text-with-canvas/blob/main/src/app/clientwrapper.tsx#L10-L48)
### update.

Instead of stepping between desktop and client width at the breakpoint. We can also
linearly interpolate between them. I was able to fix the above issue where the
content shifts to new line thereby making the paragraph look odd. This makes the
animation responsive. I've also updated the code to be much more readable!

- [Here's the code.](https://github.com/is-it-ayush/measure-text-with-canvas/blob/main/src/app/_components/parallax-text.tsx)
- [Here's another helpful blog I recommend reading.](https://erikonarheim.com/posts/canvas-text-metrics/)

Happy Hacking! :3

0 comments on commit ed3dd2c

Please sign in to comment.