[英]Swipe overlay off screen
我已經為觸摸屏信息亭創建了一個簡單的網頁。 主頁上有一個全屏覆蓋,觸摸時可以滑出屏幕(使用animate.css )。
我現在想要一些其他功能(以提高可用性)。 用戶是否可以從屏幕上滑動覆蓋層,而不是觸摸它並使其“滑開”。 我注意到有些用戶在第一次進入屏幕時會本能地向左/向右滑動。 如果這樣做不起作用,那么一半的人會以為它已經壞了就走開,不打算用一根手指觸摸屏幕。
我一直在看這個jQuery插件 -這樣行得通嗎?
我不知道如何整合這樣的功能。 但是, 到目前為止 ,我已經為我的工作創建了一個jsfiddle (出於示例目的而將其精簡)。 還包括我所有的代碼(jsfiddle的重復項)。
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
$(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
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;
}
}
您可以考慮使用jQuery Mobile UI: api.jquerymobile.com/swipe ,它支持滑動事件。
然后,您可以根據操作添加所需的任何animate.css類:)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.