The question
Is there a way to fade contents out on a gradient similar to clip-mask using JavaScript or jQuery?
The problem
I've got a fixed header with a transparent background, and a '.png' logo with transparent pieces. I have semi-transparent elements which scroll vertically up the page, and thus below the header and logo.
When things scroll under the logo they show through and everything looks pretty bad.
The proposed solution
We'd like to fade out content above a certain point (the bottom of the header). We're using ScrollMagic with GSAP to animate elements as they scroll which causes conflicts with clip-path and other CSS fixes, so I am looking for a JavaScript/jQuery fix most likely.
Sample code
At the request of a commenter, I've created a JSFiddle which includes a few pieces.
There are two elements that should be considered: #masthead and #content. There's an area (in blue) below #masthead in which I would like #content to fade as a gradient from opacity 1 to 0.
https://jsfiddle.net/dotzak/o9hcnufe/3/
Related
If possible, I am trying to create something like the below using just HTML, CSS, and Javascript. I know that the carousel below was built in React but I am not using that nor am I familiar with it. This carousel stretches across the whole screen but it looks like the picture(s) only takes up 65-75% of the width (highlighted in blue) and then the rest is a black box that never changes even when the pictures do. There are words that also overlap the black box and picture. The picture also has some gradient over it on the left side so that the black box nicely fades into the picture.
I am currently using a slideshow/carousel script from W3Schools (https://www.w3schools.com/howto/howto_js_slideshow.asp). I do not have bootstrap with this project either though I may be able to add it if needed. I tried dividing my container into columns so that one side could be 40% black and the other 60% could be the slideshow but that didn't work.
Sorry, I am still pretty new to all of this! Does anyone have suggestions on how to add a carousel kind of like this one without React (and preferably bootstrap)?
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'm wondering if it's possible to create a static lighting effect overlay using HTML/CSS.
What I have is a pure HTML5/JS app that consists on most pages of a top navigation bar and a series of cards in the body that are transitioned through using swipe gestures. These are all gray over a black background.
What I'd like to accomplish is have a sort of spot light gradient in the center of the screen that only effects the divs on the page and not the black background. This spotlight would be fixed so that when swiping through cards, it remains in the center of the screen.
I know I could overlay a div with a spotlight image as its background, but obviously that would mess up clicking/swiping on the page. And it would effect the black background.
Anyone have experience doing something like this?
A simple CSS solution (no events required)
Create a full-page-width bg image with the spotlight gradient.
Give each div this bg image, with a background-attachment value of fixed.
No matter where each div happens to be on the page at the time, it will act as a window through which you can see part of the spotlight gradient. In effect, the bg image stays fixed in place while the div moves over it.
Fiddle demo, and the same demo with heavily-rounded corners.
Alternately, it might be possible to give each div the same radial gradient in CSS (also fixed), rather than creating a static image file.
Try to use an absolute positioned div with a gradient. For passing through that div events use css property pointer-events (not supported by IE) or see that resource: http://www.vinylfox.com/forwarding-mouse-events-through-layers/
I have a set of images scrolling continuously with jCarousel. Only one image is fully displayed at a time, and I would love to be able to "feather" the edges of the carousel so the images fade in and out as they traverse visibility.
Hopefully that makes sense.
Also, the carousel's motion seems a bit buggy at times. On occasional page loads it seems like the animation and/or auto parameters in the initialization of the carousel aren't being implemented properly, causing the carousel to either move quicker than expected, or delay longer, etc. Thoughts?
Edit to add: Is there possibly a way, in lieu of a true clipping mask, to use one of jCarousel's callbacks to perform fadeOut() on an image as it moves out of the carousel's focus (and then fadeIn() as an image moves into focus)?
Here is an example of jcarousel with feathered edges
Technically it isn't really feathered, there's just semi transparent PNG over the top. I don't think there is a way to have a true feather
One way to do it would be to make a transparent PNG with gradients that fade from transparent to the color of the background of your carousel, and use CSS position:absolute with a higher z-index than the carousel container div to place it on top. Here's a page with some examples- pay attention to the transparency section in particular.
I'm designing a page that has a Content Area which scales against a diagonally striped background.
The Content Area div is a fixed width that will scale vertically with content. Because the border is a drop shadow, I have a repeating background image (40px wide by 80px high) that has to line up with the page background image. I need the div to scale in multiples of 80px high so that the repeating backgrounds concur with each other.
Is there an elegant solution that will allow me to scale the Content Area div so that it always displays at a multiple of 80px high? If not, is there another approach I can take to solving this problem rather than scaling the div to a multiple of 80px?
Thanks in advance!
Ryan
Unless you absolutely need the drop shadow to appear in older browsers, you can generate it with the CSS3 box-shadow property instead of using an image. This is much more flexible as the shadow is generated by the browser and will fall nicely on the background regardless of how things line up.
Jimmy's idea is solid, assuming the browser supports this css property. Another, weirder idea to consider might be to have jquery insert a div into the DOM that has fixed positioning and is offset to your content div and a z-index that would put it behind your content div. Then you could this new under-div an opacity (you can use fadeTo but maybe there's something better). Basically give the content div a real shadow by having an identically sized div underneath with 50% opacity.
why dont you leave the stripped background out of the content areas and use a transparent png for the images that will use a drop shadow. Since you're already trying to use javascript to fix a css problem, why not use DD_belatedPNG so that the alpha transparency will display correctly in IE6