Lập trình web

Hướng dẫn tạo slide "kéo khóa" sống động

Chia sẻ nhanh

Sau thời gian lu bù với nhiều dự án website, rồi in ấn lớn nhỏ khác nhau. Mình gặp phải một dự án thiết kế website về sản xuất cặp túi. Với khách hàng rất trẻ trung cả về tuổi tác lẫn phong cách, mình đã rất hứng thú khi nghĩ tới việc làm sao để thiết kế và phát triển một website quảng cáo sản phẩm thật độc đáo, sinh động và trẻ trung.


Với ý tưởng website tương tự như chiếc túi xách, bạn phải kéo để mở khóa, bóc tách khám phá từng ngăn cặp. Mình đã đưa ra giao diện như dưới đây.

Hướng dẫn tạo slide "kéo khóa" sống động

Menu chính được "bọc" bằng chất liệu da cao cấp. Hằn bên dưới là lớp chỉ khâu handmade độc đáo, khiến cho website trở nên thực sự thoáng mắt, sáng sủa và phản ánh được đầy đủ chất liệu cao cấp của dòng sản phẩm mà công ty HANOIBAGS đã và đang thực hiện.

Điểm chú ý ở đây chính là sự di chuyển sống động mượt mà của slide. Và cũng chính là điểm mà mình quyết đình sẽ chia sẻ cho anh em trong giới thiết kế và lập trình web.

Nhìn thoáng qua, có thể các bạn sẽ nghĩa các slide sẽ được sắp xếp theo chiều dọc của website và đưa hiệu ứng chuyển động khi có sự kiện kéo chuột hoặc kéo khóa. Nhưng hoàn toàn khác, mô hình slide được hiển thị như sau:



Đến đây các bạn chắc chắn sẽ thắc mắc, làm sao có thể cuộn được chuột khi website quá ngắn. Thì đây là câu trả lời cho các bạn.

Chúng ta sẽ viết một đoạn mã Jquery, đoạn mã này sẽ đếm số lượng slide mà bạn có. Sau đó sẽ tự động chèn thêm từng khối tương ứng với số lượng slides. Điều này sẽ làm cho website dài thêm, vừa đủ để bạn cuộn chuột tạo chuyển động tới từng slide khác nhau.

Trong sự kiện cuộn chuột (scroll), bạn sẽ cho DIV bao ngoài các slide dịch chuyển đúng bằng độ rộng của nó đồng thời add thêm class active để tạo chuyển động khi slide đó hiển thị.

Đoạn mã HTML của slide

<div class="hfslide"><div id="generic1" class="slide"><img id="txt1" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textleft-bag1.png"><img id="txt2" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textright-bag1.png"></div><div id="generic2" class="slide"><img id="txt3" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textleft-bag2.png"><img id="txt4" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textright-bag2.png"></div><div id="generic3" class="slide"><img id="txt4" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textleft-bag3.png"><img id="txt5" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textright-bag3.png"></div><div id="generic4" class="slide"><img id="txt6" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textleft-bag4.png"><img id="txt7" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textright-bag4.png"></div><div id="generic5" class="slide"><img id="txt8" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textleft-bag5.png"><img id="txt9" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textright-bag5.png"></div><div id="generic6" class="slide"><img id="txt10" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textleft-bag6.png"><img id="txt11" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textright-bag6.png"></div><div id="generic7" class="slide"><img id="txt12" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textleft-bag7.png"><img id="txt13" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textright-bag7.png"></div><div id="generic8" class="slide"><img id="txt14" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textleft-bag8.png"><img id="txt15" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textright-bag8.png"></div><div id="generic9" class="slide"><img id="txt16" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textleft-bag9.png"><img id="txt17" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textright-bag9.png"></div><div id="generic10" class="slide"><img id="txt18" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textleft-bag10.png"><img id="txt19" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textright-bag10.png"></div><div id="generic11" class="slide"><img id="txt20" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textleft-bag11.png"><img id="txt21" src="/bags/templates/hf_hanoibags/images/hf-hanoibags/slide/sl1/textright-bag11.png"></div></div>

Đoạn mã JQUERY tương tác

<script type="text/javascript">
jQuery(document).ready(function($){ 
	var $window = $(window); // khung màn hình hiển thị
	var $slidebox = $('.hfslide');
	var $document = $(document); // website hiển thị
	var blankHeight = 200;
	var index = -1;
	var $bags = $('#hfblankpage .blank-page');
	var $baged = $('.hfslide .slide');
	var $containerBox = $('.hfslide');
	var $blankOpen = $('<div class="bag-blank"></div>');
	var scrollStatus = 0;
	var $zip = $('#zip');
	var enableDrag = false;
	$('#hf_footer').css({'position':'fixed'});
	$blankOpen.height($window.height()+blankHeight).appendTo($('#bag-blank-space'));	
	$window.bind('scroll',function(){
		var opacity = (($window.scrollTop())/($window.height())); 		
		$bags.each(function(i){			
			if($window.scrollTop() > $(this).position().top){
				index = i;
			}			
		});
		if(index < $bags.length){
			var $toShow = $('.hfslide .slide:eq('+ index +')');
			var $toHide = $('.hfslide .slide.active');
		    if (!$toShow.hasClass('active')){
		        $toShow.addClass('active');
		        $toHide.removeClass('active');					        		       
			}
		}
		$containerBox.css({left: -1 * index * $window.width()});
		scrollStatus = (($window.scrollTop() + $window.height()) / $document.height()) * 100;	    
	    $('#zip .closing').css({'width': scrollStatus + '%'});	    
	});
	
	$window.bind('resize', function(){
		$baged.width($window.width());
		$baged.height($window.height());		
	});	
	
  $zip.find('img').draggable({
    axis: 'x',
    containment: [
      ($window.width() / 2) - (($('#zip .container').width() / 2) - 14),  //x1
      0,              //y1
      ($window.width() / 2) + (($('#zip .container').width() / 2) - 45),  //x2
      0                     //y2
    ],
 
    drag: function(event, ui){
      var newWidth = (ui.position.left + ($zip.find('img').width() / 2));
      var scrollPercentage = ((newWidth * 100) / $zip.find('.zip-close').width());
      $zip.find('.closing').width(newWidth);
      window.scrollTo(0, ($document.height() * (scrollPercentage - 5)) / 100);
    },
    
    start: function (event, ui){
      enableDrag = true;
    },
    
    stop: function (event, ui){  
      enableDrag = false;
      $zip.find('img').css({'left': 'auto'});
      if ($window.scrollTop() + $window.height() > $document.height() - ($window.height() / 2)){
        $('html, body').animate({scrollTop: $document.height()});
      }
    }
  });
	$baged.width($window.width());
	$baged.height($window.height());
});
</script>


Vậy là bạn đã sở hữu một slide đem lại hiệu ứng rất tốt. Hiệu quả rất lớn đối với các site trưng bầy sản phẩm.

DEMO - HTTP://SANXUATCAPTUI.COM

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?