I'm trying to have a div slide in at the same time as another one slides out, but when sliding in the div is completely invisible at the target location until the slide animation is complete. I'm not sure why this is happening. Does it have something to do with the iframe that is in the location at the time of the slide?
Here is an example of the issue. jsfiddle.net/eqck8vn2/1/ when you click the Twitter tab on the left, instead of smoothly sliding in, it scrolls in at a position right below the currently visible element (the iframe) before just appearing at the final position (even though there is a sliding animation applied to it without any specified positioning).
Thanks in advance for any help.
Related
I have an SVG animation done with anime.js on scroll event, the SVG is fixed at the bottom of the page, the idea is that when the animation finishes, I show new content that will be basically a continuation of the SVG.
The problem is that I don't know when to show the new content.
Things I am struggling with is that I can't animate the animation on scroll if I don't have content to scroll to, but then If I have content, I don't know how much a user has scrolled and when to show the new content.
Also, I have a problem where I have an animation duration of 1000ms, but the animation is laggier if I have more content on the page, so the more space I have for scrolling, the laggier the animation, and I think that this will affect the appearance of the new content also as the user can scroll way too far.
I am trying to achieve an effect similar to on this website here: https://www.wokine.com/en/ where you scroll down and the 'HELLO' text moves to the side. I have done that part, but I am stuck on how to pause the page from scrolling after that but still, keep the scrollbar moving. I need this to happen so I can use jquery to re-enable scrolling after the user scrolls down to a certain point.
The link explains it a bit better than I can with words.
Page scrolling is never paused or disabled is just a "trick"
Let the 'HELLO' element be fixed positioned until scrolling reach the point where you want the element to start moving up.
During the first stage ('HELLO' fixed) you can detect page scrolling and perform animation on the element.
Second stage, when you want 'HELLO' start scrolling, switch its positioning to absolute (or relative) and at the same time set its vertical position top at the same coordinate the page has been scrolled to (window.scrollY)
I have a fixed header which has a button (menu icon) on it. Whenever I scroll down the header will show (as it’s fixed). When I click on the menu button the menu is then also in a fixed position on the right hand side. When I scroll down both header and menu show which is fine. THE PROBLEM is when I initially scroll down half way down the page AND THEN click on the menu button the menu (div) is at the top-when I scroll a bit then it displays. There's a delay in this. Do you know how I can get the menu to display regardless of where I am on the page (in terms of y position)????
Top is set as 100px for the menu in a class (as the headers height is 100px-so i want the menu to show under it) BUT obviously if I’m already half way down the page the menu still takes into account the top: 100px however, I want it to change because I’ve scrolled down so the top position value would be different.
Any help??
Taking a shot in the dark, I think your problem is where your fixed position checks are taking place - I.E, I'm guessing they're within the .scroll event of the window.
Before you scroll down, and you click on the menu button, it is set to display block in its initial position - which is correct, because you haven't scrolled down yet.
However, if you scroll down first, then display the menu - it's still going to display in it's initial position - because the check is in your .scroll event - which you haven't fired while the menu has been open.
Try applying the position check in the button logic too.
Ok so I am making an Image Gallery. I laid thumbnails horizontally in a div under the big pictures. img this is a snapshot of it.
I want the thumbnails div to scroll with the big pictures as the user clicks on the next button. I have tried
$("#next").click(function({$(".slider_thumbnail").animate({scrollLeft: 300px})});
but this just works first time and doesn't work second time when user clicks on next button.
I think there is a problem with scrollLeft: 300px.
When you use this property, the element will be moved to the absolute scroll position of 300px at first time, and when you click next button again, it will not move because i already has the same scroll position. You should use scrollLeft: "+=300" for continuous working. Please take a look at http://api.jquery.com/animate/
I am using jQuery to slide through some images.
The slide animation is achieved using:
$('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition)});
This works fine, however when I reach the final image, and it loops back to the start, this animation will quickly slide through all of the previous elements to display the first (obviously because I am suddenly reducing the left margin).
What code would I need to write in order to allow the transition from last image back to first image to continue being a LEFT slide animation, displaying only the transition from last slide to first (without showing all other slides).
To make things a little more complex, I have left/right buttons allowing the user to move forward/backwards through the slider. These work fine, but it does mean that the solution cannot break these buttons.
Thank you.