Skip to content

Commit 972f386

Browse files
razwanrazwan
committed
Add bully jQuery plugin for bullet navigation
1 parent 3ea4dea commit 972f386

File tree

3 files changed

+160
-6
lines changed

3 files changed

+160
-6
lines changed

‎index.html

+41-4
Original file line numberDiff line numberDiff line change
@@ -173,11 +173,47 @@
173173
opacity: 1;
174174
}
175175

176+
.c-bully {
177+
position: fixed;
178+
top: 50%;
179+
right: 2rem;
180+
181+
margin-bottom: 0.5em;
182+
183+
font-size: 14px;
184+
185+
transform: translate(0, -50%);
186+
}
187+
188+
.c-bully--inversed {
189+
color: white;
190+
}
191+
192+
.c-bully__bullet {
193+
width: 1em;
194+
height: 1em;
195+
margin-top: 0.5em;
196+
197+
border: 2px solid currentColor;
198+
border-radius: 50%;
199+
cursor: pointer;
200+
}
201+
202+
.c-bully__bullet--active {
203+
position: absolute;
204+
top: 0;
205+
left: 0;
206+
207+
background: currentColor;
208+
209+
transition: top .15s ease-in-out;
210+
}
211+
176212
</style>
177213
</head>
178214
<body>
179215
<script type="text/javascript">document.getElementsByTagName('body')[0].className ='js'</script>
180-
<header>
216+
<header data-bully>
181217
<div data-rellax data-rellax-container>
182218
<img class="fill" data-rellax src="assets/photo3.jpeg" alt="">
183219
</div>
@@ -197,7 +233,7 @@ <h2>What is it?</h2>
197233
<p>It is pretty much markup-agnostic to say so and it covers most of the cases we have encountered in our experiences in developing parallax websites. That being said, you can use it with images, sliders and even videos.</p>
198234
</div>
199235
</section>
200-
<header>
236+
<header data-bully>
201237
<div data-rellax data-rellax-container>
202238
<video class="fill" data-rellax autoplay loop muted>
203239
<source src="assets/video.mp4" type="video/mp4">
@@ -284,13 +320,13 @@ <h2>A comprehensive example</h2>
284320
&lt;/script&gt;</code></pre>
285321
</div>
286322
</section>
287-
<header>
323+
<header data-bully>
288324
<div class="rellax" data-rellax-container>
289325
<img class="rellax fill" src="assets/photo1.jpeg" alt="">
290326
</div>
291327
<div class="header-content-wrap"></div>
292328
</header>
293-
<header>
329+
<header data-bully>
294330
<div class="rellax-fixed rellax-wrapper">
295331
<img class="rellax-fixed fill" src="assets/photo2.jpeg" alt="">
296332
</div>
@@ -299,6 +335,7 @@ <h2>A comprehensive example</h2>
299335
</header>
300336
<script src="assets/js/prism.js"></script>
301337
<script src="jquery.rellax.js"></script>
338+
<script src="jquery.bully.js"></script>
302339
<script>
303340
// overwrite default amount value for all elements
304341
$.fn.rellax.defaults.amount = 0.75;

‎jquery.bully.js

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
/*!
2+
* jQuery Bully Plugin v0.1.0
3+
* Examples and documentation at http://pixelgrade.github.io/rellax/
4+
* Copyright (c) 2016 PixelGrade http://www.pixelgrade.com
5+
* Licensed under MIT http://www.opensource.org/licenses/mit-license.php/
6+
*/
7+
;(function ($, window, document, undefined) {
8+
9+
var $window = $(window),
10+
windowWidth = $window.width(),
11+
windowHeight = $window.height(),
12+
elements = new Array(),
13+
$bully,
14+
bullyOffset,
15+
lastKnownScrollY,
16+
current = 0,
17+
inversed = false;
18+
19+
$bully = $( '<div class="c-bully">' ).appendTo( 'body' );
20+
bullyOffset = $bully.offset();
21+
$current = $( '<div class="c-bully__bullet c-bully__bullet--active">' ).appendTo( $bully );
22+
23+
(function update() {
24+
var count = 0,
25+
inverse = false;
26+
27+
$.each(elements, function(i, element) {
28+
if ( lastKnownScrollY >= element.offset.top - windowHeight / 2 ) {
29+
count = count + 1;
30+
inverse = true;
31+
32+
if ( lastKnownScrollY >= element.offset.top + element.height - windowHeight / 2 ) {
33+
inverse = false;
34+
}
35+
}
36+
});
37+
38+
if ( inversed !== inverse ) {
39+
inversed = inverse;
40+
$bully.toggleClass( 'c-bully--inversed', inversed );
41+
}
42+
43+
if ( count !== current ) {
44+
var offset = $bully.children( '.c-bully__bullet' ).first().outerHeight( true ) * ( count - 1 );
45+
$current.css( 'top', offset );
46+
current = count;
47+
}
48+
49+
window.requestAnimationFrame(update);
50+
})();
51+
52+
function reloadAll() {
53+
$.each(elements, function(i, element) {
54+
element._reloadElement();
55+
});
56+
}
57+
58+
$window.on('load scroll', function(e) {
59+
lastKnownScrollY = $(e.target).scrollTop();
60+
});
61+
62+
$window.on('load resize', reloadAll);
63+
64+
function Bully(element, options) {
65+
this.element = element;
66+
this.options = $.extend({}, $.fn.bully.defaults, options);
67+
68+
var self = this,
69+
$bullet = $( '<div class="c-bully__bullet">' );
70+
71+
$bullet.data( 'bully-data', self ).appendTo( $bully );
72+
$bullet.on( 'click', function( event ) {
73+
event.preventDefault();
74+
event.stopPropagation();
75+
76+
self.onClick();
77+
});
78+
79+
self._reloadElement();
80+
elements.push(self);
81+
current = 0;
82+
}
83+
84+
Bully.prototype = {
85+
constructor: Bully,
86+
_reloadElement: function() {
87+
this.offset = $(this.element).offset();
88+
this.height = $(this.element).outerHeight();
89+
},
90+
onClick: function() {
91+
92+
var self = this;
93+
94+
if ( self.options.scrollDuration == 0 ) {
95+
$( 'html, body' ).scrollTop( self.offset.top );
96+
}
97+
98+
$( 'html, body' ).animate({
99+
scrollTop: self.offset.top
100+
}, self.options.scrollDuration );
101+
}
102+
}
103+
104+
$.fn.bully = function ( options ) {
105+
return this.each(function () {
106+
if ( ! $.data(this, "plugin_" + Bully) ) {
107+
$.data(this, "plugin_" + Bully, new Bully( this, options ));
108+
}
109+
});
110+
}
111+
112+
$.fn.bully.defaults = {
113+
scrollDuration: 600
114+
};
115+
116+
$('[data-bully]').bully();
117+
118+
})( jQuery, window, document );

‎jquery.rellax.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,9 @@
1111
var $window = $(window),
1212
windowWidth = $window.width(),
1313
windowHeight = $window.height(),
14+
elements = new Array(),
1415
lastKnownScrollY;
1516

16-
var elements = new Array();
17-
1817
(function updateAll() {
1918
$.each(elements, function(i, element) {
2019
element._updatePosition();

0 commit comments

Comments
 (0)