|
|
| Line 318: |
Line 318: |
| | </script> | | </script> |
| | | | |
| − | <script>
| |
| − | /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
| |
| − | particlesJS.load('particles-js', 'assets/particles.json', function() {
| |
| − | console.log('callback - particles.js config loaded');
| |
| − | });
| |
| − | </script>
| |
| | | | |
| − | $(document).ready(function() {
| |
| − | // mobile
| |
| − | var mobile = false;
| |
| − | var burger = $(".burger");
| |
| − | var header = $("header");
| |
| − | var menu = $(".menu_wrapper");
| |
| − |
| |
| − | const media = window.matchMedia("(max-width: 992px)");
| |
| − | if(media.matches){
| |
| − | burger.show();
| |
| − | mobile = true;
| |
| − | }
| |
| − |
| |
| − | media.addListener(function(e){
| |
| − | if (e.matches) {
| |
| − | burger.show();
| |
| − | mobile = true;
| |
| − | ResetParallax();
| |
| − | $(header).removeClass("shrink");
| |
| − | if(menu.is(":visible")) menu.hide();
| |
| − | } else {
| |
| − | burger.hide();
| |
| − | mobile = false;
| |
| − | if(!menu.is(":visible")) menu.show();
| |
| − | else $('body').css('overflow-y', 'auto');
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | $(window).resize(function(){
| |
| − | if(!mobile){
| |
| − | Update($(document).scrollTop());
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | burger.click(function(){
| |
| − | if(menu.is(":visible")){
| |
| − | menu.hide();
| |
| − | $('body').css('overflow-y', 'auto');
| |
| − | } else {
| |
| − | $('body').css('overflow-y', 'hidden');
| |
| − | menu.show().css("display", "inline-block");
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | // scroll dependent stuff
| |
| − | var btn_scroll = $(".btn_scroll_top");
| |
| − | var btn_scroll_visible = false;
| |
| − | $(btn_scroll).click(function(e){
| |
| − | $('html, body').stop().animate({ scrollTop: 0 }, 500);
| |
| − | e.preventDefault();
| |
| − | });
| |
| − |
| |
| − | var isScrolling = false;
| |
| − | var lastY = $(document).scrollTop();
| |
| − |
| |
| − | $(window).scroll(function() { isScrolling = true; });
| |
| − |
| |
| − | window.requestAnimationFrame(Render);
| |
| − | function Render(){
| |
| − | var y = $(document).scrollTop();
| |
| − | if(lastY != y && isScrolling){
| |
| − | lastY = y;
| |
| − | isScrolling = false;
| |
| − | Update(lastY);
| |
| − | }
| |
| − | window.requestAnimationFrame(Render);
| |
| − | }
| |
| − |
| |
| − | // collapsible elements
| |
| − | $(".collapsible").each(function(i){
| |
| − | var parent = $(this);
| |
| − | var btn = $(this).find(".btn_expand:first");
| |
| − | var content = $(this).find(".content:first");
| |
| − | $(this).prop('collapsed', true);
| |
| − | $(btn).click(function(){
| |
| − | var collapsed = $(parent).prop('collapsed');
| |
| − | if(collapsed){
| |
| − | $(content).addClass("expanded");
| |
| − | $(btn).addClass("btn_expanded");
| |
| − | } else {
| |
| − | $(content).removeClass("expanded");
| |
| − | $(btn).removeClass("btn_expanded");
| |
| − | }
| |
| − | $(parent).prop('collapsed', !collapsed);
| |
| − | });
| |
| − | });
| |
| − |
| |
| − | // skippable elements
| |
| − | $(".skipButton").each(function(i){
| |
| − | $(this).click(function(){
| |
| − | $('html, body').stop().animate({ scrollTop: $("#"+$(this).attr('skipTo')).offset().top - 100 }, 500);
| |
| − | });
| |
| − | });
| |
| − | var skipBar = $(".skipBar");
| |
| − | var skipTargets = [];
| |
| − | var skipEnd = $(".skipEnd");
| |
| − | var lastSkipTarget = null;
| |
| − | //var skipBarWidth = 0;
| |
| − | $(".skipTarget").each(function(i){
| |
| − | var e = $(this);
| |
| − | var btn = document.createElement('div');
| |
| − | btn.className = "btnSkip";
| |
| − | var name = document.createElement('div');
| |
| − | $(name).text($(this).attr('skipName'));
| |
| − | btn.append(name);
| |
| − | skipBar.append(btn);
| |
| − | $(btn).click(function(){
| |
| − | var p = e.parent().parent();
| |
| − | while($(p).hasClass("collapsible")){
| |
| − | var p_btn = $(p).find(".btn_expand:first");
| |
| − | var p_content = $(p).find(".content:first");
| |
| − | var p_collapsed = $(p).prop('collapsed');
| |
| − | if(p_collapsed){
| |
| − | $(p_content).addClass("expanded");
| |
| − | $(p_btn).addClass("btn_expanded");
| |
| − | $(p).prop('collapsed', false);
| |
| − | }
| |
| − | p = $(p).parent().parent();
| |
| − | }
| |
| − |
| |
| − | $('html, body').stop().animate({ scrollTop: e.offset().top - 100 }, 500);
| |
| − | });
| |
| − | $(btn).attr("id", i);
| |
| − | skipTargets.push({element:e,button:$(btn), dist:Number.MAX_VALUE, sType:0});
| |
| − | //var w = $(name).outerWidth();
| |
| − | //if(w > skipBarWidth) skipBarWidth = w;
| |
| − | });
| |
| − | /*var skipBox = $(document.createElement('div'));
| |
| − | skipBox.addClass("skipBox");
| |
| − | skipBox.css({"width":skipBarWidth});
| |
| − | skipBar.prepend(skipBox);
| |
| − | console.log(skipBarWidth);*/
| |
| − | if ($(skipEnd).length > 0) skipTargets.push({element: skipEnd, sType:1});
| |
| − | function getNearestSkipIndex(y){
| |
| − | var index = null;
| |
| − | var distance = Number.MAX_VALUE;
| |
| − | for(var i = 0; i < skipTargets.length; i++){
| |
| − | var e = skipTargets[i];
| |
| − | var v = e.element.position().top - y - (window.innerHeight / 2);
| |
| − | var dist = v;
| |
| − | if(dist < 0) dist *= -1;
| |
| − | if(dist < distance && v < 0){
| |
| − | if(e.sType == 1) return null;
| |
| − | index = i;
| |
| − | distance = dist;
| |
| − | }
| |
| − | }
| |
| − | return index;
| |
| − | }
| |
| − |
| |
| − | // scroll fading elements
| |
| − | var scrollFader = [];
| |
| − | $(".scrollFade").each(function(index){
| |
| − | scrollFader.push({element:$(this), targetClass:$(this).attr('fadeTo'), inside:false});
| |
| − | });
| |
| − |
| |
| − | // parallax elements
| |
| − | var parallaxElements = [];
| |
| − | $(".parallax").each(function(index){
| |
| − | var e = {element:$(this), speed:$(this).attr('speed')};
| |
| − | parallaxElements.push(e);
| |
| − | if(!mobile) e.element.css({"transform":"translateY("+ ((lastY - e.element.offset().top + (window.innerHeight - e.element.outerHeight()) / 2) * e.speed) + "px)"});
| |
| − | });
| |
| − |
| |
| − | // init cutout elements
| |
| − | /*var cutouts = [];
| |
| − |
| |
| − | $(".cutout").each(function(index) {
| |
| − | var cutout = {element:$(this), inside:false, dir:$(this).attr('dir'), aspect:$(this).attr('aspect'), layers:[], offset:$(this).attr('offset')};
| |
| − | $(this).children('.layer').each(function(i) {
| |
| − | $(this).css({'background-image':'url('+'img/layers/'+cutout.dir+'/'+(i)+'.png)'});
| |
| − | cutout.layers.push({element:$(this)});
| |
| − | });
| |
| − | cutout.element.css({"padding-bottom":(cutout.aspect*100)+"%"});
| |
| − | cutouts.push(cutout);
| |
| − | });*/
| |
| − |
| |
| − | // header state
| |
| − | var shrinkHeader = true;
| |
| − |
| |
| − | function ResetParallax(){
| |
| − | /*for(var i = 0; i < cutouts.length; i++){
| |
| − | var cutout = cutouts[i];
| |
| − | cutout.element.find('img').removeClass("select");
| |
| − | for(var j = 0; j < cutout.layers.length-1; j++){
| |
| − | var layer = cutout.layers[j];
| |
| − | layer.element.css({"transform":"unset"});
| |
| − | }
| |
| − | }*/
| |
| − | for(var i = 0; i < parallaxElements.length; i++) parallaxElements[i].element.css({"transform":"none"});
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | Update(lastY);
| |
| − | function Update(y){
| |
| − | var mid = y + window.innerHeight / 2;
| |
| − | // scroll up button
| |
| − | if(lastY > 400){
| |
| − | if(!btn_scroll_visible){
| |
| − | btn_scroll.removeClass('btn_scroll_disabled').addClass('btn_scroll_enabled');
| |
| − | btn_scroll_visible = true;
| |
| − | }
| |
| − | } else {
| |
| − | if(btn_scroll_visible){
| |
| − | btn_scroll.removeClass('btn_scroll_enabled').addClass('btn_scroll_disabled');
| |
| − | btn_scroll_visible = false;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // header shrink
| |
| − | if(y > 300 && !mobile){
| |
| − | if(shrinkHeader){
| |
| − | shrinkHeader = false;
| |
| − | $(header).addClass("shrink");
| |
| − | }
| |
| − | }
| |
| − | else {
| |
| − | shrinkHeader = true;
| |
| − | $(header).removeClass("shrink");
| |
| − | }
| |
| − |
| |
| − | // scoll fade elements
| |
| − | for(var i = 0; i < scrollFader.length; i++){
| |
| − | var e = scrollFader[i];
| |
| − | var pos = $(e.element).position();
| |
| − | if(isVisibleInner(e.element)){
| |
| − | if(!e.inside){
| |
| − | e.element.addClass(e.targetClass);
| |
| − | e.inside = true;
| |
| − | }
| |
| − | } /*else {
| |
| − | if(e.inside){
| |
| − | e.element.removeClass(e.targetClass);
| |
| − | e.inside = false;
| |
| − | }
| |
| − | }*/
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // select nearest skip point
| |
| − | if(skipTargets.length > 0){
| |
| − | var e = getNearestSkipIndex(y);
| |
| − | if(e != lastSkipTarget){
| |
| − | if(e == null){
| |
| − | if(lastSkipTarget != null)$("#"+lastSkipTarget).removeClass("btnSkipActive");
| |
| − | } else {
| |
| − | $("#"+e).addClass("btnSkipActive");
| |
| − | if(lastSkipTarget != null)$("#"+lastSkipTarget).removeClass("btnSkipActive");
| |
| − | }
| |
| − | }
| |
| − | lastSkipTarget = e;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // parallax elements
| |
| − | if(!mobile){
| |
| − | for(var i = 0; i < parallaxElements.length; i++){
| |
| − | var e = parallaxElements[i];
| |
| − | if(isVisible(e.element)) e.element.css({"transform":"translateY("+ ((y - e.element.offset().top + (window.innerHeight - e.element.outerHeight()) / 2) * e.speed) + "px)"});
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // cutout elements
| |
| − | /*for(var i = 0; i < cutouts.length; i++){
| |
| − | var cutout = cutouts[i];
| |
| − | if(isVisible(cutout.element)){
| |
| − | if(!mobile){
| |
| − | for(var j = 0; j < cutout.layers.length-1; j++){
| |
| − | var layer = cutout.layers[j];
| |
| − | var scale = layer.element.outerHeight() / 951.5;
| |
| − | var strength = 1-((j-1) / 5.0);
| |
| − | var _y = ((y+cutout.offset*scale)*0.2) * strength;
| |
| − | layer.element.css({"transform":"translateY("+_y+"px)"});
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }*/
| |
| − | }
| |
| − |
| |
| − |
| |
| − | function isVisible(e){
| |
| − | var etop = e.offset().top;
| |
| − | var ebottom = etop + e.outerHeight();
| |
| − | var vbottom = lastY + $(window).height();
| |
| − | return ebottom > lastY && etop < vbottom;
| |
| − | }
| |
| − |
| |
| − | function isVisibleInner(e){
| |
| − | var etop = e.offset().top;
| |
| − | var ebottom = etop + e.innerHeight();
| |
| − | var vbottom = lastY + $(window).height();
| |
| − | return ebottom > lastY && etop < vbottom;
| |
| − | }
| |
| − |
| |
| − | });
| |
| | | | |
| | </body> | | </body> |
| | </html> | | </html> |
