rotate image continuously with javascript - javascript

I would like to write a javascript to continuously rotate image by clicking on a button. I was able to make a partial rotation with a click. I think I should recursively call the function to obtain a continuously rotation but I don't know how to do this.
The following is my code.
<html>
<head>
<title>Image Rotation</title>
</head>
<body>
<button id="rotate">Rotate</button>
<img src="images/circle.png" id="sample" ;" alt="" />
</body>
<script>
var rotation = 0;
document.querySelector("#rotate").addEventListener('click', function() {
rotation += 90;
document.querySelector("#sample").style.transform = 'rotate(' + rotation + 'deg)';
});
</script>
</html>

add a class in your css file like
.rotating {
animation: rotate 1s infinite;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
and then add that class by javascript to your element
document.querySelector("#rotate").addEventListener('click', function() {
document.querySelector("#sample").classList.add('rotating')
});

Related

How to continuously rotate an image upon clicking a button then stop it upon same button click again

What I'm trying to implement is an image rotator button that continuously rotates an image then stops rotating it as I click on it again.
<img src="placeholder.png" id = "myImage" alt="placeholderImage">
<button onclick="RotateImage()">Rotate</button>
I'm trying to implement the RotateImage() function on JavaScript without the use of JQuery.
Try CSS animations.
function rotateImage() {
var image = document.getElementById("image");
if (image.style.webkitAnimationPlayState == "running") {
image.style.webkitAnimationPlayState = "paused";
} else {
image.style.webkitAnimationPlayState = "running";
}
}
#image {
animation: rotation 1s linear 0s infinite;
animation-play-state: paused;
}
#keyframes rotation {
to {
transform: rotate(360deg)
}
}
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Hendrik_Voogd_-_Italian_landscape_with_Umbrella_Pines.jpg" height="100">
<button onclick="rotateImage()">toogle rotation</button>
Variable element.style.webkitAnimationPlayState can be running (animation is running) or paused (animation is paused).
Picture credits:
Hendrik Voogd, Public domain, Wikimedia Commons

Fade in different lines of text

