0

I have a list item, and during a javascript event, I want to change it to look like it's disappearing into the horizon (ie: not talking about animating it -more like a filter, maybe?).

is there an html/css/javascript way to add a gradual transparency -and do it dynamically? The element would already have a background, and I don't want to change the color or gradient already there (or if I do, I'll have to get the original and then adjust that?) -just make the element fade out from say, top to bottom?

everything I'm seeing so far seems to wants to either adjust the background image to a gradient color or change the opacity of the entire element.

...sorry if this ends up being really stupid and I'm just having a brain fart.

* Update * The following is very close to what I want, except that I can't figure out how to do it without already knowing what the background was (or else, I'm simply setting it to something else).

CSS3 opacity gradient?

Community
  • 1
  • 1
Tony Card
  • 2,084
  • 3
  • 20
  • 27
  • Have yo tried using opacity + height and CSS3 transitions? – tylerism Jun 29 '15 at 20:10
  • As it stands this question is unclear or could be marked as too broad. You have a "list item", good to know but we can't help you with solely that information. We need your HTML. Also what do you mean by "disappearing into the horizon": getting smaller and smaller, moving to a different position, fading out, or what? – jaunt Jun 29 '15 at 20:13
  • @DerekS - thanks! that looks promising. – Tony Card Jun 29 '15 at 20:42

1 Answers1

0

JavaScript has an "opacity" attribute for each element.

element.style.opacity

Here is an example JSfiddle: https://jsfiddle.net/7hurnjok/

Remember that you have to set the opacity of an element first, otherwise it won't work.

user2072826
  • 528
  • 1
  • 5
  • 12
  • this changes the opacity of the entire element. I want gradual opacity if that's a thing. – Tony Card Jun 29 '15 at 20:39
  • @Mostfoolish, that isn't possible with HTML, CSS, or JavaScript. I'm pretty sure there's a way you can do that with .png files. Maybe if you made a sequence on partially transparent .png files, you could animate them with javascript. – user2072826 Jun 29 '15 at 20:46
  • Actually, tbh, you can do a lot of editing and pixel manipulations in the canvas. It's pretty difficult, but if you really wanted to take the time and do it, you could. – user2072826 Jun 29 '15 at 20:54