@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.