I am trying to fade in three separate lines of text, each one delayed slightly later than the last. I have discovered how to fade a single line, and how to delay a single line, but whatever I try cannot combine the two. All the JS research is for .fadeIn('slow') for button selectors and whatever tried doesn't work with the code below . Any advice appreciated.
function showText(id,delay){
var elem=document.getElementById(id);
setTimeout(function(){elem.style.visibility='visible';},delay*1000)
}
window.onload = function(){
showText('delayedText1',1);
showText('delayedText2',2);
showText('delayedText3',3);
showText('delayedText4',4);
}
<h1 id="delayedText1" style="visibility:hidden">First line fades in</h1>
<h1 id="delayedText2" style="visibility:hidden">slightly later this fades in</h1>
<h1 id="delayedText3" style="visibility:hidden">and last this line fades in</h1>
http://jsfiddle.net/k4h94Lob/1/
If you think you'll be doing more with animation in your project I highly recommend using Animate.css. Then how about not using JavaScript at all for the delay, and keep it real simple with some CSS?
<h1 id="delayedText1" class="animated fadeIn delay-1">First line fades in</h1>
<h1 id="delayedText2" class="animated fadeIn delay-2">slightly later this fades in</h1>
<h1 id="delayedText3" class="animated fadeIn delay-3">and last this line fades in</h1>
For example:
.delay-1 {
-webkit-animation-delay: 300ms;
-moz-animation-delay: none;
animation-delay: 300ms;
}
.delay-2 {
-webkit-animation-delay: 600ms;
-moz-animation-delay: none;
animation-delay: 600ms;
}
.delay-3 {
-webkit-animation-delay: 900ms;
-moz-animation-delay: none;
animation-delay: 900ms;
}
Demo JSFiddle
You can take advantage of CSS transitions for this.
Transitions need a numeric value to function, so you can use the opacity style, rather than visibility:
function showText(id, delay) {
var elem = document.getElementById(id);
setTimeout(function () {
elem.style.opacity = 1;
}, delay * 1000)
}
window.onload = function () {
showText('delayedText1', 1);
showText('delayedText2', 2);
showText('delayedText3', 3);
showText('delayedText4', 4);
}
h1{
opacity:0;
transition: opacity 0.8s;
}
<h1 id="delayedText1" style="">First line fades in</h1>
<h1 id="delayedText2" style="">slightly later this fades in</h1>
<h1 id="delayedText3" style="">and last this line fades in</h1>
Maybe this is what you are looking for: DEMO
$(document).ready(function () {
$('h1').each(function (line) {
$(this).delay((line++) * 1000).fadeIn();
});
});
UPDATE: Note that this will work for any number of lines. You can change fade in speed and delay time.
<script>
$(document).ready(function(){
var numOfLines = 3;
var delay = 1000;
var fadeTime = 1000;
for (i = 0; i < numOfLines + 1; i++) {
$('#delayedText' + i).delay(delay * i).fadeIn(fadeTime);
}
});
</script>
DEMO and Be sure to change
visibility:hidden with display:none;`

JQuery: Make hidden span visible and blink

OK, I know blinking is bad, but I really need this. When recording a phone call, I want the agent screen to blink "Recording." Otherwise I don't want the word to appear. I seem to be able to do one or the other, but not both.
<head>
<style> span { display:none; } </style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="/jquery.js"></script>
<script src="/jquery.modern-blink.js"></script>
<Script>
function StartRecording($user) {
$.get("http://172.16.77.22/script.php?agent_user="+$user+"& _
function=recording&value=START", function( data ) {
$( "#top_hr").show();
$( "#bot_hr").show();
});
jQuery(function($) {
$('.js-top-hr').modernBlink();
$('.js-bot-hr').modernBlink();
});
}
</script>
Here's a span that should be affected:
<span class="js-top-hr" id=top_hr><hr style="color:red"><font style="color:red">
<center>RECORDING </font></span></center>
...
Here's a button that should do the trick:
button id"="StartRec" name="StartRec" onclick="StartRecording('<?php echo _
$user;?>');">Start Recording Now!</button>
(Had to take the open tag off "button because it would not display."
Any help greatly appreciated!
JR
Try this:
function StartRecording($user) {
$.get("http://172.16.77.22/script.php?agent_user="+$user+"& _
function=recording&value=START", function( data ) {
$( "#top_hr").show().modernBlink();
$( "#bot_hr").show().modernBlink();
});
}
You can achieve this with javascript/JQuery:
<script type="text/javascript">
setInterval(function(){
$('.blink').each(function(){
$(this).css('visibility' , $(this).css('visibility') === 'hidden' ? '' : 'hidden')
});
}, 250);
</script>
<span class="js-top-hr blink">RECORDING</span>
Alternatively you could also use CSS3:
.blink {
-webkit-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite
}
#-webkit-keyframes .blink {
67% { opacity: 0 }
}
#keyframes .blink {
67% { opacity: 0 }
}
Then assign the .blink class when the button is pushed.
Source

How to dynamically rotate the circle on every click using Jquery/Javascript/css?

I have a CSS class which forms a circle and I am trying to rotate it dynamically from Jquery by adding a css property .It works fine when I click the button for the first time and rest of the time it's idle. I tried using "cssAmination" function and its of no use. I am not able to figure out where I am going wrong. Please help me out in fixing this code. Thanks in advance.
/*Circle code*/
div.circle{
width: 300px;
height: 300px;
-moz-border-radius:150px;
-webkit-border-radius: 150px;
background:#808080;
border-radius: 150px;
bottom: -150px;
left: -150px;
position: absolute;
}
/*rotate class*/
div.rotateCircle
{
/* Firefox: */
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 1;
-moz-animation-play-state: running;
}
#-moz-keyframes moveCircle
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(90deg);}
}
//Jquery code:
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
$('div#rotateCircle').css({'-moz-animation-name':'moveCircle'});
});
}); </script>
<body>
<h3>Labs Project</h3>
<div>
<div id=rotateCircle class="circle">
</div>
<div id=rotateCircle class="horizontalLine">
</div>
<div id=rotateCircle class="verticalLine">
</div>
<div class="divButton">
<table>
<tr>
<td><a class="btn" href="#">HOME</a></td>
<td><a class="btn" href="#">Class</a></td>
<td><a class="btn" href="#">CV</a></td>
<td><a class="btn" href="#">CM</a></td>
</tr>
</table>
</div>
</div>
</body>
You should take a look to the JavaScript events for the animations : https://developer.mozilla.org/en/CSS/CSS_animations#Using_animation_events
Basically, I've added a class for the animation's name
#rotateCircle.rotate {
-webkit-animation-name: moveCircle;
-moz-animation-name: moveCircle;
-o-animation-name: moveCircle;
animation-name: moveCircle;
}
And instead of adding the CSS in jQuery, you just add the class and remove it when the animation is finished, with the animationend event :
$(function() {
var $rotateCircle = $('div#rotateCircle');
$("a").click(function(){
$rotateCircle.addClass('rotate')
.on('animationend', function() {
$rotateCircle.removeClass('rotate');
});
});
});
(I've made it look a bit nicer too)
Here is the new working fiddle.
NB: The animationend event is prefixed on some browser, here is a gist I've made to support all the different browser (you'll need Modernizr).
There is a css3 transition property that will make this task really simple. I used webkit for my post, change properties accordingly.
CSS
#rotateCircle.rotate {
-webkit-transform: rotate(0);
-webkit-transition: -webkit-transform 2s; //+ optional path i.e. linear
}
Then with js, all you need is to set the css property to transition on, and it will magically animate to those settings, in this case transform.
$(function() {
var angle = 0;
$("a").click(function(){
angle += 90;
$("div#rotateCircle").css("-webkit-transform", "rotate("+angle+"deg)";
});
});
I didn't test this code, but the transition property is simple to use, and since I've learned it, I rarely use keyframes/css animation properties anymore.

CSS transform: rotate only works on image

I have this code:
<html>
<head>
<script type = "text/javascript" src = "jquery-1.7.1.js"></script>
<script type = "text/javascript" src = "jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<div id = "div" onclick = "Rotate()">
<img src="image.png" height="40" width="160">
</div>
<script type="text/javascript">
var x = 1;
function Rotate() {
var angle = (90 * x);
$("div").css("-moz-transform",
"rotate(" + angle + "deg)");
x++;
}</scipt></body></html>
when using Rotate() script, the div seems like been rotated, but when viewd with Firebug, I can see that div is still in the same position. Am I doing something wrong or I am using wrong thing for the task I'm trying to accomplish?
Edit:
Thanks for the responses! I set the background to yellow and it turned the yellow box but when clicking on the div name in Firebug it shows that the div is still in its original position.
It's definitely being applied to the <div>. Just add a width and a background color to the div to see that it's working correctly.
Here's an example I threw together that rotates on hover:
HTML:
<div id="awesome">
<img src="/img/logo.png">
</div>
CSS:
body {
margin: 100px;
}
div {
background: blue;
width: 200px;
-webkit-transition: all ease-in 1s;
-moz-transition: all ease-in 1s;
transition: all ease-in 1s;
}
div:hover {
background: yellow;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
Here's some more info how to use the css3 transform property
There is a jQuery plugin I found that has an example of doing exactly what you're doing, but in a cross-browswer way. Check out:
https://github.com/heygrady/transform
This plugin let's you do things like this:
$('div').click(function() {
$(this).animate({rotate: '+=45deg'});
});
Edit:
Hey, here's a slightly cleaned up version of your original that works fine:
var x = 1;
$("#box").click(rotate);
function rotate() {
var angle = (90 * x);
$(this).css("-moz-transform", "rotate(" + angle + "deg)");
x++;
if (x > 4) x = 0;
}
http://jsfiddle.net/UdYKb/1/
The reason firebug doesn't show the change is because of the spec, which says: "the transform property does not affect the flow of the content surrounding the transformed element." http://dev.w3.org/csswg/css3-transforms/
Look at this example with 3 rotating pics
HTML:
<div id = "div">
<img src="http://dummyimage.com/100" class="rp" data-rotate="0">
<img src="http://dummyimage.com/100" class="rp" data-rotate="0">
<img src="http://dummyimage.com/100" class="rp" data-rotate="0">
</div>
JAVASCRIPT:
$().ready(function() {
$(".rp").click(function() {
var rot = (parseInt($(this).attr("data-rotate"))+90)%360;
$(this).attr("data-rotate",rot);
$(this).css("-webkit-transform", "rotate("+rot+"deg)");
$(this).css("-moz-transform", "rotate("+rot+"deg)");
});
});​
I Save the last rotation in the attribute data-rotate. Please read about CSS Selectors if you do not understand why using .rp :) Hope it helps.
PS: I used the Google Chrome css attribute -webkit-transform too :)

Categories