This a work in progress to create a different style of self-presentation/portfolio.
My goal is to create some sort of landing page that shows some of my design and thinking.
Feel free to leave your feedback!
In the comments here or in the showcase https://webflow.com/website/Hire-Flemming
Thanks for your time!
Fantastic work here, @flemingspace! Really love the way you highlight lines as the user scrolls—how did you achieve that?
One small nit is that, on my screen, one of the app screens covers up a key portion of the first line of copy, throwing off the rest of the experience not insignificantly…
Oh! many thanks for your feedback I’ll make sure to fix that.
In regards to the technique:
Split the whole paragraph into
span of selected sentences that will be highlighted together or put every highlight on a separate
Create an animation for the
div surrounding the paragraph, with the while scrolling trigger.
Select the first sentence and set the first state to the low opacity of your choice (
20% in my case) and then form the point that the text enters the desired coordinate set opacity to
After the text runs the percentage scroll of your choice then set opacity to
20% again (to avoid the fading of the reading text due to the motion of the animations I set another
100% opacity animation 1 or 2 scroll percentages behind this one).
Now for the sentence after in the previous
100% opacity of the last sentence insert a
20% opacity for this sentence and in the previous
20% opacity insert the
100% opacity for this sentence (to get a nice cycle effect!).
After that is pretty much repeating the same step and giving whatever percentage of the scroll your sentence takes and setting a cycle there and son and so forth!
Note: There is some tweaking required for the different viewports, but nothing too chaotic.
That’s pretty much it, there could be a better way to do that but that was my first-day using Webflow and the menus were still unknown to me.
The project has cloning enabled so that anyone can clone it and check it out,
Thanks for reaching out!
Nice work but.
The unhighlight text should less more attractive than the highlight one, may be you could reduce the font color softer.
Otherwise the highlight text during scroll will have less attention.
Thanks for the detailed instructions! And for making it cloneable
Wow. I cannot wait to see what you create with three days!
Welcome to the Community!!!
I think you’re right, let’s see how I can boost that attention!
jejeje thanks @magicmark
let’s see what’s my next thing.