堆积弹性物品

Question

我试图实现一种按钮控制的幻灯片显示，页面顶部有div全宽图片，另一个全宽div页面底部的图片和中央内容的最终div（包括控制＆＃34;幻灯片＆＃34的按钮;）。

因此，基本上，中央div上的按钮会触发顶部和底部div上的图像更改。有一个＆＃34;中立＆＃34;没有按钮激活时，每个div上的图片;当一个处于活动状态时，顶部和底部图片都会切换到其他图片。

我实际上设法使用Flexbox进行div定位，jQuery根据哪个按钮处于活动状态来显示/隐藏图片。

但我的问题是我无法真正动画（幻灯片，淡入淡出，......）我的照片;它们被放置在各自div的背景中;我尝试同时显示所有内容，希望将显示在另一个后面，但似乎只有第一个实际显示。

我的问题是：是否有可能使Flexbox项目堆积起来，所以我可以堆叠两个div，一个在另一个之上，允许我做一个＆＃34;发现＆＃34;效果（因此我需要在背面有第一个div，在前面滑动第二个div）？

这是我的代码（对不起，选择器部分是法语，我没有包含图片）：

＆＃13;

＆＃13;

@import 'https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,700,700i';
 body,
html {
  height: 100%;
  font-size: 16px;
}
#flex-container {
  display: flex;
  height: 100%;
  background: grey;
  flex-direction: column;
  overflow: hidden;
}
#bloc-central {
  height: 180px;
  width: 100%;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  padding: 5px 0;
  align-self: center;
  order: 2;
  z-index: 9999;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#bloc-central-in {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #fff;
}
/* ==================
   FONDS HAUT ET BAS
   ================== */

/* ----- POSITIONNEMENT DES 2 FONDS ----- */

#background-top,
#background-bottom {
  width: 100%;
  min-height: 50%;
  z-index: 1;
  position: relative;
}
#background-top > *,
#background-bottom > * {
  min-height: 100%;
  background-size: cover;
}
#background-top {
  align-self: flex-start;
  order: 1;
}
#background-bottom {
  align-self: flex-end;
  order: 2;
}
/* ----- FONDS NEUTRES ----- */

.background-neutre-top {
  background: #f00 no-repeat center 50% fixed;
}
.background-neutre-bottom {
  background: #f00 no-repeat center -50% fixed;
}
/* ----- FONDS MODE ----- */

.background-mode-top {
  background: #bbb no-repeat center 50% fixed;
}
.background-mode-bottom {
  background: #bbb no-repeat center -50% fixed;
}
/* ----- FONDS COIFFURE ----- */

.background-coiffure-top {
  background: #313131 no-repeat center 50% fixed;
}
.background-coiffure-bottom {
  background: #313131 no-repeat center -50% fixed;
}
/* ----- FONDS INSTITUT ----- */

.background-institut-top {
  background: #000 no-repeat center 50% fixed;
}
.background-institut-bottom {
  background: #000 no-repeat center -50% fixed;
}
#bloc-univers {
  align-self: center;
}
#select-univers {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1.125em;
  color: #c9c9c9;
}
.titre-ligne {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0 15px;
  margin: 0 0 10px 0;
}
.titre-ligne:before,
.titre-ligne:after {
  flex-grow: 1;
  height: 1px;
  content: '\a0';
  background-color: #ddd;
  position: relative;
  top: 0.5em;
}
.titre-ligne:before {
  margin-right: 10px;
}
.titre-ligne:after {
  margin-left: 10px;
}
.btn-univers:link,
.btn-univers:visited {
  display: inline-block;
  width: 100%;
  height: 50px;
  border: 1px solid #c9c9c9;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 1.750em;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  color: #c9c9c9;
  transition: all .2s ease-in-out;
}
#btn-mode:hover {
  color: #f08945;
  border: 1px solid #f08945;
}
#btn-coiffure:hover {
  color: #0fc798;
  border: 1px solid #0fc798;
}
#btn-institut:hover {
  color: #3f9cf2;
  border: 1px solid #3f9cf2;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="flex-container">
  <div id="background-top">
    <div class="background-neutre-top"></div>
    <div class="background-mode-top"></div>
    <div class="background-coiffure-top"></div>
    <div class="background-institut-top"></div>
  </div>

  <div id="background-bottom">
    <div class="background-neutre-bottom"></div>
    <div class="background-mode-bottom"></div>
    <div class="background-coiffure-bottom"></div>
    <div class="background-institut-bottom"></div>
  </div>




  <div id="bloc-central">
    <div id="bloc-central-in">
      <div class="container">

        <div id="logo-viceversa" class="col-md-6">LOGO</div>

        <div id="bloc-univers" class="col-md-6">
          <div class="row text-center" id="select-univers">
            <span class="titre-ligne">CHOISISSEZ VOTRE UNIVERS</span>
          </div>
          <div class="row">
            <div class="col-md-4">
              <div><a id="btn-mode" class="btn-univers" href="#">MODE</a>
              </div>
            </div>
            <div class="col-md-4">
              <div><a id="btn-coiffure" class="btn-univers" href="#">COIFFURE</a>
              </div>
            </div>
            <div class="col-md-4">
              <div><a id="btn-institut" class="btn-univers" href="#">INSTITUT</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

非常感谢！

Answer 1

我使用z-index和opacity进行图像之间的淡入淡出，也许代码不是很干净但你可以理解：

