Return of the Creepy Face

On Monday, I posted an article about a fun JavaScript plugin - Creepy Face - which I implemented onto my experiments page with much enjoyment. Well, someone from the creepyface.io social media team got in touch to let me know they had a React version of the plugin ready to try.

I’m pleased to say that React-Creepyface works just as well as it’s origin, in fact it was even easier to setup without having to worry about react state management, useEffect and things like that. If you’re using it in Gatsby you just pull some images into the page with a static graphql query, then add your component like so:

<Creepyface
  style={{ width: 300 }}
  src={data.imageHover.childImageSharp.fixed.src}
  options={{
    hover: data.imageHover.childImageSharp.fixed.src,
    looks: [
      { angle: 0, src: data.imageAngle0.childImageSharp.fixed.src },
      { angle: 45, src: data.imageAngle45.childImageSharp.fixed.src },
      { angle: 90, src: data.imageAngle90.childImageSharp.fixed.src },
      { angle: 135, src: data.imageAngle135.childImageSharp.fixed.src },
      { angle: 180, src: data.imageAngle180.childImageSharp.fixed.src },
      { angle: 225, src: data.imageAngle225.childImageSharp.fixed.src },
      { angle: 270, src: data.imageAngle270.childImageSharp.fixed.src },
      { angle: 315, src: data.imageAngle315.childImageSharp.fixed.src }
    ]
  }}
/>

And there you have it, another creepy face added to my experiments page! Thanks again to the people at creepyface.io for letting me know about this update.

< Next article

Saturday 27 February 2021

The Medium

Previous article >

Monday 10 February 2020

Creepy Face

© 2023 - 2024 Pursuit of Loot.

Twitter Spotify RSS
Back to top