How to create scrollable overlay content? - javascript

I'm trying to recreate the page of Hello Monday and I'm currently just adding the static content before adding the parallax effect and auto-scroll. This is what I have so far:
Sandbox Link
One of the issues I'm running into is figuring out the best way to add the content in the overlay div and make it scrollable along with the background image. Should I place numerous divs at 100% height in the overlay? Not entirely sure what would be the best move here.

None of your "scrollable" divs should be scrollable you are going to need to get the wheel event on your body and from that you can basically paginate both parent sections, background and overlay.
All of the divs that will hold your content need to be 100% height or width of the parent depending on the direction of scroll.
document.addEventListener('mousewheel', (e) => {
console.log(e.deltaY);
// this will be the direction up or down
})
You will also need to keep track of the height of your parent containers, this is if the window is resized you can correctly figure out how many pixels it is until the next container.

Related

Improving scroll effect with one side scroll and the other change image based on scroll position

I created this scroll effect, where div is divided into left and right side - left side contains of images, that change based on scroll position and it's fixed and right side is scrolling content.
This is my idea:
https://codesandbox.io/s/scroll-effect-forked-ssi3x?file=/src/index.css
To describe the sandbox - you can see that my scroll effect works, but right div scrolls only when mouse is on that right div, what I need is that content of that right div will scroll down also when mouse is on left div
I tried to make the whole container's position fixed so it doesn't move, but it did not work. Is there a way how to achieve it?
Here is example of what I would like it to be like:
(starts with STEP 1)
https://honextmaterial.com/process/
To achieve your goal in React, you need a combination of some CSS and the JS scroll event. First, assign position: sticky to the element you need to be fixed when it's about to leave the viewport. Then, using a React ref, you access the scroll position of the scrollable div and use that logic to set your image source (you should avoid accessing the DOM directly with getElementById in React).
Here's a working codesandbox example
You could do this basically with only CSS. You could make the right (scrollable) side overlap the left side with position: absolute. Then the whole area is scrollable. After that you'd change the width of the inner element to 60% and you'd visually have the same output as before. I changed your codesandbox accordingly: https://codesandbox.io/s/scroll-effect-forked-55qsf
The only downside is, that the left side is not clickable, scrollable etc. anymore. If you want to keep HTML & CSS like before, you'd have to capture the scroll-event and run some JavaScript code.

Attach Horizontal Scrollbar to bottom of window if scrollable div is taller than window

I have a div that is taller than the window but is contained within a certain width. This causes the div to get a horizontal scrollbar at the very bottom. The problem with this is it makes it hard for users to scroll left and right within the div.
I would like to know if it is possible to attach a scrollbar to the bottom of the screen until the user scrolls down to the bottom of the div.
To give you an idea of what I would like to accomplish. Codrops created a nice table that once you scroll past the table header it attaches its self to the top of the screen. Here is the demo of that http://tympanus.net/Tutorials/StickyTableHeaders/. I want to do this but with a scrollbar attaching to the bottom of the screen. I am sorry I can't provide things I have tried, because I don't even know where to start when trying to accomplish this.
You can create empty container with the same width as your div and set it to fixed position. Then sync scrolling position of these 2 DIVs using jQuery. Example on jsFiddle.
jQuery(function($){
$('.content').on('scroll', function(){
$('.scroller').scrollLeft($(this).scrollLeft());
});
$('.scroller').on('scroll', function(){
$('.content').scrollLeft($(this).scrollLeft());
});
});
Hiding/showing external scrollbar depending on page scroll offset is left for you as homework :)

Load elements to fill screen based on screen size

I'm looking for a way to fill the viewport with elements based on the viewport size.
Is there a way to use methods like createElement() and load() to do this?
Specifically, I'm trying to fill the viewport with small circle divs. The way I have it set up now, is to just manually code them all into the html and set overflow to hidden, so that the divs beyond the screen size aren't visible.
If this isn't possible, is there a way to tell the JS I'm running to animate only those divs which are visible?
I have a codepen with the divs set up here as a reference for what I'm talking about. At full screen size, you can see that there are divs missing from the bottom of the page.

Absolute layout of an element that will overflow but is only constrained on 3 sides

I need to cerate a layout where a div that is the scroll container is absolutely positioned on three sides ( left,right and bottom ) but sizes dynamically with it's sibling container above. Both the scroll container and the sibling are in a fixed dimension container. I have made a jsfiddle which demonstrates my problem.
http://jsfiddle.net/HKu4j/4
If you follow the click instructions there you will see that when you click the top container after clicking the second container it resizes which ideally would push the top of div.myscroll down. This doesn't happen since div.myscroll has top set to 20px; Is there some way with the new CSS3 flexible box layouts to make this work ? I am looking for a solution that uses CSS rather than setting geometry dimensions explicitly with javascipt as I have done in the past.
I'm not sure that this is possible using css alone.
Try this jQuery dynamic width setting example: jQuery/CSS: Set dynamic width by content, avoid inheritance

How to hide javascript animation outside of certain borders?

I'm new to the wold of javascript/jquery, but had this fantastic idea for an effect for my webpage. Let me explain the layout abit.
My website is contained within a wrapper div, which assures that my content remains at 1000px and centered on the screen regardless of the width of monitor (assuming the monitor is bigger than 1000px). This content contains a header image that is presently used to display a colourful image (1000x400px) displaying the title of the website/company/etc. So this image is the width of the content container.
I thought it would be cool to instead of having the name of the company set on the image, have it scroll left to right, right to left on the image. This can be done with jquery and the animate() function (or a function close to it). The problem is that once the website title has scrolled to one extreme of the webpage, it will overflow out of the 1000x400px image and outside of the content container - thus into the wrapper region, which is simply a grey background.
My problem is that I can't conceptualize a way to hide the scrolling text (which would be represented by a very high z-index) behind the background wrapper (which is a simple background, so the lowest index possible). I only want the section of the scrolling text that is over the 1000px-wide content container to be visible. Anyone would know how to hide what is over the wrapper background? I thought of maybe recreating the wrapper background with some divs delimited by the presence of the content container; this div would have the highest z-index possible so it would hide anything that it superimposes. Is there a better/easier way to implement this?
Let me know if I'm not making sense :)
Pat
Maybe I'm missing something here, but;
If the scrolling text is a child of the wrapper div, then all that needs to be done is to apply the style overflow:hidden; to the wrapper div.

Categories