$(".btn-univers").click(function() {
  var buttonId = $(this).attr('id').split('-');
  var buttonName = buttonId[1];
  var bgTop = ".background-" + buttonName + "-top";
  var bgBottom = ".background-" + buttonName + "-bottom";
  $("#background-top > div").each(function() {
    var zIndex = $(this).css("z-index");
    if (zIndex == 2) {
      $(this).css("z-index", "1")
    }
    if (zIndex == 3) {
      $(this).css("z-index", "2")
    }
  });
  $("#background-bottom > div").each(function() {
    var zIndex = $(this).css("z-index");
    if (zIndex == 2) {
      $(this).css("z-index", "1")
    }
    if (zIndex == 3) {
      $(this).css("z-index", "2")
    }
  });
  if ($(bgTop).css("z-index") != 2) {
    $(bgTop).css({
      "z-index": "3",
      "opacity": "0"
    }).animate({
      opacity: 1
    }, 500);
    $(bgBottom).css({
      "z-index": "3",
      "opacity": "0"
    }).animate({
      opacity: 1
    }, 500);
  }

});

@import 'https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,700,700i';
 body,
html {
  height: 100%;
  font-size: 16px;
}
#flex-container {
  display: flex;
  height: 100%;
  background: grey;
  flex-direction: column;
  overflow: hidden;
}
#bloc-central {
  height: 180px;
  width: 100%;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  padding: 5px 0;
  align-self: center;
  order: 2;
  z-index: 9999;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#bloc-central-in {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #fff;
}
/* ==================
   FONDS HAUT ET BAS
   ================== */

/* ----- POSITIONNEMENT DES 2 FONDS ----- */

#background-top,
#background-bottom {
  width: 100%;
  min-height: 50%;
  z-index: 1;
  position: relative;
}
#background-top > *,
#background-bottom > * {
  min-height: 100%;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#background-top {
  align-self: flex-start;
  order: 1;
}
#background-bottom {
  align-self: flex-end;
  order: 2;
}
/* ----- FONDS NEUTRES ----- */

.background-neutre-top {
  background: url(http://dummy-images.com/abstract/dummy-480x270-Rope.jpg) no-repeat center 50% fixed;
  z-index: 1;
}
.background-neutre-bottom {
  background: url(http://dummy-images.com/abstract/dummy-480x270-Rope.jpg) no-repeat center -50% fixed;
  z-index: 1;
}
/* ----- FONDS MODE ----- */

.background-mode-top {
  background: url(http://dummy-images.com/abstract/dummy-480x270-Circus.jpg) no-repeat center 50% fixed;
  opacity: 0;
}
.background-mode-bottom {
  background: url(http://dummy-images.com/abstract/dummy-480x270-Circus.jpg) no-repeat center -50% fixed;
  opacity: 0;
}
/* ----- FONDS COIFFURE ----- */

.background-coiffure-top {
  background: url(http://dummy-images.com/abstract/dummy-480x270-FairyLights.jpg) no-repeat center 50% fixed;
  opacity: 0;
}
.background-coiffure-bottom {
  background: url(http://dummy-images.com/abstract/dummy-480x270-FairyLights.jpg) no-repeat center -50% fixed;
  opacity: 0;
}
/* ----- FONDS INSTITUT ----- */

.background-institut-top {
  background: url(http://dummy-images.com/abstract/dummy-480x270-Bottles.jpg) no-repeat center 50% fixed;
  opacity: 0;
}
.background-institut-bottom {
  background: url(http://dummy-images.com/abstract/dummy-480x270-Bottles.jpg) no-repeat center -50% fixed;
  opacity: 0;
}
#bloc-univers {
  align-self: center;
}
#select-univers {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1.125em;
  color: #c9c9c9;
}
.titre-ligne {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0 15px;
  margin: 0 0 10px 0;
}
.titre-ligne:before,
.titre-ligne:after {
  flex-grow: 1;
  height: 1px;
  content: '\a0';
  background-color: #ddd;
  position: relative;
  top: 0.5em;
}
.titre-ligne:before {
  margin-right: 10px;
}
.titre-ligne:after {
  margin-left: 10px;
}
.btn-univers:link,
.btn-univers:visited {
  display: inline-block;
  width: 100%;
  height: 50px;
  border: 1px solid #c9c9c9;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 1.750em;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  color: #c9c9c9;
  transition: all .2s ease-in-out;
}
#btn-mode:hover {
  color: #f08945;
  border: 1px solid #f08945;
}
#btn-coiffure:hover {
  color: #0fc798;
  border: 1px solid #0fc798;
}
#btn-institut:hover {
  color: #3f9cf2;
  border: 1px solid #3f9cf2;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flex-container">
  <div id="background-top">
    <div class="background-neutre-top"></div>
    <div class="background-mode-top"></div>
    <div class="background-coiffure-top"></div>
    <div class="background-institut-top"></div>
  </div>

  <div id="background-bottom">
    <div class="background-neutre-bottom"></div>
    <div class="background-mode-bottom"></div>
    <div class="background-coiffure-bottom"></div>
    <div class="background-institut-bottom"></div>
  </div>




  <div id="bloc-central">
    <div id="bloc-central-in">
      <div class="container">

        <div id="logo-viceversa" class="col-md-6">LOGO</div>

        <div id="bloc-univers" class="col-md-6">
          <div class="row text-center" id="select-univers">
            <span class="titre-ligne">CHOISISSEZ VOTRE UNIVERS</span>
          </div>
          <div class="row">
            <div class="col-md-4">
              <div><a id="btn-mode" class="btn-univers" href="#">MODE</a>
              </div>
            </div>
            <div class="col-md-4">
              <div><a id="btn-coiffure" class="btn-univers" href="#">COIFFURE</a>
              </div>
            </div>
            <div class="col-md-4">
              <div><a id="btn-institut" class="btn-univers" href="#">INSTITUT</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>