以下是 3D图片上下翻牌切换效果代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D图片上下翻牌切换效果</title>
<link href='css/flipping_gallery.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.flipping_gallery.js"></script>
<style>
html {
height: 100%;
}
body {
background: url(img/background.png);
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
a {
text-decoration: none;
}
h1, h2 {
width: 100%;
float: left;
}
h1 {
margin-top: 100px;
color: #00B0FF;
margin-bottom: 5px;
font-size: 70px;
letter-spacing: -4px;
}
h2 {
letter-spacing: 0px;
color: rgba(255,255,255,0.65);
font-weight: 100;
margin-top: 10px;
margin-bottom: 10px;
}
.pointer {
color: #00B0FF;
font-family: 'Pacifico';
font-size: 24px;
margin-top: 15px;
position: absolute;
top: 130px;
right: -40px;
}
.pointer2 {
color: #00B0FF;
font-family: 'Pacifico';
font-size: 24px;
margin-top: 15px;
position: absolute;
top: 130px;
left: -40px;
}
pre {
margin: 80px auto;
}
pre code {
padding: 35px;
border-radius: 5px;
font-size: 15px;
background: rgba(0,0,0,0.1);
border: rgba(0,0,0,0.05) 5px solid;
max-width: 500px;
}
.main {
float: left;
width: 100%;
margin: 0 auto;
}
.main h1 {
padding:20px 50px 10px;
float: left;
width: 100%;
font-size: 60px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight: 100;
margin: 0;
padding-top: 25px;
font-family: 'Noto Serif';
font-style: italic;
letter-spacing: 2px;
text-transform: capitalize;
}
.main h1.demo1 {
background: #1ABC9C;
}
.reload.bell {
font-size: 12px;
padding: 20px;
width: 45px;
text-align: center;
height: 47px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
.reload.bell #notification {
font-size: 25px;
line-height: 140%;
}
.reload, .btn{
display: inline-block;
border: 4px solid #A2261E;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #CC3126;
display: inline-block;
line-height: 100%;
padding: 0.7em;
text-decoration: none;
color: #0D2633;
width: 100px;
line-height: 140%;
font-size: 17px;
font-family: open sans;
font-weight: bold;
}
.reload:hover{
background: #A2261E;
}
.btn {
width: 200px;
color: #0D2633;
border: none;
margin-left: 10px;
background: #00B0FF;
}
.clear {
width: auto;
}
.btn:hover, .btn:hover {
background: #00CDFF;
}
.btns {
width: 410px;
margin: 50px auto;
}
.credit {
font-family: "noto serif";
font-style: italic;
text-align: center;
color: #3D5455;
color: rgba(255,255,255,0.35);
padding: 10px;
margin: 0 0 40px 0;
float: left;
width: 100%;
letter-spacing: 1px;
}
.credit a {
text-decoration: none;
font-weight: bold;
color: rgba(255,255,255,0.55);
}
.back {
position: absolute;
top: 0;
left: 0;
text-align: center;
display: block;
padding: 7px;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background: rgba(0,0,0,0.25);
font-weight: bold;
font-size: 13px;
color: rgba(255,255,255,0.5);
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.back:hover {
background: rgba(0,0,0,0.5);
}
.page-container {
max-width: 700px;
margin: auto;
position: relative;
}
.page-container p{
font-size: 21px;
font-weight: 100;
line-height: 180%;
}
.page-container h3 {
font-family: "noto serif";
font-size: 23px;
}
.gallery {
width: 500px;
height: 333px;
margin: 150px auto 60px;
}
.navigation {
margin-bottom: 150px;
}
.fg-card, .fg-card > img {
border-radius: 3px;
}
.fg-caption {
color: white;
font-family:'microsoft yahei';
font-size: 24px;
}
</style>
<script>
$(document).ready( function() {
$(".gallery").flipping_gallery({
enableScroll: true,
autoplay: 2000
});
$(".next").click(function() {
$(".gallery").flipForward();
return false;
});
$(".prev").click(function() {
$(".gallery").flipBackward();
return false;
});
});
</script>
</head>
<body>
<div class="gallery">
<a href="#" data-caption="内容1 - "><img src="img/1.jpg"></a>
<a href="#" data-caption="内容2 - "><img src="img/2.jpg"></a>
<a href="#" data-caption="内容3 - "><img src="img/3.jpg"></a>
<a href="#" data-caption="内容4 - "><img src="img/4.jpg"></a>
<a href="#" data-caption="内容5 - "><img src="img/5.jpg"></a>
<a href="#" data-caption="内容6 - "><img src="img/1.jpg"></a>
<a href="#" data-caption="内容7 - "><img src="img/2.jpg"></a>
<a href="#" data-caption="内容8 - "></a>
<a href="#" data-caption="内容9 - "><img src="img/4.jpg"></a>
<a href="#" data-caption="内容10 - "><img src="img/5.jpg"></a>
</div>
<div class="navigation">
<a href="#" class="btn prev">上一张</a>
<a href="#" class="btn next">下一张</a>
</div>
</body>
</html>
JS代码(jquery.flipping_gallery.js):
/* ===========================================================* jquery-flipping_gallery.js v1.1* ========================================================== */
!function($){
var defaults ={
direction:"forward",flipDirection:"bottom",selector:"> a",spacing:10,showMaximum:15,enableScroll:true,autoplay:false}
;
$.fn.flipping_gallery = function(options){
var settings = $.extend({
}
,defaults,options),el = $(this),total = el.find(settings.selector).length,space = 0,scale = 0.5 / total,opacity = 1 / total,lastAnimation = 0,quietPeriod = 500;
if (total > settings.showMaximum) opacity = 1 / settings.showMaximum el.addClass("fg-body") $.fn.realignCards = function(){
var el = $(this);
$.each(el.find(settings.selector),function(i){
if (i == 0){
$(this).addClass("active " + settings.flipDirection) el.find(".fg-caption").remove() if($(this).data("caption")){
el.append("<div class='fg-caption' style='opacity:0;
'>" + $(this).attr("data-caption") + "</div>") el.find(".fg-caption").css({
"opacity":"1"}
);
}
}
space = space + settings.spacing new_scale = 1 - (scale * i) new_opacity = 1 - (opacity * i) if (i >= settings.showMaximum){
$(this).css("opacity",0)}
else{
$(this).css("opacity",1)}
$(this).addClass("animate fg-card").css({
"z-index":5 - i,"margin-top":"-" + space + "px","-webkit-transform":"scale(" + new_scale + ")","-moz-transform":"scale(" + new_scale + ")","-o-transform":"scale(" + new_scale + ")","transform":"scale(" + new_scale + ")","opacity":new_opacity}
);
$(this).click(function(){
return false;
}
);
}
);
el.find("> .fg-card.active").click(function(){
if (settings.direction == "forward"){
el.flipForward();
}
else{
el.flipBackward();
}
return false;
}
)}
function init_scroll(event,delta){
deltaOfInterest = delta;
var timeNow = new Date().getTime();
// Cancel scroll if currently animating or within quiet period if(timeNow - lastAnimation < quietPeriod + settings.animationTime){
event.preventDefault();
return;
}
if (deltaOfInterest < 0){
el.flipForward()}
else{
el.flipBackward()}
lastAnimation = timeNow;
}
$.fn.flipForward = function(){
if (!el.hasClass("animating")){
el.addClass("animating") el.find(".fg-caption").remove();
var card = el.find("> .fg-card").first();
card.addClass("fg-flipping").css("opacity","0");
card.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(e){
var save_card = card.removeClass("animate active fg-flipping [class^='fg-count-'] " + settings.flipDirection).clone();
card.remove();
el.append(save_card.hide());
el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(e){
space = 0;
el.realignCards()}
);
el.find("> .fg-card").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(e){
el.find("> .fg-card").fadeIn() el.removeClass("animating")}
);
}
);
}
}
$.fn.flipBackward = function(){
if (!el.hasClass("animating")){
el.addClass("animating") var prev_card = el.find("> .fg-card").last();
var new_prev_card = prev_card.clone() prev_card.remove() el.find(".active").removeClass("active " + settings.flipDirection) el.prepend(new_prev_card.attr("style","").css({
"opacity":"0","z-index":"99"}
).hide().addClass("active fg-flipping " + settings.flipDirection)) el.find("> .fg-card.active").addClass("animate").show().removeClass("fg-flipping").css("opacity","1") space = 0;
el.realignCards();
el.find("> .fg-card").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(e){
el.removeClass("animating")}
);
}
}
el.realignCards();
if (settings.enableScroll == true){
$(el).bind('mousewheel DOMMouseScroll',function(event){
event.preventDefault();
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
init_scroll(event,delta);
}
);
}
if(settings.autoplay != 0 && settings.autoplay != false){
setInterval(function(){
if($(el.selector + ":hover").length < 1) el.flipForward()}
,settings.autoplay);
}
}
}
(window.jQuery);
CSS代码(flipping_gallery.css):
.fg-body{position:relative;}
body{-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;}
.fg-card{position:absolute;-webkit-transform-origin:50% 0%;-moz-transform-origin:50% 0%;-o-transform-origin:50% 0%;transform-origin:50% 0%;display:block;border:4px solid white;opacity:1;}
.fg-card.animate{-webkit-transition:all 200ms ease-in-out;-moz-transition:all 200ms ease-in-out;-o-transition:all 200ms ease-in-out;transition:all 200ms ease-in-out;}
.fg-card.active{-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform-origin:50% 100%;}
.fg-card.active.top{-webkit-transform-origin:50% 0%;-moz-transform-origin:50% 0%;-o-transform-origin:50% 0%;transform-origin:50% 0%;}
.fg-card.active.left{-webkit-transform-origin:0% 50%;-moz-transform-origin:0% 50%;-o-transform-origin:0% 50%;transform-origin:0% 50%;}
.fg-card.active.right{-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-o-transform-origin:100% 50%;transform-origin:100% 50%;}
.fg-card img{display:block;}
.fg-card.fg-flipping{-o-transform:rotateX(180deg) !important;-webkit-transform:rotateX(180deg) !important;-moz-transform:rotateX(180deg) !important;transform:rotateX(180deg) !important;opacity:0;}
.fg-card.fg-flipping.top{-o-transform:rotateX(-180deg) !important;-webkit-transform:rotateX(-180deg) !important;-moz-transform:rotateX(-180deg) !important;transform:rotateX(-180deg) !important;opacity:0;}
.fg-card.fg-flipping.left{-o-transform:rotateY(-180deg) !important;-webkit-transform:rotateY(-180deg) !important;-moz-transform:rotateY(-180deg) !important;transform:rotateY(-180deg) !important;opacity:0;}
.fg-card.fg-flipping.right{-o-transform:rotateY(180deg) !important;-webkit-transform:rotateY(180deg) !important;-moz-transform:rotateY(180deg) !important;transform:rotateY(180deg) !important;opacity:0;}
.fg-caption{position:absolute;width:100%;text-align:center;margin:10px 0;top:100%;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s ease-in-out;}
分享到QQ
分享到微博
微信扫一扫
