salsita / jq-clipthru

89 stars 12 forks source link

Cannot make this work with SVG images #3

Closed thdoan closed 7 years ago

thdoan commented 7 years ago

I spent the last 15 minutes trying to make this work, but have failed miserably:

https://codepen.io/thdoan/pen/GEoZzg

Could you please advise on how to make the menu text change to white when the banners scroll over it?

ghost commented 7 years ago

Hello @thdoan, I'm looking at your example and it seems to work correctly, except a few things. The styles for the menu are targeted through an id as #menu and because ids are unique on a page, clipthru strips that id from the clones and the fixed position isn't applied (there is a removeAttrOnClone option to not strip them but I don't suggest you depend on duplicate IDs anyway). If you use a .menu class instead, it will work. Secondly, the alternate menus for banner1 banner2 and banner3 hitboxes are unstyled. The clones are correctly being created, but they are not styled in any different way from the original menu, so it's black text on black rectangles. You can target a special style for the bannerX collision by styling it as .jq-clipthru-clone.bannerX.

I've forked your pen and fixed the issues mentioned above as a sample solution: https://codepen.io/salsita/pen/YQqmvV

edit: I noticed that the README mentions basic usage by targeting an id, which is confusing. Will change.

thdoan commented 7 years ago

@mystrdat Great, thanks so much for your help!

While waiting for your reply yesterday, I went ahead and created my own jQuery plugin that pretty much did what I needed, but I think I'm going to rewrite it because it doesn't support IE 11 and below:

https://codepen.io/thdoan/pen/pwgPOP

Instead of creating an SVG mask and updating the clip-path CSS property, my plan is to write out the clip styles ahead of time and simply updating the class on scroll.

thdoan commented 7 years ago

Sorry for reopening this. When I copied over your changes, it worked fine, but as soon as I converted the nav text into links, it broke again. Is there something extra we need to do with <a> tags?

https://codepen.io/thdoan/pen/GEoZzg

ghost commented 7 years ago

This isn't related to clipthru anymore, but anchor a elements do not inherit color from parents by default, you have to explicitly target them for color changes. Changing line #6 to color: inherit; would do the trick, or any alternate styling where you specifically target the anchor and change its color.

thdoan commented 7 years ago

Thanks, that fixed it!