Update with prensa and other gadgets

script.js

@@ -1,3 +1,120 @@
+let facesLoop;
+let facesLoopReversed;
+
+
+
+function playAnimation() {
+  if(facesLoop) {
+    facesLoop.restart();
+    facesLoopReversed.restart();
+  }
+  // console.log("start animation");
+  // const wrapper = document.querySelector(".caritas-wrapper");
+  // const colors = ["#f38630","#6fb936", "#ccc", "#6fb936"];
+  const boxes = gsap.utils.toArray(".carita");
+  const boxesReversed = gsap.utils.toArray(".carita-reversed");
+
+  gsap.set(boxes , {
+    // backgroundColor: gsap.utils.wrap(colors)
+  });
+
+  facesLoop = horizontalLoop(boxes, {
+    paused: false,
+    repeat: -1,
+    speed: 1.25
+  });
+
+  facesLoopReversed = horizontalLoop(boxesReversed, {
+    paused: false,
+    repeat: -1,
+    speed: 1.25,
+    reversed: true
+  });
+}
+
+function stopAnimation() {
+  if(facesLoop) {
+    facesLoop.pause();
+    facesLoopReversed.pause();
+  }
+  // console.log("stop animation");
+}
+
+
+/*
+This helper function makes a group of elements animate along the x-axis in a seamless, responsive loop.
+
+Features:
+ - Uses xPercent so that even if the widths change (like if the window gets resized), it should still work in most cases.
+ - When each item animates to the left or right enough, it will loop back to the other side
+ - Optionally pass in a config object with values like "speed" (default: 1, which travels at roughly 100 pixels per second), paused (boolean),  repeat, reversed, and paddingRight.
+ - The returned timeline will have the following methods added to it:
+   - next() - animates to the next element using a timeline.tweenTo() which it returns. You can pass in a vars object to control duration, easing, etc.
+   - previous() - animates to the previous element using a timeline.tweenTo() which it returns. You can pass in a vars object to control duration, easing, etc.
+   - toIndex() - pass in a zero-based index value of the element that it should animate to, and optionally pass in a vars object to control duration, easing, etc. Always goes in the shortest direction
+   - current() - returns the current index (if an animation is in-progress, it reflects the final index)
+   - times - an Array of the times on the timeline where each element hits the "starting" spot. There's also a label added accordingly, so "label1" is when the 2nd element reaches the start.
+ */
+function horizontalLoop(items, config) {
+  items = gsap.utils.toArray(items);
+  config = config || {};
+  let tl = gsap.timeline({repeat: config.repeat, paused: config.paused, defaults: {ease: "none"}, onReverseComplete: () => tl.totalTime(tl.rawTime() + tl.duration() * 100)}),
+    length = items.length,
+    startX = items[0].offsetLeft,
+    times = [],
+    widths = [],
+    xPercents = [],
+    curIndex = 0,
+    pixelsPerSecond = (config.speed || 1) * 100,
+    snap = config.snap === false ? v => v : gsap.utils.snap(config.snap || 1), // some browsers shift by a pixel to accommodate flex layouts, so for example if width is 20% the first element's width might be 242px, and the next 243px, alternating back and forth. So we snap to 5 percentage points to make things look more natural
+    totalWidth, curX, distanceToStart, distanceToLoop, item, i;
+  gsap.set(items, { // convert "x" to "xPercent" to make things responsive, and populate the widths/xPercents Arrays to make lookups faster.
+    xPercent: (i, el) => {
+      let w = widths[i] = parseFloat(gsap.getProperty(el, "width", "px"));
+      xPercents[i] = snap(parseFloat(gsap.getProperty(el, "x", "px")) / w * 100 + gsap.getProperty(el, "xPercent"));
+      return xPercents[i];
+    }
+  });
+  gsap.set(items, {x: 0});
+  totalWidth = items[length-1].offsetLeft + xPercents[length-1] / 100 * widths[length-1] - startX + items[length-1].offsetWidth * gsap.getProperty(items[length-1], "scaleX") + (parseFloat(config.paddingRight) || 0);
+  for (i = 0; i < length; i++) {
+    item = items[i];
+    curX = xPercents[i] / 100 * widths[i];
+    distanceToStart = item.offsetLeft + curX - startX;
+    distanceToLoop = distanceToStart + widths[i] * gsap.getProperty(item, "scaleX");
+    tl.to(item, {xPercent: snap((curX - distanceToLoop) / widths[i] * 100), duration: distanceToLoop / pixelsPerSecond}, 0)
+      .fromTo(item, {xPercent: snap((curX - distanceToLoop + totalWidth) / widths[i] * 100)}, {xPercent: xPercents[i], duration: (curX - distanceToLoop + totalWidth - curX) / pixelsPerSecond, immediateRender: false}, distanceToLoop / pixelsPerSecond)
+      .add("label" + i, distanceToStart / pixelsPerSecond);
+    times[i] = distanceToStart / pixelsPerSecond;
+  }
+  function toIndex(index, vars) {
+    vars = vars || {};
+    (Math.abs(index - curIndex) > length / 2) && (index += index > curIndex ? -length : length); // always go in the shortest direction
+    let newIndex = gsap.utils.wrap(0, length, index),
+      time = times[newIndex];
+    if (time > tl.time() !== index > curIndex) { // if we're wrapping the timeline's playhead, make the proper adjustments
+      vars.modifiers = {time: gsap.utils.wrap(0, tl.duration())};
+      time += tl.duration() * (index > curIndex ? 1 : -1);
+    }
+    curIndex = newIndex;
+    vars.overwrite = true;
+    return tl.tweenTo(time, vars);
+  }
+  tl.next = vars => toIndex(curIndex+1, vars);
+  tl.previous = vars => toIndex(curIndex-1, vars);
+  tl.current = () => curIndex;
+  tl.toIndex = (index, vars) => toIndex(index, vars);
+  tl.times = times;
+  tl.progress(1, true).progress(0, true); // pre-render for performance
+  if (config.reversed) {
+    tl.vars.onReverseComplete();
+    tl.reverse();
+  }
+  return tl;
+}
+
+
+
 $(document).ready(function() {
 
   // Check for click events on the navbar burger icon
@@ -23,11 +140,31 @@ $(document).ready(function() {
       scrollTop: $(section).offset().top - ($(".navbar").height() + 20)
     }, 1000);
   });
