Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Codrops

Last update: Nov 29, 2022

Related tags

Effect SegmentEffect

Overview

Segment Effect

Background image segment effect as seen on Filippo Bello's Portfolio.

Article on Codrops

Demo

License

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Credits

Inspired by the effect seen on Filippo Bello's Portfolio
Animations powered by anime.js, the easy-to-use JavaScript animation library by Julian Garnier.
We're using imagesLoaded by Dave DeSandro.
The images used in the demos are from Unsplash.com

Misc

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest

A sticky image effect for a slideshow inspired by ultanoir's website.

How to Create a Sticky Image Effect with Three.js A sticky image effect for a slideshow inspired by ultanoir's project showcase slideshow. Article on

Nov 18, 2022

A full image reveal effect with fancy thumbnail sliding.

Full Image Reveal Effect A full image reveal effect with fancy thumbnail sliding. Article on Codrops Demo Credits Images from Unsplash.com TweenMax by

Dec 19, 2022

image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions

Nov 26, 2022

KenBurns Image Effect for React Native Applications

react-native-kenburns-view KenBurns Image Effect for React Native. Based on Image Component Image Component. Version: 4.1.0 Tested on React Native 0.6

Sep 3, 2022

A speedy motion transition effect for an image slideshow.

Motion Transition Effect A speedy motion transition effect for an image slideshow. Inspired by Ping Pong Slow Motion. Article on Codrops Demo Credits

Jul 5, 2022

React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

Dec 24, 2022

A vue.js particles animation background component

particles-bg-vue A vue.js particles animation background component. Use it to make your website look cool. Check it out if you want to use it in React

Dec 24, 2022

An experimental SVG letter animation inspired by the Dribbble shot ["Shading Letters in Illustrator"](https://dribbble.com/shots/2943049-Shading-Letters-in-Illustrator) by Jake Bartlett's. Powered by Julian Garnier's [anime.js](http://anime-js.com/).

Fancy SVG Letter Animation An experimental SVG letter animation inspired by the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett's. Pow

Dec 12, 2022

Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac

Nov 15, 2022

Comments

self.options always undefined.

Undefined self = window, so self.options is always undefined.

A bug i saw when converting to TypeScript. Tested in browser to confirm that self was the same as window, not this (self is a global refference to window.)

opened by kritollm 1

Owner

Codrops

GitHub

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

571 Nov 21, 2022

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

Thumbnail Grid with Expanding Preview A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Googl

353 Jan 4, 2023

Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Related tags

Overview

Segment Effect

License

Credits

Misc

You might also like...

A sticky image effect for a slideshow inspired by ultanoir's website.

A full image reveal effect with fancy thumbnail sliding.

image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

KenBurns Image Effect for React Native Applications

A speedy motion transition effect for an image slideshow.

React particles animation background component

A vue.js particles animation background component

An experimental SVG letter animation inspired by the Dribbble shot ["Shading Letters in Illustrator"](https://dribbble.com/shots/2943049-Shading-Letters-in-Illustrator) by Jake Bartlett's. Powered by Julian Garnier's [anime.js](http://anime-js.com/).

Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Comments

self.options always undefined.

Owner

Codrops

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

Switch the background-image with using effect.

A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

Add a water ripple effect to your background using WebGL.

A decorative website background effect where SVG shapes morph and transform on scroll.

A motion hover effect for a background grid of images.

fixed-background-effect

Pure CSS Image Hover Effect Library