/*========= Первичная загрузка окна ======================================*/
window.onload=function(){
fResize();
};
/*========= При уменьшении размера окна Меню заменяется кнопкой ==========*/
window.onresize=function(){
fResize();
fScroll();
};
function fResize() {
if (window.innerWidth<722){
document.getElementById('idivNavigation').innerHTML = '<i class="fa fa-bars fa-2x naviButton"></i>';
}
else {
document.getElementById('idivNavigation').innerHTML ='<ul class="navMenu">' +
'<li class="navMenuItem"><a href="#Home" id ="idHome" onclick="changeButtonsBackground("idHome")">HOME</a></li>' +
'<li class="navMenuItem"><a href="#About" id ="idAbout" onclick="changeButtonsBackground("idAbout")">ABOUT</a></li>' +
'<li class="navMenuItem"><a href="#Work" id ="idWork" onclick="changeButtonsBackground("idWork")">WORK</a></li>' +
'<li class="navMenuItem"><a href="#Blog" id ="idBlog" onclick="changeButtonsBackground("idBlog")">BLOG</a></li>' +
'<li class="navMenuItem"><a href="#Contact" id ="idContact" onclick="changeButtonsBackground("idContact")">CONTACT</a></li>' +
'</ul>';
}
window.varHome = $('#idivPurpleContainer').offset().top;
window.varAbout = $("#idivGreenContainer").offset().top;
window.varWork = $('#idivWhiteContainer').offset().top;
}
/*========= При клике на пункт Меню он подсвечивается темным Бекграундом =====*/
var itemId;
function changeButtonsBackground(itemId){
document.getElementById('idHome').style.backgroundColor="#8e58a3";
document.getElementById('idAbout').style.backgroundColor="#8e58a3";
document.getElementById('idWork').style.backgroundColor="#8e58a3";
document.getElementById('idBlog').style.backgroundColor="#8e58a3";
document.getElementById('idContact').style.backgroundColor="#8e58a3";
document.getElementById(itemId).style.backgroundColor ="#5f376f";
}
/*========= Плавный Скроллинг до Якоря при клике на пункт Меню ===============*/
/*
$(function($) {
$.localScroll({
duration: 1000,
hash: false });
});
*/
/*========= При Скроллинге подсвечиваеются текущие пункты Меню ===============*/
window.onscroll=function() {
fScroll();
};
function fScroll() {
var vScrollPosition;
vScrollPosition = $(window).scrollTop() + 200; // Добавляем 200 пикселей
if (vScrollPosition < window.varAbout) {
document.getElementById('idHome').style.backgroundColor = "#5f376f";
document.getElementById('idAbout').style.backgroundColor = "#8e58a3";
document.getElementById('idWork').style.backgroundColor = "#8e58a3";
document.getElementById('idBlog').style.backgroundColor = "#8e58a3";
document.getElementById('idContact').style.backgroundColor = "#8e58a3";
}
else if (vScrollPosition > window.varAbout && vScrollPosition < window.varWork) {
document.getElementById('idHome').style.backgroundColor = "#8e58a3";
document.getElementById('idAbout').style.backgroundColor = "#5f376f";
document.getElementById('idWork').style.backgroundColor = "#8e58a3";
document.getElementById('idBlog').style.backgroundColor = "#8e58a3";
document.getElementById('idContact').style.backgroundColor = "#8e58a3";
}
else if (vScrollPosition > window.varWork) {
document.getElementById('idHome').style.backgroundColor = "#8e58a3";
document.getElementById('idAbout').style.backgroundColor = "#8e58a3";
document.getElementById('idWork').style.backgroundColor = "#5f376f";
document.getElementById('idBlog').style.backgroundColor = "#8e58a3";
document.getElementById('idContact').style.backgroundColor = "#8e58a3";
}
}$('.navMenuItem').click(function(event) {
//Код анимированного перехода, можно даже без плугинов сделать
$('.navMenuItem').removeClass('navMenuItem_active');
$(this).addClass('navMenuItem_active');
});.navMenuItem_active {
background-color: #8e58a3;
}var gulp = require('gulp'),
stylus = require('gulp-stylus'),
nib = require('nib');
gulp.task('stylus', function() {
gulp.src(['./source/css/**/*.styl', '!./source/css/lib/**/*.styl', '!./source/**/_*.styl'])
.pipe(stylus({
use: [nib()]
}))
.on('error', handleError)
.pipe(gulp.dest('./public/css/'))
});(function($, undefined) {
$.widget("ui.pfCatEffects", {
options: {},
_init: function() {
this.$this = this.element;
this.$childs = this.$this.find('li');
this._cling([440, 500], [440, 500], "marginLeft", "marginTop");
},
_cling: function(d, c, a, b) {
this.$childs.find('img').each(function(j, e) {
var x = $(e),
u = 0,
m = 0,
s = 0,
q = 0,
g = a || "left",
o = b || "top",
f = parseInt(x.css(g)),
v = parseInt(x.css(o)),
p = false,
n, k, r = function(i, h) {
return i > 0 ? Math.pow(i, h) : -Math.pow(-i, h)
};
x.hover(function(h) {
if (typeof h.offsetX === "undefined" || typeof h.offsetY === "undefined") {
var t = $(h.target).offset();
h.offsetX = h.pageX - t.left;
h.offsetY = h.pageY - t.top;
}
clearTimeout(n);
clearTimeout(k);
x.stop(0, 1);
n = setTimeout(function() {
p = true
}, 10);
u = x.width() / 2;
m = x.height() / 2;
s = h.pageX - (h.offsetX || h.layerX) + u;
q = h.pageY - (h.offsetY || h.layerY) + m;
kw = d ? (d[0] - u) / d[1] : 0.2;
kh = c ? (c[0] - m) / c[1] : 0.2
}, function() {
clearTimeout(n);
clearTimeout(k);
k = setTimeout(function() {
p = false;
var h = {};
h[g] = [f, "easeOutElastic"];
h[o] = [v, "easeOutElastic"];
x.animate(h, 1000)
}, 100)
}).mousemove(function(i) {
if (p) {
var h = {};
h[g] = f + r(i.pageX - s, kw);
h[o] = v + r(i.pageY - q, kh);
x.css(h)
}
return false
})
})
}
});
})(jQuery);;$('.ny .content-menu').pfCatEffects();