Rotating Social Icons on Page Scroll

CSS3 can do some very cool things in terms of movement and animation nowadays. We’ll be focusing on the transform property to make the spinning social icons you see on our site as you scroll down. This is a very simple effect and just requires some CSS styling and a little bit of JavaScript.

Scroll inside the demo below to see the effect.

See the Pen Rotating Social Icons on Page Scroll by Chris Sevilleja (@sevilayha) on CodePen.

We just need to do two different things:

  • Style our buttons with CSS
  • Use JavaScript to add CSS transforms and rotate our buttons

Let’s get started.

CSS Buttons

We’ll be creating our buttons with Font Awesome and some good old CSS.



<!doctype html>
<html>
    <meta charset="utf-8">
    <title>Rotating CSS3 Buttons</title>

    <!-- LOAD FONT AWESOME -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">

    <!-- OUR CUSTOM STYLES -->
    <style>

    </style>
<body>

    <!-- OUR LINKS -->
    <div id="sp-links">
        <a id="sp-facebook" href="#"><span class="fa fa-facebook"></span></a>
        <a id="sp-twitter" href="#"><span class="fa fa-twitter"></span></a>
        <a id="sp-google" href="#"><span class="fa fa-google-plus"></span></a>
    </div>

</body>
</html>


Now we have three very ugly buttons.

social-rotation-ugly

Let’s style them so they we won’t cringe every time we see them.


...

    <!-- OUR CUSTOM STYLES -->
    <style>
        
        /* center our links */
        #sp-links       { padding-top:50px; text-align:center; }

        /* give our links basic styling and rounded corners */
        #sp-links a     { color:#FFF; display:inline-block; font-size:80px; height:120px; margin:0 30px; padding-top:20px; width:120px; 
            -webkit-border-radius:50%; /* make rounded */
        }

        /* colors */
        #sp-facebook { background:#43609C; }
        #sp-twitter  { background:#1CC1F7; }
        #sp-google   { background:#DD4C3B; }

    </style>

...

That’s it for our styles. Now we have pretty links.

social-rotation-pretty

With our styling all done, we will now make the magic happen and have them rotate as we scroll through our page.

JavaScript Rotation

We will be using jQuery and adding a CSS transform property to our buttons as the window scrolls. Let’s update our main file with our script.


...

<!-- LOAD JQUERY -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<!-- OUR CUSTOM JS -->
<script>

    $(window).scroll(function() {

        // get how far we've scrolled from the top of our screen
        var offset = $(window).scrollTop();
        offset     = offset * 20;

        // apply the offset as a css transform to our buttons
        $('#sp-links a').css({
            '-webkit-transform': 'rotate(' + offset + 'deg)'
        });

    });

</script>
<body>
...

Using scrollTop(), we get how far we’ve scrolled down our page. We also multiply it by 20 to get smaller increments in the rotation so it looks like our icons are rotating at smaller intervals.

Our code then applies the offset as a rotate(deg). This let’s our icons rotate!

Vendor Prefixes Make sure you add the different vendor prefixes for other browsers. We’re only using the -webkit- vendor here for simplicity, but you’ll want the -moz- and default also. We provide the full code with vendor prefixes at the bottom of this article.

Our icons will now spin as we scroll! We could also use this technique to add different types of css transforms. You could scale, translate, skew, and many more. For the full list of CSS transforms, check out the W3 Schools List.

See the Pen Rotating Social Icons on Page Scroll by Chris Sevilleja (@sevilayha) on CodePen.

Conclusion

Hopefully this has given you a few ideas of how to accomplish some cool things using jQuery and CSS3 transforms. Thanks for reading!

Here’s the full code with vendor prefixes.


<!doctype html>
<html>
    <meta charset="utf-8">
    <title>Rotating CSS3 Buttons</title>

    <!-- LOAD FONT AWESOME -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">

    <!-- OUR CUSTOM STYLES -->
    <style>
        
        /* center our links */
        #sp-links       { padding-top:50px; text-align:center; }

        /* give our links basic styling and rounded corners */
        #sp-links a     { color:#FFF; display:inline-block; font-size:80px; height:120px; margin:0 30px; padding-top:20px; width:120px; 
            /* make rounded */
            border-radius:50%;
            -moz-border-radius:50%;
            -o-border-radius:50%;
            -webkit-border-radius:50%; 
        }

        /* colors */
        #sp-facebook { background:#43609C; }
        #sp-twitter  { background:#1CC1F7; }
        #sp-google   { background:#DD4C3B; }

    </style>

    <!-- LOAD JQUERY -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

    <!-- OUR CUSTOM JS -->
    <script>

        $(window).scroll(function() {

            // get how far we've scrolled from the top of our screen
            var offset = $(window).scrollTop();
            offset     = offset * 20;

            // apply the offset as a css transform to our buttons
            $('#sp-links a').css({
                '-moz-transform': 'rotate(' + offset + 'deg)',
                '-webkit-transform': 'rotate(' + offset + 'deg)',
                '-o-transform': 'rotate(' + offset + 'deg)',
                '-ms-transform': 'rotate(' + offset + 'deg)',
                'transform': 'rotate(' + offset + 'deg)',
            });

        });

    </script>
<body>

    <!-- OUR LINKS -->
    <div id="sp-links">
        <a id="sp-facebook" href="#"><span class="fa fa-facebook"></span></a>
        <a id="sp-twitter" href="#"><span class="fa fa-twitter"></span></a>
        <a id="sp-google" href="#"><span class="fa fa-google-plus"></span></a>
    </div>

</body>
</html>

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.