jQuery를 사용하여이 플래시 효과를 어떻게 얻을 수 있습니까?

Question

업데이트 : 효과가 정상적으로 작동합니다. 남아있는 마지막 것은 내가 할 수없는 것처럼 divs를 밀어 넣으려는 것입니다. figure out.

---

UPDATE :은 내가 transitions plugin와 함께 할 관리했습니다. 한 가지 문제가 남아 있습니다. 텍스트가 상자에서 슬라이드되면 외부에서 상자로 들어가는 방식을 볼 수 있습니다. Click here 무슨 뜻인지 궁금합니다. (-> 플래시, 하단 - 톱> JQuery와)

---

내가 jQuery를 사용하여 this flash effect를 달성하고 싶습니다 그래서 아이폰 및 스마트 폰에서 볼 수있다.

지금은 텍스트를 그 상자 아래에서 밀어 넣을 수 없습니다.

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을 만들었습니다.

해답은 들어오는 애니메이션을 포함하도록 .left 및 .left-text과 같은 왼쪽 텍스트 블록에 대해 z-index 값을 가져야합니다.

편집 : 질문에 나열된 두 번째 업데이트의 경우 온라인 HTML과 온라인 jQuery가 여기에 나열된 것과 완전히 다른 방법입니다. 어디로 향하는 지 알지만 어디에서나 마크 업에서 누락 된 부분이 많이 있지만 올바른 길을 가고 있습니다.

애니메이션이있는 고유 한 배너 텍스트와 결합 할 수있는 많은 무료 슬라이드 쇼 플러그인 중 하나를 사용하는 것이 좋습니다. s3Slider DEMO 여기를보세요. 그 배너 텍스트 상자은 자신의 매끄러운 버전 대신 스왑 아웃 될 수 있습니다. s3Slider 홈페이지는 HERE입니다.

상태 : 마지막으로, jsLint를 사용하여 유효성을 검사 한 s3Slider jQuery 플러그인을 사용하여 플래시 효과를 다시 만드는 jsFiddle. 나는 데모에서 많은 논평을했다.

LINK :     jsFiddle DEMO이 (2012년 12월 26일 업데이트)

영감를 들어, 여기에 플래시 광고의 같은 모양이 대 CSS3 광고의 일부 webkit examples이다. 어느 것 같아요!

Answer 2

#banner과 같은 소리는 overflow: hidden;이 필요합니다.