Tạo Flyout Image Slider với jQuery & CSS3

Flyout Image Slider là một hiệu ứng chuyển ảnh dựa vào các hình được xếp chồng lên nhau, và khi chúng ta click một trong những tấm hình nào, thì tấm hình đó sẽ được đưa lên phía trước , đồng thời các hình còn lại sẽ được sắp xếp lại theo thứ tự. Để hiểu rõ hơn, các bạn có thể xem demo bên dưới.

Xem Demo | Download

Để thực hiện được hiệu ứng như trên , các bạn có thể làm theo từng bước như sau :

Bước 1 : HTML Markup

Đầu tiên, chúng ta cần có bộ khung html chuẩn như sau :

    <div id="container">
      <div id="itemlist">
        <img src="images/busby.jpg" alt="Busby" id="busby">
        <img src="images/gridly.jpg" alt="Gridly" id="gridly">
         
      </div>
      <div id="itemdescription">
        <span data-for="busby">Busby Theme</span>
        <span data-for="gridly">Gridly Theme</span>
         
      </div>
    </div>

Như các bạn thấy ở đoạn html bên trên, mỗi một tấm hình sẽ được ấn định một thuộc tính id và phần mô tả (description) có thuộc tính data-for . Mục đích của việc này là để liên kết phần mô tả với những tấm hình tương ứng.

Bước 2 : Định dạng CSS

Đầu tiên chúng ta sẽ định dạng phần cơ bản :

@import url(https://fonts.googleapis.com/css?family=Raleway|Pacifico);

body {
background: radial-gradient(ellipse at center center , #1CA5C7 0%, #16547B 100%) no-repeat fixed 0 0 rgba(0, 0, 0, 0);
    color: #FFFFFF;
    font-family: Raleway;
    margin-top: 7%;
    text-align: center;
}

a {
  color: #fff;
  font-family: Raleway;
  font-style: normal;
  text-decoration: none;
  font-size: 15px;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-family: Raleway;
  font-weight: normal;
  margin: 0;
}

#container {
  display: block;
  margin: 0 auto;
  text-align: center;
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  -o-perspective: 2000px;
  perspective: 2000px;
}

#information {
  margin-top: 1em;
  display: block;
  font-size: 15px;
}

Kế tiếp là cho các hình ảnh được sắp chồng lên nhau và khai báo các hiệu ứng.

#itemdescription {
  position: relative;
  awidth: 400px;
  margin: 0 auto;
  left: 6em;
  top: 2em;
  font-size: 50px;
  font-family: Pacifico;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.2);
}

#itemdescription span {
  display: none;
}

#itemlist {
  display: block;
  awidth: 400px;
  margin: 3em auto;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#itemlist img {
  position: absolute;
  cursor: pointer;
  left: 0;
  box-shadow: 0px 15px 50px rgba(0,0,0,0.4);
}

#itemlist img:hover {
  top: -5px;
}

#itemlist img.item-0 {
  z-index: 4;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

#itemlist img.item-1 {
  z-index: 3;
  left: -80px;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}

#itemlist img.item-2 {
  z-index: 2;
  left: -160px;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}

#itemlist img.item-3 {
  z-index: 1;
  left: -240px;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);
}

.transition {
  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -ms-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
  transition: 0.5s ease-out;
}

.show {
  -webkit-animation: show 1s linear;
  -moz-animation: show 1s linear;
  -ms-animation: show 1s linear;
  -o-animation: show 1s linear;
  animation: show 1s linear;
}

Các bạn để ý là chúng ta có khai báo thêm 2 class là .transition và .show, đây là những phần sẽ được sử dụng cho việc tạo hiệu ứng khi chúng ta thực hiện phần jQuery ở bước sau.

Bước tiếp theo, chúng ta sẽ làm phần hiệu ứng :

@-webkit-keyframes show{
  25% { left: -450px;}
  50% {
    z-index: 5;
    left: -500px;
    -webkit-transform: rotate3d(0,1,0,0deg);
  }

  70% {
    z-index: 5;
    left: -250px;
    -webkit-transform: rotate3d(0,1,0,180deg);
  }

  100% {
    z-index: 5;
    left: 0px;
    -webkit-transform: rotate3d(0,1,0,360deg);
  }
}

