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!
Related
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.
I have noticed several website which have background images that zoom out, in, and move based on scroll. I am familiar with parallax scrolling, but this seems a little different as the background images does not actually change.
Some examples of what I mean (there is some parallax within these as well) are flatvsrealism and DiscoverLab. Flatvsrealism has it especially at the end when it turns to real life.
Since I'm sure this is way too complicated to do on your own, I was wondering if there are any JavaScript libraries that could work. I am familiar with ScrollMagic, but it doesn't seem it's capabilities extend so far as this.
To do this, you will want to make your parallax scrolling modify your background image's size in addition to it's position. To do this, set the background property of your parallax scrolling element, in Javascript:
[your parallax object].style.background= "color image repeat attachment position size";
Note: the color is a hex code or rgba(, the image is the url, the repeat is whether you want the background to repeat, the attachment is going to be "scroll", the position is going to be the position of your background image, and the size will be "xpx ypx"
This code will go where your scrolling is. It will replace the code that sets your background image's position; this will use the composite property of "background". You will need to set the size as a function of how far your visitors have scrolled down the page.
The exact code will depend upon your library and how you are implementing parallax scrolling.
If you are looking for parallax libraries, I would recommend writing your own parallax function in jQuery. This way you will be able to modify your function to change the background size. There is a comprehensive list of jQuery parallax tutorials here.
I made a translucent svg. It was a 50% opacity round metal texture. When I put it above any other color it makes it look like real metal. It was made using Illustrator and had 2 of its effects: Pixelate>Mezzotint>GrainyDots and Blur>RadialBlur. Then I made a Clipping Mask. Here is its link https://dl.dropbox.com/u/99185097/metalTex.svg. When I normally open it, it views correctly, but when I use it as a background in CSS3 for my HTML5 page, it doesn't open. I am sure it's not my CSS coding's fault because when I use another very simple svg as my background, it opens. I think it could be the Illustrator effects, maybe they don't view when you use it as a background. Also these effects make it of 4.46mb. Please suggest a solution. Making it a png wouldn't work because sometimes it needs to cover extremely long pages.
Please expand your vector file properly, save and then export it as svg file again and go for background. It may work now.
I have a web template im working on, it was given to me as a psd but im a little confused. The width of the page is 1024 so when I export it and load it into html it has white space on the sides. Is there an easy way of dealing with so that the graphic spans the browser...?
Easy? That is somewhat subjective.
To span the width of the browser window, a design needs to either stretch (not a good idea as this introduces distortion and pixilation), tile (either in its entirety or just in part), or blend to a solid background (or another tiled image).
There isn't a quick fix.
I have a div (.header) contained within other divs. When my page loads, momentarily just that one .header div "flashes" white as the page is loading, especially in in Firefox, but a little bit in IE8 too. I can't find what kind of CSS or lack thereof is causing this - there's no images or background color associated with that div. There is a logo.png within the .header. Thoughts?
http://dev.bwmsnow.co.nz/
From what I can see (Firefox on XP) it doesn't so much flash as it looks like it is slow to load the header-container div, and the associated background images. If I load without cache the whole of the logo bar loads last (and is white before load), but not just the one div. YSlow counts some 50 HTTP requests which might explain some of it. It doesn't look like the page is large so much as made up of a lot of pieces that probably create some processing lag.
If I understand the question, my suggestion is an old trick of adding a background color similar to the background image to <div class="header"> so that as the page loads (but before the image loads) the user sees a color similar to the background image. That way the visual impact of the image loading is not as noticeable.
I Photoshop eye dropped your background image and suggest using #a1dff8 as the color. The CSS for should be:
.header{
background:#a1dff8 url('images/yourheader.png');
}
Also, when looking at your code, I see that you have several external JS files. You should consider a minifier. Just Google or StackOverflow for JS/CSS minification.