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
|
(function($) {
'use strict';
// Fade out the blog and let drop the about card of the author and vice versa
/**
* AboutCard
* @constructor
*/
var AboutCard = function() {
this.$openBtn = $('#sidebar, #header').find('a[href*=\'#about\']');
this.$closeBtn = $('#about-btn-close');
this.$blog = $('#blog');
this.$about = $('#about');
this.$aboutCard = $('#about-card');
};
AboutCard.prototype = {
/**
* Run AboutCard feature
* @return {void}
*/
run: function() {
var self = this;
// Detect click on open button
self.$openBtn.click(function(e) {
e.preventDefault();
self.play();
});
// Detect click on close button
self.$closeBtn.click(function(e) {
e.preventDefault();
self.playBack();
});
},
/**
* Play the animation
* @return {void}
*/
play: function() {
var self = this;
// Fade out the blog
self.$blog.fadeOut();
// Fade in the about card
self.$about.fadeIn();
// Small timeout to drop the about card after that
// the about card fade in and the blog fade out
setTimeout(function() {
self.dropAboutCard();
}, 300);
},
/**
* Play back the animation
* @return {void}
*/
playBack: function() {
var self = this;
// Lift the about card
self.liftAboutCard();
// Fade in the blog after that the about card lifted up
setTimeout(function() {
self.$blog.fadeIn();
}, 500);
// Fade out the about card after that the about card lifted up
setTimeout(function() {
self.$about.fadeOut();
}, 500);
},
/**
* Slide the card to the middle
* @return {void}
*/
dropAboutCard: function() {
var self = this;
var aboutCardHeight = self.$aboutCard.innerHeight();
// default offset from top
var offsetTop = ($(window).height() / 2) - (aboutCardHeight / 2) + aboutCardHeight;
// if card is longer than the window
// scroll is enable
// and re-define offsetTop
if (aboutCardHeight + 30 > $(window).height()) {
offsetTop = aboutCardHeight;
}
self.$aboutCard
.css('top', '0px')
.css('top', '-' + aboutCardHeight + 'px')
.show(500, function() {
self.$aboutCard.animate({
top: '+=' + offsetTop + 'px'
});
});
},
/**
* Slide the card to the top
* @return {void}
*/
liftAboutCard: function() {
var self = this;
var aboutCardHeight = self.$aboutCard.innerHeight();
// default offset from top
var offsetTop = ($(window).height() / 2) - (aboutCardHeight / 2) + aboutCardHeight;
if (aboutCardHeight + 30 > $(window).height()) {
offsetTop = aboutCardHeight;
}
self.$aboutCard.animate({
top: '-=' + offsetTop + 'px'
}, 500, function() {
self.$aboutCard.hide();
self.$aboutCard.removeAttr('style');
});
}
};
$(document).ready(function() {
var aboutCard = new AboutCard();
aboutCard.run();
});
})(jQuery);
|
