Question

我创建了一个着陆页，其中图像会淡入到屏幕上，然后用户可以按箭头，它会将它们带到包含更多内容的不同页面。

我的目标是获得它，以便当用户按下按钮时，新页面会滑入以查看。

我在这里找到了一个我想要的例子：https://tympanus.net/Development/PageTransitions/

我想使用“向左/向右移动”转换....我尝试从这个网站下载源文件并弄清楚如何将代码实现到我的中，但我真的很困惑......有没有人对如何使这种转变发挥作用有任何建议？我想严格遵守HTML / CS / Java / JQ ....

由于

* {
  margin: 0;
  padding: 0;
}

.fade-in {
  animation: animationFrames ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards;
  /*when the spec is finished*/
  -webkit-animation: animationFrames ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode: forwards;
  /*Chrome 16+, Safari 4+*/
  -moz-animation: animationFrames ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode: forwards;
  /*FF 5+*/
  -o-animation: animationFrames ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode: forwards;
  /*Not implemented yet*/
  -ms-animation: animationFrames ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode: forwards;
  /*IE 10+*/
}

@keyframes animationFrames {
  0% {
    opacity: 0;
    transform: translate(0px, -25px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}

@-moz-keyframes animationFrames {
  0% {
    opacity: 0;
    -moz-transform: translate(0px, -25px);
  }
  100% {
    opacity: 1;
    -moz-transform: translate(0px, 0px);
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity: 0;
    -webkit-transform: translate(0px, -25px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
  }
}

@-o-keyframes animationFrames {
  0% {
    opacity: 0;
    -o-transform: translate(0px, -25px);
  }
  100% {
    opacity: 1;
    -o-transform: translate(0px, 0px);
  }
}

@-ms-keyframes animationFrames {
  0% {
    opacity: 0;
    -ms-transform: translate(0px, -25px);
  }
  100% {
    opacity: 1;
    -ms-transform: translate(0px, 0px);
  }
}

#showcase {
  background-image: url('https://images.freecreatives.com/wp-content/uploads/2016/03/Cute-Purple-Background.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

#showcase h1 {
  font-size: 6vw;
  color: #fff;
  font-family: passion one;
  letter-spacing: 4vw;
  margin-left: 4vw;
  text-shadow: 2px 2px 3px #000;
}

#showcase h2 {
  font-size: 2.5vw;
  line-height: 2vw;
  color: #fff;
  font-family: passion one;
  text-shadow: 2px 2px 3px #000;
}

#showcase .button {
  font-size: 18px;
  text-decoration: none;
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 100px;
  background-color: darkgreen;
  text-shadow: 2px 2px 3px #000;
}

#showcase .button:hover {
  background-color: green;
  color: #fff;
}

.hiddendiv {
  display: none;
  width: 300px;
  height: 300px;
  background-color: green;
}

.button:focus+.hiddendiv {
  display: block;
  margin-left: 100px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="wrapper">
  <div class="wrapper fade-in">
    <header id="showcase">
      <div id="background">
        <h1>TITLE</h1>
      </div>
      <h2>2017</h2>
      <a href="landing2.html" class="button"><i class="fa fa-angle-double-right" style="font-size:36px"></i></a>
    </header>

Answer 1

我使用这个jQuery插件实现了类似的东西...... http://joaopereirawd.github.io/animatedModal.js/

正如您在插件文档中看到的那样，您可以创建新的窗口内容，当您单击箭头按钮时，插件将使用您选择的动画显示它。

在我的情况下，我需要按下按钮按钮生成新的窗口内容，所以我在该按钮中创建一个click事件，生成div内的所有新窗口内容（以及一个负责的新链接）真正触发动画模式），并将所有内容附加到DOM。然后我创建与生成的div关联的animatedModal元素，并使用click()函数触发新链接中的click事件。

对于您的情况（包括以下插件文档中的css和javascript文件）...

<强> HTML ：

<a id="linktonewwindow" href="#newwindow" class="button"><i class="fa fa-angle-double-right" style="font-size:36px"></i></a>

<div id="newwindow">

    <!-- IMPORTANT. Create the element to close the window!!! -->
    <button class="close-newwindow"><i class="fa fa-stop fa-fw" aria-hidden="true"></i></button>

    <div class="yournewwindowcontent">
        <!-- Put your new window content here-->
    </div>

</div>

<强> JQUERY ：

$("#linktonewwindow").animatedModal({
    modalTarget:'newwindow',
    animatedIn:'bounceInLeft', // Choose the animations you prefer
    animatedOut:'bounceOutLeft',
    color:'#999999', // Background color of the new window
    beforeOpen: function() {
    },           
    afterOpen: function() {
    }, 
    beforeClose: function() {
    }, 
    afterClose: function() {
    }
});

我希望它有所帮助

单击按钮时的页面转换

1 个答案: