簡要教程
這是一款基於animate.css的效果非常酷的CSS消息提示動畫效果。這66種CSS消息提示動畫效果按出現位置分為4種類型：上部、中部、中下和右下。每個部位的消息提示效果都是不一樣的。
注意：這個CSS消息提示動畫效果需要在支持CSS3的瀏覽器中才能正常工作。
HTML結構
該CSS消息提示動畫效果的HTML結構非常簡單。使用一個id為#notifications的div作為整個包裹容器。
<
div
id
=
"notifications"
></
div
>
|
消息提示框的代碼默認情況下是不存在與DOM中的，它們使用js來動態插入。例如當選擇"Top"選項時，在點擊觸發按鈕后，Top消息提示框將使用js插入到DOM中：
<
div
id
=
"notifications-top-center"
>
<
span
class
=
"iconb"
data-icon
=
""
></
span
>
Oups something went wrong !
<
div
id
=
"notifications-top-center-close"
class
=
"close"
>
<
span
class
=
"iconb"
data-icon
=
""
></
span
>
</
div
>
</
div
>
|
對於中部、中下和右下幾個部位的消息提示框也是相同的操作。它們默認是不存在與DOM中的，只有在觸發了相應的事件時，才使用jQuery來將HTML代碼插入到DOM中的相應位置上。
<
div
id
=
"notifications-full"
>
<
div
id
=
"notifications-full-close"
class
=
"close"
><
span
class
=
"iconb"
data-icon
=
""
></
span
></
div
>
<
div
id
=
"notifications-full-icon"
><
span
class
=
"iconb"
data-icon
=
""
></
span
></
div
>
<
div
id
=
"notifications-full-text"
>...</
div
>
</
div
>
<
div
id
=
"notifications-bottom-center-tab"
>
<
div
id
=
"notifications-bottom-center-tab-close"
class
=
"close"
><
span
class
=
"iconb"
data-icon
=
""
></
span
></
div
>
<
div
id
=
"notifications-bottom-center-tab-avatar"
><
img
src
=
"_assets/avatar.png"
width
=
"100"
height
=
"100"
/></
div
>
<
div
id
=
"notifications-bottom-center-tab-right"
>
<
div
id
=
"notifications-bottom-center-tab-right-title"
><
span
>delmarks</
span
> sent you a message</
div
>
<
div
id
=
"notifications-bottom-center-tab-right-text"
>...</
div
>
</
div
>
</
div
>
<
div
id
=
"notifications-bottom-right-tab"
>
<
div
id
=
"notifications-bottom-right-tab-close"
class
=
"close"
><
span
class
=
"iconb"
data-icon
=
""
></
span
></
div
>
<
div
id
=
"notifications-bottom-right-tab-avatar"
><
img
src
=
"_assets/avatar.png"
width
=
"70"
height
=
"70"
/></
div
>
<
div
id
=
"notifications-bottom-right-tab-right"
>
<
div
id
=
"notifications-bottom-right-tab-right-title"
><
span
>delmarks</
span
> sent you a message</
div
>
<
div
id
=
"notifications-bottom-right-tab-right-text"
>...</
div
>
</
div
>
</
div
>
|
CSS樣式
該CSS消息提示動畫效果有兩個主要的CSS文件。一個是animate.css文件，用於產生各種動畫效果。另一個是animated-notifications.css文件。在實際使用時，你需要在animate.css文件中查找你需要的class動畫名稱。下面是主要的消息提示框定位CSS代碼:
#notifications-bottom-
right
{
position
:
absolute
;
width
:
360px
;
right
:
20px
;
bottom
:
20px
;
}
#notifications-bottom-right-tab{
background-color
: rgba(
255
,
255
,
255
,
1
);
float
:
left
;
height
:
100px
;
width
:
360px
;
margin-top
:
20px
;
position
:
relative
;
-moz-
box-shadow
:
0px
0px
10px
rgba(
0
,
0
,
0
,
0.1
);
-webkit-
box-shadow
:
0px
0px
10px
rgba(
0
,
0
,
0
,
0.1
);
box-shadow
:
0px
0px
10px
rgba(
0
,
0
,
0
,
0.1
);
}
#notifications-bottom-right-tab-close{
height
:
20px
;
width
:
20px
;
position
:
absolute
;
top
:
40px
;
right
:
20px
;
color
:
#cccccc
;
font-size
:
18px
;
line-height
:
20px
;
text-align
:
center
;
-webkit-
transition
:
all
0.5
s;
-moz-
transition
:
all
0.5
s;
-o-
transition
:
all
0.5
s;
transition
:
all
0.5
s;
}
#notifications-bottom-right-tab-close:hover {
color
: rgba(
102
,
102
,
102
,
1
);
cursor
:
pointer
;
}
#notifications-bottom-right-tab-avatar{
float
:
left
;
height
:
100px
;
width
:
70px
;
margin-left
:
20px
;
}
#notifications-bottom-right-tab-avatar img{
-moz-
border-radius
:
50%
50%
50%
50%
;
-webkit-
border-radius
:
50%
50%
50%
50%
;
border-radius
:
50%
50%
50%
50%
;
-khtml-
border-radius
:
50%
50%
50%
50%
;
float
:
left
;
margin-top
:
15px
;
}
#notifications-bottom-right-tab-
right
{
float
:
left
;
width
:
210px
;
margin-left
:
20px
;
margin-top
:
20px
;
}
#notifications-bottom-right-tab-right-title{
float
:
left
;
width
:
100%
;
color
:
#252525
;
font-weight
:
600
;
}
#notifications-bottom-right-tab-right-title span{
color
:
#e91e63
;
}
#notifications-bottom-right-tab-right-text{
float
:
left
;
width
:
100%
;
font-size
:
14px
;
color
:
#4c4c4c
;
font-style
:
italic
;
margin-top
:
5px
;
}
#notifications-bottom-
center
{
position
:
absolute
;
width
:
360px
;
bottom
:
90px
;
left
:
50%
;
margin-left
:
-180px
;
}
#notifications-bottom-center-tab{
background-color
: rgba(
255
,
255
,
255
,
1
);
float
:
left
;
height
:
100px
;
width
:
360px
;
margin-top
:
20px
;
position
:
relative
;
-moz-
box-shadow
:
0px
0px
10px
rgba(
0
,
0
,
0
,
0.1
);
-webkit-
box-shadow
:
0px
0px
10px
rgba(
0
,
0
,
0
,
0.1
);
box-shadow
:
0px
0px
10px
rgba(
0
,
0
,
0
,
0.1
);
}
#notifications-bottom-center-tab-close{
height
:
20px
;
width
:
20px
;
position
:
absolute
;
top
:
40px
;
right
:
20px
;
color
:
#cccccc
;
font-size
:
18px
;
line-height
:
20px
;
text-align
:
center
;
-webkit-
transition
:
all
0.5
s;
-moz-
transition
:
all
0.5
s;
-o-
transition
:
all
0.5
s;
transition
:
all
0.5
s;
}
#notifications-bottom-center-tab-close:hover {
color
: rgba(
102
,
102
,
102
,
1
);
cursor
:
pointer
;
}
#notifications-bottom-center-tab-avatar{
float
:
left
;
height
:
100px
;
width
:
100px
;
}
#notifications-bottom-center-tab-avatar img{
float
:
left
;
}
#notifications-bottom-center-tab-
right
{
float
:
left
;
width
:
210px
;
margin-left
:
20px
;
margin-top
:
20px
;
}
#notifications-bottom-center-tab-right-title{
float
:
left
;
width
:
100%
;
color
:
#252525
;
font-weight
:
600
;
}
#notifications-bottom-center-tab-right-title span{
color
:
#e91e63
;
}
#notifications-bottom-center-tab-right-text{
float
:
left
;
width
:
100%
;
font-size
:
14px
;
color
:
#4c4c4c
;
font-style
:
italic
;
margin-top
:
5px
;
}
#notifications-top-
center
{
position
:
fixed
;
left
:
0px
;
top
:
0px
;
width
:
100%
;
background-color
: rgba(
255
,
255
,
255
,
1
);
height
:
50px
;
text-align
:
center
;
line-height
:
50px
;
color
:
#404040
;
font-size
:
18px
;
font-weight
:
600
;
}
#notifications-top-center-close {
background-color
: rgba(
233
,
30
,
99
,
0.6
);
float
:
right
;
height
:
50px
;
width
:
50px
;
font-size
:
30px
;
color
: rgba(
255
,
255
,
255
,
1
);
font-weight
:
400
;
-webkit-
transition
:
all
0.5
s;
-moz-
transition
:
all
0.5
s;
-o-
transition
:
all
0.5
s;
transition
:
all
0.5
s;
}
#notifications-top-center-close:hover {
cursor
:
pointer
;
background-color
: rgba(
233
,
30
,
99
,
1
);
}
#notifications-full{
-moz-
box-shadow
:
0px
0px
50px
rgba(
0
,
0
,
0
,
0.1
);
-webkit-
box-shadow
:
0px
0px
50px
rgba(
0
,
0
,
0
,
0.1
);
box-shadow
:
0px
0px
50px
rgba(
0
,
0
,
0
,
0.1
);
height
:
300px
;
width
:
530px
;
background-color
: rgba(
255
,
255
,
255
,
1
);
position
:
fixed
;
margin-top
:
10%
;
margin-left
:
-265px
;
z-index
:
2
;
left
:
50%
;
top
:
10%
;
}
#notifications-full-close{
height
:
20px
;
width
:
20px
;
position
:
absolute
;
top
:
10px
;
right
:
10px
;
color
:
#cccccc
;
font-size
:
20px
;
line-height
:
20px
;
text-align
:
center
;
-webkit-
transition
:
all
0.5
s;
-moz-
transition
:
all
0.5
s;
-o-
transition
:
all
0.5
s;
transition
:
all
0.5
s;
}
#notifications-full-close:hover {
color
: rgba(
102
,
102
,
102
,
1
);
cursor
:
pointer
;
}
#notifications-full-
icon
{
float
:
left
;
width
:
100%
;
font-size
:
65px
;
text-align
:
center
;
height
:
65px
;
margin-top
:
35px
;
color
:
#404040
;
}
#notifications-full-text{
width
:
430px
;
float
:
left
;
margin-left
:
50px
;
text-align
:
center
;
margin-top
:
40px
;
font-size
:
16px
;
line-height
:
24px
;
color
:
#404040
;
}
|
JAVASCRIPT
該CSS消息提示動畫效果使用js代碼使#notifications容器具有響應式效果，具體代碼如下：
function
resize(){
$(
'#notifications'
).height(window.innerHeight - 50);
}
$( window ).resize(
function
() {resize();});
resize();
|
每個消息提示框中都有一個關閉按鈕，插件中使用一個函數來實現關閉功能：
function
refresh_close(){
$(
'.close'
).click(
function
(){$(
this
).parent().fadeOut(200);});
}
refresh_close();
|
每個部位的消息提示框的HTML代碼都是在JS文件中動態添加的。例如上部的HTML結構代碼如下：
var
top =
'<div id="notifications-top-center"><span class="iconb" data-icon=""></span> Oups something went wrong !<div id="notifications-top-center-close" class="close"><span class="iconb" data-icon=""></span></div></div>'
;
|
最后是在選擇了相應的動畫效果后，點擊提交按鈕時將各種效果的消息提示框插入到DOM中。當#notifications-window-row-button按鈕被點擊時，插件會檢測當前選擇的位置和動畫效果，然后移除舊的內容，在將新的內容添加到DOM中。在添加了新的內容之后，再使用refresh_close()函數來使消息提示框的關閉按鈕可用。上部和中部的消息提示框是插入在#notifications中，而中下和右下部位的消息提示框是分別插入到#notifications-bottom-center和#notifications-bottom-right中，注意這點區別。
$(
'#notifications-window-row-button'
).click(
function
(){
if
($(
'#position'
).val()==
'top'
){
$(
"#notifications-top-center"
).remove();
$(
"#notifications"
).append(top);
$(
"#notifications-top-center"
).addClass(
'animated '
+ $(
'#effects'
).val());
refresh_close();
}
if
($(
'#position'
).val()==
'center'
){
$(
"#notifications-full"
).remove();
$(
"#notifications"
).append(center);
$(
"#notifications-full"
).addClass(
'animated '
+ $(
'#effects'
).val());
refresh_close();
}
if
($(
'#position'
).val()==
'bottom'
){
$(
"#notifications-bottom-center"
).html();
$(
"#notifications-bottom-center"
).html(bottom);
$(
"#notifications-bottom-center-tab"
).addClass(
'animated '
+ $(
'#effects'
).val());
refresh_close();
}
if
($(
'#position'
).val()==
'botom_right'
){
$(
"#notifications-bottom-right"
).html();
$(
"#notifications-bottom-right"
).html(bottom_center);
$(
"#notifications-bottom-right-tab"
).addClass(
'animated '
+ $(
'#effects'
).val());
refresh_close();
}
});
});
|