Components
53
Accordion Items Article Selection Author Info Basic Carousel Basic Hero Basic Map Blog Pull Out Carousel Carousel Contact Content Accordion Content Carousel Content Image Cta Cta Bar Cta Blocks Cta Collage Event Content Events Grid Example Find Firm Firm Search Firms By Town Gated Content Download Guides Carousel Hero History Homepage Hero Image Content Cta Image List Content Industries Job Content Job Listings Local Firm Carousel Our Firms Pages Carousel Partners Partners Slider People Listing Post Carousel Post Feed Pullquote Section Wrap Service List Split Content Stats Tax Guides Team Grid Title Logos Two Column Video Video Carousel Video Old

Cta Collage

Field
Field Type
Field Name
Instructions
Layout
tab
Background Image
image
background_image
Contents
tab
Content
wysiwyg
content
Alignment
radio
alignment
Images
gallery
images
Background Position
select
background_position

				
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-cta-collage {
  position: relative;
  overflow: hidden;

  @include bp($md) {
    min-height: 815px;
  }

  &__content {
    position: relative;
    z-index: 1;
    top: 0;
    height: 100%;
    transform: translateX(-50%);
    left: 50%;
    width: 100%;
    max-width: 820px;
    padding: 160px 16px;
    display: flex;
    flex-direction: column;

    @include bp($md) {
      padding: 260px 80px;
    }

    &--top {
      padding-top: clamp(64px, 8vw, 96px);

      & + .block-cta-collage__images.simple picture {
        &:nth-of-type(1) {
          top: 12px;

          @include bp($md) {
            top: auto;
            bottom: clamp(150px, 20vw, 300px);
          }

          @include bp($xxl) {
            bottom: auto;
            top: clamp(150px, 20vw, 300px);
          }
        }

        &:nth-of-type(2) {
          bottom: clamp(80px, 9vw, 140px);
          top: auto;

          @include bp($xxl) {
            bottom: auto;
            top: 80px;
          }
        }
      }
    }

    &--center {
      justify-content: center;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-bottom: 1.5rem;
    }

    p:not(.overline) {
      @include fluid-type(16, 20, 375, $max-container-size);
    }

    p.overline {
      font-size: rem-calc(16);
    }
  }

  &__images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-repeat: no-repeat;

    &.bg--center {
      background-size: cover;
    }

    &.bg--bottom {
      background-size: contain;
      background-position: bottom;
    }

    picture {
      position: absolute;
      animation-name: fade-in-up;
      animation-fill-mode: forwards;
      animation-play-state: paused;
      animation-duration: 1.5s;
      opacity: 1;
    }

    &.is-animated picture {
      animation-play-state: running;
    }

    &.simple {
      picture {
        &:nth-of-type(1) {
          top: 12px;
          left: 16px;
          width: 80px;
          height: 80px;
          animation-delay: .15s;

          @include bp($md) {
            width: clamp(98px, 12vw, 220px);
            height: clamp(98px, 12vw, 220px);
            top: clamp(150px, 20vw, 300px);
            left: clamp(40px, 8vw, 200px);
          }
        }

        &:nth-of-type(2) {
          top: 80px;
          right: 80px;
          width: 48px;
          height: 48px;
          animation-delay: .3s;

          @include bp($md) {
            width: clamp(98px, 18vw, 340px);
            height: clamp(98px, 18vw, 340px);
          }
        }

        &:nth-of-type(3) {
          bottom: clamp(64px, 8vw, 96px);
          left: 30%;
          width: clamp(85px, 10vw, 112px);
          height: clamp(85px, 10vw, 112px);
          animation-delay: .45s;

          @include bp($md) {
            left: clamp(300px, 35vw, 560px);
          }
        }
      }
    }

    &.complex {
      picture {
        &:nth-of-type(1) {
          top: 200px;
          left: 80px;
          width: clamp(98px, 8vw, 163px);
          height: clamp(98px, 8vw, 163px);
          animation-delay: .15s;
          display: none;

          @include bp($lg) {
            display: block;
          }
        }

        &:nth-of-type(2) {
          top: 8px;
          left: 16px;
          width: 98px;
          height: 98px;
          animation-delay: .15s;

          @include bp($md) {
            top: auto;
            bottom: 97px;
            left: calc(100% - 340px);
            width: clamp(132px, 8vw, 163px);
            height: clamp(132px, 8vw, 163px);
            animation-delay: .3s;
          }

          @include bp($lg) {
            left: calc(100% - 440px);
          }

          @include bp($xl) {
            left: calc(100% - 540px);
          }
        }

        &:nth-of-type(3) {
          top: 80px;
          left: calc(100% - 520px);
          width: 98px;
          height: 98px;
          display: none;
          animation-delay: .45s;

          @include bp($md) {
            display: block;
          }

          @include bp($xl) {
            left: calc(100% - 668px);
          }
        }

        &:nth-of-type(4) {
          bottom: 32px;
          left: calc(50% - 60px);
          width: clamp(120px, 10vw, 220px);
          height: clamp(120px, 10vw, 220px);
          animation-delay: .6s;

          @include bp($md) {
            display: none;
          }

          @include bp($xl) {
            bottom: auto;
            top: calc(65% - 120px);
            left: 210px;
            display: block;
          }
        }

        &:nth-of-type(5) {
          top: 90px;
          right: 60px;
          width: 48px;
          height: 48px;
          animation-delay: .45s;

          @include bp($lg) {
            display: none;
          }

          @include bp($xl) {
            right: auto;
            top: calc(50% - 49px);
            left: calc(100% - 300px);
            width: 98px;
            height: 98px;
            display: block;
            animation-delay: .75s;
          }
        }

        &:nth-of-type(6) {
          bottom: 110px;
          left: 16px;
          width: 48px;
          height: 48px;
          animation-delay: .45s;

          @include bp($md) {
            animation-delay: .6s;
            bottom: auto;
            top: 90px;
            left: 120px;
          }

          @include bp($lg) {
            top: 80px;
            left: 270px;
          }

          @include bp($xl) {
            animation-delay: .9s;
          }
        }

        &:nth-of-type(7) {
          top: 32px;
          left: calc(100% - 200px);
          width: 48px;
          height: 48px;
          animation-delay: .6s;

          @include bp($md) {
            top: 160px;
            animation-delay: 1.05s;
          }

          @include bp($xl) {
            left: calc(100% - 425px);
          }
        }

        &:nth-of-type(8) {
          bottom: 125px;
          right: 20px;
          width: 48px;
          height: 48px;
          animation-delay: .75s;

          @include bp($md) {
            right: auto;
            bottom: 145px;
            left: 200px;
            animation-delay: 1.2s;
          }

          @include bp($lg) {
            left: calc(100% - 800px);
          }

          @include bp($xl) {
            left: calc(100% - 910px);
          }
        }
      }
    }
  }
}
import gsap from 'gsap'
import { ScrollTrigger } from "gsap/ScrollTrigger"

