Member Avatar for davy_yg

Hello,

Anybody knows how to create a changing background website like this:

background

I have the website and 3 different background. Now, I would like to make those background changes one after another.

  • 4 Contributors
  • 8 Replies
  • 271 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by davy_yg
Member Avatar for PsychicTide

Although there are several ways to accomplish this (personally write my own javascript for this), JQuery may be your friend. It looks like they have absolutely positioned 3 div tags over each other (which contain the images), then used JQuery to slowly transition the opacity of each div.

This plugin may help point you in the right direction... Check out the fade option. Examples of how they work are at the bottom of the page
http://jquery.malsup.com/cycle/

Edited by PsychicTide
Member Avatar for jhondoty

Great plugin. This wil add more attractivness in website design. Thanks for sharing this.

Member Avatar for davy_yg

I actually have tried to use the cycle plugin. I just can't get it to work by changing 3 different body background css. The only background that appears is images/indonusa3.jpg. It works if I replace the js css code with (img src) but it only works for small image not full screen (body background).

<html>

<link href= "css/style.css" rel="stylesheet" type="text/css" media="screen">

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/chili-1.7.pack.js"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" ></script>

<script type="text/javascript">
$('#slideshow').cycle({ 
    fx:     'fade', 
    speed:   900, 
    timeout: 10000, 
    pager:  '#nav', 
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#nav li:eq(' + idx + ') a'; 
    } 
});
</script>


<?php include('includes/navigation.php'); ?>

<body>

<div id="slidesnav"><center><img src="images/slidesnav1.jpg"><img src="images/slidesnav2.jpg"><img src="images/slidesnav1.jpg"></center></div>

<div id="demos">
    <div id="slideshow" class="pics">
        <script type="text/javascript">$("body").css("background-image", "url('images/indonusa1.jpg')");</script>   
        <script type="text/javascript">$("body").css("background-image", "url('images/indonusa2.jpg')");</script>   
        <script type="text/javascript">$("body").css("background-image", "url('images/indonusa3.jpg')");</script>        
    </div>
    <ul id="nav">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>   
    </ul>
</div>
Member Avatar for davy_yg

These images do work if I replace the:

<script type="text/javascript">$("body").css("background-image", "url('images/indonusa1.jpg')");</script>

with

<img src="images/indonusa1.jpg">

the only problem is the image does not scretch in the background like a background since it has a specific width & height already.

Edited by davy_yg
Member Avatar for davy_yg

Yeah, I just studied the example. Not, as easy to create similar css to make the background changing in the background. Besides that, css3 not compatible with all browser.

Well, I am thinking another way to do it. Here, I change the js code into image file. The problem is how to turn the image into a background image?

index.html

<link href= "css/style.css" rel="stylesheet" type="text/css" media="screen">

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/chili-1.7.pack.js"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" ></script>

<script type="text/javascript">
$('#slideshow').cycle({ 
    fx:     'fade', 
    speed:   900, 
    timeout: 10000, 
    pager:  '#nav', 
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#nav li:eq(' + idx + ') a'; 
    } 
});
</script>


<?php include('includes/navigation.php'); ?>

<body>

<div id="slidesnav"><center><img src="images/slidesnav1.jpg"><img src="images/slidesnav2.jpg"><img src="images/slidesnav1.jpg"></center></div>

<div id="demos">
    <div id="slideshow" class="pics">
        <img src="images/indonusa1.jpg" />
        <img src="images/indonusa2.jpg" />
        <img src="images/indonusa3.jpg" />     
    </div>
    <ul id="nav">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>   
    </ul>
</div>
Member Avatar for davy_yg

Have a look at these two links... may help

http://stackoverflow.com/questions/5507518/change-background-image-of-a-div-with-fade-effect-every-10-seconds-with-jquery

http://css3.bradshawenterprises.com/cfimg/

I actually trying to alternate 3 background images from the example (only successful alternating 2 images):

index.html

<html>

<link href= "style.css" rel="stylesheet" type="text/css" media="screen">

<div id="cf">
  <img class="bottom" src="pic3.jpg" />
  <img class="bottom" src="pic2.jpg" />
  <img class="top" src="pic1.jpg" />    
</div>

</html>

style.css

#cf {
  position:relative;
  height:100%;
  width:100%;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

@keyframes cf3FadeInOut{
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

If anyone know how to alternate 3 images please help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.