As I understand from the formal definition, parallax effect happens when some images move at a different speed than the others thus creating the illusion that the slower moving ones are relatively behind the faster ones. And there are these kind of webpages where the background moves at a faster pace than the content. But I see that pages with background images having background-position:fixed are also given as examples of the parallax effect. (e.g. http://www.w3schools.com/howto/howto_css_parallax.asp) Is this a misconception in terms of the definition of parallax?
Parallax is a word that comes from the sciences that means "a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines." Often when you're measuring volumes of liquid in beakers, you record the volumes as every individual viewing them sees them (because of their individual parralax) and take the average of them to record in a scientific experiment.
The effect of parallax is often used on the web to create the illusion of depth. One of my favourite examples of this is www.jessandruss.us. There are MANY ways to achieve the effect of parallax on the web, and using fixed positioning can be one way of doing that :)
I am a self-taught web designer with a staggering 3 sites or so under my belt. I just finished the first page of a website for a client who is a friend and therefore a lot more patient than a "real" client would be.
I love the way the sites looks, it is fairly consistent in the spectrum of popular browsers, and overall I was quite proud of it until I realize a major problem that to be honest is about two steps away from making me drop my dream of becoming a web designer.
When using Chrome, Safari, or older versions of Explorer the website's layout falls apart if someone has their zoom set to anything other than 100%.
It is frustrating me to the point of near depression. I used a div to surround the whole body, and the pages layout, which in this case is a MENU is done almost entirely with ULs (unordered lists) positioned absolutely.
The site is made up in such a way that all the parts connect (almost like a puzzle) and if some parts are out of line, it is dreadfully obvious.
I heard the zooming rounds up figures and could call for a couple of low alpha pixels here and there, but in my case some block elements are literally 25-50 pixels out of place.
http://www.stevemarcella.com
No need to get your dreams crushed just yet :> There is always hope.
First thing you should do is check all of the errors, which according to validator are 536 errors on the homepage.
I suggest you run the validator and correct errors one by one. It could solve your problems. First error I noticed is that you have a div element outside of body. You should keep everything inside the body tags.
This is outside of body.
<div class="wrapAroundBody" id="IdWrappingWholeBody">
Hope it helps.
I have just been trying out and sort of learning bits and bobs in html5. I basically have this little animation: http://jsfiddle.net/Hazza/dJgC9/4/ It is just some images falling out the sky repeatedly. Fun. I was just wondering if there was some way to make them look a bit more exciting. They are supposed to be meteors, or something. So I was looking to try and add the illusion of fire to them. I thought I could have a few different images with different CSS effects like blur and load them randomly as they fall. But it looked...yeah. Retarded. This was kinda the effect I was going for: http://gw2101.gtm.guildwars2.com/en/ . That is flash. And looks fancy as.
Is this at all possible do you think? Or is it something best left to photoshop and then alternate between a few different images? I suck at photoshopping. :D
Anyway I was just playing around for a bit of fun. I'm already secretly proud of my terribad little firestorm but hey, it's a start. Thanks for any input or insight.
Try this, my friend. http://mentadreams.com/2011/03/fire-effect-with-css3/
I'm using move effect in my project but It didn't worked as I expect. When moving the Label from right to left, It's not smoothly and I feel jerky when running. How can I resolved it, especially when I deploy in TV screen.
thanks,
The jerky feeling might be caused of a too low frames per second (frame rate) refresh on the TV screen you mentioned. You might try lowering the frameRate attribute of the application to match that of the TV (25 or 24 frames per second I assume?).
http://algorizms.blogspot.com/2007/08/flex-framerate-attribute.html
Another thing you might try is to make the move effect with a bigger duration.
If non of these thing help then you might have to write the effect on your own by changing your components x and y on every(some of) the frames of your application (ENTER_FRAME).
Hope this helps,
Blaze
I've written a helpdesk monitor application that is designed to sit on a big plasma screen in a support department, the application has 5 views that it revolves around, the content of most of those screens is different, but they have some common components, being one silverlight control and a css background image.
I'm worried that over a period of time these will get burnt into the screen, I've looked into techniques to fix this, and some people suggest moving the image by one pixel every few seconds or displaying a different view.
I just don't know if these techniques are sufficient.
Does ensuring that I use a different css background, and a bit of silverlight animation 1-50% of the time actually fix this problem? The same image will be in the same place the other 99-50% of the time.
Check the documentation for the plasma screen, I did hear that many of them countered burn in by running colour flashes at some points and it is not as big a problem with modern plasma screens.
From what I've heard, this is a common complaint because of the annoying channel logos in the corner of screens so they had to do something about it.
What I am saying is, I think your hardware will probably manage it anyway.
Ryan
It depends on the plasma screen you use. Some manufacturers take steps to reduce the risk of it happening. However, if it does happen, I've found that there is something called JScreenFix that can be used to remove the burn-in. The basic problem is caused by the image on the screen not changing. You can either make sure the image moves at least slightly over time or reduce the contrast to reduce the risk.
Also, if possible you should use an LCD screen instead which are technically not susceptible to burn in...though they sometimes suffer from image persistence which is not permanent.
Check out for more detailed information:
http://www.plasmatvbuyingguide.com/plasmatv/plasmatv-burnin.html
http://www.wikihow.com/Use-JScreenFix-to-Remove-Plasma-Screen-Burn-in
http://compreviews.about.com/od/monitors/a/LCDBurnIn.htm
The comments that new plasma displays do not burn as easily is only partly valid since your department will probably buy the cheapest plasma they find.
mezoid is right. Reduce brightness and contrast and turn it off at night but I have found that burn-in isn't that serious. We have few monitors at work for this purpose and although there is obvious burn-in around borders of windows we can still see very clearly the important data.
If you are not presenting this to customers it should be okay although the staff may make fun of this occasionally :)
Plus you could run the JScreenFix every couple of months mezoid proposed you are okay.
Just be careful with JScreenFix, do note that it works merely by burning in the rest of the screen simply changing your perception of burnin and will, over time, make your monitor a washout.
There's an idea I haven't tried, but might help, If you phase the obvious static problem area through the 3 primary colours, or the 3 secondary colours, or both, you could utilise the benefit from only burning each pixel for 1/3rd of the time effectively tripling the time it takes for burnin to occur.
I think the risk of screen burn is much smaller than it used to be.
And why even bother if the screen will only be used to display the same view all the time? If the same image is kept in place all the time, it doesn't really matter if it gets burnt into the screen or not :-)
If you still would like to take measures, I would also suggest some animation or moving the image around a bit when the view rotates.
[EDIT]
Forgot something... A lot depends on time between the views rotating. If you only switch the view (and image) every few hours, the risk is a lot greater than if you switch to a different view every ten minutes...
[/EDIT]
I've used this program with pretty good success. You can probably create something similar in your program.
http://www.e-motional.com/TScreenLock.htm
Plasma Screen Saver Option.(TSL-PRO Only) A black bar of variable width floats across the screen preventing Plasma Screen Burn-In. This option allows TSL to be used as a Plasma Screensaver.