liamloveslearning Posted February 5, 2010 Share Posted February 5, 2010 Hey everyone, Has anybody an idea on how econsulting have done this with there logo, if you scroll down far enough you see it changes colour depending on the background, so it goes from transparent to solid, is this JavaScript or? Heres the culprit http://econsultancy.com/reports/search-engine-optimization-seo-best-practice-guide Quote Link to comment Share on other sites More sharing options...
haku Posted February 6, 2010 Share Posted February 6, 2010 It's actually two different images, and they are using: background-attachment:fixed on each of the images. The way this CSS selector works is like having an element with a fixed position, but it's only visible when the element that it's placed inside is visible in that location. So at the top of that document, the image is in the head, so its visible. Then as you scroll, the head becomes non-visible (by scrolling up) and so the image disappears, but the second image becomes visible, because the section which it is in becomes visible in that spot. Quote Link to comment Share on other sites More sharing options...
liamloveslearning Posted February 6, 2010 Author Share Posted February 6, 2010 brilliant haku, makes perfect sense! thanks Quote Link to comment Share on other sites More sharing options...
lAZLf Posted February 9, 2010 Share Posted February 9, 2010 What haku said works incredibly (I implemented it on my own site). Also if you noticed, the image is a link, I would assume they just made a link with a set height and width with its position set to absolute and placed it over the background image. Quote Link to comment Share on other sites More sharing options...
liamloveslearning Posted February 9, 2010 Author Share Posted February 9, 2010 love the effect lAZLf, it works well! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.