My client would like me to animate in a header for a HTML5 banner letter by letter. The font for the header is not a web font, it is Museo Slab, so I have included it as a PNG over the background image. The background image is not a solid color, it is a picture of a person. I thought of having a piece of the background image cover the title and slowly animate it out to give the same effect, but it did not work as well as if you were implementing this idea with a solid color background image.
I am wondering if there is a way to animate in the PNG header image using TweenLite that will give the impression that this PNG appearing letter by letter. Any ideas? The only thing I can think of is saving out a separate PNG for each letter and animating those in one by one, but that will take forever to implement and will increase the overall size of the advertisement. Is there a better way?
Thanks for your help!
You can use sprite image for the letters and change the position of letters using tweenlite.
Related
I have a big svg file (with animation and stuff), and I want to use it as a background for my site.
At my site I have so when I shrink the page, svg adapts fully by orientating on window width, so my starts to go out of background and create white background for itself.
I can solve it with CSS
background: url(background.svg)
but svg then starts lagging pretty hard, so I wonder if I can make my background svg more adaptive on height, and do it in more html/svg way
Note: Im doing it with react, and I put svg in index.html from react-app, is goes far away from my svg size.
It sounds confusing, but I think Im not the only one who struggled with it.
Thank you in advance!
I am attempting to convert this Star Wars image file to Sprite so that I can use several of the individual drawings. However, it seems that I can only use Sprite if the background is not completely white, but rather a checkered white-grey pattern (not sure why this is?). Is there a way to convert the file into a Sprite image? I attempted ZeroSprites.com, but it still gave me the white background; I'd like to be able to render each of the drawings without the white background so that the characters' outlines blend in smoothly into my main background.
Thanks!
It's best if you have the images as vector and export it as .png
Removing white background is possible but it won't be as good as the original.
You can follow this video tutorial: https://www.youtube.com/watch?v=SV38L4c4JKY
Here's the same image as png:
http://cubeupload.com/im/cSEdTC.png
My web page has a background image, and a transparent gif overlaid with hotspots linking to social networks, etc.
Is there a way of transporting those coordinates so they work without the gif and just hover over the background image? When I remove the gif it obviously removes the hotspots and I cant work out how to change this (or if this is possible).
I'd like to do this when the page is loading. Right now I get a little icon before the gif appears and it looks unprofessional.
I'm using dreamweaver.
You can try some CSS tricks. Create transparent DIVs and position them above your background image where you need them.
Here is an example: http://www.position-relative.com/tutorials/tute1_css_bg_image.php
i have images and i want to remove 2 angles of each image.
The removed part should be transparent, and this is the part i couldn't fix.
Here are 2 images the shows what i want to do:
This is an empty image. The white color is the part i want to show. The Blue part is showing the document background gradient color.
This is what should i get at the end. The blue part again, is transparent from document gradient color.
Anyone has idea?
In webkit browsers you can use mask-box-image. Put your image in a div with the image-mask class and then use mask-box-image with a transparent png
.image-mask {
-webkit-mask-box-image: url(your_mask.png);
}
There is an excellent article on the always brillient CSS Tricks website - http://css-tricks.com/webkit-image-wipes/
It's webkit only though I'm afraid.
Some may not like my non-code answer, but you could do it in the image itself? Please don't hate me for suggesting this, but sometimes code doesn't solve all.
Save the image as a PNG.
Make sure the layer you are working on is not the "background" layer, if you are in Photoshop.
Erase/use the marquis tool to delete the part of the image you want to be transparent. You can blur the edges of the marquis tool to make it "fade."
Depending on your settings in Photoshop or other editing program, the "transparent" section should be a checkered grey and white.
Save the image as a PNG and use it instead of the coded mask.
Granted, this doesn't work if you are dynamically loading images or have some other reason you are relying on code to mask your image, but it should work. Early versions of IE have some issues with PNGs, but I've not encountered it with IE9, IE8 or IE7 in my current project.
Say I have a very simple html page, containing a single line of text. I'm looking for a tool that would take that line of text, and superimpose it on a transparent PNG background. That logic would be applied to ALL elements on the page: if no background is specified, and the background of parent elements doesn't leak through, then a background should render as transparent.
As in transparent-pixel-in-image tranparent.
Is there a tool for this?
There are various command line tools for this sort of thing, most of which depend on WebKit somehow, eg. webkit2png, the hard part is going to be making the background transparent. Every screenshot tool I've ever tried sets the background opaque, even if the CSS background colour is transparent. The best approach might be to set the background to some unusual colour by default and then use a tool like ImageMagick to set that particular colour transparent.