在屏幕上滑动覆盖

Question

I have created a simple webpage for a touch screen info kiosk. 我已经为触摸屏信息亭创建了一个简单的网页。 The homepage has a full screen overlay that, when touched, slides off the screen (using animate.css ). 主页上有一个全屏覆盖，触摸时可以滑出屏幕（使用animate.css ）。

I would now like some additional functionality (to improve usability). 我现在想要一些其他功能（以提高可用性）。 Would it be possible for users to swipe the overlay off the screen, instead of touching it and having it 'slide away'. 用户是否可以从屏幕上滑动覆盖层，而不是触摸它并使其“滑开”。 I've noticed that some users instinctively swipe left/right when they approach the screen for the first time. 我注意到有些用户在第一次进入屏幕时会本能地向左/向右滑动。 When this doesn't work half of them walk away assuming it's broken, not thinking to touch the screen with one finger. 如果这样做不起作用，那么一半的人会以为它已经坏了就走开，不打算用一根手指触摸屏幕。

If the user swipes left the overlay should slide off the screen to the left. 如果用户向左滑动，则覆盖层应滑离屏幕左侧。
If the user swipes right the overlay should slide off the screen to the right. 如果用户向右滑动，则覆盖图应从屏幕右侧滑出。
If the user swipes up the overlay should slide off the screen to the top. 如果用户向上滑动，则覆盖层应滑离屏幕顶部。
etc 等等

I had been looking at this jQuery plugin - would this work? 我一直在看这个jQuery插件 -这样行得通吗？

I have no idea how I would incorporate such a feature. 我不知道如何整合这样的功能。 I have however created a jsfiddle of my work so far (stripped down for example purposes). 但是，到目前为止，我已经为我的工作创建了一个jsfiddle （出于示例目的而将其精简）。 Also included all of my code (duplication of the jsfiddle). 还包括我所有的代码（jsfiddle的重复项）。

Any help or guidance is appreciated. 任何帮助或指导表示赞赏。

HTML HTML

<body>
  <!-- start overlay -->
  <div class="overlay overlay-data">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12 overlay-info">
          <p class="help-heading">Help?</p>
          <div class="circle"></div>
          <div class="pulse-ring"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- end ovberlay-->
  <div class="container text-center">
    <!-- first row -->
    <div class="row">
      <div class="col-md-4">
        <div class="menu-item blue" id="loader1">
          <a href="#"><i class="fa fa-map-signs big-icon"></i>
                    <p>Guides</p></a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="menu-item blue" id="loader4">
          <a href="#"><i class="fa fa-shopping-cart big-icon"></i>
                    <p>Borrowing</p></a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="menu-item blue" id="loader7">
          <a href="#"><i class="fa fa-binoculars big-icon"></i>
                    <p>Finding books</p></a>
        </div>
      </div>
    </div>
    <!-- end first row -->
  </div>
  <!-- Start Main Body Section -->
  <div class="mainbody-section text-center">
    <div class="partners">
      <!-- Modal -->
      <div aria-labelledby="myLargeModalLabel" class="modal fade bs-example-modal-lg" id="navModal" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <hr>
            <h4 class="modal-title" id="navModalLabel">
                        Navigation</h4><img src="images/bs_touchscreen_nav.jpg">
            <div class="modal-footer">
              <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end main body -->
  </div>
</body>

JS JS

$(document).ready(function() {
  $(".overlay").addClass('overlay-open');
  $("section, .container").addClass('blur');
});

$(document).on('click', '.overlay', function() {
  $('.overlay').addClass('animated slideOutUp');
  $("section, .container").removeClass('blur');
});

CSS CSS

body {
  background-attachment: fixed;
  background-size: cover;
  background-position: 50% 50%;
  font-family: 'Open Sans', sans-serif;
  outline: 0;
}

html,
body {
  height: 100%
}

.btn-primary {
  border-color: #FF432E;
  background-color: #FF432E;
  text-transform: uppercase;
  font-weight: 300;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.blue {
  background: #28ABE3;
}

.menu-item {
  color: #fff;
  padding-top: 45px;
  padding-bottom: 45px;
  margin-bottom: 30px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: 5px solid transparent;
}

.menu-item:hover {
  border: 5px solid rgba(255, 255, 255, 0.70);
}

.menu-item a {
  color: #fff;
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.menu-item a p {
  font-weight: 300;
  font-size: 25px;
}

.menu-item a i {
  font-size: 50px;
  padding-bottom: 20px;
}

.menu-item:hover a {
  text-decoration: none;
}

.blur {
  -webkit-filter: blur(4px);
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  z-index: 1;
}

.overlay p {
  text-align: center;
  position: relative;
  top: 10%;
  height: 30%;
  font-size: 120px;
  color: white;
  font-family: 'Playfair Display', serif;
}

.overlay-data {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  visibility: 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-open {
  opacity: 0.5;
  visibility: visible;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.overlay-info {
  padding-top: 100px;
}

.circle {
  padding: 100px;
  position: relative;
}

.pulse-ring {
  //content: '';
  width: 400px;
  height: 400px;
  border: 10px solid #fff;
  border-radius: 50%;
  position: relative;
  top: -110px;
  left: 0;
  margin: auto;
  animation: pulsate infinite 1s;
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(1, 1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 0;
  }
}

Answer 1

You could look into to using jQuery Mobile UI: api.jquerymobile.com/swipe which supports swipe events. 您可以考虑使用jQuery Mobile UI： api.jquerymobile.com/swipe ，它支持滑动事件。

You can then just add whatever animate.css classes you need depending on the action :) 然后，您可以根据操作添加所需的任何animate.css类：）

在屏幕上滑动覆盖

问题描述

Any help or guidance is appreciated. 任何帮助或指导表示赞赏。

1 个解决方案

解决方案1
1 已采纳 2016-01-21 13:49:24

在屏幕上滑动覆盖

问题描述

Any help or guidance is appreciated. 任何帮助或指导表示赞赏。

1 个解决方案

解决方案1 1 已采纳 2016-01-21 13:49:24

解决方案1
1 已采纳 2016-01-21 13:49:24