Hot Post

Tạo Slider với Hiệu ứng Lật hình đẹp mắt với Flipper jQuery Plugin

9/08/2015 A+ a-
Chia sẻ Facebook Blog This! Chia sẻ Email
Bình luận
0

Flipper JQuery Plugin: Page Flip Image Gallery Widget

Với plugin này bạn có thể tạo những slide hình ảnh với hiệu ứng lật hình khá đẹp mắt như một cuốn sách vậy. Cùng với hiệu ứng page-turnover bạn có thể dễ dàng di chuyển từ trang này sang trang khác. Bạn có thể tùy biến dễ dàng như lật văn bản đơn thuần hay lật hình ảnh tùy thích.


CSS

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS dưới đây trước thẻ ]]></b:skin> 
.flipper-wrap *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.flipper-wrap{position:relative;width:800px;height:400px;margin:20px 0 40px 0}
.flipper-wrap{-moz-user-select:none;-webkit-user-select:none;user-select:none;-ms-user-select:none}
.flipper-page{position:absolute;left:0;top:0;width:200%;height:100%;background:white;border:1px solid #e1e1e1}
.flipper-page-left{overflow:hidden;position:absolute;left:0;top:0;width:50%;height:100%}
.flipper-page-left
.flipper-page{left:0}
.flipper-page-right
.flipper-page{right:0;left:auto}
.flipper-page-right{overflow:hidden;position:absolute;right:0;top:0;width:50%;height:100%}
.flipper-page-wrap{position:absolute;left:0;top:0;width:100%;height:100%}
.flipper-overlay{display:none;width:100%;height:100%;position:absolute;left:0;top:0;z-index:9999}
.flipper-page-right
.flipper-overlay{background:-moz-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(0,0,0,0.085)),color-stop(100%,rgba(0,0,0,0.04)));background:-webkit-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:-o-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:-ms-linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);background:linear-gradient(left,rgba(0,0,0,0.085) 0,rgba(0,0,0,0.04) 100%);
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#40000000',endColorstr='#14000000',GradientType=1)}
.flipper-page-left .flipper-overlay{background:-moz-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(0,0,0,0.04)),color-stop(100%,rgba(0,0,0,0.085)));background:-webkit-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:-o-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:-ms-linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);background:linear-gradient(left,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.085) 100%);
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#14000000',endColorstr='#40000000',GradientType=1)}
.flipper-page-right{-webkit-backface-visibility:hidden;-webkit-transform-origin:0 50%;-moz-backface-visibility:hidden;-moz-transform-origin:0 50%;-ms-backface-visibility:hidden;-ms-transform-origin:0 50%;-o-backface-visibility:hidden;
-o-transform-origin:0 50%;backface-visibility:hidden;transform-origin:0 50%}
.flipper-page-left{-webkit-backface-visibility:hidden;-webkit-transform-origin:100% 50%;-moz-backface-visibility:hidden;-moz-transform-origin:100% 50%;-ms-backface-visibility:hidden;-ms-transform-origin:100% 50%;-o-backface-visibility:hidden;
-o-transform-origin:100% 50%;backface-visibility:hidden;transform-origin:100% 50%}
.flipper-page img{max-width:100%}
.flipper-column-full{display:block;width:100%;height:100%}
.flipper-column-full-half{float:left;display:block;width:50%;height:100%;margin:0;padding:0}
.flipper-column-outer{float:left;padding:30px;width:50%;height:100%}
.flipper-column-single-outer{padding:30px;width:100%;height:100%}
.flipper-column{overflow:hidden;height:100%;width:100%}
.flipper-inner-image{display:block;overflow:hidden}
.flipper-inner-image.start{margin-bottom:20px}
.flipper-inner-image.end{margin-top:20px}
.flipper-inner-image img{float:left}
.flipper-wrap{font:12px/18px helvetica,tahoma,sans-serif;color:#333;background-color:#fff}
.flipper-wrap h1{font-size:22px;line-height:36px}
.flipper-wrap p{margin:18px 0}
.flipper-next-page{position:absolute;width:38px;height:38px;right:-44px;top:50%;margin-top:-19px;cursor:pointer}
.flipper-prev-page{position:absolute;width:38px;height:38px;left:-44px;top:50%;margin-top:-19px;cursor:pointer}
.flipper-pager-wrap{position:absolute;left:0;bottom:-24px}
.flipper-pager{float:left;width:17px;height:18px;margin:5px 5px 0 0;cursor:pointer}
.flipper-temp{border:1px solid #e1e1e1;top:-1px}
.flipper-fb-bounce{position:absolute;z-index:9999;background:#e1e1e1;padding:10px;right:0;top:0;font:12px/18px helvetica,tahoma,sans-serif;color:#333;display:none}
.demo-box {
 padding: 10px 0 5px 0;
}
#my-flipper, #myflipper {
 margin: 0 auto;
}
.flipper-page-padding-wrap {
 padding: 40px;
}
#myflipper h1 {
 text-align: center;
 font-size: 36px;
 line-height: 340px;
 font-weight: 100;
 font-style: italic;
}
#myflipper h2 {
 text-align: left;
 font-size: 22px;
}
p.headline.first {
 margin-top: 155px;
}
#myflipper p.headline {
 display: block;
 font-size: 16px;
 line-height: 22px;
 font-weight: 100;
 font-style: italic;
 text-align: center;
}
p.left {
 position: absolute;
 left: 30px;
 top: 30px;
 width: 40%;
}
p.right {
 position: absolute;
 width: 40%;
 bottom: 30px;
 right: 30px;
}
#myflipper .description.no-margin {
 margin-top: 40px;
}
.flipper-page .fullsize {
/* margin: -31px 0 0 -31px;*/
}
.mag {
 -moz-column-count: 2;
 -moz-column-gap: 20px;
 -webkit-column-count: 2;
 -webkit-column-gap: 20px;
 column-count: 2;
 column-gap: 20px;
}
.mag img {
 float: left;
 margin: 0 10px 10px 0;
 width: 200px;
}
.video-wrapper {
 width: 700px;
 margin: 80px auto;
}
.video-wrapper h3 {
 font-size: 36px;
 line-height: 22px;
 font-weight: 100;
 cursor: pointer;
 text-align: center;
 font-family: helvetica;
 color: white;
 text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

jQuery

2Tiếp theo dán đoạn code sau vào trước thẻ </head> 
<script src="https://sites.google.com/site/iristipsblogger/file/modernizr-2.min.js"></script>
 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js?ver=3.3.2'></script>
 <script>
var _0x930b=["\x68\x74\x74\x70\x3A\x2F\x2F\x6D\x79\x62\x6C\x6F\x67\x67\x65\x72\x6C\x61\x62\x2E\x63\x6F\x6D\x2F\x49\x6D\x61\x67\x65\x73\x2F","\x66\x6C\x69\x70\x70\x65\x72","\x23\x6D\x79\x66\x6C\x69\x70\x70\x65\x72","\x72\x65\x61\x64\x79"];(function(_0xf321x1,_0xf321x2){_0xf321x1(document)[_0x930b[3]](function(){_0xf321x1(_0x930b[2])[_0x930b[1]]({"\x77\x69\x64\x74\x68":700,"\x68\x65\x69\x67\x68\x74":400,"\x61\x72\x72\x6F\x77\x73":true,pager:true,"\x69\x6D\x61\x67\x65\x73\x50\x61\x74\x68":_0x930b[0]})})}(jQuery));
</script>
 <script src="https://sites.google.com/site/iristipsblogger/file/flipper.min.js"> </script>

HTML

3Cuối cùng trở lại Bố cục >> Thêm tiện ích HTML/Javascript và dán đoạn code sau vào 
<div class="demo-box">
  <div id="myflipper">
    <div class="flipper-page"><div class="flipper-page-padding-wrap">
    <img src="http://3.bp.blogspot.com/-vFQYmDHKrhs/VeVovKNAS-I/AAAAAAAAC_E/jTvXCZgtzrM/s1600/iris1.png" class="fullsize" /></div></div>


    <div class="flipper-page no-padding">
    <img src="http://2.bp.blogspot.com/-4_PRKE5BdGw/VeVoxu-P2LI/AAAAAAAAC_Q/WDGmQ0E0cso/s1600/iris2.png" class="fullsize" /></div>
    <div class="flipper-page no-padding">
    <img src="http://4.bp.blogspot.com/-VS8mf5shINY/VeVoxqGryPI/AAAAAAAAC_M/uVmrN1oNIFk/s1600/iris3.png" class="fullsize" /> </div>

   <div class="flipper-page"><div class="flipper-page-padding-wrap">
    <h2>How about some text?</h2>
    <p class="mag">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.<br /><br />
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    <p class="headline" style="margin-top: 40px;">It feels just like a magazine.</p>
</div></div>
    <div class="flipper-page">
    <p class="headline first">Flicking through photos feels just like in an album. <br />Thank you for checking out Flipper.</p>
   </div>
    <div class="flipper-page">
    <img src="http://4.bp.blogspot.com/-AxNmUQ77ekg/T_HbXUuEasI/AAAAAAAAC4s/X1yBBUeLVts/s1600/flipper.png" />
   </div>
   </div></div>


Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by MBL/Iris Tips
Iris Tips

Đăng ký nhận tin khuyến mãi, thủ thuật mới

Mẹo nhỏ khi bình luận
  • - Để viết chữ in đậm hãy sử dụng thẻ <b>chữ in đậm</b>
  • - Để viết chữ in nghiêng hãy sử dụng thẻ <i>chữ in nghiêng</i>
  • - Để viết code hãy sử dụng công cụ Conversion ở bên dưới để mã hóa và sau đó dán vào khung bình luận.
  • - Để chèn hình ảnh, video chỉ cần dán link trực tiếp của hình ảnh hoặc video vào khung bình luận (hỗ trợ: jpg, gif, png, bmp, Youtube).
  • - Bạn có thể upload hình ảnh, tập tin trực tiếp từ máy tính bằng cách sử dụng công cụ Up ảnh hoặc Up file ở bên dưới.
  • - Bạn có thể check vào ô Notify me ở khung nhận xét để nhận thông báo qua email khi ai đó trả lời bình luận của bạn.

0 Response to "Tạo Slider với Hiệu ứng Lật hình đẹp mắt với Flipper jQuery Plugin"

Đăng nhập bằng Google


Trở thành người đầu tiên bình luận cho bài viết này!

Đăng ký: Đăng Nhận xét (Atom)