Как я могу достичь этого эффекта Flash с помощью jQuery?

Question

ОБНОВЛЕНИЕ: Эффекты работают нормально. Последнее, что остается, это попытаться скользить по ловушкам, и я не могу представить figure out.

---

UPDATE: мне удалось сделать это с transitions plugin. Остается одна проблема: когда текстовые слайды в окне, я вижу, как он входит в поле снаружи. Click here, чтобы понять, что я имею в виду.

---

Я хотел бы достичь this flash effect с помощью JQuery (сверху -> вспышки, нижняя -> JQuery), так что бы отображался на айфонов и смартфонов.

На данный момент я не могу получить текст, чтобы скользить из-под этих ящиков.

HTML код:

<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 код:

$(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; 
} 

Любые предложения ?

Answer 1

Я создал jsFiddle вашей онлайн-разметки.

Решение должно иметь значение z-index для левого блока текста, то есть .left и .left-text так, чтобы оно покрывало входящую анимацию.

EDIT: Для вашего второго обновления, указанного в вашем вопросе, я вижу ваш онлайн-код HTML и онлайн-jQuery - это совершенно другой метод, чем то, что вы указали здесь. Я вижу, где вы возглавляете это, но многое в вашей разметке отсутствует, но вы на правильном пути.

Я бы предложил использовать одно из многих бесплатных плагинов для слайд-шоу, которое может быть объединено с вашим уникальным баннерным текстом с анимацией. Взгляните на s3Slider DEMO здесь. Эти баннерные текстовые поля могут быть заменены для вашего собственного slick version вместо. Домашняя страница s3Slider - HERE.

СТАТУС: Наконец, jsFiddle, который воссоздает Flash-эффект с использованием сильно модифицированного плагина s3Slider jQuery, который также проверяет использование jsLint. У меня много комментариев в этой демонстрации.

LINK:     jsFiddle DEMO (Обновлено 12/26/2012)

Для вдохновение, вот некоторые webkit examples из CSS3 объявлений против флэш-объявлений, которые выглядят одинаково. Угадайте, какой!

Answer 2

Похож на #banneroverflow: hidden;.