Transparency to black

1

How do I make an overlay transparency to black (ramp) ?

2

Create a full screen background, group everything (remembering to set the group to center and expand, etc.),put a full screen black object behind that, then set opacity keyframes for the grouped object to fade it from 100% to 0%.

3

Thanks for you´re help, but I think I missed.
A Full screen Background (I used a picture)
Group everything (theres just the picture I can group)
Full screen black behind (jup)
“set opacity keyframes for the grouped object to fade it from 100% to 0%.” … hmm
Dont really know, what´s there to do.

Thanks for additional help.

4

Under the Document tab of the Inspector and make sure the background is not set to transparent. Now go to the Scene tab and set the Background color to black.

Select everything in your animation and use the Arrange menu To group them (or it all you have is one object, such as a full-screen photo) and select the content.

Drage the timeline cursor to the place where the fade-out starts. With the object selected, go to the Properties pane, find the Opacity property and click on the white diamond with a plus. This will set a keyframe. (In the Element tab of the inspector you can see the Opacity setting.)

Move the timeline cursor to point where the fadeout is complete, then create another Opacity keyframe as before. With the keyframe still selected, move the opacity slider in the Element tab to zero. This will make your presentation fade to black.

5

Hi Tracy,
thanks for you’re additional reply but I think there is a misunderstanding.
I am looking for a RAMP ( transparent to black) over one screen, so that everything you scroll (butten to top) is completely transparent at the buttom und fades into black at the top.
As I figured, ramps are just possible from one color (such a white) into black but I didn’t figure how to build a ramp from transparency to a color (such as black).
so you will get a translucent field with a RAMP.

6

Hi Wolfgang!

Well, we finally got You to confess what You really meant ;->
A visual example is always helpful - I was thinking along the same lines as @TYancy until your last post.

Hype Demo: GradientTransp.hype.zip (26.8 KB)

The Hype Demo shows (3) different methods to achieve what You are asking (assuming I am understanding your request): a CSS gradient, Hype Gradient & PNG transparency over a bright red rectangle. Each have their own advantages too numerous to go into in this post as it depends on exactly to what effect they are being used. Experiment with all approaches to best understand their appropriate application.

You can read about CSS gradients here. The transparency example is about half way down the page.

Below is a screen shot of the three different types of gradient overlays used in the Demo.

Additional note: the CSS is in the “Head” of the Hype document & only is displayed in preview mode.

7

Hi Jim,

thanks for you´re effort.
You´re right, I should have made a better description on the first hand.
Sorry about.
But gradient transparency is exactly what I was looking for -I just did´nt know the exact term for it.-

Thanks for the demo, this is a perfect help.

Thanks
W.

8

Jim one more question …

Do you have something that makes a scrolling text also smooth transparent ?
Thanks,
W.

9

Note regarding PNG (or other bitmapped gradients): You do not have to create art at the full height and width. You can save file size by creating your gradient (in Photoshop or wherever), then cropping it to a width of a couple of pixels while retaining the height. When you use it to fill an object, it will automatically tile itself to fill the shape.

This can also be used to create bitmapped patterns

10

Hi Wolfgang!

Sorry it has taken so long to get back to this post but I just now finished a major project and have had the time to follow through.

Your question is one I’m not familiar with and so I’ve had to dive into the literature, which has taken a while - there is a lot there… what follows is a summary based on reading not experience.

First let’s cover the most obvious solution - if You have a solid color for a background you’re already in business - simply sandwich the text between the background and an overlying transparency mask. Probably this mask needs to be triggered at a certain point in the page scroll and not a full time feature (i.e. every element fades out as it approaches the top~bottom).

So You will need to set a trigger based on the “Scroll”: http://www.w3schools.com/jsref/event_onscroll.asp

As the page approaches a certain point - the text You wish to fade is close to the top, bottom - or wherever - You activate the transparency mask. As Trey mentions in his post above You can style~size this mask to fit your needs, it does not need to be the width of the page.

BUT if your background is not a uniform color - a gradient, repeating pattern, image, etc. we need to take a different approach…

The solution to this different approach is so simple - but there is a “fly in the ointment”. Apparently Mozilla (Firefox) did not get the memo about using CSS transparency masks - a solution that has been around for years.

The base transparency mask code (used in the following screen shot):

#textFade {
-webkit-mask-image: -webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}



To animate and size the mask will take additional code - bit it is very straightforward

Example (not related to the above image):

.demo-1 .page-view .project:nth-child(even).hide {
	-webkit-mask: url(../img/nature-sprite.png);
	mask: url(../img/nature-sprite.png);
	-webkit-mask-size: 2300% 100%;
	mask-size: 2300% 100%;
	-webkit-animation: mask-play 1.4s steps(22) forwards;
	animation: mask-play 1.4s steps(22) forwards;
}

The above code gives You an idea of what’s possible using Safari, Chrome, & Opera - nice, clean and simple.

Mozilla is apparently mired in a continuing sclerosis. You need to use its masking feature with an SVG image. Another layer of obfuscation to what should be a straightforward operation.

Here is an example of the using CSS transparency masking & Mozilla fallback (SVG mask). You will need to dig here - but that’s how You learn - right?!

https://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/

Bibliography (there’s way more, simply Google “CSS transparency masks”):


http://codepen.io/adobe/pen/leiuv?js-preprocessor=none


1 Like
11

Hi Jim, (and Trey)
I really appreciated the effort to reply to my question.
You have helped me a lot, to go any further into this topic and I will carefully study the mentioned samples.
Unfortunately I’m not so experienced in scripting, but I will learn.

Thanks, an merry XMAS
Wolfgang