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/
Related
My goal is to create an absolutely positioned div as the background of the website and the parent of the ScrollMagic scene. By doing this, the title and other content can appear above the scrolling/animated background. However, I found that when using ScrollMagic on a div with absolute positioning, the scroll behavior only works when indicators are added using the addIndicators plugin.
Here is an example:
https://codesandbox.io/s/elegant-sound-x3gop?file=/index.html (without indicators, no scrolling)
https://codesandbox.io/s/ancient-https-iop96?file=/index.html (indicators added, has scrolling)
Is there any way to fix this problem and use the absolutely positioned div as the background without having to add indicators? Or if this is not possible, is there any other way to achieve the same effect where the title appears above the scrolling/animated background? I previously tried making the title absolutely positioned instead, but this did not work because I also wanted to have more content further down the page that would also appear above the background, but it was hard to format with absolute positioning on the content instead of the background.
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 have div container with width 100%. I need to make a content hide and show according to mouse over in container. But this will need to happen with 30% from left of main container and rest(70%) with no show/hide effect. Can we make this effect without adding any additional sub containers?
An Image representation
How to make this effect?
This Fiddle illustrates a very basic solution; it calls the effect every time the mouse moves inside the 30%, so you might need to add some further logic to prevent that happening.
I've used a container of 500px width, and a subcontainer div, but only for illustrative purposes; the JavaScript will manage a single container of any width. You'll need to add any positioning, margin or padding to the 'widthModifier' variable, but you could get those from the container in JavaScript too, if you wanted.
Daniel's answer doesn't solve the problem showing and hiding the content. Take a look at my solution that does exactly what you want. I used CSS features to achieve the result.
Use Chrome to view the example. For other browsers you just have to add their specific implementations of the css features.
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.
// Major edit, sorry in bed with back pain, screwed up post
One of the ad agencies I code for had me set up an alternate scrolling solution because you know how designers hate things that just work but aren't beautiful.
The scrolling solution is applied to divs with overflow:hidden and uses jQuery's scrollTo(). It's a set of buttons top and bottom that handle moving the content.
So, this is married in places to their CMS. What I have not been able to sort yet is how to hide the scrolling UI when overflow:auto would not have been triggered by the CMS content and the buttons are not needed.
The divs have set heights and widths. Can i detect hidden content? Or measure the div contents' height?
Any ideas?
So you want to get the height of a hidden element? I found this post maybe it is what you are looking for.
Its using jQuery, but the concept is the same. Hope this helps!
Metropolis
I hope i am mistaken, but you would need to emulate overflow by setting properties using some js, then you can get these values using getAttribute or your own method. Otherwise when you set overflow to auto, then the browser will be doing its own thing and the only value returned as a property of overflow would be a string like 'auto'.
Can you explain this better? You want to hide the scrollbar of a div set to overflow:auto when it doesnt have enough text to overflow? Browser does this for you.
You want to hide the scrollbar of a div set to overflow auto when it is scrolled down to some point, but you arent looking at it or hovering or something? That will be sort of complicated.
If you want to know if a div has overflow set to something, you just do:
object.style.overflow
and it will give you a string.
possible values:
visible
hidden
scroll
auto
inherit
you can set overflow the same way
http://www.w3schools.com/css/pr_pos_overflow.asp
from what i understand now is you have these divs with hidden scroll, but some graphic designer custom scroll bar and you use scrollTo to do the actual scrolling. BUT you problem lies when you dont have enough data to actuall need a scrollbar, but your graphic stuff shows up anyway, so you want to hide it.
so the real question here is how do you get the height of content? you want the property offsetHeight, but im pretty sure its still IE only.
What do you mean by CMS?
Yes you can access the div's content height, since you can access all of the div's children in JavaScript. (Sorry for not including example. I haven't work with pure JS in a while now so I don't want to point you in the wrong direction.)
Doing this, you'll kind of be able to "detect hidden content" and then be able to do what you actually want to do.
About your first question, I doubt you can control scroll bars once you've set overflow to auto.
Using jQuery height() on a div containing the content I am able to show/hide the user interface as needed based on whether height exceeds the CSS height of the div with overflow:hidden.