I have a more complicated problem. Let me describe what I want to achieve and where I want to get to.
Current situation:
I have an image component <Image src="/images/background/background1.png" alt="image" /> that serves as the first background. If the user scrolls to the bottom of the page, the background is replaced and a second <Image src="/images/background/background2.png" alt="image" /> is thrown in. If the user scrolls down to the second background, the
<Image2 ref={imageRef} onWheel={handlWheel} src="/images/background/background3T.png" alt="image" style={{opacity,display: opacity < 0.2 ? "block" : "block",transform:scale(${scale}),}} />
, where by gradually scrolling, I change the style of this image until it is fully visible and has the scale set to 1 . Then I should see the <CustomDiv /> div below this image. The problem is that it also shows up in the HTMLDOM, but you can't scroll into it... also when u scroll back, the bugs are appearing.
Technology: Typescript, React
GitHubRepo for whole code: Code
Target:
So I want to achieve that I will scroll through the first background to the bottom, then a second background will appear, where when I scroll down on the second background, an image is displayed that takes up the whole screen and its attributes start to change gradually based on scrolling (onwheel), at that moment when the attributes are set. It will display a new div under this image and allow the user to scroll further to it. (This whole process must also be reversed)
Can I ask for some advice on where exactly I'm going wrong? Alternatively, ask for some resources where a similar problem is solved. Maybe some library can be used for this, where afterwards this styling will not be such a problem.
Related
I have built a simple website which includes a parallax image gallery with accompanying text descriptions for each image. The gallery is underlaid with a simple repeating pattern wallpaper.
The images have no margin between them. Their borders are covered by the text box which has a higher z-index, and the discrepancy between the scroll speed of the images and texts creates the parallax effect.
I would like to allow the background wallpaper (bottom layer) to also be the background of the textbox but to achieve this, I would need to make the middle layer (the image) transparent where it is obscured by the text box.
I have no idea where to start with this - I suspect my best bet is to just ignore this problem remove the wallpaper altogether but perhaps there is a straightforward answer to this issue?
The included image has a semi-transparent text-box and borders to give an idea of the layout and the problem I'm facing. Would appreciate any ideas. thanks
Link to the image
I have an HTML image of a mannequin. An image map defines body parts. I have two divs on top of the image map, one to show the hover selection and one to show the current (active part). The problem I have is: when a part is marked as 'active', I reposition the background on the 'active' layer to show a highlighted background image (a sprite map which uses a different colour. When the 'active' state i displayed, I can't click through it's transparent parts to select a different part.
One possible solution would be to use pointer-events, but I wanted to keep it as compatible as possible.
When i.e. a div has opacity:0; to make it transparent, it's still on top of other div's.
This way the div underneath won't be clickable.
This can be fixed by changing the display-mode of a div to hidden.
This way the div will be 'removed' and div's laying underneath will be clickable.
If you want to be able to click through transparent parts of an image, try using them as .PNG files.
-not sure if this might be helpful to you-
It's difficult to visualise the issue without being able to look at code or a diagram, but I've tried something in JSFiddle that may help.
In the example I've created, the 'hover' element starts off being unclickable where the 'active' element covers it (but is clickable where it is uncovered). After clicking the 'hover' element, its z-index property is altered so that it appears on top of the other elements. You can see it works because it is subsequently clickable everywhere.
Relevant jquery:
$( "#hover" ).css( "z-index", "2" );
I'm hoping this solution is helpful but, again, it's hard to tell if I've got the right idea without seeing a visual example of the original problem.
The idea behind this solution is you can rearrange the z-index values of elements upon clicks registering as many times as you need in order to make sure the relevant parts of the page are always clickable by the user.
This is an example of the effect I'm trying to acheive only without using images.
I want to create these screens that take up the entire screen like in the example. But instead of using background images to keep the content position, I'd like to use any HTML content within these screens. I'd also like to eventually ad a parallax effect similar to this.
So let's break it down. I got these background images on these screen elements. The background is fixed so it stays in the same position when you scroll. When you scroll down, the element moves out of view and another comes into view. It gives this effect as though the scrolling is causing a cover to slide up and reveal another screen. I want to keep this effect only without using background images. So I'll need some way to have some content remain fixed and have a contain hide it when it overflows an element that isn't fixed. But, as far as I know, there's no way to do this with CSS alone, am I wrong?
Like I said above, it would be interesting to have the content not remain exactly fixed, but instead slightly move it as you scroll giving it a slightly parallax effect. In order to do that tho, I'll need to use JavaScript. But, that's a bit out of the scope of my question, but I'd like to keep this in mind when coming up with the solution.
Thanks for all help in advance!
I have a very tall image that I'm using as a background for the body tag. However, the page may be longer than this image, so after a while I see the background color since I use no-repeat (the background is not a pattern).
Is there a way to keep the background scrollable, and then when I reach the end of the image, keep it "stuck" to the bottom, although the page keeps scrolling?
you need to use an extra fixed layer with the bottom of the picture setted to transparent, and then listen to the scroll event to detect when you reach the bottom of the original background, set the fixed layer visible and voila, you have it! If you need help in any of these, please provide a snippet of your code so I can implement in it for you.
I've seen similar questions to do this but so far I can't find any that address the obvious. On my website the top portion is a different color than the body which I created using a div and setting a color to that div. Two simple questions.
How do I get that div to fill the entire portion of the header of the screen regardless if I zoom in or out?
And how do I keep my title and menu bar from falling out when I zoom-in the browser?
I have gotten close so many times but there is always a compromise. Either the div fills the entire header but when I zoom in the text falls out and causes the div to wrap around the page or the menu wraps and it's just gotten frustrating. I hope what I wrote made sense but if not here is a clear example of what I want to accomplish. http://carlodiego.businesscatalyst.com/index.html#home
Notice on this page that if you zoom in or out the top portion remains filled with the same color.
How do I get that div to fill the entire portion of the header of the
screen regardless if I zoom in or out?
simply make the add css with width:100% && margin:auto