Parallax Avatars With jQuery

While I write at KhalidAbuhakmeh.com consistently, I am also very proud of my team’s blog at RIMdev.io. We are always making improvements to the layout and putting our spin on the blog. We also love other people’s blogs, and while reading Shawn Wildermuth’s site, I noticed his avatar was a series of images that gives the effect of motion and is very reminiscent of a haunted house picture, in a great way. Kudos to him for going above and beyond, but I wanted to see if I could mimic motion without the involvement of professional photographers.

Thinking about the problem for a minute, I realized my iPhone gives the appearance of motion through the application of a parallax effect.

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight and is measured by the angle or semi-angle of inclination between those two lines. – Wikipedia

So I found Parallaxify by Felix Pflaum and below is the outcome of my experiment.

The code is simple.

<html>

<head>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
        crossorigin="anonymous"></script>
    <script src="/jquery.parallaxify.js"></script>
    <style>
        .avatar-frame {
            border: 4px solid #c7b89e;
            overflow: hidden;
            position: relative;
            display: inline-block;
        }

        .avatar-frame,
        .avatar-frame img {
            border-radius: 500px;
            width: 150px;
            height: 150px;
        }

        .avatar-frame img {
            width: 115%;
            height: 115%;
            left: -10%;
            top: -10%;
            position: absolute;
        }

        .avatar-frame p {
            color: white;
            font-weight: bold;
            z-index: 1000;
        }
    </style>
    <script type="text/javascript">
        $(function () {
        $.parallaxify();
    })
    </script>
</head>

<body>
    <div class="avatar-frame">
        <img src="https://pbs.twimg.com/profile_images/719253639282499585/brNlPYnd_400x400.jpg" alt="Khalid Abuhakmeh" data-parallaxify-range="10"
        />
    </div>
    <div class="avatar-frame">
        <img src="http://www.gravatar.com/avatar/19c1d76389b58d1b972fc2be013bcc73.png?s=400" alt="Ken Dale IV" data-parallaxify-range="10"
        />
    </div>
    <div class="avatar-frame">
        <img src="https://pbs.twimg.com/profile_images/414820198437253120/mk6713hM_400x400.png" alt="Justin Rusbatch" data-parallaxify-range="10"
        />
    </div>
    <div class="avatar-frame">
        <img src="https://www.billboga.com/images/profile.png" alt="Bill Boga" data-parallaxify-range="10" />
    </div>
</body>

</html>

If you want to try it out for yourself, I have a CodePen ready.

I haven’t decided if I find the parallax effect fun, cool, annoying or a combination of all of those things. I’ll need to give the implementation a try and see if it adds to the user experience or is just a distraction. I could also see using this effect in header images, which can be found here and at RIMdev.io.

Let me know what you think by leaving a comment here, or by following me on Twitter.

Related Posts