A background image segment effect as seen on Filippo Bello’s Portfolio, employing the CSS clip-path property and powered by anime.js.

This is a little decorative effect with you that we’ve encountered on Filippo Bello’s Portfolio, maybe you’ve seen it. It’s a really neat way to add some jazz to background images. The idea is to replicate boxes from a background with the same background image and make these boxes move in perspective towards the viewer. Adding a fitting shadow and some parallax makes all this look quite interesting.

segment-effect-css

[gpp_button color=”blue” url=”http://tympanus.net/Development/SegmentEffect/” title=”css effect” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demo[/gpp_button]    [gpp_button color=”blue” url=”http://tympanus.net/codrops/2016/09/21/background-segment-effect-with-css-clip/” title=”css effect” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Source[/gpp_button]