Add logo easter egg (#12)
Merge branch 'main' into feature/add-logo-easter-egg Add logo easter egg Co-authored-by: Etzelia <etzelia@hotmail.com> Co-authored-by: Kevin Belisle <kev.belisle@gmail.com> Reviewed-on: https://git.etztech.xyz/BirbMC/birbmc.com/pulls/12 Reviewed-by: Etzelia <etzelia@hotmail.com>pull/1/head
klutz
Etzelia
parent
edcd382cf6
commit
c27ae28a20
|
|
@ -11,113 +11,118 @@
|
|||
$main = $('#main');
|
||||
|
||||
// Breakpoints.
|
||||
breakpoints({
|
||||
xlarge: [ '1281px', '1680px' ],
|
||||
large: [ '981px', '1280px' ],
|
||||
medium: [ '737px', '980px' ],
|
||||
small: [ '481px', '736px' ],
|
||||
xsmall: [ '361px', '480px' ],
|
||||
xxsmall: [ null, '360px' ]
|
||||
});
|
||||
breakpoints({
|
||||
xlarge: [ '1281px', '1680px' ],
|
||||
large: [ '981px', '1280px' ],
|
||||
medium: [ '737px', '980px' ],
|
||||
small: [ '481px', '736px' ],
|
||||
xsmall: [ '361px', '480px' ],
|
||||
xxsmall: [ null, '360px' ]
|
||||
});
|
||||
|
||||
// Play initial animations on page load.
|
||||
$window.on('load', function() {
|
||||
window.setTimeout(function() {
|
||||
$body.removeClass('is-preload');
|
||||
}, 100);
|
||||
});
|
||||
$window.on('load', function() {
|
||||
window.setTimeout(function() {
|
||||
$body.removeClass('is-preload');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// Nav.
|
||||
var $nav = $('#nav');
|
||||
var $nav = $('#nav');
|
||||
|
||||
if ($nav.length > 0) {
|
||||
if ($nav.length > 0) {
|
||||
|
||||
// Shrink effect.
|
||||
$main
|
||||
.scrollex({
|
||||
mode: 'top',
|
||||
enter: function() {
|
||||
$nav.addClass('alt');
|
||||
},
|
||||
leave: function() {
|
||||
$nav.removeClass('alt');
|
||||
},
|
||||
});
|
||||
// Shrink effect.
|
||||
$main
|
||||
.scrollex({
|
||||
mode: 'top',
|
||||
enter: function() {
|
||||
$nav.addClass('alt');
|
||||
},
|
||||
leave: function() {
|
||||
$nav.removeClass('alt');
|
||||
},
|
||||
});
|
||||
|
||||
// Links.
|
||||
var $nav_a = $nav.find('a');
|
||||
// Links.
|
||||
var $nav_a = $nav.find('a');
|
||||
|
||||
$nav_a
|
||||
.scrolly({
|
||||
speed: 1000,
|
||||
offset: function() { return $nav.height(); }
|
||||
})
|
||||
.on('click', function() {
|
||||
|
||||
var $this = $(this);
|
||||
|
||||
// External link? Bail.
|
||||
if ($this.attr('href').charAt(0) != '#')
|
||||
return;
|
||||
|
||||
// Deactivate all links.
|
||||
$nav_a
|
||||
.scrolly({
|
||||
speed: 1000,
|
||||
offset: function() { return $nav.height(); }
|
||||
})
|
||||
.on('click', function() {
|
||||
.removeClass('active')
|
||||
.removeClass('active-locked');
|
||||
|
||||
var $this = $(this);
|
||||
// Activate link *and* lock it (so Scrollex doesn't try to activate other links as we're scrolling to this one's section).
|
||||
$this
|
||||
.addClass('active')
|
||||
.addClass('active-locked');
|
||||
|
||||
// External link? Bail.
|
||||
if ($this.attr('href').charAt(0) != '#')
|
||||
return;
|
||||
})
|
||||
.each(function() {
|
||||
|
||||
// Deactivate all links.
|
||||
$nav_a
|
||||
.removeClass('active')
|
||||
.removeClass('active-locked');
|
||||
var $this = $(this),
|
||||
id = $this.attr('href'),
|
||||
$section = $(id);
|
||||
|
||||
// Activate link *and* lock it (so Scrollex doesn't try to activate other links as we're scrolling to this one's section).
|
||||
$this
|
||||
.addClass('active')
|
||||
.addClass('active-locked');
|
||||
// No section for this link? Bail.
|
||||
if ($section.length < 1)
|
||||
return;
|
||||
|
||||
})
|
||||
.each(function() {
|
||||
// Scrollex.
|
||||
$section.scrollex({
|
||||
mode: 'middle',
|
||||
initialize: function() {
|
||||
|
||||
var $this = $(this),
|
||||
id = $this.attr('href'),
|
||||
$section = $(id);
|
||||
// Deactivate section.
|
||||
if (browser.canUse('transition'))
|
||||
$section.addClass('inactive');
|
||||
|
||||
// No section for this link? Bail.
|
||||
if ($section.length < 1)
|
||||
return;
|
||||
},
|
||||
enter: function() {
|
||||
|
||||
// Scrollex.
|
||||
$section.scrollex({
|
||||
mode: 'middle',
|
||||
initialize: function() {
|
||||
// Activate section.
|
||||
$section.removeClass('inactive');
|
||||
|
||||
// Deactivate section.
|
||||
if (browser.canUse('transition'))
|
||||
$section.addClass('inactive');
|
||||
// No locked links? Deactivate all links and activate this section's one.
|
||||
if ($nav_a.filter('.active-locked').length == 0) {
|
||||
|
||||
},
|
||||
enter: function() {
|
||||
$nav_a.removeClass('active');
|
||||
$this.addClass('active');
|
||||
|
||||
// Activate section.
|
||||
$section.removeClass('inactive');
|
||||
}
|
||||
|
||||
// No locked links? Deactivate all links and activate this section's one.
|
||||
if ($nav_a.filter('.active-locked').length == 0) {
|
||||
// Otherwise, if this section's link is the one that's locked, unlock it.
|
||||
else if ($this.hasClass('active-locked'))
|
||||
$this.removeClass('active-locked');
|
||||
|
||||
$nav_a.removeClass('active');
|
||||
$this.addClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// Otherwise, if this section's link is the one that's locked, unlock it.
|
||||
else if ($this.hasClass('active-locked'))
|
||||
$this.removeClass('active-locked');
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Scrolly.
|
||||
$('.scrolly').scrolly({
|
||||
speed: 1000
|
||||
});
|
||||
$('.scrolly').scrolly({
|
||||
speed: 1000
|
||||
});
|
||||
|
||||
// Easter Eggs
|
||||
document.querySelector("span.logo").addEventListener("dblclick", (e) => {
|
||||
e.currentTarget.classList.toggle("rotated");
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -41,6 +41,10 @@
|
|||
display: block;
|
||||
margin: 0 0 (_size(element-margin) * 0.75) 0;
|
||||
|
||||
&.rotated {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
Loading…
Reference in New Issue