Pens from Ilya Gerasimenko https://codepen.io/igstudio/ en nospam@codepen.io Copyright 2024 2017-07-06T21:10:37-07:00 Rs & Ps (not mine, forked for playing with) https://codepen.io/igstudio/pen/VWBoGx https://codepen.io/igstudio/pen/VWBoGx Ilya Gerasimenko

See the Code - See it Full Page - See Details

]]>
Rs & Ps (not mine, forked for playing with) 2017-07-06T21:10:37-07:00
SVG/CSS Clock [WebKit/FF/Opera] https://codepen.io/igstudio/pen/WjdwrO https://codepen.io/igstudio/pen/WjdwrO Ilya Gerasimenko

See the Code - See it Full Page - See Details

A mechanical clock model (work in progress)

]]>
SVG/CSS Clock [WebKit/FF/Opera] 2017-05-31T19:51:26-07:00
SMS https://codepen.io/igstudio/pen/eWvrVm https://codepen.io/igstudio/pen/eWvrVm Ilya Gerasimenko

See the Code - See it Full Page - See Details

]]>
SMS 2017-05-04T13:20:17-07:00
Scroll to Transparency [FORKED] https://codepen.io/igstudio/pen/OWYXPg https://codepen.io/igstudio/pen/OWYXPg Ilya Gerasimenko

See the Code - See it Full Page - See Details

A vertical scroll pane with a gradient mask to fade the content out to transparency. Media query-based browser switch to use either -webkit-mask-image in webkit browsers or a svg mask in gecko browsers.

]]>
Scroll to Transparency [FORKED] 2017-02-17T15:00:28-07:00
CSS Text Cutout Without background-clip (Using mix-blend-mode) https://codepen.io/igstudio/pen/WGBoWa https://codepen.io/igstudio/pen/WGBoWa Ilya Gerasimenko

See the Code - See it Full Page - See Details

]]>
CSS Text Cutout Without background-clip (Using mix-blend-mode) 2017-06-26T21:15:43-07:00
before/after https://codepen.io/igstudio/pen/wzvGBm https://codepen.io/igstudio/pen/wzvGBm Ilya Gerasimenko

See the Code - See it Full Page - See Details

Plain vanilla javascript dynamic clipping

]]>
before/after 2017-04-28T13:52:02-07:00
CSS-only horizontal parallax/panorama scroller https://codepen.io/igstudio/pen/aZeePO https://codepen.io/igstudio/pen/aZeePO Ilya Gerasimenko

See the Code - See it Full Page - See Details

Self-explanatory. Uses translateX CSS transformation. A bit jumpy in Safari.

]]>
CSS-only horizontal parallax/panorama scroller 2017-05-24T14:37:52-07:00
Full page CSS-based scroll (pure vanilla JS, no libraries) https://codepen.io/igstudio/pen/pbYOab https://codepen.io/igstudio/pen/pbYOab Ilya Gerasimenko

See the Code - See it Full Page - See Details

CSS transform based full page scroll, Javascript (pure vanilla, no libraries) is used to set the transform property of the container element (touchscreen devices supported as well). Works in all browsers, including IE (with some glitches) Still might have to do some adjusting for Safari.

]]>
Full page CSS-based scroll (pure vanilla JS, no libraries) 2016-08-18T14:39:55-07:00
3D Flip Box Quotes Widget https://codepen.io/igstudio/pen/XKZMbg https://codepen.io/igstudio/pen/XKZMbg Ilya Gerasimenko

See the Code - See it Full Page - See Details

CSS 3D Transformation of a cube for refillable quote display

]]>
3D Flip Box Quotes Widget 2017-04-05T15:29:02-07:00
3D Flip Box CSS only https://codepen.io/igstudio/pen/gMovQo https://codepen.io/igstudio/pen/gMovQo Ilya Gerasimenko

See the Code - See it Full Page - See Details

CSS 3D Transformation of a cube for infobucket (no javascript). Now works in Edge, too.

]]>
3D Flip Box CSS only 2016-08-17T14:52:26-07:00