i saw a tutorial in tympanus and i did some changes to look more like a billboard but something is wrong and i don't know what it is! and it's really makes me crazy that where the hell is problem!
the first time that you run it's exactly that i want but when time passes it's getting ugly!i did this modification:
$(function() {
$('#ad_1 > img').each(function(i,e){
rotate($(this),500,3000,i);
});
function rotate(elem1,speed,timeout,i){
elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
var other;
if(elem1.parent().attr('id') == 'ad_1')
other = $('#ad_2').children('img').eq(i);
else
other = $('#ad_1').children('img').eq(i);
other.animate({'marginLeft':'0px','width':'35px'},speed,function(){
var f = function() { rotate(other,speed,timeout,i) };
setTimeout(f,timeout+i*100);
});
});
}});
all the rest is just like the tympanus
thank you!!
In the future it will be helpful for you to describe what you are hoping to achieve rather than leaving it to the people of whom you are asking for help to figure it out for themselves. With some fiddling, I determined that what you want is, instead of each panel animating at the same time, a slight delay of the animations from left to right, so that each panel begins animating after its left neighbor has begun its animation.
You attempted to achieve this by adding an increment to the duration between a panel's rotations. The increment, computed as a function of the panel's index, is larger for higher indexes. The problem with this approach is that each panel spends a different duration of time in its display state - so as time goes on, the whole image becomes increasingly mangled.
The panels all need to have the same display duration, so revert your change to the setTimeout.
setTimeout(f, timeout);
What you actually want to do is to delay when each panel starts rotating. This can be achieved by adding a setTimeout in the each handler that initiates the rotations:
$('#ad_1 > img').each(function (i, e) {
setTimeout($.proxy(function () {
rotate($(this), 500, 7000, i);
}, this), (i * 100));
});
You will notice that I have increased the timeout value passed to rotate because more time will be required to accommodate the sequential animations.
I would also recommend that you put some effort into better formatting your code. Your sample, due to poor indentation, lack of spacing, and omitted curly braces, makes reading it a chore.
It's hard to tell without looking at the rest of the code, but your else statement is missing brackets. I think you meant to do this:
$(function() {
$('#ad_1 > img').each(function(i,e){
rotate($(this),500,3000,i);
});
function rotate(elem1,speed,timeout,i){
elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
var other;
if(elem1.parent().attr('id') == 'ad_1') {
other = $('#ad_2').children('img').eq(i);
} else {
other = $('#ad_1').children('img').eq(i);
other.animate({'marginLeft':'0px','width':'35px'},speed,function(){
var f = function() { rotate(other,speed,timeout,i) };
setTimeout(f,timeout+i*100);
});
}
});
}});
*edit: Did you remember to include jQuery?
<script src="jquery-1.3.2.js" type="text/javascript"></script>
Related
I know, this is a strange one. I'm trying to make a simple Javascript game where:
The player has to catch the randomly falling head hair.
The hair returns to the head when caught.
Catching the falling hair increases the Score
The hair falls faster and faster over time.
If all of the hair falls then it's GAME OVER.
I've given it a go, and copied most of it to my fiddle here, which is an abstract version of what I'm trying to achieve.
Current Javascript:
$(document).ready(function(){
//randomize hair initial rotation
$('.hair').each(function(){
var random = Math.random()*360;
var degree = "rotate("+random+"deg)";
$(this).css("transform",degree);
});
//set points to 0
$('#points').text(points);
});
function startGame() {
start = true;
var level = 1;
//move catcher with hand
$( document ).on("mousemove", function(event) {
var catcherX = event.pageX - 50;
$('#catcher').css("left",catcherX);
});
$('.hair').each(function() {
var wait = Math.ceil(Math.random()*10000)/level;
randomX = Math.random()*($('#gameDiv').width());
function makeDestination(hair) {
hair.css("top", 510);
hair.css("left", randomX);
}
setTimeout(makeDestination($(this)), wait)
})
};
startGame();
The biggest problems I'm having are:
How can I make the hair fall after a random interval? wait currently isn't doing anything in the setTimout function.
How can I make the hair function start again after being caught?
I also feel like there must be a much better way of writing this game, what do you guys think?
I made the setTimeout reference the function instead of calling it immediately (putting the parens calls it and references the return value, putting just the function name references). Then I tweaked the transition to animate the top over 3 seconds while the left takes just 1 second. Then I made makeDestination call itself after a delay. Lastly, the "hair" needs to jump back up to the top, so I change the transition to be immediate, change the CSS, then change the transition back to animate.
https://jsfiddle.net/9pq6xfxc/1/
I leave it to you to detect the intersection of the cyan box and the hair. While this can obviously be done on mouse movement, it's going to be trickier to find the hairs that fall on a stationary hand.
So far I have a little script that detects the scroll top position and at a set level I want it to trigger a jquery counter. So far I have an array with the maximum number inside var = eightyS = [3]; then there is..
if (y > 630) {
$('.targetS').each(function() {
//counter
delay(1000);
});
} else {
return false;
}
Now I've made something similar in C++ years ago (couldn't do it now with a gun to my head) so I followed a similar logic. But this is where I'm stuck. The idea behind this function is that it will do a read out on screen of 0 then 1 then 2 then 3. Any help is greatly appreciated
You could use a setInterval() which executes a function ever second such as below:
var count = 0;
var interval = setInterval(function(){
count++;
$('#counter').text(count);
}, 1000);
I've created a quick JSFiddle
You should be able to wrap this in to your code fairly easily. You may also want to use clearInterval(interval) to stop the function executing when you scroll back up the page; or when you get in to your else block, which would have the same effect. I've added a clearInterval() example to the JSFiddle on click of the stop link. You'll need to make sure the interval variable is in scope when clearing it.
I am creating a chronometer for which I already have all the code working. Now I'm trying to tie the rotation of a 'notch' to the passage of seconds. I have the following code-block:
var minutesNotchAnimation = new Kinetic.Animation(function(frame) {
var notch = self.minutesNotchLayer.get('#minutesNotchShape')[0];
notch.rotate(rotationAngle);
}, this.minutesNotchLayer);
minutesNotchAnimation.start();
How can I execute the animation once every second? Also how can I apply custom easing to it? And lastly... how do I control the length of the animation? I find the KineticJS documentation to be really lacking in places, also there are not a lot of comprehensive resources out there that explain the Animation class in depth.
Thanks in advance!
P.S. Here's a fiddle of the complete code in case anyone needs to check it out --> http://jsfiddle.net/k4xA8/
You can't set the animation interval because this object is not doing for that. If you want to make something more accurate (and use easing), it's a lot easier to employ a Tween instead.
By the way, you can use the frame.timeDiff property, or the frame.time in order to control the animation...
var minutesNotchCount = 0;
var minutesNotchAnimation = new Kinetic.Animation(function(frame) {
minutesNotchCount += frame.timeDiff;
var notch = self.minutesNotchLayer.get('#minutesNotchShape')[0];
if (minutesNotchCount >= 40) {
notch.rotate(0.25);
minutesNotchCount = 0;
}
}, this.minutesNotchLayer);
minutesNotchAnimation.start();
I am trying to create an animation using a sprite sheet and a for loop to manipulate the background position until it has reached the total number or rows in the sheet. Ideally a reset back to the initial position would be practical, but I cannot even get the animation itself to trigger...
With the current function, no errors occur and the background position in my CSS does not change. I even recorded using Chrome DevTools Timeline and there was nothing either then everything related to my page loading. I have also tried using "background-position-y" as well as a simpler value rather then the math I currently have in place.
This is my function:
$(document).load(function() {
var $height= 324;
var $rows= 34;
for(var i=0; i<$rows; i++){
setTimeout(function() {
$('#selector').css("background-position", "0px ", "0" - ($height*i) + "px");
}, 10);
}
});
I hate to ask a question that is similar to previous issues, but I cannot seem to find another individual attempting sprite sheet animation with a for loop, so I suppose it is it's own problem.
p.s. I didn't include a snippet of my HTML and CSS because it is pretty standard and I don't see how that could be the problem. That being said, I am all ears to any potential thoughts!
I am completely revamping my answer
This issue is that the for() loop is not affected by the setTimeout so the function needs to be written on our own terms, not with a loop
Working Fiddle
Here it is..
var $height= 5;
var $rows= 25;
var i = 1; // Starting Point
(function animateMe(i){
if(i<=$rows){ // Test if var i is less than or equal to number of rows
var newHeight = 0-($height*i)+"px"; // Creat New Height Position
console.log(i); //Testing Purposes - You can Delete
$('#selector').css({"background-position": "0px "+ newHeight}); // Set New Position
i++; // Increment by 1 (For Loop Replacement)
setTimeout(function(){animateMe(i)}, 1000); // Wait 1 Second then Trigger Function
};
})(0);
Here is your solution
First Change
$(document).load() To $(document).ready()
And Change .css Syntex as
$('#selector').css("background-position",'0px '+(0 - ($height*i))+'px');
Here is fiddle Check it ihad implemented it on my recent project http://jsfiddle.net/krunalp1993/7HSFH/
Hope it helps you :)
Ok, so I've made a timer that makes parts of my SVG map fadeOut as they cross certain thresholds. However, I want to mess with other parts of the CSS.
I looked at this post, but couldn't make sense of it in terms of my problem.
** Edits Below**
Thanks for the help, I took a look at my code and tried to clean out some of the stuff that didn't need to be there. I also restructured my if statement, putting it inside of the JQuery code. I tried the suggestion below, assigning the var timer outside the interval function, but then my start button no longer worked and the script started running on page load. So, I moved it back to keep things working.
Also, put my code into JSFiddle, but I couldn't get it to work correctly. Will spend some more time familiarizing myself with that in the meantime. Thank you for introducing me to that.
As for my original question:
the .animate() tag works so long as I set it to change the opacity attribute, but has no effect on the other attributes I want to change. I know SVG and CSS have different attribute names, and I've tried both types of names. Here is my code below. I am trying to get the .animate() effect to change the fill color and stroke-width.
var i,timer;
i = 2013;
function start() {
timer = self.setInterval("increment()", 800 )
}
function increment() {
i++;
document.getElementById("timer_out").innerHTML = i ;
$(document).ready( function() {
if (i == 2014) {
$('#AL').animate( {
opacity: 0.3 } , 500 );
}
});
}
function stop() {
clearInterval(timer);
timer = null;
}
function reset() {
stop();
i=2013;
document.getElementById("timer_out").innerHTML = i;
}
I'm really just concerned with the JQuery statement, which works perfectly fine until I replace opacity with a different CSS attribute.
Thanks again for the attention and advice.
1) if you divide any number by 1 you get the original number, your divisions are doing nothing as far as i can tell.
2) setInterval should be written:
timer = setInterval(increment, ( 1000 / divide ))
also note increment() and start() are not good name choices to have in global scope, how many people will think of those names, use anonymous functions maybe to contain scope
(function()
{
// function is now contained within anonymous function scope and not accessible outside
function increment(){}
})()
3) logically step though your code in your head. your code wont work
4) create a fiddle of what you have done so far