How To Make Fidget Spinner

Are you looking for  Fidget Spinner, this post will explain you how to create a  Fidget Spinner using Jquery, HTML and CSS,  I want to explain how to design  Fidget Spinner with CSS, HTML and Jquery.  Fidget Spinner help you to  spin Like Real   Fidget Spinner, Just take a quick look at these four steps, use it and make your own  Fidget Spinner.  

HTML Code

Layout divided into five  parts are BG, everything and holder ,spinner. Here handle

<div class="bg"></div>
        <div class="everything">
            <div class="holder">
                <div class="spinner">
                    <img src="fidgetspinner_r.png">
                </div>
                <div class="handle"></div>
            </div>
        </div>

CSS Code

body,html {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    overflow: hidden
}

.bodge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #000;
    z-index: 99
}

.bodge a {
    font-style: italic;
    color: #000
}

.bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    background: -moz-linear-gradient(-45deg,rgba(0,0,0,0.3) 0,rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(-45deg,rgba(0,0,0,0.3) 0,rgba(0,0,0,0) 100%);
    background: linear-gradient(135deg,rgba(0,0,0,0.3) 0,rgba(0,0,0,0) 100%)
}

.everything {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.spinner img {
    width: 100%
}

.holder,.spinner {
    width: 300px;
    height: 300px;
    position: relative
}

.handle {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 115px;
    left: 115px;
    z-index: 1
}

CSS3  KeyAnimation

@media screen and (min-width: 370px) and (max-width:499px) {
    .holder,.spinner {
        width:360px;
        height: 360px;
        position: relative
    }

    .handle {
        width: 80px;
        height: 80px;
        position: absolute;
        top: 140px;
        left: 140px;
        z-index: 1
    }
}

@media screen and (min-width: 500px) {
    .holder,.spinner {
        width:500px;
        height: 500px;
        position: relative
    }

    .handle {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 200px;
        left: 200px;
        z-index: 1
    }
}

JavaScript

function resizeMe() {
    initialOffset = $(".handle").position().top
}
function spin() {
    $(".handle").pep({
        drag: updatePos,
        easing: updatePos
    }),
    initialOffset = $(".handle").position().top,
    spinner = $(".spinner").propeller({
        inertia: .999,
        speed: .5,
        onDragStop: function() {
            backgroundInit = !0
        },
        onDragStart: function() {
            backgroundInit = !1
        },
        onRotate: function() {
           // updateBackground(this.speed)
        }
    })
}
function updateBackground(t) {
    var e = "rgb(" + Math.floor(256 * Math.random()) + "," + Math.floor(256 * Math.random()) + "," + Math.floor(256 * Math.random()) + ")";
    if (!backgroundAnimating && backgroundInit) {
        var n = Math.abs(1e3 - 10 * Math.abs(t));
        backgroundAnimating = !0,
        $("body").animate({
            backgroundColor: e
        }, n, function() {
            backgroundAnimating = !1
        })
    }
}
function doDrag(t, e) {
    onDragStart,
    updatePos(t, e)
}
function updatePos(t, e) {
    var n = $(e.el);
    $(".spinner").css({
        top: n.position().top - initialOffset,
        left: n.position().left - initialOffset
    })
}
var initialOffset = 0, backgroundInit = !1, backgroundAnimating = !1, spinner;

• Tweet
• Share
• Share
• Share
• Share