CSS-ing the Super Silly Hackathon website

A walk-through of my joruney is building a diagonal-scrolling website, Super Silly Hackathon https://supersillyhackathon.sg/

Presented at Talk.CSS #23 Party Edition (Singapore CSS Meetup) https://singaporecss.github.io/23/

Video: https://engineers.sg/v/2156

Transcript

1. CSS-ing the Super Silly Hackathon website Talk.CSS #23 Edition - 29 Nov 2017
2. OMG PLZ follow me on TWITTER! @cheeaun
5. https://youtu.be/lIdB466G90E
6. I design too one leh
7. How do you make it diagonal/tilted/ slanted?
8. tranform: rotate(-15deg);
9. Transform origin is in the middle here! No one can see the content Viewport
10. Now, how do we scroll here? Ok, let’s move this up here.
11. 1st attempt Move the transform-origin
12. Understand transform- origin Check this out: http://cssreference.io/ property/transform-origin/
13. ▶ ▶ ▶▶ ▶ Scrolling down ▶ ▶ ▶▶ ▶
14. Pros: easy++ Cons: Slow, weird & horizontal scrollbar
15. 2nd attempt translateX CSS with awesome Math Check this out: https://developer.mozilla.org/en- US/docs/Web/CSS/transform-function/translate
17. scrollTop + viewport / 2 Move left
18. translateX
19. scrollTop + viewport / 2 Move left
20. s m Θ = 15° m = s tanΘ
22. m Θ = 15° x y = m sinΘ y x = m cosΘ
23. Magic It works!
24. Cons: Slow & horizontal scrollbar
25. 3rd attempt wrap around another div and translateX it
26. This dotted div translateX to the left This div rotate 15°
27. Pros: Simple, transitional Cons: Still lag a bit
28. Performs well on mobile browsers, decent on desktop browsers
29. Firefox https://youtu.be/Gs0J2GIqonk
31. Research Time
32. Scroll jank When you scroll a page and there's such a delay that the page doesn't feel anchored to your finger, that's called scroll jank. Quoted from https://developers.google.com/ web/updates/2016/06/passive-event-listeners
33. Passive event listeners • Read this plz: https://github.com/WICG/ EventListenerOptions/blob/gh-pages/ explainer.md • Check out the browser support yo: https:// caniuse.com/#feat=passive-event-listener
34. With APZ, scrolling is decoupled from the JavaScript thread https://hacks.mozilla.org/2017/11/async-panzoom-apz- lands-in-firefox-quantum/
35. Animation Worklet A new primitive for creating scroll-linked and other high performance procedural animations on the web. Read more from https://github.com/WICG/animation-worklet
36. I suspect that’s the problem. BUT wait
37. Learn this https://css-tricks.com/ almanac/properties/w/will-change/
38. Reduce paint areas …often a case of orchestrating your animations and transitions to not overlap as much, or finding ways to avoid animating certain parts of the page. Text stolen from https://developers.google.com/web/fundamentals/performance/ rendering/simplify-paint-complexity-and-reduce-paint-areas
40. ✅ Large paint area ✅ Animate everything
41. In the end, I have no idea what I’m doing
42. But at least I learnt something
43. Thank you @cheeaun https://supersillyhackathon.sg/ https://github.com/supersillyhackathon