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/
Related
I built a map navigation based on a very big (8000px * 6090px) image of a 1920s very detailed map.
I use an img tag with the very big image, I center it on the focused zone so most of the image is outside of the viewport. I then animate the map with transform and transition css properties.
When the image moves and the hidden parts of the image, outside of the viewport, become visible, they first appear blank before rendering. This bug doesn't happen if I animate the image with margin left and top properties, but then the animation lags a lot.
Any idea of a way to handle this? I tried using "image-rendering" and "will-change" css properties, but it doesn't work. The problem happens with an img tag or a css background-image the same way.
The effect I want to achieve is an image in a div that has a coloured highlight on top (with some opacity to see through it) and when you hover over that image a certain radius around the mouse will have the highlight removed (think of shining a torch over a greyed out image to reveal a brighter around around the torchlight)
I don't know where to start with this because I wasn't sure about dynamically styling a portion of a div without setting proportional properties in css. I know i can achieve a 'blocky' version of this with on hover and styling sections of a div on hover but that means i would have to constrain the styling to seperate div elements and it would not be 'fluid' so I'm looking for some pointers to a js solution I can write (possibly on mouseover call a function that gets mouse position and gets radius around it but then I wasn't sure how to dynamically style that radial area?)
Are there any functions that allow this type of styling within a dynamic area?
The solution you're looking for might be achieved through CSS but using JavaScript mouse events can also help.
Like discussed in the comments section, you can use help of the mousemove event to somehow achieve what you desire.
For other users reference, here is the link to the codepen https://codepen.io/edupoch/pen/GIhJq
In the codepen above, instead of the zoomin cursor image, you can use some gif image with the effect you want and apply it using the above code.
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/
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