gsap.registerPlugin(ScrollTrigger)

class CtaCollage {
  constructor() {
    this.elements = document.querySelectorAll('.js-aos')
    this.events()
  }

  events = () => {
    if (!this.elements.length) return
    this.elements.forEach(element => {
      gsap.from(element, {
        scrollTrigger: {
          trigger: element,
          start: "20% bottom",
          once: true,
          toggleClass: 'is-animated'
        }
      })
    })
  }
}

document.addEventListener('DOMContentLoaded', () => {
  new CtaCollage();
});
{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "strategiq/cta-collage",
  "title": "Cta Collage",
  "description": "Example block to be used as a template",
  "category": "strategiq",
  "icon": "strategiq",
  "acf": {
      "mode": "preview",
      "renderTemplate": "block-cta-collage.php"
  },
  "supports": {
      "anchor": true,
      "align": false,
      "spacing": {
          "margin": [
              "top",
              "bottom"
          ]
      }
  },
  "example": {
      "attributes": {
          "mode": "preview",
          "data": {
              "heading_type": "h2",
              "heading_text": "Example - Cta Collage",
              "content": "This is some example content to represent what the content will look like"
          }
      }
  },
  "style": "file:../../assets/css/cta-collage/block-cta-collage.css",
  "viewScript": ["cta-collage"]
}
This component is not currently used on any pages.
There are is no readme file with this component.