This repository has been archived by the owner on Apr 30, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
87 lines (71 loc) · 2.8 KB
/
index.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
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bubbling demo by Soraph</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="http://github.com/weepy/jquery.path/raw/master/jquery.path.js"></script>
<style type="text/css">
.bubble1 {
border: 2px solid #000;
border-radius: 100px;
height: 100px;
width: 100px;
position: absolute;
bottom: -104px;
left: 50%;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery('document').ready(function () {
jQuery('.mytext').hide();
jQuery('.bubble1').on('click', function () {
jQuery(this).stop(true,true).hide('explode', { pieces: 128 } , 1000, function() { jQuery('.mytext').show(); } );
});
var bubbleWidth = jQuery('.bubble1').width();
var bubbleHeight = jQuery('.bubble1').height();
var Bubbling = {
init: function() {
var widthDifference = bubbleWidth/100*10;
var heightDifference = bubbleHeight/100*10;
var intervalTime = 901;
var infiniteLoop = setInterval(function() {
jQuery('.bubble1').animate( {
width: '+='+widthDifference,
height: '+='+heightDifference,
left: '-='+widthDifference,
top: '-='+heightDifference, }, { duration: 450 } );
jQuery('.bubble1').animate( {
width: '-='+widthDifference,
height: '-='+heightDifference,
left: '+='+widthDifference,
top: '+='+heightDifference, }, { duration: 450 } );
}, intervalTime);
}
};
Bubbling.init();
var bezier_params = {
start: {
x: jQuery('.bubble1').offset().left-(bubbleWidth/2),
y: jQuery('.bubble1').offset().top-(bubbleHeight/2),
},
end: {
x: jQuery('.bubble1').offset().left-(bubbleWidth/2),
y: 110,
}
}
jQuery('.bubble1').animate({path: new jQuery.path.bezier(bezier_params)}, { duration: 2000 } );
});
});//]]>
</script>
</head>
<body>
<div class="mytext" style="display: none;">Lorem Ipsum</div>
<div class="bubble1"></div>
</body></html>