HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<main>
<article>
<div class="elevator__wrapper">
<div class="elevator__container" data-elevator-open="false">
<div class="elevator__call-button"></div>
<div class="elevator__up-button"></div>
<div class="elevator__down-button"></div><svg class='elevator' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.95 46.33">
<g transform="translate(-24.19 -107.24)">
<defs>
<clipPath id='doors'>
<rect y="121.28" x="35.57" height="32.28" width="32.81"/>
</clipPath>
<clipPath id='cursor'>
<rect y="121.28" x="35.57" height="32.28" width="38.81"/>
</clipPath>
<clipPath id='glass'>
<rect y="121.28" x="35.57" height="19" width="32.81"/>
</clipPath>
</defs>
<!-- <rect y="116.52" x="30.81" height="37.04" width="42.33"/> -->
<path class='elevator__frame' d="M30.8 116.5v37.06h4.77v-32.28h32.8v32.29h4.77V116.5H35.57v-.01z"/>
<g class='elevator__dial'>
<path class='elevator__dial-face' d="M51.97 107.24a6.61 6.61 0 00-6.61 6.61h13.23a6.61 6.61 0 00-6.62-6.61z"/>
<rect class='elevator__dial-dial' ry=".31" y="108.62" x="51.64" height="4.5" width=".66"/>
</g>
<g class='elevator__panel'>
<rect class='elevator__plate' y="138.6" x="24.19" height="5.29" width="3.97" />
<path class='elevator__call' d="M26.17 143.31l-1.32-1.59h2.65l-1.33 1.59z" />
<path class='elevator__call' d="M26.17 139.18l1.33 1.58h-2.65l1.32-1.58z" />
</g>
<g class='elevator__opening'>
<rect class='elevator__back' y="142.97" x="35.57" height="10.58" width="32.81"/>
<rect class='elevator__bar' y="138.31" x="35.57" height="5.72" width="32.81"/>
<rect class='elevator__glass' y="121.28" x="35.57" height="19" width="32.81"/>
<path class='elevator__up' d="M49.33 141.52l1.32 1.6H48l1.33-1.6z" />
<path class='elevator__down' d="M54.62 143.11l-1.33-1.59h2.65l-1.32 1.6z"/>
<g clip-path="url(#glass)">
<path class='elevator__cursor-reflection' d="M53.37 133.17a.53.53 0 01.7.26l1.21 2.63.95-.45-1.21-2.62a.52.52 0 01.25-.7l.15-.05 1.2-.24-4.34-3.65v5.68l.96-.77.13-.09m1.88 4.07a.52.52 0 01-.7-.25l-1.15-2.5-1.32 1.06a.5.5 0 01-.33.12.53.53 0 01-.53-.53v-7.9a.53.53 0 01.53-.54c.13 0 .25.05.34.13l6.06 5.07a.53.53 0 01-.23.93l-1.67.32 1.16 2.5c.14.26.02.57-.25.7z"/>
</g>
<path class='elevator__glass-shine' d="M39.45 121.28l-3.88 3.88v11.38l15.25-15.26z" />
<path class='elevator__glass-shine' d="M54.57 121.28l-19 19h5.82l19-19z" />
<g clip-path="url(#cursor)">
<path class='elevator__cursor' d="M49.46 141.44a.53.53 0 01.7.25l1.21 2.63.95-.44-1.22-2.63a.52.52 0 01.26-.7l.14-.04 1.22-.24-4.35-3.66v5.69l.96-.78.13-.08m1.88 4.06a.52.52 0 01-.7-.25l-1.15-2.5-1.32 1.07a.5.5 0 01-.33.11.53.53 0 01-.53-.52v-7.91a.53.53 0 01.53-.53c.13 0 .25.05.34.12l6.06 5.08a.53.53 0 01-.23.92l-1.67.33 1.16 2.5c.14.26.01.57-.25.69z"/>
</g>
<g clip-path="url(#doors)">
<g class='elevator__door elevator__door--left' transform="translate(-52.65 -7.63)">
<rect class='elevator__door-body' width="16.4" height="32.28" x="88.22" y="128.91" />
<path class='elevator__door-shine' d="M98.15 128.9l-9.93 9.93v9.64l16.4-16.4v-3.16z" />
<path class='elevator__door-shine' d="M104.62 135.8l-16.4 16.41v4.35l16.4-16.4z" />
</g>
<g class='elevator__door elevator__door--right' transform="translate(-52.65 -7.63)">
<rect class='elevator__door-body' y="128.91" x="104.62" height="32.28" width="16.4" />
<path class='elevator__door-shine' d="M111.53 128.9l-6.9 6.9v4.36l10.93-10.94-.32-.31z" />
<path class='elevator__door-shine' d="M104.62 128.9v3.17l3.17-3.16z"/>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
<h1 id="home"><span>Awesome Inc.</span>Privacy Policy</h1>
<p>At Website Name, accessible at Website.com, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by Website Name and how we use it.</p>
<p>If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact us through email at Email@Website.com</p>
<p>This privacy policy applies only to our online activities and is valid for visitors to our website with regards to the information that they shared and/or collect in Website Name. This policy is not applicable to any information collected offline or via channels other than this website.</p>
<p><strong>Consent</strong></p>
<p>By using our website, you hereby consent to our Privacy Policy and agree to its terms.</p>
<p><strong>Information we collect</strong></p>
<p>The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be made clear to you at the point we ask you to provide your personal information.</p>
<p>If you contact us directly, we may receive additional information about you such as your name, email address, phone number, the contents of the message and/or attachments you may send us, and any other information you may choose to provide.</p>
<p>When you register for an Account, we may ask for your contact information, including items such as name, company name, address, email address, and telephone number.</p>
<p><strong>How we use your information</strong></p>
<p>We use the information we collect in various ways, including to:</p>
<ul>
<li>Provide, operate, and maintain our webste</li>
<li>Improve, personalize, and expand our webste</li>
<li>Understand and analyze how you use our webste</li>
<li>Develop new products, services, features, and functionality</li>
<li>Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the webste, and for marketing and promotional purposes</li>
<li>Send you emails</li>
<li>Find and prevent fraud</li>
</ul>
<p><strong>Log Files</strong></p>
<p><span>Website Name</span> follows a standard procedure of using log files. These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics. The information collected by log files include internet protocol (IP) addresses, browser type, Internet Service Provider (ISP), date and time stamp, referring/exit pages, and possibly the number of clicks. These are not linked to any information that is personally identifiable. The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information.</p>
<h3>Cookies and Web Beacons</h3>
<p>Like any other website,<span>Website Name</span> uses ‘cookies'. These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information.</p>
<h3>DoubleClick DART Cookie</h3>
<p>Google is one of a third-party vendor on our site. It also uses cookies, known as DART cookies, to serve ads to our site visitors based upon their visit to www.website.com and other sites on the internet. However, visitors may choose to decline the use of DART cookies by visiting the Google ad and content network Privacy Policy at the following URL –</p>
<p>Some of advertisers on our site may use cookies and web beacons. Our advertising partners are listed below. Each of our advertising partners has their own Privacy Policy for their policies on user data. For easier access, we hyperlinked to their Privacy Policies below.</p>
<ul>
<li>
<p>Google</p>
</li>
</ul>
<p><strong>Advertising Partners Privacy Policies</strong></p>
<p>You may consult this list to find the Privacy Policy for each of the advertising partners of<span>Website Name</span>.</p>
<p>Third-party ad servers or ad networks uses technologies like cookies, JavaScript, or Web Beacons that are used in their respective advertisements and links that appear on<span>Website Name</span>, which are sent directly to users' browser. They automatically receive your IP address when this occurs. These technologies are used to measure the effectiveness of their advertising campaigns and/or to personalize the advertising content that you see on websites that you visit.</p>
<p>Note that<span>Website Name</span> has no access to or control over these cookies that are used by third-party advertisers.</p>
<p><strong>Third-Party Privacy Policies</strong></p>
<p><span>Website Name</span>'s Privacy Policy does not apply to other advertisers or websites. Thus, we are advising you to consult the respective Privacy Policies of these third-party ad servers for more detailed information. It may include their practices and instructions about how to opt-out of certain options. You may find a complete list of these Privacy Policies and their links here: Privacy Policy Links.</p>
<p>You can choose to disable cookies through your individual browser options. To know more detailed information about cookie management with specific web browsers, it can be found at the browsers' respective websites. What Are Cookies?</p>
<p><strong>CCPA Privacy Policy (Do Not Sell My Personal Information)</strong></p>
<p>Under the CCPA, among other rights, California consumers have the right to:</p>
<p>Request that a business that collects a consumer's personal data disclose the categories and specific pieces of personal data that a business has collected about consumers.</p>
<p>Request that a business delete any personal data about the consumer that a business has collected.</p>
<p>Request that a business that sells a consumer's personal data, not sell the consumer's personal data.</p>
<p>If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us.</p>
<p><strong>GDPR Privacy Policy (Data Protection Rights)</strong></p>
<p>We would like to make sure you are fully aware of all of your data protection rights. Every user is entitled to the following:</p>
<p>The right to access – You have the right to request copies of your personal data. We may charge you a small fee for this service.</p>
<p>The right to rectification – You have the right to request that we correct any information you believe is inaccurate. You also have the right to request that we complete the information you believe is incomplete.</p>
<p>The right to erasure – You have the right to request that we erase your personal data, under certain conditions.</p>
<p>The right to restrict processing – You have the right to request that we restrict the processing of your personal data, under certain conditions.</p>
<p>The right to object to processing – You have the right to object to our processing of your personal data, under certain conditions.</p>
<p>The right to data portability – You have the right to request that we transfer the data that we have collected to another organization, or directly to you, under certain conditions.</p>
<p>If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us.</p>
<p><strong>Children's Information</strong></p>
<p>Another part of our priority is adding protection for children while using the internet. We encourage parents and guardians to observe, participate in, and/or monitor and guide their online activity.</p>
<p><span>Website Name</span> does not knowingly collect any Personal Identifiable Information from children under the age of 13. If you think that your child provided this kind of information on our website, we strongly encourage you to contact us immediately and we will do our best efforts to promptly remove such information from our records.</p>
<p>At Website Name, accessible at Website.com, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by Website Name and how we use it.</p>
<p>If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact us through email at Email@Website.com</p>
<p>This privacy policy applies only to our online activities and is valid for visitors to our website with regards to the information that they shared and/or collect in Website Name. This policy is not applicable to any information collected offline or via channels other than this website.</p>
<p><strong>Consent</strong></p>
<p>By using our website, you hereby consent to our Privacy Policy and agree to its terms.</p>
<p><strong>Information we collect</strong></p>
<p>The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be made clear to you at the point we ask you to provide your personal information.</p>
<p>If you contact us directly, we may receive additional information about you such as your name, email address, phone number, the contents of the message and/or attachments you may send us, and any other information you may choose to provide.</p>
<p>When you register for an Account, we may ask for your contact information, including items such as name, company name, address, email address, and telephone number.</p>
<p><strong>How we use your information</strong></p>
<p>We use the information we collect in various ways, including to:</p>
<ul>
<li>Provide, operate, and maintain our webste</li>
<li>Improve, personalize, and expand our webste</li>
<li>Understand and analyze how you use our webste</li>
<li>Develop new products, services, features, and functionality</li>
<li>Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the webste, and for marketing and promotional purposes</li>
<li>Send you emails</li>
<li>Find and prevent fraud</li>
</ul>
<p><strong>Log Files</strong></p>
<p><span>Website Name</span> follows a standard procedure of using log files. These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics. The information collected by log files include internet protocol (IP) addresses, browser type, Internet Service Provider (ISP), date and time stamp, referring/exit pages, and possibly the number of clicks. These are not linked to any information that is personally identifiable. The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information.</p>
<h3>Cookies and Web Beacons</h3>
<p>Like any other website,<span>Website Name</span> uses ‘cookies'. These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information.</p>
<h3>DoubleClick DART Cookie</h3>
<p>Google is one of a third-party vendor on our site. It also uses cookies, known as DART cookies, to serve ads to our site visitors based upon their visit to www.website.com and other sites on the internet. However, visitors may choose to decline the use of DART cookies by visiting the Google ad and content network Privacy Policy at the following URL –</p>
<p>Some of advertisers on our site may use cookies and web beacons. Our advertising partners are listed below. Each of our advertising partners has their own Privacy Policy for their policies on user data. For easier access, we hyperlinked to their Privacy Policies below.</p>
<ul>
<li>
<p>Google</p>
</li>
</ul>
<p><strong>Advertising Partners Privacy Policies</strong></p>
<p>You may consult this list to find the Privacy Policy for each of the advertising partners of<span>Website Name</span>.</p>
<p>Third-party ad servers or ad networks uses technologies like cookies, JavaScript, or Web Beacons that are used in their respective advertisements and links that appear on<span>Website Name</span>, which are sent directly to users' browser. They automatically receive your IP address when this occurs. These technologies are used to measure the effectiveness of their advertising campaigns and/or to personalize the advertising content that you see on websites that you visit.</p>
<p>Note that<span>Website Name</span> has no access to or control over these cookies that are used by third-party advertisers.</p>
<p><strong>Third-Party Privacy Policies</strong></p>
<p><span>Website Name</span>'s Privacy Policy does not apply to other advertisers or websites. Thus, we are advising you to consult the respective Privacy Policies of these third-party ad servers for more detailed information. It may include their practices and instructions about how to opt-out of certain options. You may find a complete list of these Privacy Policies and their links here: Privacy Policy Links.</p>
<p>You can choose to disable cookies through your individual browser options. To know more detailed information about cookie management with specific web browsers, it can be found at the browsers' respective websites. What Are Cookies?</p>
<p><strong>CCPA Privacy Policy (Do Not Sell My Personal Information)</strong></p>
<p>Under the CCPA, among other rights, California consumers have the right to:</p>
<p>Request that a business that collects a consumer's personal data disclose the categories and specific pieces of personal data that a business has collected about consumers.</p>
<p>Request that a business delete any personal data about the consumer that a business has collected.</p>
<p>Request that a business that sells a consumer's personal data, not sell the consumer's personal data.</p>
<p>If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us.</p>
<p><strong>GDPR Privacy Policy (Data Protection Rights)</strong></p>
<p>We would like to make sure you are fully aware of all of your data protection rights. Every user is entitled to the following:</p>
<p>The right to access – You have the right to request copies of your personal data. We may charge you a small fee for this service.</p>
<p>The right to rectification – You have the right to request that we correct any information you believe is inaccurate. You also have the right to request that we complete the information you believe is incomplete.</p>
<p>The right to erasure – You have the right to request that we erase your personal data, under certain conditions.</p>
<p>The right to restrict processing – You have the right to request that we restrict the processing of your personal data, under certain conditions.</p>
<p>The right to object to processing – You have the right to object to our processing of your personal data, under certain conditions.</p>
<p>The right to data portability – You have the right to request that we transfer the data that we have collected to another organization, or directly to you, under certain conditions.</p>
<p>If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us.</p>
<p><strong>Children's Information</strong></p>
<p>Another part of our priority is adding protection for children while using the internet. We encourage parents and guardians to observe, participate in, and/or monitor and guide their online activity.</p>
<p><span>Website Name</span> does not knowingly collect any Personal Identifiable Information from children under the age of 13. If you think that your child provided this kind of information on our website, we strongly encourage you to contact us immediately and we will do our best efforts to promptly remove such information from our records.</p>
<footer>
<button class="agree">Agree</button>
</footer>
</article>
</main>
:root
--cursor url('https://assets.codepen.io/605876/default-cursor.png?width=20&height=30'), pointer
--frame hsl(30, 35%, 48%)
--shine hsla(0, 0%, 100%, 0.5)
--button hsl(0, 0%, 13%)
--active hsl(42, 90%, 85%)
--bar hsl(0, 0%, 70%)
--back hsl(0, 0%, 44%)
--door hsl(0, 0%, 48%)
--face hsl(0, 0%, 65%)
--glass hsl(180, 60%, 90%)
--dial hsl(0, 0%, 13%)
*
cursor var(--cursor) !important
box-sizing border-box
body
height 100vh
font-family sans-serif
line-height 1.5
background hsl(0, 0%, 95%)
color hsl(0, 0%, 20%)
font-weight 300
overflow auto
cursor url('https://assets.codepen.io/605876/default-cursor.png?width=20&height=30'), pointer !important
main
height 100%
padding 3rem 0
article
width 600px
max-width calc(100% - (140px + 0.5rem))
padding 0 1rem 0
overflow hidden
@media(min-width 992px)
padding 0
margin 0 auto
h1 span
display block
text-transform uppercase
font-variant small-caps
font-size 1rem
opacity 0.65
h1
line-height 1
font-size 3rem
// Original 185 x 175
.elevator
height 100%
&__wrapper
width 896px
max-width 100%
position fixed
top 0
left 50%
transform translate(-50%, 0)
height 100vh
-webkit-clip-path inset(0 0 0 80%)
clip-path inset(0 0 0 80%)
&__door-body
fill var(--door)
&__door-shine
fill var(--shine)
&__plate
fill var(--face)
&__call
&__up
&__down
fill var(--button)
&__frame
fill var(--frame)
&__dial-face
fill var(--face)
&__dial-dial
fill var(--dial)
&__glass
fill var(--glass)
&__glass-shine
fill var(--shine)
&__back
fill var(--back)
&__bar
fill var(--bar)
&__call-button
left -16px
&:hover ~ .elevator .elevator__call
fill var(--active)
&__cursor
fill #000
&__cursor-reflection
fill hsla(0, 0%, 0%, 0.5)
&__up-button
&__down-button
&__call-button
top 72px
position absolute
height 44px
width 44px
&__down-button
left 78px
&:hover ~ .elevator .elevator__down
fill var(--active)
&__up-button
left 34px
&:hover ~ .elevator .elevator__up
fill var(--active)
&__container
position fixed
right 0
top 5rem
height 130px
.elevator__cursor
.elevator__cursor-reflection
display none
[data-elevator-open=true]
.elevator__opening *
.elevator__up-button:hover
.elevator__down-button:hover
cursor none !important
.elevator__up-button:hover ~ .elevator .elevator__cursor
.elevator__up-button:hover ~ .elevator .elevator__cursor-reflection
.elevator__down-button:hover ~ .elevator .elevator__cursor
.elevator__down-button:hover ~ .elevator .elevator__cursor-reflection
.elevator__opening:hover .elevator__cursor
.elevator__opening:hover .elevator__cursor-reflection
display block
[data-elevator-elevating=true] *
cursor none !important
[data-elevator-elevating=true]
.elevator .elevator__dial-face
fill var(--active)
.elevator__call-button:hover ~ .elevator .elevator__call
fill var(--button)
footer
height 100vh
text-align right
position relative
h1
font-size 2rem
@media(min-width 992px)
font-size 3rem
strong
font-weight bold
.agree
top 9rem
right 0
position absolute
padding 16px 32px
background hsl(90, 60%, 50%)
color hsl(0, 0%, 100%)
font-weight bold
transition background .15s ease
border 0
&:hover
background hsl(90, 60%, 40%)
&:active
background hsl(90, 60%, 30%)
const {
gsap: {
to,
set,
timeline,
registerPlugin,
delayedCall,
utils: { mapRange },
},
ScrollTrigger,
} = window
registerPlugin(ScrollTrigger)
const ELEVATOR = document.querySelector('.elevator')
const MAIN = document.querySelector('article')
const CONTAINER = document.querySelector('.elevator__container')
const FAKE_CURSOR = document.querySelector('.elevator__cursor')
const CURSOR_REFLECTION = document.querySelector('.elevator__cursor-reflection')
const CALL = document.querySelector('.elevator__call-button')
const UP = document.querySelector('.elevator__up-button')
const DOWN = document.querySelector('.elevator__down-button')
const SOUNDS = {
DING: new Audio('https://assets.codepen.io/605876/elevator-door-ding.mp3'),
TUNE: new Audio('https://assets.codepen.io/605876/elevator-theme-tune.mp3'),
}
const TIMEOUT = 10
SOUNDS.TUNE.loop = true
const STATE = {
OPEN: false,
DOORS_MOVING: false,
ELEVATING: false,
}
let closer
set('.elevator__dial-dial', {
transformOrigin: '50% 100%',
rotate: 90,
y: -0.5,
})
to('.elevator__dial-dial', {
rotate: -90,
scrollTrigger: {
scrub: true,
trigger: 'article',
start: 'top top',
end: 'bottom bottom',
},
})
const doorOpener = () => {
if (STATE.DOORS_MOVING || STATE.ELEVATING) return
timeline({
onStart: () => {
SOUNDS.DING.play()
if (closer) closer.kill()
STATE.DOORS_MOVING = true
},
onComplete: () => {
STATE.OPEN = !STATE.OPEN
STATE.DOORS_MOVING = false
CONTAINER.dataset.elevatorOpen = STATE.OPEN
if (STATE.OPEN) closer = delayedCall(TIMEOUT, doorOpener)
},
})
.to(
'.elevator__door--left',
{ x: `${STATE.OPEN ? '+' : '-'}=16`, duration: 0.5 },
0
)
.to(
'.elevator__door--right',
{ x: `${STATE.OPEN ? '-' : '+'}=16`, duration: 0.5 },
0
)
}
CALL.addEventListener('click', doorOpener)
// -23 to 23
const updateCursorPos = e => {
const BOUNDS = ELEVATOR.getBoundingClientRect()
const x = mapRange(0, 100, -23, 26, ((e.x - BOUNDS.x) / BOUNDS.width) * 100)
const y = mapRange(0, 100, -28, 18, ((e.y - BOUNDS.y) / BOUNDS.height) * 100)
set(FAKE_CURSOR, { x, y })
set(CURSOR_REFLECTION, { x: x + 0.00005, y: y - 0.00005 })
}
ELEVATOR.addEventListener('pointermove', updateCursorPos)
UP.addEventListener('pointermove', updateCursorPos)
DOWN.addEventListener('pointermove', updateCursorPos)
const PPS = 0.0025
const elevate = posFunc => () => {
const pos = posFunc()
const distance = Math.abs(pos.y - window.scrollY)
const duration = PPS * distance
if (!STATE.OPEN || window.scrollY === pos.y || STATE.ELEVATING) return
timeline({
onStart: () => {
set('#cursor rect', { width: 32.81 })
if (closer) closer.kill()
STATE.ELEVATING = true
document.body.dataset.elevatorElevating = true
document.documentElement.style.setProperty('--cursor', 'none')
},
onComplete: () => {
STATE.ELEVATING = false
set('#cursor rect', { width: 38.81 })
document.body.dataset.elevatorElevating = false
document.documentElement.style.removeProperty('--cursor')
closer = delayedCall(TIMEOUT, doorOpener)
},
})
.to('.elevator__door--left', { x: `+=16`, duration: 0.5 }, 0)
.to('.elevator__door--right', { x: `-=16`, duration: 0.5 }, 0)
.to(window, {
onStart: () => SOUNDS.TUNE.play(),
onComplete: () => {
SOUNDS.TUNE.pause()
SOUNDS.DING.play()
},
scrollTo: pos,
duration,
ease: 'Power3.inOut',
})
.to('.elevator__door--left', { x: `-=16` }, duration + 0.5)
.to('.elevator__door--right', { x: `+=16` }, duration + 0.5)
}
UP.addEventListener(
'click',
elevate(() => ({ y: 0 }))
)
DOWN.addEventListener(
'click',
elevate(() => ({ y: document.body.scrollHeight - document.body.offsetHeight }))
)
Also see: Tab Triggers