151 lines
3.8 KiB
PHP
151 lines
3.8 KiB
PHP
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
|
|
<script>
|
|
/* Credit and Thanks:
|
|
Matrix - Particles.js;
|
|
SliderJS - Ettrics;
|
|
Design - Sara Mazal Web;
|
|
Fonts - Google Fonts
|
|
*/
|
|
|
|
window.onload = function () {
|
|
Particles.init({
|
|
selector: ".background"
|
|
});
|
|
};
|
|
const particles = Particles.init({
|
|
selector: ".background",
|
|
color: ["#03dac6", "#ff0266", "#000000"],
|
|
connectParticles: true,
|
|
responsive: [
|
|
{
|
|
breakpoint: 768,
|
|
options: {
|
|
color: ["#faebd7", "#03dac6", "#ff0266"],
|
|
maxParticles: 43,
|
|
connectParticles: false
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
class NavigationPage {
|
|
constructor() {
|
|
this.currentId = null;
|
|
this.currentTab = null;
|
|
this.tabContainerHeight = 70;
|
|
this.lastScroll = 0;
|
|
let self = this;
|
|
$(".nav-tab").click(function () {
|
|
self.onTabClick(event, $(this));
|
|
});
|
|
$(window).scroll(() => {
|
|
this.onScroll();
|
|
});
|
|
$(window).resize(() => {
|
|
this.onResize();
|
|
});
|
|
}
|
|
|
|
onTabClick(event, element) {
|
|
event.preventDefault();
|
|
let scrollTop =
|
|
$(element.attr("href")).offset().top - this.tabContainerHeight + 1;
|
|
$("html, body").animate({ scrollTop: scrollTop }, 600);
|
|
}
|
|
|
|
onScroll() {
|
|
this.checkHeaderPosition();
|
|
this.findCurrentTabSelector();
|
|
this.lastScroll = $(window).scrollTop();
|
|
}
|
|
|
|
onResize() {
|
|
if (this.currentId) {
|
|
this.setSliderCss();
|
|
}
|
|
}
|
|
|
|
checkHeaderPosition() {
|
|
const headerHeight = 75;
|
|
if ($(window).scrollTop() > headerHeight) {
|
|
$(".nav-container").addClass("nav-container--scrolled");
|
|
} else {
|
|
$(".nav-container").removeClass("nav-container--scrolled");
|
|
}
|
|
let offset =
|
|
$(".nav").offset().top +
|
|
$(".nav").height() -
|
|
this.tabContainerHeight -
|
|
headerHeight;
|
|
if (
|
|
$(window).scrollTop() > this.lastScroll &&
|
|
$(window).scrollTop() > offset
|
|
) {
|
|
$(".nav-container").addClass("nav-container--move-up");
|
|
$(".nav-container").removeClass("nav-container--top-first");
|
|
$(".nav-container").addClass("nav-container--top-second");
|
|
} else if (
|
|
$(window).scrollTop() < this.lastScroll &&
|
|
$(window).scrollTop() > offset
|
|
) {
|
|
$(".nav-container").removeClass("nav-container--move-up");
|
|
$(".nav-container").removeClass("nav-container--top-second");
|
|
$(".nav-container-container").addClass("nav-container--top-first");
|
|
} else {
|
|
$(".nav-container").removeClass("nav-container--move-up");
|
|
$(".nav-container").removeClass("nav-container--top-first");
|
|
$(".nav-container").removeClass("nav-container--top-second");
|
|
}
|
|
}
|
|
|
|
findCurrentTabSelector(element) {
|
|
let newCurrentId;
|
|
let newCurrentTab;
|
|
let self = this;
|
|
$(".nav-tab").each(function () {
|
|
let id = $(this).attr("href");
|
|
let offsetTop = $(id).offset().top - self.tabContainerHeight;
|
|
let offsetBottom =
|
|
$(id).offset().top + $(id).height() - self.tabContainerHeight;
|
|
if (
|
|
$(window).scrollTop() > offsetTop &&
|
|
$(window).scrollTop() < offsetBottom
|
|
) {
|
|
newCurrentId = id;
|
|
newCurrentTab = $(this);
|
|
}
|
|
});
|
|
if (this.currentId != newCurrentId || this.currentId === null) {
|
|
this.currentId = newCurrentId;
|
|
this.currentTab = newCurrentTab;
|
|
this.setSliderCss();
|
|
}
|
|
}
|
|
|
|
setSliderCss() {
|
|
let width = 0;
|
|
let left = 0;
|
|
if (this.currentTab) {
|
|
width = this.currentTab.css("width");
|
|
left = this.currentTab.offset().left;
|
|
}
|
|
$(".nav-tab-slider").css("width", width);
|
|
$(".nav-tab-slider").css("left", left);
|
|
}
|
|
}
|
|
|
|
new NavigationPage();
|
|
/* Credit and Thanks:
|
|
Matrix - Particles.js;
|
|
SliderJS - Ettrics;
|
|
Design - Sara Mazal Web;
|
|
Fonts - Google Fonts
|
|
*/
|
|
</script>
|
|
<script>
|
|
$('.txt').html(function(i, html) {
|
|
var chars = $.trim(html).split("");
|
|
|
|
return '<h1>' + chars.join('</h1><h1>') + '</h1>';
|
|
});
|
|
</script> |