How to create spinning images with jQuery

In this tutorial we are going to create spinning images with jQuery.
The idea is to leverage CSS3's transformations and opacity properties to create spinning images.

Try now

The Markup

<div class="wall">
    <div class="imgwrap" data-x="30" data-y="60" data-rotate="40">
        <img src="/images/201904/1555048377188177.jpg" alt="">
    </div>
    <div class="imgwrap" data-x="200" data-y="60" data-rotate="-10">
        <img src="/images/201904/1555047644848199.jpg" alt="">
    </div>
    <div class="imgwrap" data-x="330" data-y="60" data-rotate="20">
        <img src="/images/201904/1555047641796991.jpg" alt="">
    </div>
</div>

we create some element with class imgwrap and data used for positioning.

The CSS
we set imgwrap's position to absolute,which relative to wall.
we will set the top and left using js.

    .wall {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .imgwrap {
        width: 160px;
        height: 120px;
        padding: 5px;
        border: 1px solid #CCC;
        position: absolute;
        background-color: #FFF;
    }

    img {
        width: 100%;
    }

jQuery Code
Position each element/image within the container. The data is geted from attr data-

    jQuery(document).ready(function () {
        $(".imgwrap").each(function () {
            var ele = $(this);
            ele.css("left", ele.data("x"));
            ele.css("top", ele.data("y"));
            ele.css("transform", "rotate(" + ele.data("rotate") + "deg)");
        });
    });
date2019-04-12 14:32:16 From:www.jquerypluginhub.com Author:JPH
Related Tags:
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *