image rotate 360 degree on click - javascript

Need your help developers,
I am using images as a menu. I just want when i click on image it rotate 360 degree and then another page is open.
i try this.
<style>
.image {
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
.image:active {
-webkit-transform: rotate(360deg);
}
</style>
html:
<img class="image" src="img path">
in this code image rotation is depend on click time and i want user just click once image rotate 360 degree and the link page display.
but this is not i want.
I am using jqueryMobile and phonegap
thanks in advance.

You can put the link url in the image as a data attribute:
<img id="theimage" data-linkurl="#page2"src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" />
Then when you handle the click event,
You add the animation class.
You add an animationEnd handler that fires when the animation is complete. Use one() instead of on() as you only want this handler to fire once.
In the animationEnd handler you remove the animation class (so you can add it again next time), get the url from the data-attribute, and then navigate to the page.
$("#theimage").on("click", function(){
$(this).addClass("imageRot").one('webkitAnimationEnd mozAnimationEnd oAnimationEnd msAnimationEnd animationend', function () {
$(this).removeClass("imageRot"); //remove anim class
var url = $(this).data('linkurl'); //get url from data-attribute
$( ":mobile-pagecontainer" ).pagecontainer( "change", url); //navigate to page
});
});
For the animation class I have used #cracker's spin animation (thanks cracker!):
.imageRot {
-webkit-animation:spin 2s ease-in-out;
-moz-animation:spin 2s ease-in-out;
animation:spin 2s ease-in-out;
}
#-moz-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
Here is a working DEMO

you need to try using
.image {
-webkit-animation:spin 4s ease-in-out; // No more infinite
-moz-animation:spin 4s linear;
animation:spin 4s linear;
}
#-moz-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
OR
#-webkit-keyframes rotate {
100% { -webkit-transform: rotate(360deg); }
}
.rotate {
-webkit-animation-name: rotate;
-webkit-animation-duration: 4.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
DEMO1
DEMO2

try it:
<style>
.image {
overflow: hidden;
-webkit-transition: transform 0.8s;
transition: transform 0.8s;
}
.image:active {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
You didn't include a webkit option (-webkit-*) in transition.
You didn't include a non-webkit option in transform.
because of that, no matter what browser you were using, something were missing (transform or transition), and therefore the code didn't work on any browser.
edit: I noticed it wasn't what you were asking for. I don't believe that it can be done with CSS only. If you want, you can do it with jQuery:
<script>
$(".image").click(function(){
$(this).addClass("clicked").delay(800).removeClass("clicked");
});
</script>
<style>
.image {
overflow: hidden;
-webkit-transition: transform 0.8s;
transition: transform 0.8s;
}
.image.clicked {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>

HTML
<img src = "some_image.png" alt = "test" class = "rotative" />
CSS
.canRotate
{
-webkit-animation: FullRotation 3s ease-out;
-o-animation: FullRotation 3s ease-out;
-ms-animation: FullRotation 3s ease-out;
-moz-animation: FullRotation 3s ease-out;
animation: FullRotation 3s ease-out;
}
#-webkit-keyframes FullRotation
{
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#-o-keyframes FullRotation
{
from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(360deg); }
}
#-ms-keyframes FullRotation
{
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes FullRotation
{
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#keyframes FullRotation
{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
JavaScript
function RotateOnClickAndOpenPage(classname, url)
{
var elts = document.getElementsByClassName(classname);
for(var i = 0; i < elts.length; ++i)
{
elts[i].onclick = function(){
this.style.className = "canRotate";
var that = this;
setTimeout(function(){
window.open(url);
that.style.className = "cannotRotate";
}, 3000);
};
}
}
// Exemple
RotateOnClickAndOpenPage("rotative", "http://www.google.fr");

Related

How to implement 360 degree image rotation

I want to implement something to rotate 3D image by 360 degrees on client side,
somethig like this
1) is WebGL best to do this ?
2) from where I can start ?
To answer your question, use a css transform to define a class called spin
img.spin {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
Then add the class to your image
<img src="your image" class="spin" />
...or if you're feeling animated
#-webkit-keyframes twist {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(359deg); }
}
img.twist {
-webkit-animation: twist 5s infinite; /* Safari 4+ */
-moz-animation: twist 5s infinite; /* Fx 5+ */
-o-animation: twist 5s infinite; /* Opera 12+ */
animation: twist 5s infinite;
}

Animate pulsing effect using CSS3 Transform Scale and jQuery

I'm attempting to create a pulsing animation of an element using CSS3's transform: scale(x,y). I want the object to endlessly pulse (becoming slightly larger) unless it's hovered over - at which point the current animation should finish (i.e. return to its original size) and cease pulsing until it's no longer being hovered over. I can't even seem to get jQuery's .animate() to work, however.
function pulse() {
$('#pulsate').animate({
transition: 'all 1s ease-in-out',
transform: 'scale(1.05,1.05)'
}, 1500, function() {
$('#pulsate').animate({
transition: 'all 1s ease-in-out',
transform: 'scale(1,1)'
}, 1500, function() {
pulse();
});
});
}
pulse();
Would using .addClass and .removeClass be better here? .removeClass would do the trick for stopping the animation on .hover(), but I'm unsure on implementation overall.
Try using CSS animations.
#keyframes pulse {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1, 1);
}
}
#test {
animation: pulse 1s linear infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.1, 1.1);
}
100% {
-webkit-transform: scale(1, 1);
};
}
#keyframes pulse {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1, 1);
};
}
#test {
background: red;
width: 20px;
height: 20px;
-webkit-animation: pulse 1s linear infinite;
animation: pulse 1s linear infinite;
}
#test:hover {
-webkit-animation: none;
animation:none;
}
<div id="test"></div>
http://jsfiddle.net/rooseve/g4zC7/2/

how to rotate image 90 digree on both direction

I am very tried from myself but solving my problem.
My query is:
I have a image I want to rotate this image as flip from start to 90 degree in slow motion and come back from the same way for 90 degree.
please let me know the solution, how will I do?
Thanks in advanced.
i used this code
<style type='text/css'>
.img {
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-khtml-transform:speed 5s;
-khtml-transform:speed 5s; /* Safari */
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
/*$('#image').mouseover(function(){
$(this).addClass('img');
}).mouseleave(function(){
$(this).removeClass('img');
});*/
//setTimeout(addclass(),5000)
setTimeout(function(){ addclass(); },5000);
});//]]>
function addclass(){
$("#add_remove").hide();
$("#image").addClass('img');
setTimeout(function(){ removeclass(); },5000);
}
function removeclass(){
$("#add_remove").show();
$("#image").removeClass('img');
setTimeout(function(){ addclass(); },5000);
}
</script>
</head>
<body>
<img id="image" src="robot_upper.png"/>
</body>
You can use CSS3 Transition and Animation
Here is the link and go study.
http://www.w3schools.com/css3/css3_transitions.asp
You can use this for clockwise and anti-clockwise
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
and
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
I'm not sure if this is exactly what you're after but this does do the rotating.
Edit:
Thought I would post the code here to see if it helps at all.
I have set up the elements as you did and then just used CSS animations to control the transition.
CSS:
/* defines the animation to be used, in this case I have called it 'waving', please note the browser pre-fixes are required for this to work cross browser */
#-webkit-keyframes waving {
0% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(-90deg);
}
100% {
-webkit-transform: rotate(90deg);
}
}
#-moz-keyframes waving {
0% {
-moz-transform: rotate(90deg);
}
50% {
-moz-transform: rotate(-90deg);
}
100% {
-moz-transform: rotate(90deg);
}
}
#-o-keyframes waving {
0% {
-o-transform: rotate(90deg);
}
50% {
-o-transform: rotate(-90deg);
}
100% {
-o-transform: rotate(90deg);
}
}
#keyframes waving {
0% {
transform: rotate(90deg);
}
50% {
transform: rotate(-90deg);
}
100% {
transform: rotate(90deg);
}
}
#image {
-webkit-animation: waving 5s infinite; /* Safari 4+ */
-moz-animation: waving 5s infinite; /* Fx 5+ */
-o-animation: waving 5s infinite; /* Opera 12+ */
animation: waving 5s infinite; /* IE 10+ */
}
CodePen Link

