I'm trying to implement a parallax effect to a website. But I have a question: can this be done inside a specific part of the page? Or, to force some parts of the website to be static while others are parallax?
I have a header and footer and their position is defined in the CSS with "position:fixed;". So, I'd like to have the parallax effect between them. I think that this can cause some problems because of the images positions and so on.
I made a research and all the parallax website based that I found the effect is global to all page.
I'm trying to implement a parallax effect to a website. But I have a question: can this be done inside a specific part of the page? Or, to force some parts of the website to be static while others are parallax?
Yes you can do it.
There are some problems if your page has not fixed width - you need to bind on window resize recalculations of offset() and height of your parallax div
Also you must set <img/>'s width and height.
For more performance bind event calls only if $(document).scrollTop() is in related range.
Related
I'm currently working on a dashboard and I'm having a design issue regarding the scrollbar in the content of the page.
A preview that shows the different parts of the site can be found here.
Purely for design purposes, I would need to keep the current content in exactly the same position (for instance, I don't believe that resizing the components using percentages would work properly in this case) but have the scrollbar totally on the right and allow scrolling in parts that are outside of the main element. In this image the parts in green represent the areas where scrolling should be enabled.
Do I need to use JavaScript (I'm using React) and a component only for the scrollbar or can I do everything in vanilla css?
I'm trying to achieve the fullPage.js scrolling effect inside of a container element.
The best way to describe it is kind of embedding another page inside the viewport and apply fullPage.js to it only.
In the picture below you can see the viewport background color is actually grey-ish while the container object is white. So the actual viewport should be static, non-moving, while the container should be the real scrollable page.
I know this should be possible by vertically stacking up div's the same size as the container, setting overflow to hidden and then emulating a scroll effect using JS manually. However as fullPage.js is pretty reliable and featured I'd like to know if there's a little hack for this so I can save myself from all this work.
Kind regards :)
Image of what I'm trying to achieve
EDIT
Solved using the mousewheel event, an overflow-hidden inner container and GSAP. Turned out to be pretty simple actually :) Could need some tweaking with the y-Delta value to have more page switch scrolling threshold
Demo: https://jsfiddle.net/bva8g3u9/
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).
I just saw this sweet Header Animation (http://anchorage-theme.pixelunion.net/) and was wondering how to implement an effect like this on a site. I am quite fluent in html and css and have dabbled with javascript, but never really got in at the deep end. Maybe this is the place to start.
But how would I go about this header?
That's not an animation, that's a technique called Parallax Scrolling.
The idea is to mimic the "Parallax" optical illusion used in 3D tvs to add the effect of depth to the page while it scrolls (i.e. "background" elements move slower than "foreground" elements).
It uses the scroll position of the page to dynamically set position, opacity, rotation, or other attributes of various elements to achieve this effect.
Here's a simple tutorial on it: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
I'm looking for a solid cross-browser Jquery custom scroll bar plugin that plays nice with iframes. Does anyone have a nice plugin and a solution?
Depends greatly on the context:
Do you want to create an iframe with styled scrollbars that other people can place on their site?
Or are you trying to style someone else's content which is placed on your site via iframe?
If you have control over the content of the iframe, then it's an easy thing to do.
I've used http://livepipe.net/ with success.
Custom scrollbars typically work by placing content in a , then moving that element relative to a parent div by javascript.
EDIT 1:
This is the detail page. Just start editing the values. http://livepipe.net/control/scrollbar
You'll know you have it right when loading your page not in an iframe, the fancy scrollbars are 100% the height of your browser viewport no matter the height.
It might also be worth adding a function to recalculate the height of the objects & the positioning of the bottom control on window resize. Although, that's easier to do with jQuery than in PrototypeJS.
EDIT 2:
Here's a working example I cooked up:
http://pastebin.com/gvtnLANQ
Try this really cool plugin. It helps eliminate the need for a scroll bar: https://github.com/Ashwell/jquery-scrollThis