https://modem.work/assets/js/home.js

1$(document).ready(function() {
2  if ($(".header").length) {
3    var maxLogoTop = 250;
4    var $mainLogoImg = $(".main-logo img");
5    var $header = $(".header");
6    var $headerHeight = $header.height();
7    var maxLogoWidth = $mainLogoImg.width();
8    // var maxImgMarginLeft = parseInt($(".main-logo img").css("margin-left"));
9    var $window = $(window);
10
11    var minLogoTop = 0;
12    var minLogoWidth = 145;
13    var minImgMarginLeft = 0;
14
15    function logosize() {
16      var scrollPosition = $window.scrollTop();
17      var scrollPercent = 1 - Math.min(scrollPosition / 300, 1);
18
19      var logoTop = minLogoTop + (maxLogoTop - minLogoTop) * scrollPercent;
20      var logoWidth =
21        minLogoWidth + (maxLogoWidth - minLogoWidth) * scrollPercent;
22
23      $mainLogoImg.css({ width: logoWidth + "px" });
24      $(".logo-container").css({ top: logoTop + "px" });
25
26      if (scrollPercent > 0) {
27        $header.removeClass("logo-lock");
28      } else {
29        $header.addClass("logo-lock");
30      }
31      if ($(".showcase-link").length > 0) {
32        $(".showcase-item").addClass("extra-height");
33      }
34
35    }
36
37    $window.on("scroll", function() {
38      if ($window.width() > 800) {
39        var scrollPosition = $window.scrollTop();
40        var scrollPercent = 1 - Math.min(scrollPosition / 300, 1);
41
42        var headerHeight =
43          $headerHeight / 2 + ($headerHeight / 2) * scrollPercent;
44
45        $header.css({ height: headerHeight + "px" });
46      }
47
48      logosize();
49    });
50
51    $window.on("load", function() {
52      setTimeout(function() {
53        logosize();
54      });
55    });
56
57    $window.on("resize", function() {
58      logosize();
59    });
60  }
61
62  function resizeGridItem(item) {
63    var grid = document.querySelector(".grid-layout");
64    var rowHeight = parseInt(
65      window.getComputedStyle(grid).getPropertyValue("grid-auto-rows")
66    );
67    var rowGap = parseInt(
68      window.getComputedStyle(grid).getPropertyValue("grid-row-gap")
69    );
70    var rowSpan = Math.ceil(
71      (item.querySelector(".content").getBoundingClientRect().height + rowGap) /
72        (rowHeight + rowGap)
73    );
74    item.style.gridRowEnd = "span " + rowSpan;
75  }
76
77  function resizeAllGridItems() {
78    var allItems = document.querySelectorAll(".showcase-item");
79    for (var x = 0; x < allItems.length; x++) {
80      resizeGridItem(allItems[x]);
81    }
82  }
83
84  window.ModemResizeAllGridItems = resizeAllGridItems;
85
86  $(window).load(function() {
87    document.querySelector(".grid-layout").classList.add("resized");
88    resizeAllGridItems();
89  });
90  $(window).on("resize", function() {
91    resizeAllGridItems();
92  });
93});