"Easing-out" an infinite CSS rotation animation when another div is clicked using jQuery

I'm trying to use jquery to bring a constantly rotating div (using CSS animation) to a slow, smooth stop when another div is clicked.
I've been attempting to change the "animation-timing-function" property from "linear" to "ease-out", but it just stops abruptly, as opposed to the slow stop I want.
HTML
<div id=click>Click me</div>
<div id=spinner></div>
jQuery
$(function () {
$("#click").click(
function () {
document.getElementById("spinner").style['-moz-animation-iteration-count'] = '1';
document.getElementById("spinner").style['-moz-animation-timing-function'] = 'ease-out';
document.getElementById("spinner").style['-webkit-animation-iteration-count'] = '1';
document.getElementById("spinner").style['-webkit-animation-timing-function'] = 'ease-out';
document.getElementById("spinner").style['animation-iteration-count'] = '1';
document.getElementById("spinner").style['animation-timing-function'] = 'ease-out';
});
});
CSS
#spinner {
width:50px;
height:50px;
margin:20px;
background-color:red;
animation:spin-constant 5s;
-webkit-animation-name: spin-constant;
-webkit-animation-duration: 1200ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin-constant;
-moz-animation-duration: 1200ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: spin-constant;
animation-duration: 1200ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-moz-keyframes spin-constant {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin-constant {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin-constant {
from {
transform:rotate(0deg);
}
to {
transform:rotate(36 0deg);
}
}
Here is the fiddle of the basic concept.
http://jsfiddle.net/jN5vw/1/
Try this one:
See Demo
jQuery:
$('#click').click(function () {
$("#spinner").removeClass('spinner');
$("#spinner").addClass('anim');
});
CSS:
.anim{
width:50px;
height:50px;
margin:20px;
background-color:red;
animation:spin 5s ;
-webkit-animation: spin 1s linear;
-webkit-animation-iteration-count:1;
}
I think this is what you are asking.

Show loading spinner before heavy processing in jQuery Mobile 1.1?

I'm going mad trying to get a spinner to appear. I've bound my heavy processing function to a button thus:
$(document).delegate("#clearread", "tap", onClearRead);
So on tap it calls this:
var onClearRead = function() {
setTimeout($.mobile.showPageLoadingMsg, 5);
// Civilised cleaning of saved status
var jStorIndex = $.jStorage.index();
for (var i = 0; i < jStorIndex.length; i++) {
if( jStorIndex[i] != "version" ) {
$.jStorage.deleteKey(jStorIndex[i]);
}
}
// Load articles afresh
loadArticles();
$.mobile.changePage("#choosearticle");
} //onClearRead
I find that the spinner does not appear during the clearing/loading of articles (about 10 secs) but only for a brief period while the #choosearticle page loads (0.5 secs).
What am I doing wrong?
I have the spinner working elsewhere in the app.
Thanks
Try this:
$(document).delegate("#clearread", "tap", onClearRead);
var onClearRead = function() {
$.mobile.showPageLoadingMsg();
setTimeout(function(){
//Your heavy processing
$.mobile.changePage("#choosearticle");
}, 5);
} //onClearRead
jQuery.show( [duration ] [, complete ] )
Putting the heavy processing in the "complete" function slot, ensures the object (with show called on it) is visible before the show happens.
Related SO Answers
https://stackoverflow.com/a/25207120/999943
jQuery whole HTML page load with spinner
Example using a CSS based spinner
CSS
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg); }
100% {
-moz-transform: rotate(359deg); } }
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg); }
100% {
-webkit-transform: rotate(359deg); } }
#-o-keyframes spin {
0% {
-o-transform: rotate(0deg); }
100% {
-o-transform: rotate(359deg); } }
#-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg); }
100% {
-ms-transform: rotate(359deg); } }
#keyframes spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(359deg); } }
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear; }
Html using font awesome
<div id="spinner" data-bind="visible: isSpinning" style="padding: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #cccccc; z-index: 1; filter: alpha(opacity=30);">
<i class="fa fa-spinner fa-spin fa-5x"></i>
</div>
Javascript
$('#spinner').show(100, function() {
// Once the spinner is visible then run the heavy function.
heavyProcessingFunction();
});

Categories