5
CẬP NHẬT: Hiệu ứng hoạt động tốt. Điều cuối cùng vẫn còn là cố gắng trượt máng các divic mà tôi không thể có vẻ như có thể figure out.Làm thế nào tôi có thể đạt được hiệu ứng Flash này bằng jQuery?
UPDATE: tôi đã quản lý để làm điều đó với các transitions plugin. Vẫn còn một vấn đề: khi các trang trình bày văn bản trong hộp tôi có thể thấy cách nó nhập vào hộp từ bên ngoài. Click here để xem ý tôi là gì.
Tôi muốn đạt được this flash effect sử dụng jQuery (top -> flash, phía dưới -> jquery) vì vậy nó sẽ có thể xem được trên iPhone và các điện thoại thông minh.
Hiện tại, tôi không thể để văn bản trượt vào từ bên dưới các hộp đó.
HTML code: đang
<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: Mã
$(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;
}
Mọi góp ý ?
Mặc dù bạn sắp hoàn thành với jQuery Slider tùy chỉnh của mình. [Thanh trượt] này (http://www.kyrielles.net/sliderkit/sliderkit_en.html#Demonstrations) có tính năng phụ đề động thông qua plugin của riêng nó. Nhưng 1 cho các đoạn chú thích hoạt hình ưa thích mà nhiều jQuery Sliders thiếu những ngày này. – arttronics
Cảm ơn bạn đã liên kết! Tôi đang cố gắng để tích hợp hiệu ứng fadeIn, fadeOut giữa các slide. – Cris
Hãy xem jsFiddle tôi đã làm trong câu trả lời của tôi. Có thể thêm nhanh hơn vào bất kỳ thư viện nào (hoặc kích hoạt giao diện người dùng jQuery cho .animate) để thực hiện các thay đổi nhanh chóng khi đang di chuyển. – arttronics