The latest articles on DEV Community by Alejandro Tardín (@4lejandrito). https://dev.to/4lejandrito https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F149263%2F49b1366a-dddd-4aed-a258-ed377d13fe60.jpeg https://dev.to/4lejandrito en Alejandro Tardín Mon, 06 May 2019 20:51:48 +0000 https://dev.to/4lejandrito/meet-creepyface-my-little-side-project-4f3m https://dev.to/4lejandrito/meet-creepyface-my-little-side-project-4f3m <p>Hi all,</p> <p>I want to introduce <a href="https://creepyface.io" rel="noopener noreferrer">Creepyface</a>, my side project. Creepyface is <a href="https://github.com/4lejandrito/creepyface" rel="noopener noreferrer">a small JavaScript library</a> I made to make my face follow the mouse pointer on my online resumé. I decided to share it with everyone and here it is:</p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/4lejandrito" rel="noopener noreferrer"> 4lejandrito </a> / <a href="https://github.com/4lejandrito/creepyface" rel="noopener noreferrer"> creepyface </a> </h2> <h3> The JavaScript library that makes your face look at the pointer. 🤪🖱️👆 </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"><div class="markdown-heading"> <h1 class="heading-element"> <a href="https://creepyface.io" rel="nofollow noopener noreferrer">Creepyface</a> · <a href="https://github.com/4lejandrito/creepyface/blob/master/LICENSE" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/6581c31c16c1b13ddc2efb92e2ad69a93ddc4a92fd871ff15d401c4c6c9155a4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667" alt="GitHub license"></a> <a href="https://www.npmjs.com/package/creepyface" rel="nofollow noopener noreferrer"><img src="https://camo.githubusercontent.com/6ec3fd3d7091ef52f1b10f071f03dd9dc43f10b93b4cf9df9d7677222913d2e6/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f637265657079666163652e7376673f7374796c653d666c6174" alt="npm version"></a> <a href="https://github.com/4lejandrito/creepyface/actions?query=workflow%3ABuild+branch%3Amaster" rel="noopener noreferrer"><img src="https://github.com/4lejandrito/creepyface/workflows/Build/badge.svg" alt="Build"></a> <a href="https://coveralls.io/github/4lejandrito/creepyface?branch=master" rel="nofollow noopener noreferrer"><img src="https://camo.githubusercontent.com/3c5e0597e475306efa06333ebd4e329aae1e06529d152be37d94ad99ecc387ad/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f346c656a616e647269746f2f637265657079666163652f62616467652e7376673f6272616e63683d6d6173746572" alt="Coverage Status"></a> <a href="https://twitter.com/intent/follow?screen_name=creepyface_io" rel="nofollow noopener noreferrer"><img alt="Follow on Twitter" src="https://camo.githubusercontent.com/af2293225492519e9df0493801cb47262403cb4e4f53d062f818d1c310f95c3c/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f637265657079666163655f696f2e7376673f7374796c653d736f6369616c266c6162656c3d466f6c6c6f77"></a> </h1> </div> <p><a rel="noopener noreferrer" href="https://github.com/4lejandrito/creepyfacecover.jpg"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2F4lejandrito%2Fcreepyfacecover.jpg" alt="The Creepyface logo with a background full of faces looking at the pointer"></a></p> <p>Creepyface is a little JavaScript library that makes your face look at the pointer (or <a href="https://github.com/4lejandrito/creepyfacepackages/creepyface-dance" rel="noopener noreferrer">dance 💃</a>).</p> <p>See it in action at <a href="https://creepyface.io" rel="nofollow noopener noreferrer">creepyface.io</a> and create your own one using <a href="https://creepyface.io/create" rel="nofollow noopener noreferrer">the wizard</a>.</p> <p>If you use React, check out <a href="https://github.com/4lejandrito/creepyfacepackages/react-creepyface" rel="noopener noreferrer">&lt;Creepyface /&gt;</a>. If you like fireflies, check out <a href="https://github.com/4lejandrito/creepyfacepackages/creepyface-firefly" rel="noopener noreferrer">creepyface-firefly</a>.</p> <p><a rel="noopener noreferrer" href="https://github.com/4lejandrito/creepyfaceexample.gif"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2F4lejandrito%2Fcreepyfaceexample.gif" alt="Example animated gif of a face looking at the pointer"></a></p> <p>Creepyface in the wild:</p> <ul> <li><a href="https://www.patrickcampbell.dev" rel="nofollow noopener noreferrer">https://www.patrickcampbell.dev</a></li> <li><a href="https://atroshenkonikita.com" rel="nofollow noopener noreferrer">https://atroshenkonikita.com</a></li> <li><a href="https://noemivillegascalonge.com" rel="nofollow noopener noreferrer">https://noemivillegascalonge.com</a></li> <li><a href="https://github.com/reflog/mattermost-plugin-creepy" rel="noopener noreferrer">https://github.com/reflog/mattermost-plugin-creepy</a></li> </ul> <div class="markdown-heading"> <h2 class="heading-element">Usage</h2> </div> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://creepyface.io/creepyface.js</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span> <span class="pl-kos">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">data-creepyface</span> <span class="pl-c1">src</span>="<span class="pl-s">https://creepyface.io/img/nala/serious</span>" <span class="pl-c1">data-src-hover</span>="<span class="pl-s">https://creepyface.io/img/nala/hover</span>" <span class="pl-c1">data-src-look-0</span>="<span class="pl-s">https://creepyface.io/img/nala/0</span>" <span class="pl-c1">data-src-look-45</span>="<span class="pl-s">https://creepyface.io/img/nala/45</span>" <span class="pl-c1">data-src-look-90</span>="<span class="pl-s">https://creepyface.io/img/nala/90</span>" <span class="pl-c1">data-src-look-135</span>="<span class="pl-s">https://creepyface.io/img/nala/135</span>" <span class="pl-c1">data-src-look-180</span>="<span class="pl-s">https://creepyface.io/img/nala/180</span>" <span class="pl-c1">data-src-look-225</span>="<span class="pl-s">https://creepyface.io/img/nala/225</span>" <span class="pl-c1">data-src-look-270</span>="<span class="pl-s">https://creepyface.io/img/nala/270</span>" <span class="pl-c1">data-src-look-315</span>="<span class="pl-s">https://creepyface.io/img/nala/315</span>" /&gt;</pre> </div> <blockquote> <p>Run this example on <a href="https://codepen.io/4lejandrito/pen/vbgxEB" rel="nofollow noopener noreferrer">codepen</a>.</p> </blockquote> <p>Creepyface will automatically detect your image (thanks to the <code>data-creepyface</code> attribute) and make it look at the mouse or fingers depending on which device you are using.</p> <p>You can…</p></div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/4lejandrito/creepyface" rel="noopener noreferrer">View on GitHub</a></div> </div> <p>I tried to design Creepyface to be as easy to use as possible. This is all you need to make your face become alive:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://creepyface.io/creepyface.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;img</span> <span class="na">data-creepyface</span> <span class="na">src=</span><span class="s">"https://creepyface.io/img/0"</span> <span class="na">data-src-hover=</span><span class="s">"https://creepyface.io/img/0/hover"</span> <span class="na">data-src-look-0=</span><span class="s">"https://creepyface.io/img/0/0"</span> <span class="na">data-src-look-45=</span><span class="s">"https://creepyface.io/img/0/45"</span> <span class="na">data-src-look-90=</span><span class="s">"https://creepyface.io/img/0/90"</span> <span class="na">data-src-look-135=</span><span class="s">"https://creepyface.io/img/0/135"</span> <span class="na">data-src-look-180=</span><span class="s">"https://creepyface.io/img/0/180"</span> <span class="na">data-src-look-225=</span><span class="s">"https://creepyface.io/img/0/225"</span> <span class="na">data-src-look-270=</span><span class="s">"https://creepyface.io/img/0/270"</span> <span class="na">data-src-look-315=</span><span class="s">"https://creepyface.io/img/0/315"</span> <span class="nt">/&gt;</span> </code></pre> </div> <p>You can use <a href="https://creepyface.io/create" rel="noopener noreferrer">Creepyface's wizard</a> to take your own pictures looking at each direction.</p> <p>For more information visit <a href="https://github.com/4lejandrito/creepyface" rel="noopener noreferrer">Creepyface's GitHub</a>.</p> <p>Please let me know if you find Creepyface useful. Any feedback is welcome.</p> <p>Thanks!</p> javascript image face mouse