Image curve
A row of images that curls in from one edge, flattens at the centre and fades out at the other.
Hover an image: the row holds still and names the work. Click to open it. With the keyboard, Tab brings up a row of links.
Premium custom animation
A bespoke show-piece designed and built around your own content (for example a curved image row or glass folders): 3D, glass effects, its own artwork. More design and tuning work than a standard animation.
HUF 80,000 – HUF 95,000
A row of images streams round the inside of a cylinder, right to left. The centre faces you flat, the two ends bend toward you so every image curves along its length, and the edges fade into the colour of the page. Hover one and the row holds still and names it; press it and it opens.
- CSS 3D
- perspective
- Container queries
How it works
A CSS box can't bend, so each image is cut into 16 thin vertical strips, and every strip is one facet of the cylinder: the same image, turned its own few degrees round the cylinder's axis. The image itself is a single animation: one rotation about that same axis carries it along the arc, so its strips can never drift apart or show different pictures. The motion is transform only, which the graphics card handles, and the fade at the ends is a static mask.
The JavaScript does two small jobs: it measures the frame to work out how many images the loop needs, and it hands each image its next picture as it wraps out of sight, so a list of any length plays through. What isn't visible stops (scrolled away, or reduced motion asked for). It works from the keyboard too: the works are the same links, in a row that appears on Tab.
Want something like this on your own site?
Motion and WebGL are part of what I do. We'll work out what fits your site while keeping it fast.
Get an estimate
Content editorChange your site's content without coding, and see the result at once.