how to replicate JQtouch smooth iphone animations? - javascript

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.

Related

How to make an image rotating around static logo?

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!

Responsive fixed footer with clickable banner rotator?

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>

Simple fadein not running smooth

I am a beginner in jQuery and JS and I wanted to make a simple fade in animation using the following code. Unfortunately the code is not running smooth, and despite reading up all the basics (at least I suppose so) I cannot get it to run smoothly. Can anyone point me in the correct direction on how to make a smooth fade in animation?
All my elements are visible in the beginning. I don't want to start with hidden elements as this could result in problems in my UI if there is no JS enabled.
Thank you.
$(function () {
$("#center_block").animate(
{
opacity: 0,
}, 0, function () {
$("#center_block").animate({
opacity: 1,
}, 250);
});
});
If you have a slow processor on your computer or if you are viewing javascript animations a mobile device the processor might not be able to cope with the animation. If you use CSS3 animations then the inbuilt browsers hardware acceleration is used, which is a lot more efficient.
All I am doing is using CSS3 animation to apply the fade.
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity:1;
}
}
#center_block {
animation: 1s ease-out fadeIn;
}
<div id="center_block">Look at me, I'm Mr Center Block</div>
There really is no need for JavaScript at all here. CSS animations can do this more easily with better performance (because they will leverage GPU hardware acceleration):
span {
font-size:3em;
font-weight:bold;
font-family:Arial;
border:1px solid grey;
background-color:aliceblue;
display:inline-block;
padding:10px;
opacity:0;
/* Configure the element to use the animation */
animation: 3s infinite fade;
}
#keyframes fade {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
<span>Hello</span>
Or, if you don't want the animation to be automatic and have some sort of trigger, then just add a CSS class to the object at the right time:
document.querySelector("button").addEventListener("click", function(){
document.querySelector("span").classList.add("animate");
});
span {
font-size:3em;
font-weight:bold;
font-family:Arial;
border:1px solid grey;
background-color:aliceblue;
display:inline-block;
padding:10px;
opacity:0;
}
.animate {
/* Configure the element to use the animation */
animation: 3s infinite fade;
}
#keyframes fade {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
<button>Click to Start</button>
<span>Hello</span>
I would advise using CSS animations as much as possible for the smoothest performance. A great library to get you started is animate.css. To use it, include the css library in your project and use javascript to add predefined classes to your components. In your case:
$('#center_block').addClass('animated fadeIn');
would fade in the #center_block element nicely.
If you don't want to hide the elements incase JS is disabled, then you need to hide them first using JS. Also, you're currently using 250ms, which is incredibly fast, and unlikely to be perceived by users.
$(document).on('ready', function(){
$('#center_block').hide().fadeIn(250);
});
If your elements already have opacity: 0; for the CSS, then you can add a transition to handle the animation:
#center_block{
opacity: 0;
transition: all .25s linear;
}
Then change the CSS value of opacity whenever the triggering condition is met:
$('#center_block').css('opacity','1');

webkit-transform doesn't work on iOS

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);
}

Is it possible to have a constant rotating DIV or image?

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

Categories