Need help to add/modify to my script to include some rotation using jquery and css

Question

Here is the fiddle:

http://jsfiddle.net/7txt3/29/

I want to have the record needle on the record like you see in my image below rotate on to the record when the user clicks the play button(see the fiddle)

The needle placement is not necessarily final and I might want it to be in the top right corner.(I've included the image needed for that and the css at the bottom)

Record

Right now if you click play(see the fiddle, hover over on one of the record covers, click play) the record needle comes in from the left and then if you click stop on the same record it goes back out to the left. If you click play on another record before stopping the playing one it just stays in the same place.

I want it to be like the image below where it is always showing but not on the record unless you click the play button and then it rotates on. Then if you click play on another record while one is currently playing it just shifts/moves like its changing. Then of course if you click stop it goes off the record.

The record needle pattern I want

Here is my current script:

$(function(){
var station = $('.player-station'),
    record = $('.record2:first'),
    playBtns = $('.play'),
    info = $('.nprecinfo');
var isPlaying = false;

playBtns.click(function()
{
    var btn = $(this);
    if(btn.text() == 'STOP')
    {
        btn.text('PLAY');
        record.css({'-webkit-animation-play-state': 'paused',
                    '-moz-animation-play-state': 'paused'});

        $('#needle').show().animate({"left": "-=120px"}, "slow");
        isPlaying = false;     

        return;
    };

    playBtns.text('PLAY');
    var album = btn.closest('.album');
    station.text(album.find('h3').text());
    info.text(album.find('.recordinfo').text());
    record.css({'-webkit-animation-play-state': 'running',
                '-moz-animation-play-state': 'running'});
    if (isPlaying == false)
    {
    $('#needle').show().animate({"left": "+=120px"}, "slow");
    isPlaying = true;
    }

     $('#lrvinyl').css("background-image","url("+btn.attr('rel')+")");
     $('#lrvinyl').hide().fadeIn();

    btn.text('STOP');
});
});

and here is the current css for the record needle:

#needle {
background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle2.png);
background-repeat: no-repeat;
width:220px;
height:220px;
position:absolute;
left:-115px;
top:185px;
z-index:10;
overflow:hidden;
}

if you want to put the needle in the top right corner here is the image and css to use in the fiddle for that. You might have to move the record (.record2) a bit so just change the css to left:-4px;

#needle {
background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle4.png);
background-repeat: no-repeat;
width:220px;
height:220px;
position:absolute;
left:205px;
top:10px;
z-index:10;
overflow:hidden;
}

thats a first for me .. beautifully done indeed. very clean

Amitd
– Amitd

2012-10-16 17:25:08 +00:00
Commented Oct 16, 2012 at 17:25 — Amitd
– Amitd, Commented Oct 16, 2012 at 17:25
Just commenting to say that the effect looks really good!

sterix24
– sterix24

2012-10-16 18:49:17 +00:00
Commented Oct 16, 2012 at 18:49 — sterix24
– sterix24, Commented Oct 16, 2012 at 18:49

xec · Accepted Answer · 2012-10-16 18:44:41Z

5

+1 for detailed question! :)

You're already relying on css3 for the rotating disc, and since this is quite doable with css transitions, all you need to do with the javascript is to add/remove a class.

Demo: http://jsfiddle.net/7txt3/31/

This is essentially what I added (plus some vendor prefixes)

css

#needle
    transition: all .2s ease;
}
#needle.playing {
    transform: rotate(-10deg);
}

jquery

changed from .animate(...) to .removeClass() and .addClass() calls.

I also changed the #needle css a bit in order to rotate from the left of the needle hand, but you could look at https://developer.mozilla.org/en-US/docs/CSS/transform-origin instead.

edit

Sorry, I missed the part about animating between record changes. One thing you can do is to remove the class and then add it back after a delay, something like this: http://jsfiddle.net/7txt3/53/

edited Oct 16, 2012 at 18:44

answered Oct 16, 2012 at 17:37

xec

18.1k3 gold badges50 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

benlevywebdesign Over a year ago

do you know how much I thank you right now cause you are so awesome!

benlevywebdesign Over a year ago

think you could do it where the needle is in the top right corner like in my detailed question I have given you all you need for it! Thanks a million!

xec Over a year ago

@benlevywebdesign You could use the exact same concept, check out jsfiddle.net/7txt3/40

benlevywebdesign Over a year ago

@CarlosLombarte Did you not look at the fiddle from the person above? They got my question right! You didn't change any animations as thats what I had before.

benlevywebdesign Over a year ago

@xec Now how could I add some animation/rotation when the user clicks play on another record before stopping the currently playing record. Maybe just a little shift/movement rotate degrees more or less like if playing is at 10 degrees then have it go to 15 or go to 5

|

Dcullen · Accepted Answer · 2012-10-16 17:40:35Z

I think this should give the desired effect.

To have the needle rotate correctly you need to set the transform origin.

http://jsfiddle.net/7txt3/35/

You of course will want to modify the speeds/percentages.

    #needle {
    background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle2.png);
    background-repeat: no-repeat;
    width:220px;
    height:220px;
    position:absolute;
    top:185px;
    z-index:10;
    overflow:hidden;
}

#needle.playing {
    -webkit-animation-name: needle_move;
    -webkit-animation-duration:8s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
    -webkit-transform-origin: 0px 10px;
    -webkit-transform: rotate(0deg);
    -webkit-transition: all .2s;
       -moz-transition: all .2s;
            transition: all .2s;
}

@-webkit-keyframes needle_move {
    0% {
       -webkit-transform: rotate(0deg);
    }
    50% {
       -webkit-transform: rotate(-15deg);
    }
    70% {
       -webkit-transform: rotate(-15deg);
    }
    0% {
       -webkit-transform: rotate(0deg);
    }
}

Louis Ricci · Accepted Answer · 2012-10-16 18:30:55Z

1

Here's a demo using CANVAS to get the needle animation you wanted in your question.

http://jsfiddle.net/7txt3/46/

Because of the vender prefix spammed CSS3 and the lack of browser support for rotation-point. I think going CANVAS is a little cleaner.

answered Oct 16, 2012 at 18:30

Louis Ricci

21.1k5 gold badges50 silver badges64 bronze badges

2 Comments

benlevywebdesign Over a year ago

nice try but that doesn't look anything like my original fiddle with the added animations.

Louis Ricci Over a year ago

@benlevywebdesign - I simplified/distilled it because your original fiddle had a ton of HTML, CSS, and JS that had nothing to do with your question. Using the original it would be difficult for someone finding this question in the future to learn anything (more than copy and paste) from it.

Collectives™ on Stack Overflow

Need help to add/modify to my script to include some rotation using jquery and css

3 Answers 3

9 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related