Pens from Liu Yuyang https://codepen.io/reverland/ en nospam@codepen.io Copyright 2024 2023-04-21T13:08:10-07:00 weired machine firefox error https://codepen.io/reverland/pen/jOeVjXG https://codepen.io/reverland/pen/jOeVjXG Liu Yuyang

See the Code - See it Full Page - See Details

]]>
weired machine firefox error 2023-04-21T13:07:49-07:00
weired machine, chrome onerror https://codepen.io/reverland/pen/eYPBwge https://codepen.io/reverland/pen/eYPBwge Liu Yuyang

See the Code - See it Full Page - See Details

]]>
weired machine, chrome onerror 2023-04-21T13:08:10-07:00
CSS Rain Effect https://codepen.io/reverland/pen/LYBJXoJ https://codepen.io/reverland/pen/LYBJXoJ Liu Yuyang

See the Code - See it Full Page - See Details

Looks best with a taller window/layout. Rain drop elements animate down the screen, stem element inside animates to disappear toward the end of the drop's fall, splat element animates after the stem disappears. JavaScript used to randomly position drop elements across the screen, slightly randomize their animation duration and delay, and also stagger their top position. Randomizing delay makes sure the drops don't fall in one sheet, randomizing duration keeps them from falling in the same constant synchronization. Staggering top position makes it so the splats don't fall in a single line. Splatters are unfortunately disabled by default as it is rather intensive and significantly lowers framerate on most machines (in Chrome that is--FireFox and Edge are smoother actually). You can hit the splat toggle to turn it on. The effect is achieved by putting a dotted border-top on an ellipse element, and animating it from scale(0) to scale(1). You can get a better look at it by enabling the single and splat toggles. There's also a back row you can enable, which is positioned upwards and mirrored. Does not work well with IE11 at all for whatever reason. Rain drops will not even show unless you jiggle the window size a bit, and at that point all the animations are out of sync.

]]>
CSS Rain Effect 2023-01-31T01:48:45-07:00
Wall-scribed Poem Found in Cao Xueqin's Old House https://codepen.io/reverland/pen/YzwmQEx https://codepen.io/reverland/pen/YzwmQEx Liu Yuyang

See the Code - See it Full Page - See Details

]]>
Wall-scribed Poem Found in Cao Xueqin's Old House 2020-08-01T14:20:20-07:00
react-jsonschema-form-demo https://codepen.io/reverland/pen/RqomKq https://codepen.io/reverland/pen/RqomKq Liu Yuyang

See the Code - See it Full Page - See Details

]]>
react-jsonschema-form-demo 2018-11-13T05:32:26-07:00
A Pen by Liu Yuyang https://codepen.io/reverland/pen/JabXpQ https://codepen.io/reverland/pen/JabXpQ Liu Yuyang

See the Code - See it Full Page - See Details

]]>
A Pen by Liu Yuyang 2018-08-30T02:20:24-07:00
Static404 https://codepen.io/reverland/pen/xLEJqN https://codepen.io/reverland/pen/xLEJqN Liu Yuyang

See the Code - See it Full Page - See Details

Static / Glitch of an image w/canvas <br>Mouseover | TouchSwipe to intensify effect.

]]>
Static404 2017-08-03T10:15:37-07:00
404 concept page πŸ˜­πŸ“ΊπŸ™Œ https://codepen.io/reverland/pen/LjRdKZ https://codepen.io/reverland/pen/LjRdKZ Liu Yuyang

See the Code - See it Full Page - See Details

A 404 concept page using the classic white noise for no signal from an analogue television set. Makes use of a trick with `canvas` to generate a `canvas` that displays the white noise and then use this as a background image for `document.body`. Updating the `background-position` on animation frame gives the illusion of movement. Enjoy!

]]>
404 concept page πŸ˜­πŸ“ΊπŸ™Œ 2017-08-03T08:35:11-07:00
404 https://codepen.io/reverland/pen/RZGMOV https://codepen.io/reverland/pen/RZGMOV Liu Yuyang

See the Code - See it Full Page - See Details

The 404 page from my site, full version: http://hakim.se/404 Inspired by http://bit.ly/P6733r

]]>
404 2017-08-03T08:32:40-07:00
autoclose in wechat https://codepen.io/reverland/pen/bRZePd https://codepen.io/reverland/pen/bRZePd Liu Yuyang

See the Code - See it Full Page - See Details

]]>
autoclose in wechat 2017-07-17T02:14:29-07:00