Does anyone have an idea on how I can rotate a DIV Cube on a mobile Device, like a Smartphone, by touch the screen and moving a finger?
Take a look at the following example:
https://codepen.io/tsluga/pen/mjMpVa
As you can see, I currently have an animation with the following piece of code:
<pre>
.cube {
position: relative;
transform-style: preserve-3d;
animation-name: myAnimation;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes myAnimation {
0% {
transform: rotate3d(0, 0, 0, 0);
}
100% {
transform: rotate3d(0,1, 0, 360deg);
;
}
}
</pre>
How could I implement a touchevent? If someone presses the screen and slides over the screen/cube, I want to rotate the cube instead of the animation currently implemented.
Thanks for any Feedback
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.
http://jsfiddle.net/CA4C5/
I am trying to make a 3d banner rotation.
First i had build 4 sides of it and then noticed that I probably only need 2:
/ Front side is visible and has Banner1 on it
/ it rotates down and makes Banner2 visible
/ once that is completed (on transitionend) it has to do 2 things simultaneously: 1. rotate back to the previous state in 0ms and change image 1 for 2 and 2 for 3 -> that works
/ upon reaching the last banner (var anzahlbanner) it should basically start over with number 1 (which seems tricky because when the last one slides into place and flips back it needs to show the last (f.e. 6 on the front) and banner1 on the hidden side.
But I dont even get so far because this function seems to fire twice, namely on the smooth transition and then on the flip back transition.
$("#eins").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
You will see that when you activate line 31 in the javascript.
How can I get my counter go up the way I need it to?
Edit: It actually seems that the function is not called twice but one additional time for each turn: 1, 2, 3, 4, 5, 6, 7 times etc.
I think that I can simplify your javascript a little.
The only issue is that I changed your images for divs, with the image set in the background.
Now, your HTML is:
<div id="container">
<div id="eins">
<div></div>
</div>
<div id="zwei">
<div></div>
</div>
</div>
your CSS is
#container {
width: 1269px;
height: 294px;
}
#eins, #zwei {
position:absolute;
top:0px;
left:0px;
}
#eins {
width: 1269px;
height:294px;
z-index:150;
-ms-transform-origin: 50% 50% 147px;
-moz-transform-origin: 50% 50% 147px;
-webkit-transform-origin: 50% 50% 147px;
-webkit-animation: rotate 4s infinite;
-webkit-animation-delay: -2s;
}
#zwei {
background:red;
width: 1269px;
height:294px;
z-index:70;
-ms-transform-origin: 50% 50% 147px;
-ms-transform: rotate3d(1, 0, 0, -90deg);
-ms-transition: 1s;
-ms-transition-timing-function: ease;
-moz-transform-origin: 50% 50% 147px;
-moz-transform: rotate3d(1, 0, 0, -90deg);
-webkit-transform-origin: 50% 50% 147px;
-webkit-animation: rotate 4s infinite;
}
#eins div, #zwei div {
height:294px;
}
#eins div {
-webkit-animation: imageseins 8s infinite;
-webkit-animation-delay: -2s;
}
#zwei div {
-webkit-animation: imageszwei 8s infinite;
}
#-webkit-keyframes rotate {
0% {-webkit-transform: rotate3d(1, 0, 0, -90deg);}
50% {-webkit-transform: rotate3d(1, 0, 0, 0deg);}
100% {-webkit-transform: rotate3d(1, 0, 0, 90deg);}
}
#-webkit-keyframes imageseins {
0%, 49.99% {background-image: url("http://jenseickhoff.de/testarea/2014/img/banner1.jpg")}
50%, 100% {background-image: url("http://jenseickhoff.de/testarea/2014/img/banner3.jpg")}
}
#-webkit-keyframes imageszwei {
0%, 49.99% {background-image: url("http://jenseickhoff.de/testarea/2014/img/banner2.jpg")}
50%, 100% {background-image: url("http://jenseickhoff.de/testarea/2014/img/banner4.jpg")}
}
And, as promised, your javascript is much easier (none)
fiddle
The trick is to set an animation on the images, that is changing the image when the div is not visible.
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