Masking in html
- Started
- Last post
- 9 Responses
- pinkfloyd0
Say there's a 600x200 box in the middle of the page. Then there's 5 buttons underneath. Each button would do a horizontal slide effect per each section. The horizontal wide scroll would need to be masked.
- monNom0
SVG also supports clipping masks, and you can have images within an SVG container as well...and get this: if you embedd the SVG directly, you can use CSS to animate those images/clipping masks.
http://css-tricks.com/svg-animat…- SVGs aren't widely supported eitherdoesnotexist
- http://caniuse.com/#…monNom
- misleading, look at fonts and effects for svg.doesnotexist
- Weyland0
nah, forget about canvas, css3 has clipping and masking up the wazoo
- monNom0
^ overflow: hidden;
- pinkfloyd0
Css3 isn't as browser friendly though. I'd prefer another method.
- pinkfloyd0
The only other method I can think of is using z index in css for masking and animating in javascript.
- fues0
Depends on what you want to accomplish, can you give more details?
- hotroddy0
I would say using the <canvas> tag and dawing with javascript objects and fills, etc