Come posso ottenere questo effetto flash usando jQuery?

Question

UPDATE: Gli effetti funzionano correttamente. L'ultima cosa che rimane è cercare di scorrere attraverso i div che non riesco a essere in grado di figure out.

---

UPDATE: sono riuscito a farlo con la transitions plugin. Un problema rimane: quando il testo scorre nella casella, posso vedere come entra dalla scatola dall'esterno. Click here per vedere cosa intendo.

---

mi piacerebbe raggiungere this flash effect utilizzando jQuery (in alto -> flash, in basso -> jquery) quindi sarebbe visibile su iPhone e smartphone.

Al momento, non riesco a far scorrere il testo da sotto quelle caselle.

codice HTML: codice

<div id="banner"> 
    <div> 
     <img src="img/banner-1.jpg" class="banner-bg" /> 
     <div class="left"></div> 
     <div class="left-text"><span>POLISHED FLOORS1</span></div> 
     <div class="right"></div> 
     <div class="right-text"><span>Custom-made, elegant and long lasting.</span></div> 
    </div> 
    <div> 
     <img src="img/banner-2.jpg" class="banner-bg" /> 
     <div class="left"></div> 
     <div class="left-text"><span>POLISHED FLOORS2</span></div> 
     <div class="right"></div> 
     <div class="right-text"><span>Custom-made, elegant and long lasting.</span></div> 
    </div> 
    <div> 
     <img src="img/banner-3.jpg" class="banner-bg" /> 
     <div class="left"></div> 
     <div class="left-text"><span>POLISHED FLOORS3</span></div> 
     <div class="right"></div> 
     <div class="right-text"><span>Custom-made, elegant and long lasting.</span></div> 
    </div> 
</div> 

jQuery: codice

$(document).ready(function(){ 
    //$("#banner .left").transition({opacity: "1", width: "238px"}, 1200); 
    //$("#banner .right").transition({opacity: "0.7", width: "662px"}, 1200); 
    //$("#banner .left-text").delay(1200).transition({ opacity: '1', x: '-220px' }); 
    //$("#banner .right-text").delay(1200).transition({ opacity: '1', x: '+642px' }); 

    $(function(){ 
     $ds = $('#banner div .banner-bg'); 
     $ds.hide().eq(0).show(); 
     setInterval(function(){ 
       $ds.filter(':visible').fadeOut(function(){ 
         var $banner_bg = $(this).next('div .banner-bg'); 
         var $left = $(this).next('div .left'); 
         var $right = $(this).next('div .right'); 
         var $left_text = $(this).next('div .left-text'); 
         var $right_text = $(this).next('div .right-text'); 
         if ($banner_bg.length == 0) { 
          $ds.eq(0).fadeIn(); 
         } else { 
          $left.transition({opacity: "1", width: "238px"}, 1200); 
          $right.transition({opacity: "0.7", width: "662px"}, 1200); 
          $left_text.delay(1200).transition({ opacity: '1', x: '-220px' }); 
          $right_text.delay(1200).transition({ opacity: '1', x: '+642px' }); 
          $banner_bg.fadeIn(); 
         } 
       }); 
     }, 5000); 
    }); 
}); 

CSS:

#banner { 
    height:299px; 
    width:900px; 
    position:relative; 
    overflow:hidden; 
} 
#banner .banner-bg { 
    z-index:0; 
    position:absolute; 
    top:0; 
    left:0; 
} 
#banner .left { 
    float:left; 
    width:0px; 
    height:100px; 
    background:url(img/banner-left-bg.png); 
    opacity:0.3; 
    position:relative; 
    z-index:7; 
} 
#banner .right { 
    float:right; 
    width:0px; 
    height:100px; 
    background-color:#34515c; 
    opacity:0.3; 
    position:relative; 
    z-index:5; 
} 
#banner .left-text, #banner .right-text { 
    font-family:Verdana, Arial; 
    font-size:22px; 
    font-style:normal; 
    color:#fff; 
    top:35px; 
} 
#banner .left-text { 
    position:absolute; 
    left:233px; 
    opacity:0; 
    z-index:8; 
} 
#banner .right-text { 
    position:absolute; 
    right:662px; 
    width:630px;; 
    font-size:24px; 
    opacity:0; 
    z-index:6; 
} 

Qualche suggerimento ?

Answer 1

Ho creato uno jsFiddle del markup online.

La soluzione deve avere un valore z-index per il blocco di testo di sinistra, ovvero .left e .left-text in modo che copra l'animazione in entrata.

EDIT: Per la vostra 2 ° aggiornamento elencato nella tua domanda, vedo il codice HTML on-line e on-line jQuery è un metodo totalmente diverso da quello che avete elencato qui. Vedo dove sei diretto con questo, ma c'è molto che manca nel tuo markup ovunque, ma sei sulla strada giusta.

Vorrei suggerire di utilizzare uno dei tanti plug-in di presentazione gratuiti che possono essere combinati con il tuo testo banner unico che ha animazione. Dai un'occhiata a s3Slider DEMO qui. Le caselle di testo banner possono essere sostituite per la propria versione slick. La homepage di s3Slider è HERE.

STATO: Infine, un jsFiddle che ricrea l'effetto Flash utilizzando un plug-in jQuery s3Slider fortemente modificato che convalida anche l'utilizzo di jsLint. Ho molti commenti in quella Demo.

LINK:     jsFiddle DEMO (Aggiornato 12/26/2012)

Per ispirazione, ecco alcuni webkit examples dei CSS3 annuncio del vs Flash annuncio di che lo stesso aspetto. Indovina quale!

Answer 2

Suoni come #banner esigenze overflow: hidden;.