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

Faiding Website Logo

Discussion in 'Styling and Customization Questions' started by Ablac, Aug 15, 2012.

  1. Ablac

    Ablac Active Member

    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
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  3. Ablac

    Ablac Active Member

    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>
    
     
    Skeletor and Jake Bunce like this.

Share This Page