- function aspectRatio(w,h){
- return (w/h*100).toFixed(2)
-}
- const width= 1440
- const height= 1200
- let n = 0
- const strapline = ['physically','distanced','socially','together']
.wrapper
.cover.js-frame
h1.cover__title
svg(class="cover__masthead" xmlns="http://www.w3.org/2000" viewBox="0 0 40 24" width="100%" heigh="100%" preserveAspectRatio="xMidYMax slice")
defs
pattern(id="textPattern" x="3" y="3" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)")
rect(x="4" y="4" width="5" height="5" fill= "#741213")
text(x="50%" y="100%" class="cover__masthead--logo" text-anchor="middle" ) T
text(class="cover__masthead--text" x="50%" y="68%" text-anchor="middle" size="2" dx="1,0,0,6,0,0,0,-1.5" letter-spacing="2") any one?
.cover__strap
each line in strapline
span(class=`cover__strap--${line}`)= line
figure.cover__image
.content
article.product
.aspect-ratio(style=`--ratio: ${aspectRatio(1,1)}%`)
.aspect-ratio__content
h2.product__title Matcha
button.product__button <i class="fas fa-shopping-bag"></i>add to cart
figure.product__image
svg(width="100%" height="100%" viewBox="0 0 1200 1440" fill="none" xmlns="http://www.w3.org/2000/svg" )
defs
pattern(id="pattern" viewBox=`0 0 18 18` width="0.5" height="1" patternTransform="rotate(45)")
circle(cx=`10` cy=`20` r="7" fill="#fc8576")
circle(cx=`10` cy=`4` r="4" fill="#14a954")
pattern(id="pattern-a" viewBox=`0 0 20 20` width="0.3" height="0.3" )
circle(cx=`10` cy=`20` r="5" fill="#998d50")
circle(cx=`10` cy=`14` r="3" fill="#ac4545")
pattern(id="pattern-b" viewBox=`0 0 20 20` width="0.1" height="0.1" )
circle(cx=`10` cy=`20` r="5" fill="#abe9f8")
circle(cx=`10` cy=`14` r="3" fill="#ac4545")
pattern(id="pattern-c" viewBox=`0 0 20 20` width="1" height="1" )
circle(cx=`10` cy=`20` r="5" fill="#392c81")
circle(cx=`10` cy=`14` r="3" fill="#41ccc3")
pattern(id="pattern-d" viewBox=`0 0 20 20` width="1" height="1" )
circle(cx=`5` cy=`10` r="10" fill="#f55128")
circle(cx=`16.5` cy=`18` r="3" fill="#ffc508")
pattern(id="pattern-e" viewBox=`0 0 20 20` width="1" height="1" )
rect(x="12" y="2" width="4" height="4" fill="#a25bfd")
circle(cx=`5` cy=`10` r="6" fill="#a25bfd")
circle(cx=`16.5` cy=`18` r="3" fill="#5851ff")
pattern(id="pattern-f" viewBox=`0 0 20 20` width="1" height="1" )
rect(x="12" y="2" width="4" height="4" fill="#a25bfd")
while n < 10
line(x1=`${n + 1}` y1=`0` x2=`10` y2=`${n + 5}` stroke-width=`n` stroke="#998d50")
- n++
image(id="t-raster" width="1200" height="1440" href="https://res.cloudinary.com/makingthings/image/upload/q_auto/v1588515023/t-anyone/t-shirt.png")
path(id="t-vector" style="mix-blend-mode: multiply" d="M374.471 274.653L391.848 267.364C395.772 274.466 404.853 289.568 409.786 293.156C415.952 297.642 442.859 328.48 460.797 341.937C478.735 355.393 523.019 372.214 553.289 372.214C583.56 372.214 613.269 357.075 627.283 347.544C641.297 338.012 674.37 309.416 681.097 298.202C686.479 289.231 696.419 271.663 700.717 264C748.738 289.418 848.481 342.497 863.279 351.468C881.778 362.682 890.747 368.289 896.913 385.671C903.079 403.052 933.349 440.619 952.409 462.486C971.468 484.353 1012.39 519.116 1025.28 526.966C1038.17 534.816 1026.4 542.665 1017.99 551.636C1009.59 560.608 970.907 589.203 952.409 608.827C933.91 628.452 919.896 645.833 896.913 675.55C873.93 705.267 892.429 689.007 890.747 703.024C889.065 717.041 873.369 714.238 869.446 703.024C865.522 691.81 856.553 703.585 844.781 723.77C833.009 743.955 834.691 774.793 828.525 807.313C822.919 825.816 827.964 861.14 828.525 884.689C829.085 908.238 822.919 943.001 822.919 982.25C822.919 1021.5 823.48 1042.24 822.919 1058.5C822.358 1074.76 833.57 1107.29 829.646 1129.71C825.722 1152.14 829.646 1200.36 833.57 1228.4C837.494 1256.43 837.494 1264.28 837.494 1274.37C837.494 1282.45 844.22 1306.52 847.584 1317.55C845.902 1319.41 839.96 1323.49 829.646 1324.83C816.753 1326.52 803.86 1314.74 785.361 1317.55C766.863 1320.35 735.472 1311.38 727.063 1307.45C718.655 1303.53 709.686 1314.74 693.99 1317.55C678.294 1320.35 661.478 1314.74 646.903 1307.45C632.328 1300.16 625.602 1301.85 600.376 1300.16C575.151 1298.48 564.501 1297.92 539.275 1307.45C514.05 1316.98 503.4 1314.74 493.309 1314.74C483.219 1314.74 476.493 1305.77 459.676 1307.45C442.859 1309.14 432.769 1308.01 415.392 1314.74C398.014 1321.47 376.152 1324.83 358.214 1324.27C340.276 1323.71 312.809 1314.74 299.355 1314.74C285.902 1314.74 261.798 1323.71 261.798 1317.55C261.798 1311.38 258.435 1310.26 249.466 1308.01C240.497 1305.77 248.905 1300.72 249.466 1291.75C250.026 1282.78 252.829 1208.77 258.435 1171.77C264.04 1134.76 258.435 1126.91 258.435 1089.9V993.464C258.435 962.065 250.026 857.776 247.223 813.481C247.223 781.521 250.026 734.423 250.026 725.452C250.026 716.481 241.057 711.435 233.209 705.828C225.361 700.221 213.029 692.932 205.742 688.446C198.454 683.96 205.742 680.036 205.742 674.429C205.742 668.822 208.545 668.261 199.015 664.897C189.486 661.533 183.88 649.197 174.35 641.348C164.821 633.498 144.641 608.267 137.354 603.22C130.066 598.174 119.416 584.717 116.613 579.671C113.81 574.625 74.5707 543.787 69.5256 536.498C64.4806 529.209 66.1623 526.405 66.7228 523.041C67.2834 519.677 76.8129 512.949 86.903 503.417C96.9931 493.885 122.218 470.336 140.717 450.711C159.215 431.087 197.333 386.231 205.742 374.457C214.15 362.682 224.24 358.757 233.209 352.029C240.384 346.646 299.729 314.276 328.505 298.763L374.471 274.653Z" )
use(href="#t-raster")
use(href="#t-vector" fill="url(#pattern)")
article.product
.aspect-ratio(style=`--ratio: ${aspectRatio(1,1)}%`)
.aspect-ratio__content
h2.product__title Sencha
button.product__button <i class="fas fa-shopping-bag"></i>add to cart
figure.product__image
svg(width="100%" height="100%" viewBox="0 0 1200 1440" fill="none" xmlns="http://www.w3.org/2000/svg")
use(href="#t-raster")
use(href="#t-vector" fill="url(#pattern-a)")
article.product
.aspect-ratio(style=`--ratio: ${aspectRatio(1,1)}%`)
.aspect-ratio__content
h2.product__title Gyokuro
button.product__button <i class="fas fa-shopping-bag"></i>add to cart
figure.product__image
svg(width="100%" height="100%" viewBox="0 0 1200 1440" fill="none" xmlns="http://www.w3.org/2000/svg")
use(href="#t-raster")
use(href="#t-vector" fill="url(#pattern-b)")
article.product
.aspect-ratio(style=`--ratio: ${aspectRatio(1,1)}%`)
.aspect-ratio__content
h2.product__title Genmaicha
button.product__button <i class="fas fa-shopping-bag"></i>add to cart
figure.product__image
svg(width="100%" height="100%" viewBox="0 0 1200 1440" fill="none" xmlns="http://www.w3.org/2000/svg")
use(href="#t-raster")
use(href="#t-vector" fill="url(#pattern-c)")
article.product
.aspect-ratio(style=`--ratio: ${aspectRatio(1,1)}%`)
.aspect-ratio__content
h2.product__title Sencha
button.product__button <i class="fas fa-shopping-bag"></i>add to cart
figure.product__image
svg(width="100%" height="100%" viewBox="0 0 1200 1440" fill="none" xmlns="http://www.w3.org/2000/svg")
use(href="#t-raster")
use(href="#t-vector" fill="url(#pattern-d)")
article.product
.aspect-ratio(style=`--ratio: ${aspectRatio(1,1)}%`)
.aspect-ratio__content
h2.product__title Gyokuro
button.product__button <i class="fas fa-shopping-bag"></i>add to cart
figure.product__image
svg(width="100%" height="100%" viewBox="0 0 1200 1440" fill="none" xmlns="http://www.w3.org/2000/svg")
use(href="#t-raster")
use(href="#t-vector" fill="url(#pattern-e)")
article.product
.aspect-ratio(style=`--ratio: ${aspectRatio(1,1)}%`)
.aspect-ratio__content
h2.product__title Genmaicha
button.product__button <i class="fas fa-shopping-bag"></i>add to cart
figure.product__image
svg(width="100%" height="100%" viewBox="0 0 1200 1440" fill="none" xmlns="http://www.w3.org/2000/svg")
use(href="#t-raster")
use(href="#t-vector" fill="url(#pattern-f)")
View Compiled
@import url('https://fonts.googleapis.com/css2?family=BioRhyme:wght@300;400;800&dsiplay=swap')
polygon-open= polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)
:root
--color-brand-dark #998D50
--color-brand-light #E5E3D9
--color-text #731313
--color-flash #ac4545
--color-flash-dark #741213
--color-flash-contrast #876fc1
button {
font-family: inherit; /* For all browsers */
font-size: 100%; /* For all browsers */
line-height: 1.15; /* For all browsers */
margin: 0; /* Firefox and Safari have margin */
overflow: visible; /* Edge hides overflow */
text-transform: none; /* Firefox inherits text-transform */
-webkit-appearance: button; /* Safari otherwise prevents some styles */
padding 0.8em 0.6em
cursor pointer
border none
background-color '%s' % var(--color-flash)
color '%s' % var(--color-brand-light)
}
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
*
margin 0
box-sizing border-box
html,body
height 100%
color '%s' % var(--color-brand-light)
background-color '%s' % var(--color-brand-light)
body
overlfow-x hidden
h1,h2,h3,h4,h5,h6
margin 0
font-family BioRhyme
font-family BioRhyme, sans-serif
text-transform uppercase
.wrapper
height 100%
.cover
position relative
height 100%
display flex
align-items flex-end
justify-content center
clip-path polygon-open
&__title
z-index 1
margin-bottom 20vh
display flex
align-items center
justify-content center
width 50vmin
flex-direction column
justify-content space-between
font-weight normal
&__masthead
z-index 1
display flex
font-weight 800
color '%s' % var(--color-flash)
fill currentColor
&--text
font-size 0.09em
color '%s' % var(--color-brand-light)
fill currentColor
&__strap
padding 1em
margin-top 8vmax
display flex
height 24vh
flex-direction column
align-items center
& > *
font-size 3vmin
letter-spacing 0.2em
line-height 1.2
&--physically
flex-grow 1
order 1
&--distanced
order 4
flex-grow 1
flex-shrink 0
display flex
flex-direction column-reverse
margin-top 0.2em
&--socially
order 2
&--together
order 3
&--together, &--socially
font-size 5vmin
font-weight 800
color '%s' % var(--color-brand-light)
&__image
position absolute
top 0
left 0
width 100%
height 100%
background-image url('https://res.cloudinary.com/makingthings/image/upload/q_auto,f_auto,h_800,c_fit/v1588606863/t-anyone/t-rack.jpg')
background-repeat no-repeat
background-size cover
background-position 50% 50%
& svg
display block
.js-frame
clip-path polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)
background-color teal
position fixed
top 0
right 0
bottom 0
left 0
.js-content
margin-top 100vh
.content
width 100%
overflow-x hidden
display flex
flex-wrap wrap
align-items start
justify-content center
padding 2em
& > *
padding 2em
flex 1 0 100%
margin 0.4em 0.8em
position relative
display flex
margin-top 30%
.product
&__button
color 's%' % var(--color-)
position relative
z-index 1
position absolute
bottom 2%
right 2%
font-size 0.8em
font-family BioRhyme, sans-serif
display flex
align-items center
justify-content space-around
& > *
margin 0.4em
&__title
writing-mode vertical-lr
font-weight 300
font-size 1.8em
line-height 1
transform translateX(5%) rotate(180deg)
color '%s' % var(--color-brand-dark)
&__image
width 120%
// margin-top -20%
margin-left -5%
position absolute
.aspect-ratio
background-color '%s' % var(--color-brand-light)
width 100%
padding-top '%s' % var(--ratio)
position relative
&__content
position absolute
top 0
left 0
width 100%
height 100%
display flex
align-items center
// MEDIA JUMPS
@media all and (min-width: 500px)
.product
background-color transparent
transition background 0.3s ease
&__title
font-size 5vw
margin-left 0.2em
&__button
font-size 0.8em
&:hover
background-color '%s' % var(--color-brand-light)
.content
& > *
flex 1 1 40%
margin-top 30%
& > :nth-child(odd)
margin-top 70%
& > :last-child
margin-top 30%
max-width 50%
.aspect-ratio
&__content
align-items center
circle
mix-blend-mode multiply
View Compiled
const tl = gsap.timeline({defaults:{duration: 1},delay: 0.5})
const polygonClosed= "polygon(25% 10%, 75% 10%, 75% 90%, 25% 90%)"
const polygonHalfClosed= "polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)"
const select = e => document.querySelector(e)
const content = select('.content')
const cover = select('.cover')
// var startY = innerHeight / 10
var startY = (innerHeight / Math.pow(10,1)).toFixed(1)
var endY = innerHeight / 5
let requestId = null
tl
.from('.cover__strap--physically',{y:20, autoAlpha: 0},"+=0.2")
.from('.cover__strap--distanced',{y:-20, autoAlpha: 0},"-=1")
.from('.cover__strap--socially,.cover__strap--together',{autoAlpha: 0}, "-=2")
var tlFrame = gsap.timeline({paused: true})
tlFrame
.to(cover,{clipPath: polygonClosed})
.to('.cover__strap',{opacity: 0})
const mq = window.matchMedia('(min-width: 500px)')
if(matchMedia){
mq.addListener(widthChange)
widthChange()
}
document.addEventListener('scroll', function(){
if(!requestId){
requestId = requestAnimationFrame(animateFrame)
}
})
function widthChange(){
if(mq.matches){
cover.classList.add('js-frame')
content.classList.add('js-content')
console.log("media query "+ mq.matches)
animateFrame(true)
}else{
cover.classList.remove('js-frame')
content.classList.remove('js-content')
animateFrame(false)
}
}
animateFrame()
function animateFrame(matches){
if(matches === true){
tlFrame.progress((scrollY - startY) / endY )
requestId = null
}else{
tlFrame.progress(((scrollY - startY) / endY ) * 0.9 )
requestId = null
}
}
