Skip to content

Commit c3de242

Browse files
razwanrazwan
committed
cleanup and bump version to v0.3.1
1 parent 344d118 commit c3de242

File tree

5 files changed

+247
-168
lines changed

5 files changed

+247
-168
lines changed

‎assets/css/bully.css

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
[class*="c-bully"],
2+
[class*="c-bully"]:before,
3+
[class*="c-bully"]:after {
4+
box-sizing: border-box;
5+
}
6+
7+
.c-bully {
8+
position: fixed;
9+
top: 50%;
10+
right: 48px;
11+
font-size: 12px;
12+
transform: translate(0, -50%);
13+
z-index: 9000;
14+
color: #000;
15+
}
16+
17+
.c-bully--inversed {
18+
color: #FFF;
19+
}
20+
21+
.c-bully__bullet {
22+
padding: 0.5em;
23+
opacity: 0;
24+
25+
cursor: pointer;
26+
}
27+
28+
.c-bully__bullet:after {
29+
content: "";
30+
31+
display: block;
32+
width: 1em;
33+
height: 1em;
34+
35+
border: 2px solid currentColor;
36+
border-radius: 50%;
37+
38+
will-change: transform;
39+
}
40+
41+
.c-bully__bullet--active {
42+
position: absolute;
43+
top: 0;
44+
left: 0;
45+
46+
transition: top 0.2s ease-out;
47+
}
48+
49+
.c-bully__bullet--active:before {
50+
content: "";
51+
width: 1em;
52+
height: 1em;
53+
position: absolute;
54+
top: 50%;
55+
left: 50%;
56+
font-size: 14px;
57+
transform: translate(-50%, -50%);
58+
background: currentColor;
59+
border-radius: 50%;
60+
}
61+
62+
.c-bully__bullet--active:after {
63+
border-color: transparent;
64+
}
65+
66+
.c-bully__bullet--pop {
67+
animation: bully-pop 0.6s cubic-bezier(0.485, 1.630, 0.430, 2) forwards, fade-in 0.2s 0.2s ease-out forwards;
68+
}
69+
70+
.c-bully__bullet--squash {
71+
opacity: 1;
72+
animation: bully-squash 0.2s ease-out forwards;
73+
}
74+
75+
@keyframes fade-in {
76+
0% { opacity: 0 }
77+
100% { opacity: 1 }
78+
}
79+
80+
@keyframes bully-pop {
81+
50% { transform: scale(0.7); }
82+
100% { transform: scale(1); }
83+
}
84+
85+
@keyframes bully-squash {
86+
50% { transform: scale(0.6, 1.8) }
87+
100% { transform: scale(1) }
88+
}

‎assets/css/slick-theme.css

-16
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,5 @@
11
@charset 'UTF-8';
2-
/* Slider */
3-
.slick-loading .slick-list
4-
{
5-
background: #fff url('./ajax-loader.gif') center center no-repeat;
6-
}
72

8-
/* Icons */
9-
@font-face
10-
{
11-
font-family: 'slick';
12-
font-weight: normal;
13-
font-style: normal;
14-
15-
src: url('./fonts/slick.eot');
16-
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
17-
}
183
/* Arrows */
194
.slick-prev,
205
.slick-next
@@ -66,7 +51,6 @@
6651
.slick-prev:before,
6752
.slick-next:before
6853
{
69-
font-family: 'slick';
7054
font-size: 20px;
7155
line-height: 1;
7256

‎index.html

+3-57
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
77
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
88
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+Slab:700">
9+
<link rel="stylesheet" type="text/css" href="assets/css/bully.css">
910
<link rel="stylesheet" type="text/css" href="assets/css/prism.css">
1011
<link rel="stylesheet" type="text/css" href="assets/css/slick.css">
1112
<link rel="stylesheet" type="text/css" href="assets/css/slick-theme.css">
@@ -160,63 +161,6 @@
160161
color: black;
161162
}
162163

