这是一款仿照微软Xbox One样式的消息框制作的jQuery和CSS3通知消息框特效。该消息框分为三个部分,每个部分在消息框被激活时将依次打开,再依次关闭,效果非常的酷。
制作方法
HTML结构
该消息框的HTML结构如下,主要结构分为三个部分:div.impact
,div.message-container
和一个<h1>
标签。
<div class="pull"> <div class="notification positive"> <div class="flex-container"> <div class="impact"> <div class="icon"> <i class="fa fa-gamepad"></i> </div> </div> <div class="message-container"> <div class="message"> <strong>jQueryScript is online</strong> </div> </div> </div> <h1>Hold <img src="xbox.png" alt="" class="xbox-logo"> to launch</h1> </div> </div>
CSS样式
该消息框的包裹容器被制作为3D空间。
.pull { position: fixed; bottom: 0; width: 100%; -webkit-perspective: 250px; perspective: 250px; -webkit-perspective-origin: right center; perspective-origin: right center; -webkit-transition: -webkit-perspective .1s ease; transition: perspective .1s ease; } .pull.open { -webkit-perspective: 500px; perspective: 500px; }
消息框的布局采用flexbox的布局方式。
.notification .flex-container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: no-wrap; -ms-flex-wrap: no-wrap; flex-wrap: no-wrap; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-transition: -webkit-transform .35s ease; transition: transform .35s ease; -webkit-transform: translate3d(0, 45px, 0); transform: translate3d(0, 45px, 0); } .notification .flex-container.drop-down { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
其中transform: translate3d(0, 0, 0);
用于性能优化,开启GPU。
JAVASCRIPT
核心的jQuery代码如下,有两个函数:openNotification()
和closeNotification()
分别用于打开和关闭消息框:
$(function () { $('.notification').addClass('notification-hidden'); openNotification('positive'); setTimeout(closeNotification, 10000); }); $('.again').click(function () { openNotification('positive'); setTimeout(closeNotification, 10000); }); function openNotification(whichNotification) { var thisNotification = $('.notification.' + whichNotification); thisNotification.removeClass('notification-hidden'); setTimeout(function () { thisNotification.addClass('open'); var openNotification = $('.notification.open'); $('.pull').addClass('open'); openNotification.addClass('show').addClass('open--rot'); setTimeout(function () { openNotification.addClass('open--width'); }, 1250); setTimeout(function () { openNotification.find('.flex-container').addClass('drop-down'); }, 3000); $('body').append('<div class="overlay"></div>'); }, 50); } function closeNotification() { var type = $('.notification.open'); type.find('.drop-down').removeClass('drop-down'); setTimeout(function () { type.removeClass('open--width'); }, 400); setTimeout(function () { type.removeClass('open--rot'); }, 700); setTimeout(function () { type.removeClass('show'); }, 900); setTimeout(function () { $('.overlay').remove(); type.removeClass('open'); }, 1000); setTimeout(function () { type.addClass('notification-hidden'); }, 1050); }
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!