Template:BOKU-Vienna/JavaScript/Main

<script type="text/javascript"> (function($) {

   $.fn.visible = function() {

       var $t            = $(this),
           $w            = $(window),
           windowHeight  = window.innerHeight,
           windowTop     = $w.scrollTop(),
           windowBottom  = windowTop + windowHeight,
           _height       = $t.outerHeight(),
           _top          = $t.offset().top,
           _bottom       = _top + _height;

       return ((_bottom >= windowTop) && (_top <= windowBottom));
   };

})(jQuery);

$(document).ready(function () {

   $(window).on("scroll", function () {
       if ($(window).scrollTop() >= 100 && !$(".navbar").hasClass("fixed")) {
           $(".navbar").addClass("fixed").addClass("fixed-top").animate({
               top: 0,
               opacity: 1
           }, 1000);

       } else if ($(window).scrollTop() <= 50) {
           $(".navbar").css("top", "").removeClass("fixed").removeClass("fixed-top");
       }
   });
   
   //on or scroll, detect elements in view
   $(window).on('scroll resize', function() {
       $('.fly-in').each(function (i, val) {
           if($(val).visible()){
               $(val).addClass("come-in");
           }
       })
   });
   //trigger our scroll event on initial load
   $(window).trigger('scroll');

});

let widthPol = 1920,

   heightPol = 100;

const headerPoly = [

   {"x": 0, "y": 100},
   {"x": widthPol, "y": 100},
   {"x": widthPol, "y": 0},
   {"x": 0, "y": 50},
   {"x": 0, "y": 100},

];

let widthImgOverlay = 1920,

   heightImgOverlay = 100;

const imagePolyTop = [

   {"x": 0, "y": 100},
   {"x": widthImgOverlay, "y": 50},
   {"x": widthImgOverlay, "y": 0},
   {"x": 0, "y": 0},
   {"x": 0, "y": 100},

];

const imagePolyBottom = [

   {"x": 0, "y": 100},
   {"x": widthImgOverlay, "y": 100},
   {"x": widthImgOverlay, "y": 0},
   {"x": 0, "y": 50},
   {"x": 0, "y": 100},

];

let imgHeaderHolder = d3.select("#bottom-landing-overlay").select('#landing-svg')

   .attr("width", widthPol)
   .attr("height", heightPol);

let imgBottomHolder = d3.select("body").selectAll(".svg-image-overlay-bottom")

   .attr("width", widthImgOverlay)
   .attr("height", heightImgOverlay);

let imgTopHolder = d3.select("body").selectAll(".svg-image-overlay-top")

   .attr("width", widthImgOverlay)
   .attr("height", heightImgOverlay);

createPolygon(headerPoly, widthPol, heightPol, imgHeaderHolder); createPolygon(imagePolyBottom, widthImgOverlay, heightImgOverlay, imgBottomHolder); createPolygon(imagePolyTop, widthImgOverlay, heightImgOverlay, imgTopHolder);

function createPolygon(polygon, width, height, vis) {

   let svg = vis.selectAll("path").data([polygon]);

   svg.exit().remove();

   let lineFunction = d3.line()
       .x(function(d) {return d.x})
       .y(function(d) {return d.y});

   svg.enter().append("path")
       .attr("d", lineFunction(polygon))
       .attr("fill", "#fff");

</script>