-});
 
-// // make an animation that when I hover over a class "face" the image gets larger
-// $(".face").hover(function() {
-//   $(this).addClass("is-large");
-// }, function() {
-//   $(this).removeClass("is-large");
-// });
+  $('.news-grid').masonry({
+    // options
+    percentPosition: true,
+    columnWidth: '.grid-sizer',
+    itemSelector: '.grid-item',
+    // gutter: 10
+  });
+
+  function checkWindowSize() {
+    if ($(window).width() <= 1023) {
+      // console.log("window is less than 1024px");
+        playAnimation();
+    } else {
+      // console.log("window is greater than 1024px");
+        stopAnimation();
+    }
+}
+
+  // Initial check
+  checkWindowSize();
+
+  // Watch for resize events
+  $(window).resize(function() {
+      // console.log("window resized");
+      checkWindowSize();
+  });
+});

style-classes.scss

@@ -6,7 +6,7 @@
   height: 100px;
 }
 
-#campania {
+#home {
   .hero-body {
     background: url('./assets/bg-hero-top.jpg');
     background-size: cover;
@@ -31,11 +31,11 @@
     border-left: 5px solid #FFF;
     padding-left: 10px;
     margin-bottom: 10px;
-    padding-top: 5px
+    padding-top: 5px;
   }
 
   .main-title {
-    font-size: 70px;
+    font-size: 57px;
   }
 
   @include mixins.from($desktop) {
@@ -149,12 +149,12 @@
     .text {
       line-height: 1.3;
       font-size: 18px;
-      text-align: justify;
+      text-align: left;
     }
   }
 }
 
-#caso-desktop {
+#caras-desktop {
   .hero-title {
     position: relative;
 
@@ -250,7 +250,37 @@
   }
 }
 
-#caso-mobile {
+
+.caritas-wrapper {
+  height: 30%;
+  width: 100%;
+  // background: #555;
+  position: relative;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  .carita, .carita-reversed {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // background: green;
+    height: 100%;
+    width: 10%;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    flex-shrink: 0;
+    overflow: hidden;
+    img {
+      height: 100%;
+      max-height: 400px;
+      width: auto;
+      object-fit: cover;
+    }
+  }
+}
+
+#caras-mobile {
   .the-title {
     width: 100%;
   }
@@ -281,33 +311,38 @@
   }
 }
 
-#mascara-desktop {
+#mascaras-desktop {
   position: relative;
 
   @include mixins.until($desktop) {
     display: none;
   }
 
-  img {
+  .left-image {
     width: 50vw;
   }
-
-  .container {
-    position: absolute;
+  .withbg{
+    background-image: url('./assets/mascara.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+  .columns.fullheight {
     height: 100%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    .columns {
-      height: 100%;
+    min-height: 80vh;
 
-      .column {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: flex-start;
-      }
+    .column {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+    }
+  }
+  .face{
+    width: 50px;
+    &:hover {
+      transform: scale(1.35);
+      cursor: pointer;
     }
   }
 
@@ -321,7 +356,7 @@
   }
 }
 
-#mascara-mobile {
+#mascaras-mobile {
 
   @include mixins.from($desktop) {
     display: none;
@@ -339,10 +374,55 @@
     font-size: 20px;
     line-height: 1.5;
   }
+
+  .face{
+    width: 50px;
+    &:hover {
+      transform: scale(1.35);
+      cursor: pointer;
+    }
+  }
 }
 
 
-#contacto {}
+#prensa {
+  .title-segment {
+    font-size: 75px;
+  }
+  .logo-prensa {
+    background-color: #FFF;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    img {
+      width: 80px;
+    }
+  }
+  .news-grid{
+    margin: 0 auto;
+  }
+  .grid-item {
+    width: 33%;
+    @include mixins.until($desktop) {
+      width: 100%;
+    }
+    padding: 0 5px;
+  }
+  .grid-sizer{
+    width: 33%;
+    @include mixins.until($desktop) {
+      width: 100%;
+    }
+
+  }
+  .box{
+    margin-bottom: 15px;
+    p {
+      color: #FFF;
+    }
+  }
+}
 
 .footer {
   background-color: #FF0000;