163-
.badge {
164-
position: absolute;
165-
top: 100%;
166-
right: 100px;
167-
display: flex;
168-
margin-top: -50px;
169-
justify-content: center;
170-
align-items: center;
171-
width: 100px;
172-
height: 100px;
173-
background: white;
174-
border-radius: 50%;
175-
}
176-
177-
.c-bully {
178-
position: fixed;
179-
top: 50%;
180-
right: 2em;
181-
182-
margin-bottom: 0.5em;
183-
184-
font-size: 14px;
185-
186-
transform: translate(0, -50%);
187-
}
188-
189-
@media only screen and (max-width: 600px) {
190-
.c-bully {
191-
right: 1em;
192-
font-size: 10px;
193-
}
194-
}
195-
196-
.c-bully--inversed {
197-
color: white;
198-
}
199-
200-
.c-bully__bullet {
201-
width: 1em;
202-
height: 1em;
203-
margin-top: 0.5em;
204-
205-
border: 2px solid currentColor;
206-
border-radius: 50%;
207-
cursor: pointer;
208-
}
209-
210-
.c-bully__bullet--active {
211-
position: absolute;
212-
top: 0;
213-
left: 0;
214-
215-
background: currentColor;
216-
217-
transition: top .15s ease-in-out;
218-
}
219-
220164
[data-rellax] {
221165
transform: translate3d(0,0,0);
222166
will-change: transform;
@@ -428,6 +372,8 @@ <h2>A comprehensive example</h2>
428372

429373
$( '.js-slider' ).slick();
430374

375+
$('[data-bully]').bully();
376+
431377
$( window ).on( 'load', function() {
432378
new GMaps({
433379
div: '#map',

‎jquery.bully.js

+48-21
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
11
/*!
2-
* jQuery Bully Plugin v0.1.0
2+
* jQuery Bully Plugin v0.1.1
33
* Examples and documentation at http://pixelgrade.github.io/rellax/
44
* Copyright (c) 2016 PixelGrade http://www.pixelgrade.com
55
* Licensed under MIT http://www.opensource.org/licenses/mit-license.php/
66
*/
77
;(function ($, window, document, undefined) {
88

99
var $window = $(window),
10-
windowWidth = $window.width(),
1110
windowHeight = $window.height(),
12-
elements = new Array(),
11+
elements = [],
1312
$bully,
14-
bullyOffset,
1513
lastKnownScrollY,
1614
current = 0,
1715
inversed = false;
1816

1917
$bully = $( '<div class="c-bully">' ).appendTo( 'body' );
20-
bullyOffset = $bully.offset();
2118
$current = $( '<div class="c-bully__bullet c-bully__bullet--active">' ).appendTo( $bully );
2219

2320
(function update() {
@@ -41,7 +38,11 @@
4138
}
4239

4340
if ( count !== current ) {
44-
var offset = $bully.children( '.c-bully__bullet' ).first().outerHeight( true ) * ( count - 1 );
41+
var offset = $bully.children( '.c-bully__bullet' ).not('.c-bully__bullet--active').first().outerHeight( true ) * ( count - 1 );
42+
$current.removeClass( 'c-bully__bullet--squash' );
43+
setTimeout(function() {
44+
$current.addClass( 'c-bully__bullet--squash' );
45+
});
4546
$current.css( 'top', offset );
4647
current = count;
4748
}
@@ -55,11 +56,30 @@
5556
});
5657
}
5758

58-
$window.on('load scroll', function(e) {
59-
lastKnownScrollY = $(e.target).scrollTop();
59+
function staggerClass($elements, classname, timeout) {
60+
61+
$.each($elements, function(i, obj) {
62+
63+
var stagger = i * timeout;
64+
65+
setTimeout(function () {
66+
obj.$bullet.addClass(classname);
67+
}, stagger);
68+
});
69+
}
70+
71+
$window.on('load', function(e) {
72+
staggerClass(elements, 'c-bully__bullet--pop', 400);
6073
});
6174

62-
$window.on('load resize', reloadAll);
75+
$window.on('load resize scroll', function(e) {
76+
lastKnownScrollY = window.scrollY;
77+
});
78+
79+
$window.on('load resize', function() {
80+
lastKnownScrollY = window.scrollY;
81+
reloadAll();
82+
});
6383

6484
function Bully(element, options) {
6585
this.element = element;
@@ -76,10 +96,12 @@
7696
self.onClick();
7797
});
7898

99+
this.$bullet = $bullet;
100+
79101
self._reloadElement();
80102
elements.push(self);
81103
current = 0;
82-
}
104+
};
83105

84106
Bully.prototype = {
85107
constructor: Bully,
@@ -89,30 +111,35 @@
89111
},
90112
onClick: function() {
91113

92-
var self = this;
114+
var self = this,
115+
$target = $( 'html, body' );
93116

94117
if ( self.options.scrollDuration == 0 ) {
95-
$( 'html, body' ).scrollTop( self.offset.top );
118+
$target.scrollTop( self.offset.top );
119+
return;
96120
}
97121

98-
$( 'html, body' ).animate({
99-
scrollTop: self.offset.top
100-
}, self.options.scrollDuration );
122+
if ( self.options.scrollDuration === 'auto' ) {
123+
var duration = Math.abs(window.scrollY - self.offset.top) / (self.options.scrollPerSecond / 1000);
124+
$target.animate({ scrollTop: self.offset.top }, duration);
125+
return;
126+
}
127+
128+
$target.animate({ scrollTop: self.offset.top }, self.options.scrollDuration );
101129
}
102-
}
130+
};
103131

104132
$.fn.bully = function ( options ) {
105133
return this.each(function () {
106134
if ( ! $.data(this, "plugin_" + Bully) ) {
107135
$.data(this, "plugin_" + Bully, new Bully( this, options ));
108136
}
109137
});
110-
}
138+
};
111139

112140
$.fn.bully.defaults = {
113-
scrollDuration: 600
141+
scrollDuration: 'auto',
142+
scrollPerSecond: 4000
114143
};
115144

116-
$('[data-bully]').bully();
117-
118-
})( jQuery, window, document );
145+
})( jQuery, window, document );

0 commit comments

Comments
 (0)