javascript or css to animate file transfer - javascript

I want to show a file transfer...like from a folder to another folder, i have been able to do it using JavaScript but all what i did was:
<script type="text/javascript">
var img;
var animateR;
var animateL;
function init(){
img = document.getElementById('file');
img.style.left = '35px';
}
function moveRight(){
img.style.display= 'block';
img.style.left = parseInt(img.style.left) + 10 + 'px';
animateR = setTimeout(moveRight,30);
if(parseInt(img.style.left)>600){
clearTimeout(animateR);
moveLeft();
}
}
function moveLeft(){
img.style.left = parseInt(img.style.left) - 10 + 'px';
animateL = setTimeout(moveLeft,30);
if(parseInt(img.style.left)<38){
clearTimeout(animateL);
moveRight();
}
}
window.onload =init;
</script>
this work for me but i wish to show the file rotating whilst moving from the right folder to the left folder and back to the riight fold while the file is uploading.
also i am think if the best way to go around this will be a gif?
i want an effect like flying files

You can rotate images in css like this :
#rot{
animation: anime1 2s;
-webkit-animation: anime1 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes anime1 {
to {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform:rotate(360deg);/*Chrome & Opera*/
transform: rotate(360deg); /* The best browser (i mean firefox) */
}
}
#-webkit-keyframes anime1 {
to {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform:rotate(360deg);
transform: rotate(360deg);
}
}
Then just use js to display or hide animated image

If I have read your code correctly, you are making the file bounce back and forth between your right and left bounds. You could use the CSS3 transform property to rotate the files as they are moving back and forth as such.
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
However, you are still just moving your image file in 10 pixel increments, which probably looks choppy. A better solution would be to use CSS keyframe animations.

Related

JS Animation only works with alert() after page refresh

Got a submit type button that triggers a Javascript function, which has this code:
function spin() {
alert("spinning");
document.getElementById("rouletteImage").removeAttribute('style');
var deg = 180;
var css = '-webkit-transform: rotate(' + deg + 'deg);';
document.getElementById("rouletteImage").setAttribute(
'style', css
);
}
also this line in css:
img {
-webkit-transition: -webkit-transform 4s ease-out;
}
Now, this code works perfectly and the spinning animation is smooth, however, for some reason, when i remove the alert() from the function, the image still gets rotated by deg, but there isnt any anymation, it just plain spawns rotated already.
Could someone give me any insight?
Change to this
<img src="" id="rouletteImage" />
Javscript function
function spin() {
document.getElementById("rouletteImage").className ('someClass');
}
Change css like
img.someClass {
-webkit-transform: rotate(180deg);
}
Let me know if not working

Triggering a JQuery animate function & looping it?

