Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Backgroung color fade

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #31600
    metah29
    Member

    Hi, I’m about to make a simple site with one only page (for now), I already know HTML, and some PHP and javascript but I don’t know anything about CSS. So I would like to know how to make a fading effect on my sites background (Bgcolor)
    Here is a simple explanation, the bgcolor starts yellow and then fades to green and then to yellow..etc the fading effect starts with no even (no buttons). I saw this effect somewhere, I don’t remember the site name at the moment.
    Thank you.
    MĂȘtah

    #60871
    Sirlon
    Member

    You meen a css3 gradient ?
    https://css-tricks.com/css3-gradients/

    There are some generators out there:
    http://gradients.glrzad.com/

    #60872
    rcobb3
    Member

    Another way it is done is with an image. Usually an image is 1px wide and then however tall you want the gradient to run down the page. The css would specify repeating the 1px wide image horizontally over the page so it will show in the browser as covering the whole area.

    body {
    background: #ffffff url(“images/image.jpg”) repeat-x;
    }

    Or you could make a 1px high image and repeat it vertically. Which would make a horizontal gradient.

    The gradient image itself is often made in image editors like photoshop or gimp or . There is a css only solution which Sirlon points out in his links but you’ll probably want to create a fallback image as well for older browsers so a gradient effect is still achieved. Also the edge of your gradient could be a solid color which you could match to a solid background if you want it to fade and still look nice (especially if the user has a high resolution monitor).

    http://reference.sitepoint.com/css/background-repeat

    #60653
    metah29
    Member

    Hi Sirlon and Rcobb3 and thank you, I don’t mean a CSS gradient.
    I wont use images for the background. I’ll try to explain my problem one more time, I need to make the background ‘color’ (BGcolor) fade from one color to another (exemple: starts as #ffffff then after some seconds fade to #000000, I believe it needs a js function but not all the web browsers will be able to view it. The background color change from one color to another..
    I’m sorry for my bad english, I hope you understand what I mean :)
    Thank you again.

    #96121
    atrexx
    Participant

    Okay so if I am understanding you correctly you want your page to shift from one color to another? Well if you want the color to continually change you can use a 1px wide gif image. Use a image editor and make the variation of colors you want during the shift and then use http://picasion.com/ to make it into a gif. Then just do like rcobb3 said.

    Just to clarify what I mean by “Use a image editor and make the variation of colors you want during the shift and then use http://picasion.com/ .”
    picasion.com compiles multiple images into a gif image. So make multiple images of the colors you want for the fade to and from the final color. Where ever you put this image the color will continually shift.

    gif animator
    Gif animator

    Here is a code generated by picasion, I used 5 jpg images to generate the affect. You can also just save any image you generate to you computer. There is a max number of images that you can use. Picasion has a 10 image limit. I don’t have Photoshop or anything so one of the image creators may have a similar function.

    #96129
    atrexx
    Participant

    Also you might want to check out CSS3 they have functions like what you want here is a link too a good site http://www.w3schools.com/css3/css3_animations.asp
    I had just read this myself.

    #96134

    You can do it with CSS keyframes, but I would reconsider. As a visitor, if the background kept switching colours, I would leave the site.

    #243679

    This is coming a bit late, but I wrote a Javascript plugin to change the page background color as you scroll. It depends on having “sections” with a custom data attribute, but is otherwise simple to use, just check out the attached example. Download here: https://github.com/afauch/color-fade

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.