forked from codrops/NotificationStyles
-
Notifications
You must be signed in to change notification settings - Fork 0
/
other-cornerexpand.html
139 lines (131 loc) · 5.28 KB
/
other-cornerexpand.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Notification Styles Inspiration | Other Corner Expand</title>
<meta name="description" content="Various styles and effects for unobtrusive notifications on a website" />
<meta name="keywords" content="notification, inspiration, style, effect, growl, javascript" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/ns-default.css" />
<link rel="stylesheet" type="text/css" href="css/ns-style-other.css" />
<script src="js/modernizr.custom.js"></script>
<script src="js/snap.svg-min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="color-2">
<div class="notification-shape shape-box" id="notification-shape" data-path-to="m 0,0 500,0 0,500 -500,0 z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
<path d="m 0,0 500,0 0,500 0,-500 z"/>
</svg>
</div>
<div class="container">
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/SelectInspiration/"><span>Previous Demo</span></a>
<a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=19415"><span>Back to the Codrops Article</span></a>
</div>
<header class="codrops-header">
<h1>Notification Styles Inspiration <span>Simple ideas & effects for website notifications</span></h1>
</header>
<div class="main clearfix">
<div class="column">
<p class="small">Click on the button to show the notification:</p>
<button id="notification-trigger" class="progress-button">
<span class="content">Show Notification</span>
<span class="progress"></span>
</button>
</div>
<div class="column">
<nav class="codrops-demos">
<h3>Growl-like</h3>
<div>
<a href="index.html">Scale</a>
<a href="growl-jelly.html">Jelly</a>
<a href="growl-slide.html">Slide in</a>
<a href="growl-genie.html">Genie</a>
</div>
<h3>Attached</h3>
<div>
<a href="attached-flip.html">Flip</a>
<a href="attached-bouncyflip.html">Bouncy Flip</a>
</div>
<h3>Top Bar</h3>
<div>
<a href="bar-slidetop.html">Slide On Top</a>
<a href="bar-exploader.html">Expanding Loader</a>
</div>
<h3>Other</h3>
<div>
<a class="current-demo" href="other-cornerexpand.html">Corner Expand</a>
<a href="other-loadingcircle.html">Loading Circle</a>
<a href="other-boxspinner.html">Box Spinner</a>
<a href="other-thumbslider.html">Thumb Slider</a>
</div>
</nav>
</div>
</div>
<!-- Related demos -->
<section class="related">
<p>If you enjoyed this demo you might also like:</p>
<a href="http://tympanus.net/Development/ProgressButtonStyles/">
<img src="http://tympanus.net/codrops/wp-content/uploads/2013/12/ProgressButtonStyles-300x162.png" />
<h3>Progress Button Styles</h3>
</a>
<a href="http://tympanus.net/Development/CreativeLoadingEffects/">
<img src="http://tympanus.net/codrops/wp-content/uploads/2013/09/CreativeLoadingEffects-300x162.png" />
<h3>Creative Loading Effects</h3>
</a>
</section>
</div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/notificationFx.js"></script>
<script>
(function() {
var svgshape = document.getElementById( 'notification-shape' ),
s = Snap( svgshape.querySelector( 'svg' ) ),
path = s.select( 'path' ),
pathConfig = {
from : path.attr( 'd' ),
to : svgshape.getAttribute( 'data-path-to' )
},
bttn = document.getElementById( 'notification-trigger' );
// make sure..
bttn.disabled = false;
bttn.addEventListener( 'click', function() {
// simulate loading (for demo purposes only)
classie.add( bttn, 'active' );
setTimeout( function() {
path.animate( { 'path' : pathConfig.to }, 300, mina.easeinout );
classie.remove( bttn, 'active' );
// create the notification
var notification = new NotificationFx({
wrapper : svgshape,
message : '<p><span class="icon icon-bulb"></span> I\'m appaering in a morphed shape thanks to <a href="http://snapsvg.io/">Snap.svg</a></p>',
layout : 'other',
effect : 'cornerexpand',
type : 'notice', // notice, warning or error
onClose : function() {
bttn.disabled = false;
setTimeout(function() {
path.animate( { 'path' : pathConfig.from }, 300, mina.easeinout );
}, 200 );
}
});
// show the notification
notification.show();
}, 1200 );
// disable the button (for demo purposes only)
this.disabled = true;
} );
})();
</script>
</body>
</html>