CSS-ing the Super Silly Hackathon website

Slide 1

Slide 1 text

CSS-ing the Super Silly Hackathon website Talk.CSS #23 Edition - 29 Nov 2017

Slide 2

Slide 2 text

OMG PLZ follow me on TWITTER! @cheeaun

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

https://youtu.be/lIdB466G90E

Slide 6

Slide 6 text

I design too one leh

Slide 7

Slide 7 text

How do you make it diagonal/tilted/ slanted?

Slide 8

Slide 8 text

tranform: rotate(-15deg);

Slide 9

Slide 9 text

Transform origin is in the middle here! No one can see the content Viewport

Slide 10

Slide 10 text

Now, how do we scroll here? Ok, let’s move this up here.

Slide 11

Slide 11 text

1st attempt Move the transform-origin

Slide 12

Slide 12 text

Understand transform- origin Check this out: http://cssreference.io/ property/transform-origin/

Slide 13

Slide 13 text

▶ ▶ ▶▶ ▶ Scrolling down ▶ ▶ ▶▶ ▶

Slide 14

Slide 14 text

Pros: easy++ Cons: Slow, weird & horizontal scrollbar

Slide 15

Slide 15 text

2nd attempt translateX CSS with awesome Math Check this out: https://developer.mozilla.org/en- US/docs/Web/CSS/transform-function/translate

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

scrollTop + viewport / 2 Move left

Slide 18

Slide 18 text

translateX

Slide 19

Slide 19 text

scrollTop + viewport / 2 Move left

Slide 20

Slide 20 text

s m Θ = 15° m = s tanΘ

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

m Θ = 15° x y = m sinΘ y x = m cosΘ

Slide 23

Slide 23 text

Magic It works!

Slide 24

Slide 24 text

Cons: Slow & horizontal scrollbar

Slide 25

Slide 25 text

3rd attempt wrap around another div and translateX it

Slide 26

Slide 26 text

This dotted div translateX to the left This div rotate 15°

Slide 27

Slide 27 text

Pros: Simple, transitional Cons: Still lag a bit

Slide 28

Slide 28 text

Performs well on mobile browsers, decent on desktop browsers

Slide 29

Slide 29 text

Firefox https://youtu.be/Gs0J2GIqonk

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Research Time

Slide 32

Slide 32 text

Scroll jank When you scroll a page and there's such a delay that the page doesn't feel anchored to your ﬁnger, that's called scroll jank. Quoted from https://developers.google.com/ web/updates/2016/06/passive-event-listeners

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

With APZ, scrolling is decoupled from the JavaScript thread https://hacks.mozilla.org/2017/11/async-panzoom-apz- lands-in-ﬁrefox-quantum/

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

I suspect that’s the problem. BUT wait

Slide 37

Slide 37 text

Learn this https://css-tricks.com/ almanac/properties/w/will-change/

Slide 38

Slide 38 text

Reduce paint areas …often a case of orchestrating your animations and transitions to not overlap as much, or ﬁnding 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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

✅ Large paint area ✅ Animate everything

Slide 41

Slide 41 text

In the end, I have no idea what I’m doing

Slide 42

Slide 42 text

But at least I learnt something

Slide 43

Slide 43 text

Thank you @cheeaun https://supersillyhackathon.sg/ https://github.com/supersillyhackathon