Pursuit of Loot

Return of the Creepy Face

Posted on 16th February 2020

Tags:

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.


Enjoyed this post? Feel free to share it with your audience using the links below:

Don't see your favourite social network on the list? Feel free to let me know and I'll get it added.

Comments

©2022 Pursuit of Loot. All rights reserved.