I have horizontal parallax div that displays a very wide image (3000px) and as you move the pointer left or right the image slides in the opposite direction. It works great except in Chrome.
When the page is loaded into Chrome for the first time the image follows the pointer instead of going in the opposite direction. If I reload (F5) it is still the same problem, HOWEVER, if I reload from the address bar with the URL it works perfectly. I have tried everything that I can think of.
Related
I was looking at a website Firstborn website and it's not the first time I've seen this effect, i wonder how it works.
When you scroll down the page, you can see the images "curve" on top and bottom. I know I'm supposed to present some code, but I don't have any clue on how to create this type of curve on scroll effect!
Does anyone have ideas about how to make this effect is javascript? (Not the glitch, only the curvy image)?
There are some topics discussing this but none of them could fit my needs.
I have created a page for horizontal scrolling. It works fine. When the user scrolls down, the content scrolls horizontal. Just two elements, one is turned to the side, the other one turns back the content. fine.
But now the problem is, if the user is clever and thinks "oh its horizontal content, so i have to scroll horizontally" (on notebook pad). It doesnt work, it does nothing. The user doesn't know that its a div turned sideways.
So, Is there a Javascript possibility to tell my div "If users (try to) scroll horizontal, just scroll vertical."
Thanks
Hi everyone,
I'm working on a side navigation menu for my churches website. You can see the demo here:
http://amightywind.com/sideNav/
However I have a problem. The navigation is supposed to work so when you scroll down the page past it's bottom the css changes to make it anchor and stop moving.
The problem is that the "anchoring" effect doesn't always work smoothly and will only be applied after you scrolled a few pixels past the bottom.
This causes the side bar to "jump" back into it's designed place.
I know this problem is probably caused by asynchronous panning (the browser delays repainting when scrolling to keep a smooth frame rate).
I was going to call this unsolvable, but then I saw firefox's quantum browser page.
If you scroll down halfway, you will see a large pink box on the left that says "Firefox Quantum features".
The text changes positioning when you scroll into it similarly to how my side bar works. However 2 things are different.
1 there is no jump. It is perfectly smooth in every browser I tested.
I figured this could easily be because they are moving a smaller portion of content than I am, but....
2 when I inspect element I notice there is no css class/style change on the object when scrolled into it.
How is this possible? Is there a way to make this effect work without Javascript? Or at least more smoothly than I've done just listening to the window scroll event?
Any help would be much appreciated thank you!
I am trying to make a single page design with a navigation bar fixed at top using bootstrap but whenever I scroll the page and get back to top I see that there is a copy of navigation bar in the middle of the page.I tried reversing the contents position(section1->section3->section2) instead of
(section1->section2->section3). But the problem still exist .
This problem is only in chrome I have tested on firefox and internet explorer and everything is fine but in edge browser the navbar becomes invisible. and after some time it comes back. dont know how.
I dont know which code is causing the problem (css ,js,jquery) so I am not pasting anything here I will paste the code as per all you direction.
I'm moving some divs around and it works fine in Firefox and IE. But in chrome it freezes the display of the div sometimes (even though the div is actually still moving).
Also the div is cursor:pointer and when I hover over where it should be (not where it is drawn) only then the cursor turns to pointer.
Also if I switch tabs in chrome and switch back, it draws the div at the correct spot.
Also if I change anything about the div (like background color) in the "Inspect Element" window, the div snaps into place.
How do I fix this?
The light blue box is where the div really is internally. Notice all the boxes in the left column are not drawn at the correct spot.
I just found out that this only happens when one of the divs happens to move into a google ad. Then since this is Google chrome and a Google ad, it freaks out and shuts of rendering my content, so that I don't mess with their ads.
I guess the solution is to not allow your divs to run into ads, even though your divs are in a container that's away from the ads and has overflow:hidden. So the div that is hitting the ad isn't even being displayed but still chrome doesn't like it.