Faiding Website Logo

[Ablac]

What were trying to do is have 2 Website logos crossfade into eachother, so 2 Logos.
Logo A
Logo B

Logo A fades slowly till it completely disappear and Logo B Starts to fade in till its fully visible and then it fades out till it completely disappear and Logo A Starts to fade in till its fully visible, and it repeats that process.

We suck at HTML/PHP/CSS Ect, but heres what we got and its got a terrible result.

<div id="logoBlock">
    <div class="pageWidth">
        <div class="pageContent">
    <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
            <xen:include template="ad_header" />
            <xen:hook name="header_logo">
            <a href="{$logoLink}" id="xf_logo">
<div id="portfolio_cycler">
<img class="active" src="http://localhost/template/images/aglogo.png" style="display: block; z-index: 2;" />
<img class="" src="http://localhost/template/images/aglogo.png" style="display: block; z-index: 1;" />     
</div>
            </a>
            </xen:hook>
            <span class="helper"></span>
<script src="http://localhost/template/images/logo2.js" type="text/javascript">
</script>
        </div>
    </div>
</div>

And the CSS for that

#portfolio_cycler{position:relative;}
#portfolio_cycler img{position:absolute;z-index:1}
#portfolio_cycler img.active{z-index:2}

Currently we have it displaying the same logo for both to test but the logos are showing up in the wrong spots.

Our Style is Animate by XenFocus, my website is http://angel-gaming.com

 

[Jake Bunce]

Reminded of this CSS trick to show two background images in the same area:

http://xenforo.com/community/thread...he-same-on-all-resolutions.22444/#post-281543

But to create a fade I recommend editing the image files themselves. I'm sure it's possible to create those graphical effects with javascript at least, but I don't have code for that. Editing the images would be easier IMO.

 

[Ablac]

Thank you for the help, but one of our friends is a web designer and when he came online he made us a code that works

<style>
    @-webkit-keyframes cf3FadeInOut {
    0% {
      opacity:1;
    }
    25% {
        opacity:1;
    }
    75% {
        opacity:0;
    }
    100% {
      opacity:0;
    }
    }
 
    @-moz-keyframes cf3FadeInOut {
    0% {
      opacity:1;
    }
    25% {
        opacity:1;
    }
    75% {
        opacity:0;
    }
    100% {
      opacity:0;
    }
    }
 
    @-o-keyframes cf3FadeInOut {
    0% {
      opacity:1;
    }
    25% {
        opacity:1;
    }
    75% {
        opacity:0;
    }
    100% {
      opacity:0;
    }
    }
 
    @keyframes cf3FadeOutIn {
    0% {
      opacity:0;
    }
    25% {
        opacity:0;
    }
    75% {
        opacity:1;
    }
    100% {
      opacity:1;
    }
    }
 
    @-webkit-keyframes cf3FadeOutIn {
    0% {
      opacity:0;
    }
    25% {
        opacity:0;
    }
    75% {
        opacity:1;
    }
    100% {
      opacity:1;
    }
    }
 
    @-moz-keyframes cf3FadeOutIn {
    0% {
      opacity:0;
    }
    25% {
        opacity:0;
    }
    75% {
        opacity:1;
    }
    100% {
      opacity:1;
    }
    }
 
    @-o-keyframes cf3FadeOutIn {
    0% {
      opacity:0;
    }
    25% {
        opacity:0;
    }
    75% {
        opacity:1;
    }
    100% {
      opacity:1;
    }
    }
 
    @keyframes cf3FadeOutIn {
    0% {
      opacity:0;
    }
    25% {
        opacity:0;
    }
    75% {
        opacity:1;
    }
    100% {
      opacity:1;
    }
    }
 
    #cf3 {
        position:relative;
        height:281px;
        width:450px;
        margin:0 auto;
    }
    #cf3 img {
        position:absolute;
        left:0;
    }
 
    #cf3 img.top {
        -webkit-animation-name: cf3FadeInOut;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 5s;
        -webkit-animation-direction: alternate;
 
        -moz-animation-name: cf3FadeInOut;
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-iteration-count: infinite;
        -moz-animation-duration: 5s;
        -moz-animation-direction: alternate;
 
        -o-animation-name: cf3FadeInOut;
        -o-animation-timing-function: ease-in-out;
        -o-animation-iteration-count: infinite;
        -o-animation-duration: 5s;
        -o-animation-direction: alternate;
 
        animation-name: cf3FadeInOut;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-duration: 5s;
        animation-direction: alternate;
    }
 
    #cf3 img.bottom {
        -webkit-animation-name: cf3FadeOutIn;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 5s;
        -webkit-animation-direction: alternate;
 
        -moz-animation-name: cf3FadeOutIn;
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-iteration-count: infinite;
        -moz-animation-duration: 5s;
        -moz-animation-direction: alternate;
 
        -o-animation-name: cf3FadeOutIn;
        -o-animation-timing-function: ease-in-out;
        -o-animation-iteration-count: infinite;
        -o-animation-duration: 5s;
        -o-animation-direction: alternate;
 
        animation-name: cf3FadeOutIn;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-duration: 5s;
        animation-direction: alternate;
    }
</style>
 
<div id="cf3">
        <img class="top" src="localhost/images/naglogo.png" />
    <img class="bottom" src="localhost/images/nxclogo.png" />
</div>
 
            </a>
           
            <span class="helper"></span>
<script src="localhost/images/logo2.js" type="text/javascript">
</script>
        </div>
    </div>
</div>