- Details
- Written by: Stanko Milosev
- Category: CSS3
- Hits: 5442
One example of animation in CSS3 (taken from here):
div {
content:url("myImage.png");
-webkit-animation: myfirst 1s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from{
opacity: 0;
-webkit-transform: rotate(0deg);
}
to{
opacity: 1;
-webkit-transform: rotate(90deg);
}
}
Example you can download here.
---
To know if animation has ended you can use this code:
window.onload = function () {
document.getElementById("myDiv").addEventListener("webkitAnimationEnd", AnimationListener, false);
}
function AnimationListener() {
alert("Animation has ended")
}
Notice webkitAnimationEnd, this will most problably work just in Chrome, for other browser you should some of these events: oanimationend msAnimationEnd animationend
or simply use jQuery like:
window.onload = function () {
$("div").on("webkitAnimationEnd oanimationend msAnimationEnd animationend",
function(e) {
alert("Animation has ended");
})
}
---
To restart your animation you can use code like this:
HTML:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/jquery-2.1.1.js"></script> <script type="text/javascript" src="/index.js"></script> <link href="/index.css" rel="stylesheet" type="text/css"></link> </head> <body> <div class="myCssClas"></div> <button style="top:400px;position:absolute">Restart</button> </body> </html>
JS:
window.onload = function () {
$("button").click (function() {
var el = $("div"),
newone = el.clone(true);
el.before(newone);
$("." + el.attr("class") + ":last").remove();
});
}
CSS:
div {
content:url("myImage.png");
-webkit-animation: myfirst 1s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from{
opacity: 0;
-webkit-transform: rotate(0deg);
}
to{
opacity: 1;
-webkit-transform: rotate(90deg);
}
}
---
To force animation to stay on last position, use:
-webkit-animation-fill-mode: forwards;
---
One more example of animation using pure JS - no jQuery or any other framework.
HTML:
<!DOCTYPE html> <html> <head> <link type="text/javascript" rel="stylesheet" href="/index.css"> <script type="text/javascript" src="/index.js"></script> </head> <body> <div id="animationOne">Animation one</div> <div id="animationTwo" class="withoutAnimationTwo">Animation two</div> <button id="animationTwoStart">Animation two - start</button> </body> </html>
CSS:
#animationOne {
position: relative;
left: 0px;
top: 0px;
color: red;
-webkit-animation: animationOne 1s;
-webkit-animation-fill-mode: forwards;
}
.withoutAnimationTwo {
position: relative;
color: green;
left: 0px;
top: 0px;
}
.animationTwo {
position: relative;
color: green;
left: 0px;
top: 0px;
-webkit-animation: animationTwo 1s;
}
@-webkit-keyframes animationOne {
from {
left: 0px;
}
to {
left: 1000px;
}
}
@-webkit-keyframes animationTwo {
from {
left: 0px;
}
to {
left: 1000px;
}
}
JS:
window.onload=function () {
document.getElementById("animationTwoStart").addEventListener("click", function () {
document.getElementById("animationTwo").className = 'withoutAnimationTwo';
//this set time out I need to restart the animation
setTimeout(function() {
document.getElementById("animationTwo").className = "animationTwo";
}, 10);
});
}
Example download from here.
- Details
- Written by: Stanko Milosev
- Category: Chrome
- Hits: 3132
- Details
- Written by: Stanko Milosev
- Category: Chrome
- Hits: 6927
If you try, in Google Chrome under Windows 8, to execute following statement:
if ("ontouchstart" in document.documentElement) {
console.log("You can touch me")
} else {
console.log("Cant touch this")
}
or as jsLint recommends:
if (document.documentElement.ontouchstart !== undefined) {
console.log("You can touch me")
} else {
console.log("Cant touch this")
}
(document.documentElement.ontouchstart is null if it exists, that is why we have to compare it with undefined, just don't use hasOwnProperty because it seems that it doesn't work on Android devices)
return value will be true, in Windows 7 return value is false
Few more things which you can test:
iOS (iphone/ipad) console:
typeof window.Touch
"object"
Windows 8 VM, Chrome Stable console:
typeof window.Touch
"function"
OSX, Chrome Stable, Safari latest, console:
typeof window.Touch
"undefined"
Taken from here.
In order to disable touch events on google chrome go to:
chrome://flags/
search for:
Enable touch events Mac, Windows, Linux, Chrome OS
Choose disable.