I'm new to js and web dev in general, and i want to add animations to my website using raphael js.
Here is the code I use for a basic slide-in animation:
paper.text('1000','25%','this is a\ntest').animate({x: '50'}, 1000, 'linear');
(test it here)
It works fine when i put fixed values for the x parameter. However, when i use dynamic positioning, the animation doesn't occur, and the text waits for the duration of the animation before positioning itself. At least the final positioning is what i'm looking for:
paper.text('300%','25%','this is a\ntest').animate({x: '50%'}, 1000, 'linear');
Why isn't it working ?
Is there a way around ?
I'm not sure raph can work like that (animating to a percentage), I may be wrong though.
Is this the sort of thing you are after ?
paper.text( paper.width * 3,'25%','this is a\ntest').animate({x: paper.width / 2}, 1000, 'linear');
Related
Okay, I'm trying to make it so when you click a button it'll spin a div with it's randomized contents and it'll slow down on stop on a specified div, now I have no idea where to start,
Here is an example of what I'm trying to do,
https://www.youtube.com/watch?v=y7jjhLUKleg
Any idea how to start? what should my priority be, jQuery or Javascript?
Kind Regards
EDIT: I'm not asking for anyone to spoonfeed me code, I just need an idea on where to start.
The animation itself can be probably solved easily using JQuery Animate functions. The animation supports easing, and the "ease out" is what you need. With some CSS, you would create some kind of viewport, and move the elements from right to left until the animation stops.
Let me help you with some starting code: http://jsfiddle.net/dfevruws/1/
The animation command is very simple:
$(function() {
$( "#items" ).animate({
left: -2000
}, {
duration: 5000,
easing: "easeOutQuad"
});
});
Probably more interesting than this is how you handle the selected item, but this is a different story, you ask for the Animation.
I want to slideUp() a div, and when its sliding up, I want to move it down by animate() - in the exact same time .
what I have done so far :
ln = jQuery("Selector");
ln.slideUp(1500, function() {
ln.animate({top: '150px'}, 'slow');
var Html = jQuery('#last' + id1).html() + jQuery('#last' + id2).html();
ln.html(Html);
});
But it slides up first, and then moves down 150px.
I want to call these two functions (slideUp and animate ) in the exact same time, I want to know is it possible or not?
Or does my problem have an easier way to solve ?
P.S : I think this kind of questions has been asked before, like this, but Its not my answer if you read it completely.
You can do this by using .animate() for both operations and just specifying both changes with properties that you pass to animate. The slideup can be done by specifying a final height of 0 for animate. Using this single animation, jQuery will run both changes together as part of the same animation sequence.
ln.animate({top: '150px', height: 0}, 'slow');
Working demo: http://jsfiddle.net/jfriend00/kKsa4/
I created this multi-layered animation that takes 4 images ("layers") and animates them to "zoom away". It usually runs smoothly but once in a while when the 3rd layer starts, the 2nd layer animation kind of lags. I'm not really sure why/when the lag happens - maybe due to GPU processing?
http://jsfiddle.net/3EwnB/3/
Is there anything I can do to reduce any animation lag?
And if there's a better way to achieve this effect I'm not stuck on using jQuery.animate - alternate suggestions are welcome.
The code for the jQuery animation (for 1 of the 4 layers):
setTimeout(function() {
$('#animation-layer-2').show().animate({
opacity: '0.9',
marginLeft: '-490px',
marginTop: '25px',
width: '950px'
}, { duration: 400, queue: false });
}, 500)
Also, in the JS Fiddle example, the images are 9-17kb but that actual images I'm using are 131-457kb. The image sizes don't seem to make much of a difference though.
I am using this code to create a scroll-up marquee text but after 7000 miliseconds it jitters and thus doesn't offer a good look for the text inside.
Have you any idea where I can fix it ?
<script language="javascript">
jQuery(function() {
var marquee = jQuery("#marquee");
marquee.css({"overflow": "hidden", "height": "100%"});
marquee.wrapInner("<span>");
marquee.find("span").css({ "height": "50%", "display": "inline-block", "text-align":"left" });
marquee.append(marquee.find("span").clone());
marquee.wrapInner("<div>");
marquee.find("div").css("height", "200%");
var reset = function() {
jQuery(this).css("margin-top", "0%");
jQuery(this).animate({ "margin-top": "-100%" }, 7000, 'linear', reset);
};
reset.call(marquee.find("div"));
});
BTW, you can it like this
<div id="marquee">text</div>
[UPDATE]Sorry Kamal for having to edit this post to add the jsfiddle to reproduce the problem [I always know I can do this :-D]
http://jsfiddle.net/xRcwH/
why not use the <marquee> tags?
<marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>
I've already answered the same question at <marquee> html tag usage/replacment.
There is CSS3 WebKit specific -webkit-marquee-, that you can read about at http://davidwalsh.name/webkit-marquee-css. However, for whatever reason, even the native CSS marquee implementation is glitchy.
The same applies to the <marquee> element. It is well supported by the browsers, though, apart from being deprecated, it is glitchy.
I've been looking for the most efficient and cross-browser supported marquee implementation. None of the above fit the bill. The common approach is to use timer (or jQuery animate implementation) to adjust the CSS margin property of the element. This is what your script does. Unfortunately, this operation is very resource intensive. It requires applying new CSS every few milliseconds resulting in recalculation of the whole layout.
I came up with implementation that utilises CSS3 transitions for browsers that support it and otherwise animate the scrollLeft property of the containing element. It is an experimental implementation, though it works well with IE7+. The code is available at https://github.com/gajus/marquee (demo https://dev.anuary.com/60244f3a-b8b2-5678-bce5-f7e8742f0c69/).
Is there anyway to add a easing to a fixed element?, I've been looking around and I can't find an answer. I really don't know how it would be, maybe something like...
$(window).scroll(function() {
$("#form").animate({position:"fixed", easing: 'swing'});
});
Any help will be appreciated ^ ^ Thanks!
Edit:Pretty much what I'm looking for is when user scrolls, the fixed element obviously will follow the window position, but I want to add is a little delay in comparison to scroll action with an easing effect
You'd have to make that div absolute positioned, z-indexed and without parent, then move it on the scroll event. You can know the number of pixels scrolled with scrollTop(). Something like this:
$(window).scroll(function(){
var offset=100;
//stop is called so easing doesn't affect while it is still scrolling.
$("form").stop().animate({top:($(window).scrollTop()+offset)+"px"}, 300, 'swing');
});
Try this instead:
$("#form").animate({position:"fixed"}, 300, 'swing');
From the jQuery api ( http://api.jquery.com/animate/ ):
The only easing implementations in the jQuery library are the default,
called swing, and one that progresses at a constant pace, called
linear. More easing functions are available with the use of plug-ins,
most notably the jQuery UI suite.
$("form").animate({position:"fixed"}, 300, 'swing'); //swing being default