<div class="home-hero">
<div class="home-hero__motion-region">
<div class="home-hero__tagline">
Your creative career starts here
</div>
<div class="home-hero__video">
<video data-hero-video autoplay loop muted playsinline>
<source src="https://dl6.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" poster="https://m.media-amazon.com/images/M/MV5BOTI5ZTNkYWQtNDg2Mi00MTBmLTliMGItNTI5YWI5OTZkM2Y2XkEyXkFqcGdeQXVyNzU1NzE3NTg@._V1_QL75_UX500_CR0,47,500,281_.jpg">
<p>
Your browser does not support HTML video.
Here is a <a href="https://dl6.webmfiles.org/big-buck-bunny_trailer.webm">link to the video</a> instead.
</p>
</video>
<button data-hero-video-state="play" data-hero-video-control class="home-hero__video-control">
<svg class="_play-icon" aria-hidden="true" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path clip-rule="evenodd" d="m7 18 11-5.5-11-5.5z" fill-rule="evenodd" stroke="#4559a9" stroke-width="2" />
</svg>
<svg class="_pause-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
<path fill="#4559A9" d="M13 19V5h6v14h-6Zm-8 0V5h6v14H5Zm10-2h2V7h-2v10Zm-8 0h2V7H7v10Z" />
</svg>
<span class="_play-text">
Play
</span>
<span class="_pause-text">
Pause
</span>
</button>
</div>
</div>
<div class="home-hero__statement">
<h2 data-sal="slide-left" data-sal-delay="150" data-sal-easing="ease-out-back" class="home-hero__statement-heading">
Create art. Change the world.
</h2>
<p data-sal="slide-up" data-sal-delay="250" class="home-hero__statement-text">
At the University of Florida College of the Arts, you’ll gain practical skills and hands-on experience. You’ll join a community of passionate creators. You’ll be prepared to challenge the status quo and make an impact — no matter what direction you go.
</p>
</div>
</div>
{{ enqueue_script('home-hero') }}
{{ enqueue_script('sal') }}
<div class="home-hero">
<div class="home-hero__motion-region">
<div class="home-hero__tagline">
{{ fields.heading }}
</div>
<div class="home-hero__video">
<video data-hero-video autoplay loop muted playsinline>
<source
src="{{ fields.video.src }}"
type="{{ fields.video.type }}"
poster="{{ fields.video.poster | resize(1120, 630) | towebp }}"
>
<p>
Your browser does not support HTML video.
Here is a <a href="{{ fields.video.src }}">link to the video</a> instead.
</p>
</video>
<button data-hero-video-state="play" data-hero-video-control class="home-hero__video-control">
<svg class="_play-icon" aria-hidden="true" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path clip-rule="evenodd" d="m7 18 11-5.5-11-5.5z" fill-rule="evenodd" stroke="#4559a9" stroke-width="2"/></svg>
<svg class="_pause-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#4559A9" d="M13 19V5h6v14h-6Zm-8 0V5h6v14H5Zm10-2h2V7h-2v10Zm-8 0h2V7H7v10Z"/></svg>
<span class="_play-text">
Play
</span>
<span class="_pause-text">
Pause
</span>
</button>
</div>
</div>
<div class="home-hero__statement">
<h2 data-sal="slide-left" data-sal-delay="150" data-sal-easing="ease-out-back" class="home-hero__statement-heading">
{{ fields.statement.heading }}
</h2>
<p data-sal="slide-up" data-sal-delay="250" class="home-hero__statement-text">
{{ fields.statement.text }}
</p>
</div>
</div>
{
"title": "Homepage hero section",
"fields": {
"heading": "Your creative career starts here",
"video": {
"src": "https://dl6.webmfiles.org/big-buck-bunny_trailer.webm",
"poster": "https://m.media-amazon.com/images/M/MV5BOTI5ZTNkYWQtNDg2Mi00MTBmLTliMGItNTI5YWI5OTZkM2Y2XkEyXkFqcGdeQXVyNzU1NzE3NTg@._V1_QL75_UX500_CR0,47,500,281_.jpg",
"alt": "Video poster",
"type": "video/webm"
},
"statement": {
"heading": "Create art. Change the world.",
"text": "At the University of Florida College of the Arts, you’ll gain practical skills and hands-on experience. You’ll join a community of passionate creators. You’ll be prepared to challenge the status quo and make an impact — no matter what direction you go."
}
}
}
.home-hero
--scroll-top: 0;
--distance-scale: 0;
--scale: 0.45;
&__tagline
@extends $billboardTitle
@extends $textGradient
&__video
position relative
& video
width 100%
height auto
border-radius 8px
overflow hidden
&__video-control
border 1px solid blue300
border-radius 4px
background-color white
color blue500
border-radius: 4px;
box-shadow 0px 0px 8px 0px rgba(22, 47, 147, 0.25)
display inline-flex
padding 4px 8px
justify-content center
align-items center
gap 4px
fill red
position absolute
top 24px
right 24px
z-index 1
&-text
@extends $label
&:focus, &:hover
background-color blue500
color white
& ._play-icon path
stroke white
& ._pause-icon path
fill white
&[data-hero-video-state="pause"]
._pause-icon
._pause-text
display none
&[data-hero-video-state="play"]
._play-icon
._play-text
display none
&__statement
border-left 2px solid orange
fluid(padding-left, 16px, 32px)
fluid(margin-bottom, 48px, 104px)
fluid(margin-top, 48px, 115px)
max-width 660px
position relative
&:after
content ""
background orange
display block
position absolute
top 0
left -3px
width 4px
bottom 50%
&__statement-heading
@extends $headline2
color blue500
margin-bottom 16px
&__statement-text
@extends $bodyLarge
+above(800px)
.home-hero__motion-region
margin-top 116px
.home-hero__tagline
transform translateY(calc(var(--scroll-top) * -1px))
.home-hero__video
width 100%
height auto
margin-left auto
& video
--scale: clamp(0.45, calc( 0.45 + var(--distance-scale) * (1.0 - 0.40)), 1)
transform scale(var(--scale))
transform-origin top right
+below(800px)
.home-hero
&__motion-region
height 700px
display grid
&__tagline
align-self end
margin-bottom 32px
text-wrap balance
&__video-control
bottom 24px
top initial
&__video
--scale: clamp(0.6, calc( 0.6 + var(--distance-scale) * (1.0 - 0.55)), 1)
align-self start
transform translateY(clamp(0px, calc(var(--scroll-top) * 1px), 150px))
& video
transform scale(var(--scale))
transform-origin top right
No notes defined.