<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Notification - A JavaScript library for a well designed Notification system - by Let Aurn</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="settings row text-center">
<div class="col-md-12">
<div class="positions">
<div class="position bottom right text-center" data-position="3">Konsultasi Gratis</div>
</div>
<select id="inAnimation" class="dropdown">
<optgroup label="Attention Seekers">
<option value="rubberBand">rubberBand</option>
</optgroup>
</select>
<select id="outAnimation" class="dropdown">
<optgroup label="Specials">
<option value="hinge">hinge</option>
</optgroup>
</select>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</body>
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Position
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.positions {
width: 350px;
height: 180px;
position: relative;
margin: 20px 0 20px;
}
.position {
font-family: 'Roboto', sans-serif;
width: 160px;
height: 20px;
background: #A3E7D6;
border-radius: 3px;
position: absolute;
cursor: pointer;
margin: 0;
color: #77CFB9;
}
.position.selected {
background: white;
box-shadow: 0 2px 6px 0 #66C8B0;
color: #333333;
}
.position:hover {
box-shadow: 0 2px 6px 0 #66C8B0;
}
.position.bottom {
top: 0;
left: 0;
}
.dropdown {
display:none
}
@charset "UTF-8";
/*!
* animate.css -http://daneden.me/animate
* Version - 3.5.1
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2016 Daniel Eden
*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
@-webkit-keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
.hinge {
-webkit-animation-name: hinge;
animation-name: hinge;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
.notification {
font-family: 'Indie Flower', cursive;
font-size: 100%
color: #161923;
font-weight:600;
width: 400px;
height: 150px;
z-index: 9000;
position: fixed;
padding: 20px;
margin: 0.5rem 0 1rem 0;
border-radius: 2px;
background-color: #fff;
-webkit-transition: all ease .4s;
-moz-transition: all ease .4s;
-o-transition: all ease .4s;
-ms-transition: all ease .4s;
transition: all ease .4s
}
.notification .illustration {
margin:0;
float: right;
}
.notification .illustration img {
border-radius: 10%;
}
/*global $, Notification*/
(function () {
'use strict';
var position = 1;
$(document).on('click', '.notify', function () {
Notification({
text: "Chat saja disini untuk mendapatkan konsultasi gratis",
image: "http://rumart.weebly.com/files/theme/arrow08.png",
inAnimation: $('#inAnimation').val(),
outAnimation: $('#outAnimation').val(),
position: position
});
});
$(function () {
$('.position').click(function (event) {
var el = $(event.target);
$('.position').removeClass('selected notify');
el.addClass('selected notify');
position = el.attr('data-position');
});
});
}());
/**
* Created by Let Aurn IV on 22/09/2015.
*/
/*global $*/
Notification = window.Notification || {};
Notification = function () {
'use strict';
var number = 0;
var incPosition = 0;
var template = function (title, text, image, position) {
incPosition = number * 120;
number = number + 1;
var textHtml = '<div class="text">' + text + '</div>';
var titleHtml = (!title ? '' : '<div class="title">' + title + '</div>');
var imageHtml = (!image ? '' : '<div class="illustration"><img src="' + image + '" width="70" height="70" /></div>');
var style;
switch (parseInt(position, 10)) {
case 1:
style = "top:" + incPosition + "px; left:20px;";
break;
case 2:
style = "top:" + incPosition + "px; right:20px;";
break;
case 3:
style = "bottom:" + incPosition + "px; right:20px;";
break;
case 4:
style = "bottom:" + incPosition + "px; left:20px;";
break;
}
return {
id: number,
content: '<div class="notification notification-' + number + ' " style="' + style + '">' +
imageHtml +
'<div class="text">' + titleHtml + textHtml + '</div>' +
'</div>'
};
};
var hide = function (id, outAnimation) {
var notification = $(document).find('.notification-' + id);
notification.addClass(outAnimation);
$(document).find('.notification').css('top', '-=110px');
number -= 1;
setTimeout(function () {
notification.remove();
}, 8000);
};
var create = function (config) {
var notification = template(config.title, config.text, config.image, config.position);
$(notification.content).addClass('animated ' + config.inAnimation).appendTo('body');
setTimeout(function () {
hide(notification.id, config.outAnimation);
}, config.delay * 1000 || 8000);
};
return create;
}();