What I'm trying to do is (presumably) relatively simple, but let down by my (admittedly poor) understanding of jquery/Javascript.
The goal is simple - I want to 'animate' the opacity of a background image on a particular div (eventually I will apply this to others on the page, with the animation started/stopped according to the section being viewed - it's a horizontally scrolled page split into 'panels' the the viewer navigates with < & > buttons or named links).
Here's the script I've got so far (separate .js file, referenced in index.html);
jQuery(document).ready(function($) {
"use strict";
function animateSec1BG() {
$('#section1').animate({
opacity: 0,
}, 1000, function () {
$("#section1").css({ 'background-image': 'url(images/SlideBG-1.jpg)' }).animate({ opacity: 1 }, 1000);
});
}
});
No errors are reported for that (Dreamweaver CC, code view). At the bottom of index.html, after all scripts are loaded, I have this;
<script type="text/javascript">
$("#section1").animateSec1BG();
</script>
(the "#section1" bit I don't think is needed - code just didn't 'look' right without it - but doesn't work either way!).
Error returned states:
TypeError: $(...).animateSec1BG is not a function
I'm totally lost and somewhat out of my depth here, so any pointers much appreciated!
The function is defined within jQuery scope not global. Add the function to jQuery like:
jQuery.fn.animateSec1BG = function() {
$('#section1').animate({
opacity: 0,
}, 1000, function() {
$("#section1").css({
'background-image': 'url(images/SlideBG-1.jpg)'
}).animate({
opacity: 1
}, 1000);
});
}
Since the selector is hard coded, you can just define the function global one, and execute it when ROM is ready.
function animateSec1BG() {
// code
}
And call it animateSec1BG(). As for the loop, you can call the function within a interval using setInterval()
setInterval(animateSec1BG, 1000);
Another solution with CSS animation;
(This animation change the back-color. If you want, replace the background-color element with background-image element)
$.fn.animateSec1BG = function (state){
if(state)
$('#section1').addClass("sample");
else
$('#section1').removeClass("sample");
};
$(document).ready(function() { $("#section1").animateSec1BG(true); });
.sample {
width:100px;
height:20px;
background:red;
animation:myfirst 1s;
-moz-animation:myfirst 1s infinite; /* Firefox */
-webkit-animation:myfirst 1s infinite; /* Safari and Chrome */
}
#-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
50% {background:yellow;}
100% {background:red;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
50% {background:yellow;}
100% {background:red;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section1">
Some info and etc.
</section>

alternative to blink() method

I am in a need of having a blinking function in my application. Basically, I am creating a calculator and I need something like "|" to blink after the user inputs each numbers from the button. For firefox and opera, something like:
var str = "Hello world!";
document.write(str.blink());
This is exactly what I want. My problem is they don't work in Chrome, IE or safari. Is there any easy substitution for this or I have to create blinking functionality myself if I want my application to run on cross-browsers?
you could use just css3 :
#keyframes 'blink' {
0% { background: rgba(255,0,0,0.5); }
50% { background: rgba(255,0,0,0); }
100% { background: rgba(255,0,0,0.5); }
}
Try this-:SOLUTION NO 1
You can create your own custom blink function.This can also be done by creating css class and adding them to our element.
function blink()
{
setInterval(function () {
document.getElementById("blink").style.webkitTransitionDuration = "0.7s";
document.getElementById("blink").style.opacity = 0;
setTimeout(function () {
document.getElementById("blink").style.webkitTransitionDuration = "0.7s";
document.getElementById("blink").style.opacity = 1;
}, 700);
},1400);
}
OR
try this-->SOLUTION NO.2
JAVASCRIPT
function blink()
{
document.getElementById('blink').className = "animated blink_css";
}
In css
.animated {
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
#keyframes 'blink' {
0% { background: rgba(255,0,0,0.5); }
50% { background: rgba(255,0,0,0); }
100% { background: rgba(255,0,0,0.5);
}
//try moz for mozilla,o for opera and webkit for safari and chrome
.blink_css {
-webkit-animation-name: blink;
-moz-animation-name: blink;
-o-animation-name: blink;
animation-name: blink;
}
Both of them will work.Tested!!!
If you truly want cross-browser compatibility, you should use a library, jQuery for instance.
Here is a nice little script that accomplishes what you want- http://www.silverphp.com/simple-jquery-blink-script-alternative-to-html-blink-tag.html
On the other hand, if you prefer vanilla JS, you may have to implement it yourself. Maybe use setInterval() with a function that makes the element disappear?

CSS3 Smooth transition when dynamically changing animations

I have two keyframe animations "Bounce-In" and "Bounce-Out" the Bounce-In animation takes 1.2 seconds to complete, but if a user triggers the Bounce-Out function before it's finished it will jump to 100% scale and doesn't gracefully scale out from it's current animation position.
Is this possible with keyframe animations? I've seen it done with transition property but not using scale().
#-webkit-keyframes Bounce-In
{
0% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
60% { -webkit-transform: scale(0.7) }
80% { -webkit-transform: scale(1.0) }
90% { -webkit-transform: scale(0.9) }
100% { -webkit-transform: scale(1.0) }
}
#-webkit-keyframes Bounce-Out
{
0% { -webkit-transform: scale(1.0) }
40% { -webkit-transform: scale(0.1) }
60% { -webkit-transform: scale(0.4) }
80% { -webkit-transform: scale(0.1) }
90% { -webkit-transform: scale(0.2) }
100% { -webkit-transform: scale(0) }
}
I have a demo on JSFiddle: http://jsfiddle.net/Vn3bM/98/
*if you click the "Games" circle before the animation is finished you will notice the other two jump to 100% and then animate out (that's what I'm trying to make smooth).
I even tried removing the 0% keyframe from Bounce-Out and that didn't help...
In your case, the "jump" you notice in your animation comes from the change of animations you have installed on onmouseup. The "Bounce-Out" Animation has an initial scale of 1 (first Keyframe), and this is what the two circles immediately get set to when the animation is installed.
There are two solutions to this, which I can explain in some detail:
The Easy Way
You could just wait for the initial animation to end via the 'webkitAnimationEnd' Event and install the onmouseup event with a recursive function waiting for the animation to finish:
var initAnimationEnded = false;
document.getElementById('sports').addEventListener('webkitAnimationEnd', function() {
initAnimationEnded = true;
}, false);​
And here's the onmouseup handler:
document.getElementById('games').onmouseup = function() {
function bounceOut() {
if (initAnimationEnded) {
events.style.webkitAnimationName = "Bounce-Out";
sports.style.webkitAnimationDelay = "0.2s";
sports.style.webkitAnimationName = "Bounce-Out";
} else {
setTimeout(bounceOut, 20);
}
}
bounceOut();
}
I installed a jsfiddle here so you can see it working. The Bounce Out animation is only triggered after the animation finished, nothing unusual about that.
The Hard Way
You can pause the animation and parse the current values of the transformation, then install a temporary keyframe animation to bounce out. This gets much more verbose though:
First, you have to stop the animations:
events.style.webkitAnimationPlayState = "paused";
sports.style.webkitAnimationPlayState = "paused";
Then, you set up a helper to insert new css rules:
var addCssRule = function(rule) {
var style = document.createElement('style');
style.innerHTML = rule;
document.head.appendChild(style);
}
Then create the css keyframe rules on the fly and insert them:
// get the current transform scale of sports and events
function getCurrentScaleValue(elem) {
return document.defaultView.
getComputedStyle(elem, null).
getPropertyValue('-webkit-transform').
match(/matrix\(([\d.]+)/)[1];
}
var currentSportsScale = getCurrentScaleValue(sports);
var currentEventsScale = getCurrentScaleValue(events);
// set up the first string for the keyframes rule
var sportsTempAnimation = ['#-webkit-keyframes Sports-Temp-Bounce-Out {'];
var eventsTempAnimation = ['#-webkit-keyframes Events-Temp-Bounce-Out {'];
// basic bounce out animation
var bounceOutAnimationBase = {
'0%': 1,
'40%': 0.1,
'60%': 0.4,
'80%': 0.1,
'90%': 0.2,
'100%': 0
};
// scale the animation to the current values
for (prop in bounceOutAnimationBase) {
sportsTempAnimation.push([
prop, '
{ -webkit-transform: scale(',
currentSportsScale * bounceOutAnimationBase[prop],
') } '].join(''));
eventsTempAnimation.push([
prop,
' { -webkit-transform: scale(',
currentEventsScale * bounceOutAnimationBase[prop],
') } '
].join(''));
}
// add closing brackets
sportsTempAnimation.push('}');
eventsTempAnimation.push('}');
// add the animations to the rules
addCssRule([sportsTempAnimation.join(''),
eventsTempAnimation.join('')].join(' '));
Then, you restart the animations with these rules:
events.style.webkitAnimationName = "Events-Temp-Bounce-Out";
events.style.webkitAnimationDelay = "0s";
sports.style.webkitAnimationDelay = "0s";
sports.style.webkitAnimationName = "Sports-Temp-Bounce-Out";
events.style.webkitAnimationPlayState = "running";
sports.style.webkitAnimationPlayState = "running";
Et voilà. I made a jsfiddle here so you can play around with it.
More Sugar
In your example, the circles bounce out alternating in bounce. You can easily get this back to work with the second solution by using setTimeout for all sports circle animations. I did not want to include it here because it would unnecessarily complicate the example code.
I know the provided examples are not really DRY, you could for example make all the stuff for events and sports work with half the lines of code (with meta properties), but in terms of readability, I think this example serves well.
To have this example working in all browsers with support for css3 animations, you need to normalize the transition properties. To do this in javascript, have a look here The Example works for animations and other properties as well, just replace 'transition' with the property you want
For a further read on modifying css3 animations on the fly, I found this post very useful, have a look at it as well.

programmatically changing webkit-transformation values in animation rules

I have this stylesheet:
#-webkit-keyframes run {
0% {
-webkit-transform: translate3d(0px, 0px, 0px);
}
100% {
-webkit-transform: translate3d(0px, 1620px, 0px);
}
}
Now, I would like to modify the value of 1620px depending on some parameters. Like this:
#-webkit-keyframes run {
0% {
-webkit-transform: translate3d(0px, 0px, 0px);
}
100% {
-webkit-transform: translate3d(0px, height*i, 0px);
}
}
I would prefer to be able to use JavaScript and jQuery, though a pure CSS solution would be ok.
This is for an iPhone game that runs in it's mobile Apple Safari browser.
Use the CSSOM
var style = document.documentElement.appendChild(document.createElement("style")),
rule = " run {\
0% {\
-webkit-transform: translate3d(0, 0, 0); }\
transform: translate3d(0, 0, 0); }\
}\
100% {\
-webkit-transform: translate3d(0, " + your_value_here + "px, 0);\
transform: translate3d(0, " + your_value_here + "px, 0);\
}\
}";
if (CSSRule.KEYFRAMES_RULE) { // W3C
style.sheet.insertRule("#keyframes" + rule, 0);
} else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
style.sheet.insertRule("#-webkit-keyframes" + rule, 0);
}
If you want to modify a keyframe rule in a stylesheet that's already included, do the following:
var
stylesheet = document.styleSheets[0] // replace 0 with the number of the stylesheet that you want to modify
, rules = stylesheet.rules
, i = rules.length
, keyframes
, keyframe
;
while (i--) {
keyframes = rules.item(i);
if (
(
keyframes.type === keyframes.KEYFRAMES_RULE
|| keyframes.type === keyframes.WEBKIT_KEYFRAMES_RULE
)
&& keyframes.name === "run"
) {
rules = keyframes.cssRules;
i = rules.length;
while (i--) {
keyframe = rules.item(i);
if (
(
keyframe.type === keyframe.KEYFRAME_RULE
|| keyframe.type === keyframe.WEBKIT_KEYFRAME_RULE
)
&& keyframe.keyText === "100%"
) {
keyframe.style.webkitTransform =
keyframe.style.transform =
"translate3d(0, " + your_value_here + "px, 0)";
break;
}
}
break;
}
}
If you don't know the order but do know the URL of the CSS file, replace document.styleSheets[0] with document.querySelector("link[href='your-css-url.css']").sheet.
Have you tried declaring the keyframe portion of your css in a <style> element in the head of your html document. You can then give this element an id or whatever and change it's content whenever you like with javaScript. Something like this:
<style id="keyframes">
#-webkit-keyframes run {
0% { -webkit-transform: translate3d(0px,0px,0px); }
100% { -webkit-transform: translate3d(0px, 1620px, 0px); }
}
</style>
Then your jquery can change this as normal:
$('#keyframes').text('whatever new values you want in here');
Well from your example it seems to me that CSS animations may be overkill. Use transitions instead:
-webkit-transition: -webkit-transform .4s linear; /* you could also use 'all' instead of '-webkit-transform' */
and then apply a new transform to the element via js:
$("<yournode>")[0].style.webkitTransform = "translate3d(0px,"+ (height*i) +"px,0px)";
It should animate that.
I didn't get when you wanted to modify these values (i.e. use variables) but nevertheless here are 3 to 4 solutions and 1 impossible solution (for now).
server-side calculation: in order to serve a different CSS from time to time, you can tell PHP or any server-side language to parse .css files as well as .php or .html and then use PHP variables in-between PHP tags. Beware of file caching: to avoid it, you can load a stylesheet like style.css?1234567890random-or-time it will produce an apparent different file and thus won't be cached
SASS is also a server-side solution that needs Ruby and will provide you an existing syntax, probably cleaner than a hand-made solution as others have already about problems and solutions
LESS is a client-side solution that will load your .less file and a less.js file that will parse the former and provide you variables in CSS whatever your server is. It can also work server-side with node.js
CSS being dynamically modified while your page is displayed?
For 2D there are jquery-animate-enhanced from Ben Barnett, 2d-transform or CSS3 rotate are pitched the other way around (they use CSS3 where possible and where there are no such functions, they fallback to existing jQuery .animate() and IE matrix filter) but that's it.
You could create a plugin for jQuery that would manage with a few parameters what you want to achieve with 3D Transformation and avoid the hassle of modifying long and complex CSS rules in the DOM
CSS only: you could use -moz-calc [1][2] that works only in Firefox 4.0 with -webkit-transform that works only in ... OK nevermind :-)
Try something like this:
var height = {whatever height setting you want to detect};
element.style.webkitTransform = "translate3d(0px," + height*i + ",0px)";
A 'Chunky' solution?
Create transforms for heights within your chosen granularity, say 0-99, 100-199, 200-299, etc. Each with a unique animation name identifier like:
#-webkit-keyframes run100 {
0% { -webkit-transform: translate3d(0px,0px,0px); }
100% { -webkit-transform: translate3d(0px,100px,0px); }
}
#-webkit-keyframes run200 {
0% { -webkit-transform: translate3d(0px,0px,0px); }
100% { -webkit-transform: translate3d(0px,200px,0px); }
}
then create matching css classes:
.height-100 div {
-webkit-animation-name: run100;
}
.height-200 div {
-webkit-animation-name: run200;
}
then with javascript decide which chunk you're in and assign the appropriate class to the surrounding element.
$('#frame').attr('class', '').addClass('height-100');
Might be ok if the granularity doesn't get too fine!
I used warmanp's solution and it worked, but with a bit of very important tweaking.
$('#ticket-marquee-css').text(
"#-webkit-keyframes marqueeR{ 0%{text-indent: -" + distanceToMove + "px;} 100%{text-indent: 0;} }" +
"#-webkit-keyframes marqueeL{ 0%{text-indent: 0;} 100%{text-indent: -" + distanceToMove + "px;} }"
);
In order to get the CSS transition to update, instead of using the previously-defined values, I had to make the animation stop, then restart. To do this, I placed a class of "active" on the elements, and made the CSS only apply the transition to the elements that had that class
#marquee1.active {-webkit-animation-name: marqueeL;}
#marquee2.active {-webkit-animation-name: marqueeR;}
Then I just had to toggle the "active" class off, wait for it to apply in the DOM (hence the setTimeout), then reapply it.
$('.ticket-marquee').removeClass('active');
setTimeout(function() { $('.ticket-marquee').addClass('active'); },1);
And that works great! Now I can dynamically change the distance the text moves!

Categories