<section class="bubble-grid d-flex col-1 col-md-3 wrap">

    <div id="largeBubble_1" class="parallax" data-speed="2.2">
        <div id="peekABoo1" class="circle circle-overlay look">
            <img class='img--bg layer-1' src="https://vrteje8p14-flywheel.netdna-ssl.com/wp-content/uploads/2015/05/Coffee_Cherries.jpg" alt="">
            <div class="tint tint--darker show-on-hover layer-2">
                <div class="quote ">
                    <h3>#Campaign</h3>
                    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.”</p>
                    <div class="socials">
                        <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tween&via=starbsCAnada&hashtags=duck,bird,quack,egg,dingo" target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
                        <div class="facebook-share" data-quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed." data-hashtag="Fun">
                            <i class="fab fa-facebook"></i>
                        </div>
                        <div href="" class="copy-clipboard">
                            <input type="text" class='target' value="www.starbucks.ca/responsibility#cool">
                            <i class="fas fa-link"></i>
                            <span class="tooltiptext">Link Copied</span>
                        </div>
                        <a href="mailto:someone@theirmail.com?subject=The%20email%20subject&body=the%20email%20body">
    <i class="fas fa-envelope"></i>
  </a>
                    </div>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" data-lity class="dp-n dp-lg-b"><button>Jill&#x27;s story</button></a>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" target="_blank" class="dp-nb dp-lg-n"><button>Jill&#x27;s story</button></a>
                </div>
                <div class="block"></div>
            </div>
            <svg class="hide-on-hover tap layer-2 dp-lg-n">
    <use xlink:href="#icon-click" />
  </svg>
        </div>
    </div>
    <div class="parallax" id="bubble_0" data-speed="1.3">
        <img data-src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/starbucks-cloud-macchiato-1551826272.png?crop&#x3D;0.528xw:1.00xh;0.227xw,0&amp;resize&#x3D;480:*" alt="" class="img--bg circle lozad" />
    </div>
    <div class="parallax" id="bubble_1" data-speed="1.9">
        <img data-src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/starbucks-cloud-macchiato-1551826272.png?crop&#x3D;0.528xw:1.00xh;0.227xw,0&amp;resize&#x3D;480:*" alt="" class="img--bg circle lozad" />
    </div>
    <div class="parallax" id="bubble_2" data-speed="1.4">
        <img data-src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/starbucks-cloud-macchiato-1551826272.png?crop&#x3D;0.528xw:1.00xh;0.227xw,0&amp;resize&#x3D;480:*" alt="" class="img--bg circle lozad" />
    </div>
    <div class="parallax" id="bubble_3" data-speed="1.9">
        <img data-src="https://financialpostcom.files.wordpress.com/2018/09/starbucks.jpg?quality&#x3D;80&amp;strip&#x3D;all&amp;w&#x3D;412" alt="" class="img--bg circle lozad" />
    </div>
    <div class="parallax" id="bubble_4" data-speed="1.2">
        <img data-src="https://imagesvc.meredithcorp.io/v3/mm/image?url&#x3D;https%3A%2F%2Fpeopledotcom.files.wordpress.com%2F2017%2F12%2Fstarbucks-black-and-white-mocha-frappuccino-ft-blog1217.jpg%3Fw%3D1600&amp;w&#x3D;450&amp;c&#x3D;sc&amp;poi&#x3D;face&amp;q&#x3D;85"
            alt="" class="img--bg circle lozad" />
    </div>
    <div class="parallax" id="bubble_5" data-speed="2.1">
        <img data-src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/starbucks-cloud-macchiato-1551826272.png?crop&#x3D;0.528xw:1.00xh;0.227xw,0&amp;resize&#x3D;480:*" alt="" class="img--bg circle lozad" />
    </div>

    <div id="largeBubble_2" class="parallax" data-speed="2.5">
        <div id="borderBubble" class="circle circle-overlay look">
            <img class='img--bg layer-1' src="https://i.cbc.ca/1.3366120.1450550267!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/toronto-starbucks-alcohol.jpg" alt="this is an image alt">
            <div class="tint show-on-hover layer-2">
                <div class="quote ">
                    <h3>#Another Campaign</h3>
                    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.”</p>
                    <div class="socials">
                        <a href="https://twitter.com/intent/tweet?url=www.starbucks.ca&text=This%20is%20a%20tween&via=starbsCAnada&hashtags=duck,bird,quack,egg,dingo" target="_blank" rel="noopener">
    <i class="fab fa-twitter"></i>
  </a>
                        <div class="facebook-share" data-quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed." data-hashtag="Fun">
                            <i class="fab fa-facebook"></i>
                        </div>
                        <div href="" class="copy-clipboard">
                            <input type="text" class='target' value="www.starbucks.ca/responsibility#cool">
                            <i class="fas fa-link"></i>
                            <span class="tooltiptext">Link Copied</span>
                        </div>
                        <a href="mailto:someone@theirmail.com?subject=The%20email%20subject&body=the%20email%20body">
    <i class="fas fa-envelope"></i>
  </a>
                    </div>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" data-lity class="dp-n dp-lg-b"><button>Jill&#x27;s story</button></a>
                    <a href="https://www.youtube.com/watch?v=w2LaeleCIs4" target="_blank" class="dp-nb dp-lg-n"><button>Jill&#x27;s story</button></a>
                </div>
                <div class="block"></div>
            </div>
            <svg class="hide-on-hover tap layer-2 dp-lg-n">
    <use xlink:href="#icon-click" />
  </svg>''
        </div>
    </div>

    <div class="bg-scene">
        <div class="circle fill"></div>
        <div class="circle"></div>
        <div class="circle blur dp-n dp-md-b"></div>
        <div class='circle blur dp-n dp-md-b'></div>
        <div class='circle blur dp-n dp-md-b'></div>
        <div class='circle blur fill dp-n dp-md-b'></div>
        <div class='circle dp-n dp-md-b'></div>
        <div class='circle blur fill dp-n dp-md-b'></div>
        <div class='circle dp-n dp-md-b'></div>
        <div class='circle blur fill dp-n dp-md-b'></div>
        <div class='circle blur fill dp-n dp-md-b'></div>
        <div class="circle"></div>
        </svg>
    </div>
    <div class="bg-scene bg-2">
        <div class="circle fill"></div>
        <div class="circle"></div>
        <div class="circle blur dp-n dp-md-b"></div>
        <div class='circle blur dp-n dp-md-b'></div>
        <div class='circle blur dp-n dp-md-b'></div>
        <div class='circle blur fill dp-n dp-md-b'></div>
        <div class='circle dp-n dp-md-b'></div>
        <div class='circle blur fill dp-n dp-md-b'></div>
        <div class='circle dp-n dp-md-b'></div>
        <div class='circle blur fill dp-n dp-md-b'></div>
        <div class='circle blur fill dp-n dp-md-b'></div>
        <div class="circle"></div>
        </svg>
    </div>

