• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Faiding Website Logo

Ablac

Active member
#1
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.

Code:
<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
Code:
#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
 

Ablac

Active member
#3
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 :)

HTML:
<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>