I’m going to attempt my first clean sheet build in webflow and could use some advice on the most relevant educational resources and best practices I can use to prepare. My experience level is low but my confidence is high, so I’m well positioned to make a huge mess.
My goals:
Build a site with a single color background and single color 10px border. The border should be persistent on all screens and not move or change.
The site body itself would be three page sections, each with a single text box centered in the middle of any otherwise empty page.
I want to implement a scrolling animation that smoothly moves the user from one page section to the next when they either A) click/tap the text box or B) scroll past a certain point.
When scrolling, I would like the text boxes to remain centered in the page until the scroll animation is triggered.
Point 3 might become interesting, depending on the exact interaction you wish to implement, but so far everything you listed is quite well doable in Webflow. The scroll effect can also be achieved by using Fullpage.js, but requires coding knowledge and might be interesting at an advanced stage.
Best practices are highly controversial as in every profession, I’d recommend trying and going with as few elements as possible and using classes consistently. From there you’ll encounter problems and solutions by yourself, so all that’s left to do is to dive right in!
Good luck and feel free to comment about minor issues, for more complex ones a new thread might be fitting.
Thanks Leon! You’re right, #3 is the bigger technical lift as it turns out. I’m comfortable adding and configuring custom code to headers, so that is totally within bounds here.
Status as of now
Page is basically laid out and in place, with all blocks positioned correctly, awaiting a font and copy pass.
I’m choosing between Fullpage.js or Scrollify to implement the scrolljacking animation.
Thoughts
Webflow makes this really easy. Hard to say exactly when it “clicked” but once I started getting a feel for positioning methods a lot of things fell into place.
Learning webflow has given me a better sense of what CSS does overall, which is nice.
Some of the webflow instructional videos out there are out of date or overlapping, which can complexicatify (totally a word) self learning, but not to a serious degree.
Question for the minds here: I configured in page linking but for whatever reason the links after the hero all result in the div block they link to not be centered on the page. Thoughts on how to fix that?
Ignore the terrible background colors - they’re temporary. I’m using them to evaluate the position of the in page links and scrolling behavior.
Thank you!
Update fixed it with some zero height div blocks that I used as adjustable targets with relative position values. Leaving the link up in case anyone would benefit from seeing the solution.