I'm looking for either a plug-in or pure JS/Jquery solution for a scrolling animation.
Basically when users scrolls to a certain section, and continues scrolling, the background of that section stays still while text and images fade in and out (on top of that static background) as user scrolls.
It's similar to this website: http://www.bagigia.com/ scroll down to "designer" "the idea", you'll get a good idea of what I'm trying to accomplish.
You can do it with just css
body {
background-attachment: fixed;
}
Related
I have posted a video screen grab of my issue here: http://whataprettyface.ca/datastellarissue.html
I have a single-page site with a dynamic vertical height that expands when certain sections are called upon. If the user calls a photo gallery from the portfolio section, the parallax effect is pushed down, revealing a large section of the background of its parent container. As the video illustrates, this is only an issue after vertically expanding the page by opening the portfolio images.
The background image cannot be repeated and I do not wish to use a white backup workaround. I also don't want to set a fixed height to the expandable section. I would, however, like to keep this parallax effect.
I did find a similar issue on here but it had never really been answered.
I am using Stellar.js v0.6.2 and have thrown up an unminified version on my site for ease of viewing: http://whataprettyface.ca/js/jquery.stellar.js
The CSS for the container looks like this:
.contactbackground {
position: relative;
background-image:url(../images/index/contact_background.jpg);
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
Any help is greatly appreciated!
I am using scrollreveal.min.js on my WordPress site.
Scroll reveal works just fine, but when I attempted to hide the vertical scroll bar that appears during animation (for the section) with
overflow-y:hidden;
the scroll bar was hidden for the element, but animation on scroll no longer worked for each item.
Also, one other question, in order for overflow-y:hidden; to work I have to comment out my overflow:auto; is this necessary or is there a way those can work together?
Overflow-y:hidden as per w3 schools "The content is clipped - and no scrolling mechanism is provided". This means that the content is cut off, as in, you can't scroll anymore. Kind of like an image when it's cropped, you can't scroll in a cropped image. You'll want something like this instead: Hide scroll bar, but still being able to scroll
I am trying to get the effect of moving background image on a section like in below website.
Just about the footer when you scroll up and down the image behind "FIND A CHIPOTLE" scrolls and moves. I am not able to achieve the desired effect.
Please help.
You can do it using CSS:
background-attachment: fixed;
The body of the page has a background image. Most of the divs above it have a white background, but the one where you can see the image scrolling has "background: transparent;" which allows you to see the image attached to the page body. It's not the image itself that is scrolling but the divs above it.
I'm trying to get my background to scroll with content and stick to the top of the page. My background is in a fixed position under my header.
Here's an example http://www.crunchyroll.com/
is there a way to do it in css? I'm fairly new to javascript but want to see if it can be done in css if not then I'll try it in javascript.
Add the following style:
background-attachment: scroll;
This will change the background attachment to the default fixed to scroll so that it scrolls with the page rather than being stuck in one position.
Here's a working example on JSFiddle.net.
I have a div whose height is 500px. When I scroll the page down, I would like the div to move as the page scrolls, but I would like it to stop scrolling with the page after the 250px of the div are out of the view. The rest of the page should keep scrolling but the div should act as fixed after it is 250px visible on the page.
Additionally, when I scroll up, I would like the div to remain at 250px invisible until the user has scrolled all the way to the top (with the final 250px remaining) in which case the div should suddenly become a part of the page again and scroll with it.
I am assuming that this can be done only with JavaScript, but how?
OK, using the keywords suggested by Mike Brant up in the comments, my Google search produced some good results. It appears that the functionality I was after is called sticky div, or sticky menu, sticky footer, or likewise.
By looking at the code of those javascripts I was able to understand the concept behind it. Now, it's time to play with it and adjust to my particular needs.