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
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.
So I have two sections of content near the top of my page and I’d like for users who have scrolled down to near the top of the second section to get “scroll snapped” to the top of the second one once they have stopped scrolling.
I think it should be possible using jQuery but I haven’t been able to figure it out. Here are my examples:
Without my attempt: http://codepen.io/jifarris/pen/gaVgBp
With my broken attempt: http://codepen.io/jifarris/pen/gaVgQp
Basically I can’t figure out how to make it try scrolling to the spot only once, after scrolling has stopped. It’s kind of just freaking out.
I love how the recently introduced scroll snap points CSS feature handles scroll snapping and I’d almost prefer to use it – for the browsers that support it, at least – but it seems like it only works for items that take up 100% of the viewport height or width, and it seems like it’s for scrolling within an element, not the page itself.
The top section has a fixed height, so this really can be handled with pixel numbers.
And for reference, here’s the heart of the code from my attempt:
$(function() {
$(document).on('scroll', function() {
var top = $(document).scrollTop();
if (top > 255 && top < 455) {
$('html, body').animate({scrollTop: '356'}, 500);
$('body').addClass('hotzone');
} else {
$('body').removeClass('hotzone');
}
});
});
KQI's answer contains most of the steps required to create a well functioning section-scroll for use in your application/webpage.
However, if you'd just want to experiment yourself, developing your script further, the first thing you'll have to do is add a timeout handler. Otherwise your logic, and therefor scrollAnimation, will trigger every single pixel scrolled and create a buggy bouncing effect.
I have provided a working example based on your script here:
http://codepen.io/anon/pen/QjepRZ?editors=001
$(function() {
var timeout;
$(document).on('scroll', function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
var top = $(document).scrollTop();
if (top > 255 && top < 455) {
$('body').animate({
scrollTop: '356'
}, 500);
$('body').addClass('hotzone');
} else {
$('body').removeClass('hotzone');
}
}, 50);
});
});
Good luck!
All right, there are couple of things you gonna have to deal with to get a good result: which are performance, call stack queue, easing.
Performance wise you should drop jQuery animate and use VelocityJs which gives a smoother transition, better frame per second (fps) to avoid screen glitches especially on mobiles.
Call stack: you should wrap whatever logic you have to animate the scrolltop with 'debounce' function, set the delay for let say 500mm and check the scrolling behavior. Just so you know, the 'scroll' listener your using is firing on each pixel change and your script will go crazy and erratic. (It is just gonna be a moment of so many calc at the same time. Debounce will fix that for you)
Easing: make the transition looks cool not just dry snappy movement.
Remember, 'easing' with Velocity starts with 'mina.' i.e.
'Mina.easingFnName'
Finally, your logic could be right, i am in my phone now cannot debug it but try to simplify it and work with a single problem at once, be like i.e.
If ( top > 380 ) // debounce(...)
I need to set easing 'easeInCubic' on an animation done using jQuery.
Here my code:
$('#content-scroll-inner:not(:animated)').animate({ 'top': moveOf}, this.animationSpeed, this.cbEndAnimation.bind(this));
Trying something like
$('#content-scroll-inner:not(:animated)').animate({ 'top': moveOf},'easeInCubic', this.animationSpeed, this.cbEndAnimation.bind(this));
What am I doing wrong and how to fix it?
Use easing option to set easing effect:
easing: 'easeInCubic'
This way:
$('#content-scroll-inner:not(:animated)').animate({ 'top': moveOf},easing:'easeInCubic', this.animationSpeed, this.cbEndAnimation.bind(this));
Use easing
Optional. Specifies the speed of the element in different points of
the animation. Default value is "swing". Possible values: "swing" -
moves slower at the beginning/end, but faster in the middle "linear" -
moves in a constant speed Tip: More easing functions are available in
external plugins.
With animate():
$('#content-scroll-inner:not(:animated)').animate({ 'top': moveOf},easing:'easeInCubic', this.animationSpeed, this.cbEndAnimation.bind(this));
With addClass()
$('.foot').addClass('slide-down', 1000, 'easeInCubic');
use easing: and make sure to add jquery.ui.js in your script tag. Please read this documentation
Here's the breakdown...
wrapper (position:relative; overflow:hidden; )
section-container (position:absolute)
multiple child sections
I attach a mousewheel event listener and animate (with easing) the 'top' position of 'section-container'. As this position changes, the 'background-position' of each section moves vertically based on the position of 'section-container's 'top' property (continually updated through a setTimeout()).
All of that works as it should, except as the 'background-position' changes, the image has a bit of a jitter. This doesn't happen if the 'background-attachment' is set to 'fixed'... but I don't want that.
Can anyone explain this, with a possible fix? I continually refer to the https://victoriabeckham.landrover.com/ site and can't figure out what they're doing differently to get theirs operating so efficiently.
You can check this out, i believe its where they do most of the animating:
https://victoriabeckham.landrover.com/js/ScrollAnimator.js?v=471
I would have to say they have some kind of framework that they are using to accomplish this.
EDIT: Sorry didn't see the new answer above mine, seems like a good starting point.
-Ken
If you inspect this website carefully, you will able to use it like landrover site.
You need to use: scrollTo plugin and parallax plugin
And document jQuery should be like this:
$(document).ready(function(){
$('#nav').localScroll(800);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#intro').parallax("50%", 0.1);
$('#second').parallax("50%", 0.1);
$('.bg').parallax("50%", 0.4);
$('#third').parallax("50%", 0.3);
});
Ok. So I figured out my issue was when trying to animate() the 'section-container' on the 'top' property. I was using a "+=" to allow it to increment from its current position. Not a good idea when using 'mousewheel' events. I changed it to a hard-set variable that is continually incremented/decremented.
I want to move a div down a page, and I want it to slow down as it reaches the target.
I tried using call back with recursive func but it doesn’t look smooth:
function MovePanel() {
sidePanel.animate({
"marginTop": newCurrTop
}, moveSpeed, function () {
MovePanel();
});
}
Is it possible to slow down an JQuery animation?
If not what are the alternatives?
Thanks.
The animate method takes a 3rd param called "easing"; learn about it here:
http://api.jquery.com/animate/
You might want to check this out: http://www.learningjquery.com/2009/02/quick-tip-add-easing-to-your-animations
Easing can really bring life to an
effect. Easing controls how an
animation progresses over time by
manipulating its acceleration.