I want to have an image or DIV to start rotating on click similar to a record player. Is it possible to have it smooth and with javascript?
Thankyou very much in advance! :)
You have to make the rotation in CSS3.
#keyframes rotate
{
0% { transform: rotate(0); }
25% { transform: rotate(90); }
50% { transform: rotate(180); }
75% { transform: rotate(270); }
100% { transform: rotate(360); }
}
#rotating_div
{
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-play-state: paused;
}
Here's the JavaScript:
function rotate(id) {
div = getElementById['id'];
div.style.animation-play-state = running;
}
Here's the HTML:
<div id="rotating_div" onclick="rotate("rotating_div")"></div>
Use the prefix -moz- and -webkit- to get the CSS3 to work in FF and other browsers. Have a look here: W3Schools.com
Good luck! :)
You need to use window.setInterval to control an animation. More info here
My first thought was to go for a combination of JS Timers, and CSS3 Transitions, but looking at w3schools.com, I saw there actually was animation support in CSS3.
I think this would be implented as following;
#keyframes rotate
{
0% { transform: rotate(0); }
25% { transform: rotate(90); }
50% { transform: rotate(180); }
75% { transform: rotate(270); }
100% { transform: rotate(360); }
}
div #lp
{
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-play-state: running;
}
This isn't really a JS solution, but this is by far the simplest solution, but if your target browser isn't supporting CSS3, then you might want to use an animated GIF image.
You will have to make it work in the other webbrowsers too, but it's just to add the -webkit- tags and such, more information on the subject is found here: http://www.w3schools.com/css3/css3_animations.asp and here: http://www.w3schools.com/css3/css3_2dtransforms.asp
(Sorry to those who don't like w3schools.com)
Search this on google
Do a barrel roll
should give you an idea :)
https://www.google.co.in/search?q=Do+a+barrel+roll
Related
I'm working on a website and i had no idea how to make an image rotating infinitely around a static logo.
I don't have any code as I am not familiar with web coding, so if anyone here can provide a codepen or jsfiddle?
My website is working on 100% html, css and js.
I've googling a lot of article but none of it is exactly as I want.
I expect for a HTML code with CSS and JS
Based on the answer
How to animate image circular in css
you can do the following:
HTML:
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
CSS:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
That man also added a jsFiddle link for you to see the effect of above one.
http://jsfiddle.net/aquadk/m23sadrz/
A simple way is to add a CSS class to your image element and use keyframe animations.
https://codepen.io/limxz/pen/GLZdJN
As you can see from the demo, you have to define a keyframe (it's kind of like an animation sequence) and then add the parameters to control it.
#keyframes infinite-spinning {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.image-to-spin {
animation: infinite-spinning 1s infinite;
}
As I understand you need effect like moon rotating around the earth. You'll be able do it using CSS animation and transform-origin attribute.
transform-origin change your rotation point of the object. Normally transform-origin is located at center of the object but changing X and Y attributes for the transform-origin you will able to change the rotation point.
here is a example
<div class="logo-wrapper">
<h1>LOGO</h1>
<span class="img"></span>
</div>
replace span.img with your desire image
Hope this will help you!
I want to rotate some ad banners on a few of my webpages. I cant find instructions online. I can find fixed footers but I want the banners to work on mobile and desktop.
You can use the transform and animation properties to accomplish something like this. RotateZ defines a 3D rotation along the z-axis.
.rotate {
display: inline-block;
animation: roll 1s infinite;
transform: rotateZ(360deg);
}
#keyframes roll {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
<h1 class="rotate">Banner Ad</h1>
Struggling to even get started figuring this out, I am working on a website for a friend, here is a one of the pages..
http://sarahboulton.co.uk/livingroom.html
So on refresh it brings up one of four constellations of letters, which shift their constellations using math random.
We were hoping to start applying small animations to the letters.. something along these lines..
.lipbalm {
animation: shake 0.1s;
animation-iteration-count: infinite; }
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.5px) }
100% { transform: translate(0px) }
}
But whether these movements could be randomised for each letter, still small movements.. but using something similar to..
$(document).ready(function(){
$('.goldrocks-g').css({'left' : (Math.random() * 250) + 350})
});
..each letter randomises its movement, maybe one ends up on..
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.4px) }
100% { transform: translate(0px) }
}
.. and another has..
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.1px) }
100% { transform: translate(0px) }
}
and something similar for the speed too? All the letters have their own div, might be easier to view the source of the page to see whats going on !
The way I would approach this problem is by creating the a few variations of your shake class and then assign those classes at random when you are assigning the random constellation.
So something like this:
css
.shake-1{
animation: shake-1 0.3s;
animation-iteration-count: infinite;
}
.shake-2{
animation: shake-2 0.3s;
animation-iteration-count: infinite;
}
.shake-3{
animation: shake-3 0.3s;
animation-iteration-count: infinite;
}
#keyframes shake-1 {
0% { transform: translate(0px) }
50% { transform: translate(2px) }
100% { transform: translate(0px) }
}
#keyframes shake-2 {
0% { transform: translate(0px) }
50% { transform: translate(-2px) }
100% { transform: translate(0px) }
}
#keyframes shake-3 {
0% { transform: translate(0px) }
50% { transform: translate(0px, 2px) }
100% { transform: translate(0px) }
}
html
<div class="dyinglight-d shake-1" style="left: 839.646px; top: 212.011px;">...</div>
<div class="dyinglight-y shake-2" style="left: 959.592px; top: 97.9469px;">...</div>
etc
Here's a codepen I made for you with your site's code to show an example of it working: https://codepen.io/ChrisRArendt/pen/jQXjNa
You may generate CSS style using javaScript to integrate javaScript Math.random() into CSS logic.
For example you can generate 10 keyframes with names shake1 to shake10 with random transform on 50% and append this styles to the header style :
var css;
for (x=1;x=10;x++){
css += '#keyframes shake'+ x.toString() +' {';
css += '0% { transform: translate(0px)}';
css += '50% { transform: translate('+ Math.random() +'px)}';
css += '100% { transform: translate(0px)}';
css += '}';
}
$( "<style>" + css + </style>").appendTo( "head" );
Finally you can assign each keyframe randomly to target divs:
$('.goldrocks-g').each(function(){
(this).css({"animation": "shake" + Math.random()*10+1 +" 0.1s infinite");
})
I think the easiest way to do this would be to have a random feeling shake animation that could be applied to all letters. Then you can randomly apply inline CSS of animation-delay: 100ms or animation-delay: 300ms. That style could be applied differently each time. All letters will be using the same shake animation but will be at different intervals in the animation based on their delay time.
I am trying to implement navigation drawer in my sencha touch app using this article. The animation explained in the article is done using webkit-transform. This works like charm on chrome on my desktop and android devices but it does not work on the iPad mini, not even on chrome. Here is my css:-
.slide{
-webkit-animation-duration: .200s;
-webkit-transition-timing-function: cubic-bezier(0.275, 0.080, 0.425, 0.855);
}
#-webkit-keyframes slideout {
from {
-webkit-transform: translate3d(0,0,0);
}
to {
-webkit-transform: translate3d(250px,0,0);
};
}
#-webkit-keyframes slidein {
from {
-webkit-transform: translate3d(250px,0,0);
}
to {
-webkit-transform: translate3d(0px,0,0);
};
}
.slide.out {
-webkit-animation-name: slideout;
-webkit-transform: translate3d(250px,0,0);
}
.slide.in {
-webkit-animation-name: slidein;
-webkit-transform: translate3d(0px,0,0);
}
Is this some issue specific with iOS or I am doing something wrong?
Since you're just using "from" (=0%) and "to" (=100%) in your keyframes without defining any other steps (25%, 50% etc.) I don't see the actual benefit of using keyframes.
Especially because keyframes cause lots of lines of CSS. Keyframes in my opinion do only make sense if you want to define substeps.
For all other purposes, transitions shall be the solution of choice since they're only animating from the starting point to your target value: See Fiddle
div {
background:red;
-webkit-transform:translate3d(0,0,0);
-webkit-transition:-webkit-transform 1s;
}
.slide.in {
-webkit-transform:translate3d(0,0,0);
}
.slide.out {
-webkit-transform:translate3d(250px,0,0);
}
so, i know how to do this by theory, buy when i try the animation is really laggy.
what i"m doing:
i got this UL with all sort of items and text (really standard) and when i want to animate it
i just add with JS a class "flipout" like so:
element.className = "flipout";
the CSS for the animation looks like this:
.flipout{
-webkit-animation-duration: .55s;
-webkit-animation-name: flipout_anim;
-webkit-transform-origin: left;
}
#-webkit-keyframes flipout_anim {
from {
-webkit-transform: translateX(0%);
}
to {
-webkit-transform: translateX(-100%);
}
}
the same HTML moves smooth as silk with JQtouch..
what am i doing wrong?!
the solution:
use translate3d(x,y,z);
moves smooth.