</section>
<section class="bubble-grid d-flex col-1 col-md-3 wrap">

  <div id="largeBubble_1" class="parallax" data-speed="{{bigBubbleData.bigBubbleTop.speedValue}}">
    {{render '@circle-overlay' bigBubbleData}}
  </div>
  {{#each bubbles}}
  <div class="parallax" id="bubble_{{@index}}" data-speed="{{smallBubbleData.speedValue}}">
    <img data-src="{{smallBubbleData.imgSrc}}" alt="{{smallBubbleData.imgAlt}}" class="img--bg circle lozad"/>
  </div>
  {{/each}}

  <div id="largeBubble_2" class="parallax" data-speed="{{bigBubbleData.bigBubbleBottom.speedValue}}">
    {{render '@circle-overlay--border' bigBubbleData}}
  </div>

  {{!-- Static bacgkround circles --}}
  <div class="bg-scene">
    <div class="circle fill"></div>
    <div class="circle"></div>
    {{!-- Desktop only shapes begin --}}
    <div class="circle blur dp-n dp-md-b"></div>
    <div class='circle blur dp-n dp-md-b'></div>
    <div class='circle blur dp-n dp-md-b'></div>
    <div class='circle blur fill dp-n dp-md-b'></div>
    <div class='circle dp-n dp-md-b'></div>
    <div class='circle blur fill dp-n dp-md-b'></div>
    <div class='circle dp-n dp-md-b'></div>
    <div class='circle blur fill dp-n dp-md-b'></div>
    <div class='circle blur fill dp-n dp-md-b'></div>
    {{!-- Desktop only shapes end --}}
    <div class="circle"></div>
    </svg>
  </div>
  <div class="bg-scene bg-2">
    <div class="circle fill"></div>
    <div class="circle"></div>
    {{!-- Desktop only shapes begin --}}
    <div class="circle blur dp-n dp-md-b"></div>
    <div class='circle blur dp-n dp-md-b'></div>
    <div class='circle blur dp-n dp-md-b'></div>
    <div class='circle blur fill dp-n dp-md-b'></div>
    <div class='circle dp-n dp-md-b'></div>
    <div class='circle blur fill dp-n dp-md-b'></div>
    <div class='circle dp-n dp-md-b'></div>
    <div class='circle blur fill dp-n dp-md-b'></div>
    <div class='circle blur fill dp-n dp-md-b'></div>
    {{!-- Desktop only shapes end --}}
    <div class="circle"></div>
    </svg>
  </div>

</section>
{
  "bubbles": [
    {
      "smallBubbleData": {
        "imgSrc": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/starbucks-cloud-macchiato-1551826272.png?crop=0.528xw:1.00xh;0.227xw,0&resize=480:*",
        "imgAlt": null,
        "speedValue": 1.3
      }
    },
    {
      "smallBubbleData": {
        "imgSrc": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/starbucks-cloud-macchiato-1551826272.png?crop=0.528xw:1.00xh;0.227xw,0&resize=480:*",
        "imgAlt": null,
        "speedValue": 1.9
      }
    },
    {
      "smallBubbleData": {
        "imgSrc": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/starbucks-cloud-macchiato-1551826272.png?crop=0.528xw:1.00xh;0.227xw,0&resize=480:*",
        "imgAlt": null,
        "speedValue": 1.4
      }
    },
    {
      "smallBubbleData": {
        "imgSrc": "https://financialpostcom.files.wordpress.com/2018/09/starbucks.jpg?quality=80&strip=all&w=412",
        "imgAlt": null,
        "speedValue": 1.9
      }
    },
    {
      "smallBubbleData": {
        "imgSrc": "https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fpeopledotcom.files.wordpress.com%2F2017%2F12%2Fstarbucks-black-and-white-mocha-frappuccino-ft-blog1217.jpg%3Fw%3D1600&w=450&c=sc&poi=face&q=85",
        "imgAlt": null,
        "speedValue": 1.2
      }
    },
    {
      "smallBubbleData": {
        "imgSrc": "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/starbucks-cloud-macchiato-1551826272.png?crop=0.528xw:1.00xh;0.227xw,0&resize=480:*",
        "imgAlt": null,
        "speedValue": 2.1
      }
    }
  ],
  "bigBubbleData": {
    "bigBubbleTop": {
      "previewImg": "https://vrteje8p14-flywheel.netdna-ssl.com/wp-content/uploads/2015/05/Coffee_Cherries.jpg",
      "previewAlt": "this is an image alt",
      "slideTitle": "#Campaign",
      "partnerName": "Rebecca",
      "partnerLocation": "Labrador",
      "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
      "youTubeId": "w2LaeleCIs4",
      "speedValue": 2.2,
      "socialBar": {
        "id": "cool",
        "twitter": {
          "url": "www.starbucks.ca",
          "text": "This is a tween",
          "via": "starbsCAnada",
          "hashtag-1": "duck",
          "hashtag-2": "bird",
          "hashtag-3": "quack",
          "hashtag-4": "egg",
          "hashtag-5": "dingo"
        },
        "facebook": {
          "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
          "hashtag": "Fun"
        },
        "email": {
          "subject": "The email subject",
          "body": "the email body"
        }
      }
    },
    "bigBubbleBottom": {
      "previewImg": "https://i.cbc.ca/1.3366120.1450550267!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/toronto-starbucks-alcohol.jpg",
      "previewAlt": "this is an image alt",
      "slideTitle": "#Another Campaign",
      "partnerName": "Rachana",
      "partnerLocation": "Kamloops",
      "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
      "youTubeId": "w2LaeleCIs4",
      "speedValue": 2.5,
      "socialBar": {
        "id": "cool",
        "twitter": {
          "url": "www.starbucks.ca",
          "text": "This is a tween",
          "via": "starbsCAnada",
          "hashtag-1": "duck",
          "hashtag-2": "bird",
          "hashtag-3": "quack",
          "hashtag-4": "egg",
          "hashtag-5": "dingo"
        },
        "facebook": {
          "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
          "hashtag": "Fun"
        },
        "email": {
          "subject": "The email subject",
          "body": "the email body"
        }
      }
    }
  }
}
  • Content:
    .bubble-grid {
      position: relative;
      margin: 100px auto 800px;
      max-width: 370px;
      padding: 0 10px;
      z-index: 0;
      -webkit-backface-visibility: hidden;
    
      .parralax {
        position: -webkit-sticky;
        position: sticky;
      }
    
      >div {
        max-width: 100vw;
        width: 100%;
        height: 140px;
    
        .circle {
          z-index: -1;
    
          strong {
            width: 80%;
            margin-top: 5px;
          }
        }
    
        &:first-of-type,
        &:nth-of-type(8) {
          position: relative;
          z-index: 1;
          display: flex;
          align-items: center;
          justify-content: center;
    
          .circle {
            $min-size: 227px;
            $max-size: 295px;
            $size: 83vw;
            min-width: $min-size;
            width: $size;
            min-height: $min-size;
            height: $size;
            max-width: $max-size;
            max-height: $max-size;
    
            z-index: 99;
            left: 0;
          }
        }
    
        &:nth-of-type(2) .circle {
          $size: 102px;
          width: $size;
          height: $size;
          top: 60px;
          right: 20px;
        }
    
        &:nth-of-type(3) .circle {
          $size: 170px;
          width: $size;
          height: $size;
          margin-right: calc(100vw - 200px);
        }
    
        &:nth-of-type(4) .circle {
          $size: 102px;
          width: $size;
          height: $size;
          top: 34px;
          left: 150px;
        }
    
        &:nth-of-type(5) .circle {
          $size: 142px;
          width: $size;
          height: $size;
          left: 25px;
        }
    
        &:nth-of-type(6) .circle {
          $size: 190px;
          width: $size;
          height: $size;
          left: 115px;
        }
    
        &:nth-of-type(7) .circle {
          $size: 129px;
          width: $size;
          height: $size;
          left: 25px;
        }
    
    
        // &:nth-of-type(8) .circle {
        //   // top: 115px;
        // }
      }
    
      .bg-scene {
        @extend %absolute-fill;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
    
        &.bg-2 {
          top: 100%;
        }
    
        .circle {
          position: relative;
          border: solid $green;
          transition: all 200ms ease-out;
    
          &:first-of-type {
            background-color: $green;
            border-width: 3px;
            $size: 50px;
            width: $size;
            height: $size;
            top: 300px;
            left: 60%;
          }
    
          &:nth-of-type(2) {
            border-width: 2.5px;
            $size: 25px;
            width: $size;
            height: $size;
            top: 450px;
            left: 45%;
          }
    
          &:last-of-type {
            border-width: 2.5px;
            $size: 50px;
            width: $size;
            height: $size;
            top: 600px;
            left: 70%;
          }
        }
      }
    
      @media all and (min-width: 651px) and (max-width: 780px) {
        >div {
          &:first-of-type {
            top: 100px;
          }
    
        }
    
      }
    
      @include respond-above(md) {
        max-width: 1100px;
        margin: 100px auto 895px;
        min-height: 950px;
    
        >div {
    
          max-width: 33%;
    
          &:first-of-type,
          &:nth-of-type(8) {
            display: flex;
            align-items: center;
            justify-content: center;
    
          }
    
          &:first-of-type {
    
            .circle {
              z-index: 99;
              top: -50px;
              left: -110px;
            }
          }
    
          &:nth-of-type(2) {
    
            order: -1;
    
            .circle {
              $size: 155px;
              width: $size;
              height: $size;
              top: 120px;
              left: 42px;
            }
          }
    
          &:nth-of-type(3) {
    
            order: -1;
    
            .circle {
              $size: 195px;
              width: $size;
              height: $size;
              top: -100px;
              left: 230px;
              margin-left: auto;
            }
          }
    
          &:nth-of-type(4) {
            .circle {
              $size: 215px;
              width: $size;
              height: $size;
              left: 470px;
              top: -60px;
            }
          }
    
          &:nth-of-type(5) {
            .circle {
              $size: 155px;
              width: $size;
              height: $size;
              left: 308px;
              top: 242px;
            }
          }
    
    
          &:nth-of-type(6) {
            .circle {
              $size: 205px;
              width: $size;
              height: $size;
              left: -370px;
              top: 6px;
            }
          }
    
          &:nth-of-type(7) {
            order: 1;
    
            .circle {
              $size: 140px;
              width: $size;
              height: $size;
              top: 135px;
              left: 250px;
            }
          }
    
    
    
          &:first-of-type .circle,
          &:nth-of-type(8) .circle {
            $size: 340px;
            min-width: $size;
            width: $size;
            min-height: $size;
            height: $size;
    
            h3 {
              font-size: 20px;
              margin-bottom: 20px;
            }
    
            p {
              font-size: 14px;
              width: 100%;
            }
    
          }
    
          &:nth-of-type(8) .circle {
            left: 115px;
            top: 70px;
          }
        }
    
    
        .bg-scene {
          // position: relative;
          max-width: 100%;
          width: 100%;
          left: 0;
    
          .circle {
            position: absolute;
            // opacity: 1;
    
            &.blur {
              border: none;
    
            }
    
            &:first-of-type {
              $size: 40px;
              width: $size;
              height: $size;
              top: 10px;
              left: 30%;
            }
    
            &:nth-of-type(2) {
              background-color: $light;
              border: 2.5px solid $green;
              $size: 60px;
              width: $size;
              height: $size;
              top: 150px;
              left: unset;
              right: 15%;
            }
    
            &:nth-of-type(3) {
              $size: 60px;
              width: $size;
              height: $size;
              top: -150px;
              left: 100px;
              opacity: 0.8;
            }
    
            &:nth-of-type(4) {
              $size: 40px;
              width: $size;
              height: $size;
              right: 10%;
              top: -106px;
              opacity: 0.7;
            }
    
            &:nth-of-type(5) {
              $size: 150px;
              width: $size;
              height: $size;
              left: 10%;
              top: 150px;
              opacity: 0.8;
            }
    
            &:nth-of-type(6) {
              $size: 70px;
              width: $size;
              height: $size;
              top: 300px;
              right: 40%
            }
    
            &:nth-of-type(7) {
              $size: 70px;
              width: $size;
              height: $size;
              top: 400px;
              left: 3%;
            }
    
            &:nth-of-type(8) {
              $size: 30px;
              width: $size;
              height: $size;
              top: 570px;
              left: 25%;
            }
    
            &:nth-of-type(9) {
              $size: 70px;
              width: $size;
              height: $size;
              border: 2.5px solid $green;
              top: 550px;
              left: 50%;
            }
    
            &:nth-of-type(10) {
              $size: 100px;
              width: $size;
              height: $size;
              right: 10%;
              top: 600px;
            }
    
            &:nth-of-type(11) {
              $size: 100px;
              width: $size;
              height: $size;
              left: 10%;
              bottom: -100px;
              display: none;
            }
    
            &:last-of-type {
              $size: 100px;
              width: $size;
              height: $size;
              border: 2.5px solid $green;
              top: unset;
              left: -200px;
              bottom: -140px;
              right: 15%;
              display: none;
            }
          }
        }
      }
    
      @include respond-above(lg) {
        >div {
    
          &:first-of-type .circle,
          &:nth-of-type(8) .circle {
            $size: 350px;
            min-width: $size;
            width: $size;
            min-height: $size;
            height: $size;
    
            h3 {
              font-size: 22px;
            }
    
            p {
              font-size: 15px;
            }
    
            button {
              font-size: 16px;
            }
          }
    
          &:nth-of-type(2) .circle {
            left: calc(50% - 60px);
            top: 20px;
          }
    
          &:nth-of-type(3) .circle {
            left: calc(50% - 150px);
            top: 130px;
          }
    
          &:nth-of-type(4) .circle {
            left: calc(50% - 60px);
            top: -60px;
          }
    
          &:nth-of-type(5) .circle {
            left: calc(50% + 70px);
            top: 80px;
          }
    
          &:nth-of-type(6) .circle {
            left: calc(50% - 60px);
            top: 170px;
          }
    
          &:nth-of-type(7) .circle {
            left: calc(50% - 20px);
            top: 80px;
          }
    
          &:nth-of-type(8) .circle {
            top: -30px;
          }
        }
      }
    }
    
    .fr {
      @include respond-above(lg) {
    
        .bubble-grid>div:first-of-type .circle button,
        .bubble-grid>div:nth-of-type(8) .circle button {
          font-size: 13px;
          margin-bottom: 15px;
    
        }
      }
    }
  • URL: /components/raw/bubbles-grid/_bubbles-grid.scss
  • Filesystem Path: structures/04-templates/bubbles-grid/_bubbles-grid.scss
  • Size: 8.3 KB

There are no notes for this item.