@-moz-keyframes show{
  25% {
    left: -450px;
  }

  50% {
    z-index: 5;
    left: -500px;
    -moz-transform: rotate3d(0,1,0,0deg);
  }

  70% {
    z-index: 5;
    left: -250px;
    -moz-transform: rotate3d(0,1,0,180deg);
  }

  100% {
    z-index: 5;
    left: 0px;
    -moz-transform: rotate3d(0,1,0,360deg);
  }
}

@-ms-keyframes show{
  25% {
    left: -450px;
  }

  50% {
    z-index: 5;
    left: -500px;
    -ms-transform: rotate3d(0,1,0,0deg);
  }

  70% {
    z-index: 5;
    left: -250px;
    -ms-transform: rotate3d(0,1,0,180deg);
  }

  100% {
    z-index: 5;
    left: 0px;
    -ms-transform: rotate3d(0,1,0,360deg);
  }
}

@-o-keyframes show{
  25% {
    left: -450px;
  }

  50% {
    z-index: 5;
    left: -500px;
    -o-transform: rotate3d(0,1,0,0deg);
  }

  70% {
    z-index: 5;
    left: -250px;
    -o-transform: rotate3d(0,1,0,180deg);
  }

  100% {
    z-index: 5;
    left: 0px;
    -o-transform: rotate3d(0,1,0,360deg);
  }
}

@keyframes show{
  25% {
    left: -450px;
  }

  50% {
    z-index: 5;
    left: -500px;
    transform: rotate3d(0,1,0,0deg);
  }

  70% {
    z-index: 5;
    left: -250px;
    transform: rotate3d(0,1,0,180deg);
  }

  100% {
    z-index: 5;
    left: 0px;
    transform: rotate3d(0,1,0,360deg);
  }
}

Thế là xong phần CSS, chúng ta sẽ tiếp tục ở bước sau.

Bước 3 : jQuery

Trước hết  chúng ta sẽ chèn khai báo jQuery ngay trên thẻ </body>

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="script.js"></script>

Sau đó các bạn tạo file script.js và copy từng đoạn script như sau:

Đầu tiên là đoạn script sắp xếp các hình ảnh tự động bằng việc chèn vào các tên class tương ứng , đồng thời làm ẩn đi các phần mô tả khác và chỉ hiển thị mô tả của tấm hình đầu tiên.

    var itemList, item, className, thisItem, newOrder, itemDesc, desc;

    itemList= $('#itemlist');
    item= itemList.children('img');

    itemDesc= $('#itemdescription');
    desc= itemDesc.children('span');

    //Add class name for each item
    item.each(function(index) {

      className= 'item-' + index;
      $(this).addClass(className).attr('data-order', index);
    });

   //Show first item description
    desc.filter(':first-child').fadeIn();

Kế tiếp, chúng ta sẽ tiến hành cho sự kiện Click

//On clicked fire animation
   	item.on('click', function() {

   		 thisItem= $(this);
    	thisOrder = parseInt(thisItem.attr('data-order')) - 1;

    	thisItem.addClass('show');

    	//Reorder item position
   		item.on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function() {

  		  	thisItem.removeClass().addClass('item-0').attr('data-order', '0');

    		//Show selected item description
    		desc.hide();
    		desc.filter('[data-for=' + thisItem.attr('id') + ']' ).fadeIn('fast');
    	});

   		//Move siblings items backward
      window.setTimeout(function () {

      for(var i = thisOrder; i >= 0; i--) {

        //Reorder item position
        movedItem = item.filter('[data-order=' + i + ']');
        newOrder= parseInt(movedItem.attr('data-order')) + 1;
        className = 'item-' + newOrder;

        //Move them with transition
        movedItem.removeClass().addClass('transition ' + className).attr('data-order', newOrder);

        //Remove their transition
        item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() {
          item.removeClass('transition');
        });
      }
    }, 500);

 });

Xong rồi đó các bạn, cùng lưu lại và kiểm tra kết quả xem sao nhé. Chúc các bạn thành công !

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster