ReactJS × Codrops: Animated Fragment Slideshow

Beautiful dynamic fragment effects showing images from Unsplash.

Browsing Codrops for inspiration, I stumbled upon this incredible thing. A sort of image slide showing with a very dynamic eye-catching fragments effect. Here is the link to it, https://tympanus.net/codrops/2018/02/21/animated-fragment-slideshow.

To make it more easier to define the images, I create this experiment where I have wrapped the library so it can be used in React. The code is in the github, https://github.com/mjunaidi/react-codrops-slide-pieces.

The project only required Node JS. On having the source code locally, simply run node web-server.js. It will run it on http://localhost:3000.

To add images, put the image files in img directory of the project. Then update json file data/images.json by adding entry for each image file added.

For example, if the image file name is flowers.jpg, add this into the array;

[
  ...
  {
    "name": "Beautiful Flowers",
    "src": "flowers.jpg", 
  }
 ...
]

If key name and its value are not specified, the image file name will be used instead.

Here is another React JS version of the image slideshow in CodePen, https://codepen.io/mjunaidi/pen/ZxzXBG. Images are from Unsplash with the help of Picsum in resizing and randomizing it. The image name is just lorem ipsum randomly.

Thanks.