Pens from Edo https://codepen.io/Shikkediel/ en nospam@codepen.io Copyright 2024 2021-09-11T09:51:41-07:00 Level progress indicator https://codepen.io/Shikkediel/pen/bGRwawv https://codepen.io/Shikkediel/pen/bGRwawv Edo

See the Code - See it Full Page - See Details

]]>
Level progress indicator 2021-09-11T09:51:41-07:00
Dark starburst conic gradient background https://codepen.io/Shikkediel/pen/vYKBxqK https://codepen.io/Shikkediel/pen/vYKBxqK Edo

See the Code - See it Full Page - See Details

Reproducing a 42kb png image with CSS.

]]>
Dark starburst conic gradient background 2020-10-22T11:24:17-07:00
LucidScroll 3.5 development https://codepen.io/Shikkediel/pen/WBYmxZ https://codepen.io/Shikkediel/pen/WBYmxZ Edo

See the Code - See it Full Page - See Details

]]>
LucidScroll 3.5 development 2019-06-14T19:18:57-07:00
Gradient https://codepen.io/Shikkediel/pen/ZNqGmq https://codepen.io/Shikkediel/pen/ZNqGmq Edo

See the Code - See it Full Page - See Details

]]>
Gradient 2019-06-01T07:25:40-07:00
LucidScroll 3.4.3 https://codepen.io/Shikkediel/pen/xNyGqm https://codepen.io/Shikkediel/pen/xNyGqm Edo

See the Code - See it Full Page - See Details

]]>
LucidScroll 3.4.3 2019-06-01T20:36:13-07:00
Testing LucidScroll https://codepen.io/Shikkediel/pen/rgqNXe https://codepen.io/Shikkediel/pen/rgqNXe Edo

See the Code - See it Full Page - See Details

]]>
Testing LucidScroll 2019-06-14T19:19:15-07:00
Fullscreen animated scroll with page navigation https://codepen.io/Shikkediel/pen/rgYEgX https://codepen.io/Shikkediel/pen/rgYEgX Edo

See the Code - See it Full Page - See Details

Applying the LucidScroll plugin to emulate the interface of tesla.com. The script includes 30 custom easing equations to choose from.

]]>
Fullscreen animated scroll with page navigation 2019-06-02T10:10:09-07:00
Spinning icosahedron https://codepen.io/Shikkediel/pen/XGzZwv https://codepen.io/Shikkediel/pen/XGzZwv Edo

See the Code - See it Full Page - See Details

]]>
Spinning icosahedron 2019-03-13T00:18:34-07:00
Direction aware rotatable dodecahedron https://codepen.io/Shikkediel/pen/bZVKXy https://codepen.io/Shikkediel/pen/bZVKXy Edo

See the Code - See it Full Page - See Details

Based on CSS, does not necessarily need Javascript. It is only used to calculate the direction of the shape's facets when rotating so it can do without hiding the backside, enabling it to be convincingly transparent. There are two levels of nested transforms, these are combined by a Javascript multiplication to get a final matrix. From this is derived whether the elements are facing forward. Because of lacking z-index with 3D transform, the element in question is hidden and its counterpart (which is placed earlier in the stacking context by page markup) is shown instead.

]]>
Direction aware rotatable dodecahedron 2019-03-29T05:47:00-07:00
Shapeable rotating box https://codepen.io/Shikkediel/pen/PLwLVb https://codepen.io/Shikkediel/pen/PLwLVb Edo

See the Code - See it Full Page - See Details

]]>
Shapeable rotating box 2019-02-28T18:29:29-07:00