Posandu/offsetmodal.html

## offsetmodal.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Smooth Modal Animation with Scroll Effects</title>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/ress@4.0.0/dist/ress.min.css"
		/>

		<style>
			.container {
				max-width: 500px;
				font-size: 16px;
				line-height: 26px;
				margin: 40px auto;
			}

			p {
				font-size: inherit;
				margin: 14px 0;
			}

			h1 {
				margin-bottom: 40px;
				letter-spacing: -1px;
			}

			body {
				font-family: system-ui;
			}

			.modal {
				display: flex;
				position: fixed;
				inset: 0;
				align-items: center;
				justify-content: center;
				transition: opacity 0.3s ease;
				opacity: 0;
				pointer-events: none;
			}

			.modal.show {
				opacity: 1;
				pointer-events: auto;
			}

			.modal__overlay {
				position: absolute;
				inset: 0;
				height: 100%;
				width: 100%;
				background: #00000070;
				transition: opacity 0.1s ease;
			}

			.modal__content {
				max-width: 500px;
				padding: 20px 30px;
				background: white;
				z-index: 99;
				position: absolute;
				transition: transform 0.02s ease;
				border-radius: 15px;
			}

			button.modal__close {
				margin-top: 6px;
				background: #ebebeb;
				width: 100%;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 4px;
				font-weight: 600;
				color: #252a36;
				transition: all 0.2s ease;
			}

			button.modal__close:hover {
				background: #dfdfdf;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h1>How it all started</h1>

			<p>
				I really recommend you use odorless thinner or your spouse is gonna run
				you right out into the yard and you'll be working by yourself. And just
				raise cain. Let that brush dance around there and play. If you don't
				like it - change it. It's your world. Give him a friend, we forget the
				trees get lonely too. We'll do another happy little painting.
			</p>

			<p>
				Let all these little things happen. Don't fight them. Learn to use them.
				Learn when to stop. I get carried away with this brush cleaning.
			</p>

			<p>
				A fan brush can be your best friend. The shadows are just like the
				highlights, but we're going in the opposite direction. Put your feelings
				into it, your heart, it's your world. Just think about these things in
				your mind - then bring them into your world. We're not trying to teach
				you a thing to copy. We're just here to teach you a technique, then let
				you loose into the world. Let's put some highlights on these little
				trees. The sun wouldn't forget them.
			</p>

			<p>
				With something so strong, a little bit can go a long way. Let's put some
				happy little bushes on the other side now. Poor old tree. If we're going
				to have animals around we all have to be concerned about them and take
				care of them. That is when you can experience true joy, when you have no
				fear.
			</p>

			<p>
				You have to make these big decisions. We'll take a little bit of Van
				Dyke Brown. We'll throw some happy little limbs on this tree. Let's have
				a little bit of fun today. Just relax and let it flow. That easy.
			</p>

			<p>
				Get away from those little Christmas tree things we used to make in
				school. Let's have a happy little tree in here. You can't make a
				mistake. Anything that happens you can learn to use - and make something
				beautiful out of it. Let's make a nice big leafy tree.
			</p>

			<p>
				We'll put a happy little sky in here. By now you should be quite happy
				about what's happening here. God gave you this gift of imagination. Use
				it. But we're not there yet, so we don't need to worry about it. In
				nature, dead trees are just as normal as live trees. There comes a nice
				little fluffer.
			</p>

			<p>
				Only think about one thing at a time. Don't get greedy. Let the paint
				work. This is your world, whatever makes you happy you can put in it. Go
				crazy. Let's build an almighty mountain.
			</p>

			<p>
				Almost everything is going to happen for you automatically - you don't
				have to spend any time working or worrying. This is the time to get out
				all your flustrations, much better than kicking the dog around the house
				or taking it out on your spouse. Even trees need a friend. We all need
				friends. You can bend rivers. But when I get home, the only thing I have
				power over is the garbage. Work that paint.
			</p>

			<p>
				As trees get older they lose their chlorophyll. Imagination is the key
				to painting. This is a fantastic little painting. Every single thing in
				the world has its own personality - and it is up to you to make friends
				with the little rascals.
			</p>

			<p>
				There he comes. That's what makes life fun. That you can make these
				decisions. That you can create the world that you want. Let's get crazy.
			</p>

			<p>
				Look around, look at what we have. Beauty is everywhere, you only have
				to look to see it. Just let this happen. We just let this flow right out
				of our minds. Let's put some happy trees and bushes back in here. Decide
				where your cloud lives. Maybe he lives right in here. This is the way
				you take out your flustrations.
			</p>

			<p>
				I sincerely wish for you every possible joy life could bring. You could
				sit here for weeks with your one hair brush trying to do that - or you
				could do it with one stroke with an almighty brush. All kinds of happy
				little splashes. Sometimes you learn more from your mistakes than you do
				from your masterpieces.
			</p>

			<p>
				Just let these leaves jump off the brush Absolutely no pressure. You are
				just a whisper floating across a mountain. You can do anything here -
				the only pre-requisite is that it makes you happy.
			</p>

			<p>
				I'm going to mix up a little color. We’ll use Van Dyke Brown, Permanent
				Red, and a little bit of Prussian Blue. Let your heart take you to
				wherever you want to be. I thought today we would make a happy little
				stream that's just running through the woods here. Maybe we got a few
				little happy bushes here, just covered with snow.
			</p>

			<p>
				Let's go up in here, and start having some fun It's a very cold picture,
				I may have to go get my coat. It’s about to freeze me to death. Paint
				anything you want on the canvas. Create your own world. There it is. If
				you don't think every day is a good day - try missing a few. You'll see.
			</p>

			<p>
				I sincerely wish for you every possible joy life could bring. You could
				sit here for weeks with your one hair brush trying to do that - or you
				could do it with one stroke with an almighty brush. All kinds of happy
				little splashes. Sometimes you learn more from your mistakes than you do
				from your masterpieces.
			</p>

			<p>
				Just let these leaves jump off the brush Absolutely no pressure. You are
				just a whisper floating across a mountain. You can do anything here -
				the only pre-requisite is that it makes you happy.
			</p>

			<p>
				I'm going to mix up a little color. We’ll use Van Dyke Brown, Permanent
				Red, and a little bit of Prussian Blue. Let your heart take you to
				wherever you want to be. I thought today we would make a happy little
				stream that's just running through the woods here. Maybe we got a few
				little happy bushes here, just covered with snow.
			</p>

			<p>
				Let's go up in here, and start having some fun It's a very cold picture,
				I may have to go get my coat. It’s about to freeze me to death. Paint
				anything you want on the canvas. Create your own world. There it is. If
				you don't think every day is a good day - try missing a few. You'll see.
			</p>

			<p>
				I'm gonna start with a little Alizarin crimson and a touch of Prussian
				blue Maybe, just to play a little, we'll put a little tree here. You
				don't have to spend all your time thinking about what you're doing, you
				just let it happen.
			</p>

			<p>
				Let your heart be your guide. Use what you see, don't plan it. You don't
				want to kill all your dark areas they are very important. Mountains are
				so simple, they're hard.
			</p>

			<p>
				Just use the old one inch brush. It's life. It's interesting. It's fun.
				Maybe there's a little something happening right here. Any little thing
				can be your friend if you let it be. Get tough with it, get strong.
				We'll play with clouds today.
			</p>

			<p>
				We'll have a super time. If these lines aren't straight, your water's
				going to run right out of your painting and get your floor wet. You can
				create beautiful things - but you have to see them in your mind first.
				Anytime you learn something your time and energy are not wasted.
			</p>

			<p>
				It's important to me that you're happy. In this world, everything can be
				happy. Just a happy little shadow that lives in there. That easy. You
				can get away with a lot.
			</p>

			<p>
				Happy painting, God bless. Once you learn the technique, ohhh! Turn you
				loose on the world; you become a tiger. The man who does the best job is
				the one who is happy at his job.
			</p>

			<p>
				Do an almighty painting with us. Each highlight must have it's own
				private shadow. It all happens automatically. Let's make some happy
				little clouds in our world. We start with a vision in our heart, and we
				put it on canvas. Look at them little rascals.
			</p>

			<p>
				Isn't that fantastic? You can just push a little tree out of your brush
				like that. That's what painting is all about. It should make you feel
				good when you paint. Van Dyke Brown is a very nice brown, it's almost
				like a chocolate brown.
			</p>

			<p>
				Now we'll take the almighty fan brush. Now, we're going to fluff this
				cloud. A big strong tree needs big strong roots. Trees cover up a
				multitude of sins. I want everbody to be happy. That's what it's all
				about.
			</p>

			<p>
				Now let's put some happy little clouds in here. We don't have to be
				committed. We are just playing here. The secret to doing anything is
				believing that you can do it. Anything that you believe you can do
				strong enough, you can do. Anything. As long as you believe. Be careful.
				You can always add more - but you can't take it away. Talent is a
				pursued interest. That is to say, anything you practice you can do.
			</p>

			<p>
				I guess I'm a little weird. I like to talk to trees and animals. That's
				okay though; I have more fun than most people. We'll put all the little
				clouds in and let them dance around and have fun. Go out on a limb -
				that's where the fruit is. The first step to doing anything is to
				believe you can do it. See it finished in your mind before you ever
				start.
			</p>

			<p>
				Just go back and put one little more happy tree in there. Only God can
				make a tree - but you can paint one. Let all these things just sort of
				happen.
			</p>

			<p>
				Trees live in your fan brush, but you have to scare them out. Let's
				build some happy little clouds up here. Remember how free clouds are.
				They just lay around in the sky all day long. La- da- da- da- dah. Just
				be happy.
			</p>

			<p>
				Let's put some happy little clouds in our world. Everyone needs a
				friend. Friends are the most valuable things in the world. Clouds are
				free. They just float around the sky all day and have fun.
			</p>

			<p>
				We have a fantastic little sky! Without washing the brush, I'm gonna go
				right into some Van Dyke Brown, some Burnt Umber, and a little bit of
				Sap Green. There's not a thing in the world wrong with washing your
				brush. They say everything looks better with odd numbers of things. But
				sometimes I put even numbers—just to upset the critics.
			</p>

			<p>
				Isn't it great to do something you can't fail at? No worries. No cares.
				Just float and wait for the wind to blow you around. Work on one thing
				at a time. Don't get carried away - we have plenty of time. There are no
				limits in this world. That's a son of a gun of a cloud. Trees get lonely
				too, so we'll give him a little friend.
			</p>

			<p>
				Don't kill all your dark areas - you need them to show the light. You
				got your heavy coat out yet? It's getting colder. I guess that would be
				considered a UFO. A big cotton ball in the sky.
			</p>

			<p>
				We need a shadow side and a highlight side. Now we don't want him to get
				lonely, so we'll give him a little friend. When you buy that first tube
				of paint it gives you an artist license. There isn't a rule. You just
				practice and find out which way works best for you.
			</p>

			<p>
				This is unplanned it really just happens. Don't hurry. Take your time
				and enjoy. Let your imagination be your guide. You better get your coat
				out, this is going to be a cold painting. Let's just drop a little
				Evergreen right here. Trees grow in all kinds of ways. They're not all
				perfectly straight. Not every limb is perfect.
			</p>

			<p>
				Use what happens naturally, don't fight it. Isn't that fantastic? Maybe
				he has a little friend that lives right over here. Just beat the devil
				out of it.
			</p>
		</div>

		<div class="modal">
			<div class="modal__overlay"></div>

			<div class="modal__content">
				<h2>Modal</h2>
				<p>
					This is a modal. It's a dialog box that appears on top of the app's
					content and must be dismissed before the user can interact with the
					app again.
				</p>

				<button class="modal__close">Close</button>
			</div>
		</div>

		<script>
			const MODAL = document.querySelector(".modal");
			const MODAL_OVERLAY = document.querySelector(".modal__overlay");
			const MODAL_CONTENT = document.querySelector(".modal__content");
			const MODAL_CLOSE = document.querySelector(".modal__close");
			const MODAL_CONTENT_HEIGHT = 203;
			const CENTER = (window.innerHeight - MODAL_CONTENT_HEIGHT) / 2;
			const SHOW = 1500;
			const A = MODAL_CONTENT_HEIGHT;

			const update = (y) => {
				if (y > SHOW - A) {
					MODAL.classList.add("show");

					const percent = Math.min((y - (SHOW - A)) / A, 1);

					const show = () => {
						MODAL_OVERLAY.style.opacity = Math.max(0.1, percent);
						MODAL_CONTENT.style.transform = `translateY(${
							CENTER - CENTER * percent
						}px) scale(${1 * percent})`;
					};

					requestAnimationFrame(show);
				} else {
					MODAL.classList.remove("show");
				}
			};

			document.addEventListener("scroll", () => {
				const y = window.scrollY;

				requestAnimationFrame(() => update(y));
			});

			MODAL_CLOSE.addEventListener("click", () => {
				MODAL.classList.remove("show");
			});

			MODAL_OVERLAY.addEventListener("click", () => {
				MODAL.classList.remove("show");
			});
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Smooth Modal Animation with Scroll Effects</title>
	<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/ress@4.0.0/dist/ress.min.css"
	/>

	<style>
	.container {
	max-width: 500px;
	font-size: 16px;
	line-height: 26px;
	margin: 40px auto;
	}

	p {
	font-size: inherit;
	margin: 14px 0;
	}

	h1 {
	margin-bottom: 40px;
	letter-spacing: -1px;
	}

	body {
	font-family: system-ui;
	}

	.modal {
	display: flex;
	position: fixed;
	inset: 0;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
	opacity: 0;
	pointer-events: none;
	}

	.modal.show {
	opacity: 1;
	pointer-events: auto;
	}

	.modal__overlay {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	background: #00000070;
	transition: opacity 0.1s ease;
	}

	.modal__content {
	max-width: 500px;
	padding: 20px 30px;
	background: white;
	z-index: 99;
	position: absolute;
	transition: transform 0.02s ease;
	border-radius: 15px;
	}

	button.modal__close {
	margin-top: 6px;
	background: #ebebeb;
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-weight: 600;
	color: #252a36;
	transition: all 0.2s ease;
	}

	button.modal__close:hover {
	background: #dfdfdf;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>How it all started</h1>

	<p>
	I really recommend you use odorless thinner or your spouse is gonna run
	you right out into the yard and you'll be working by yourself. And just
	raise cain. Let that brush dance around there and play. If you don't
	like it - change it. It's your world. Give him a friend, we forget the
	trees get lonely too. We'll do another happy little painting.
	</p>

	<p>
	Let all these little things happen. Don't fight them. Learn to use them.
	Learn when to stop. I get carried away with this brush cleaning.
	</p>

	<p>
	A fan brush can be your best friend. The shadows are just like the
	highlights, but we're going in the opposite direction. Put your feelings
	into it, your heart, it's your world. Just think about these things in
	your mind - then bring them into your world. We're not trying to teach
	you a thing to copy. We're just here to teach you a technique, then let
	you loose into the world. Let's put some highlights on these little
	trees. The sun wouldn't forget them.
	</p>

	<p>
	With something so strong, a little bit can go a long way. Let's put some
	happy little bushes on the other side now. Poor old tree. If we're going
	to have animals around we all have to be concerned about them and take
	care of them. That is when you can experience true joy, when you have no
	fear.
	</p>

	<p>
	You have to make these big decisions. We'll take a little bit of Van
	Dyke Brown. We'll throw some happy little limbs on this tree. Let's have
	a little bit of fun today. Just relax and let it flow. That easy.
	</p>

	<p>
	Get away from those little Christmas tree things we used to make in
	school. Let's have a happy little tree in here. You can't make a
	mistake. Anything that happens you can learn to use - and make something
	beautiful out of it. Let's make a nice big leafy tree.
	</p>

	<p>
	We'll put a happy little sky in here. By now you should be quite happy
	about what's happening here. God gave you this gift of imagination. Use
	it. But we're not there yet, so we don't need to worry about it. In
	nature, dead trees are just as normal as live trees. There comes a nice
	little fluffer.
	</p>

	<p>
	Only think about one thing at a time. Don't get greedy. Let the paint
	work. This is your world, whatever makes you happy you can put in it. Go
	crazy. Let's build an almighty mountain.
	</p>

	<p>
	Almost everything is going to happen for you automatically - you don't
	have to spend any time working or worrying. This is the time to get out
	all your flustrations, much better than kicking the dog around the house
	or taking it out on your spouse. Even trees need a friend. We all need
	friends. You can bend rivers. But when I get home, the only thing I have
	power over is the garbage. Work that paint.
	</p>

	<p>
	As trees get older they lose their chlorophyll. Imagination is the key
	to painting. This is a fantastic little painting. Every single thing in
	the world has its own personality - and it is up to you to make friends
	with the little rascals.
	</p>

	<p>
	There he comes. That's what makes life fun. That you can make these
	decisions. That you can create the world that you want. Let's get crazy.
	</p>

	<p>
	Look around, look at what we have. Beauty is everywhere, you only have
	to look to see it. Just let this happen. We just let this flow right out
	of our minds. Let's put some happy trees and bushes back in here. Decide
	where your cloud lives. Maybe he lives right in here. This is the way
	you take out your flustrations.
	</p>

	<p>
	I sincerely wish for you every possible joy life could bring. You could
	sit here for weeks with your one hair brush trying to do that - or you
	could do it with one stroke with an almighty brush. All kinds of happy
	little splashes. Sometimes you learn more from your mistakes than you do
	from your masterpieces.
	</p>

	<p>
	Just let these leaves jump off the brush Absolutely no pressure. You are
	just a whisper floating across a mountain. You can do anything here -
	the only pre-requisite is that it makes you happy.
	</p>

	<p>
	I'm going to mix up a little color. We’ll use Van Dyke Brown, Permanent
	Red, and a little bit of Prussian Blue. Let your heart take you to
	wherever you want to be. I thought today we would make a happy little
	stream that's just running through the woods here. Maybe we got a few
	little happy bushes here, just covered with snow.
	</p>

	<p>
	Let's go up in here, and start having some fun It's a very cold picture,
	I may have to go get my coat. It’s about to freeze me to death. Paint
	anything you want on the canvas. Create your own world. There it is. If
	you don't think every day is a good day - try missing a few. You'll see.
	</p>

	<p>
	I sincerely wish for you every possible joy life could bring. You could
	sit here for weeks with your one hair brush trying to do that - or you
	could do it with one stroke with an almighty brush. All kinds of happy
	little splashes. Sometimes you learn more from your mistakes than you do
	from your masterpieces.
	</p>

	<p>
	Just let these leaves jump off the brush Absolutely no pressure. You are
	just a whisper floating across a mountain. You can do anything here -
	the only pre-requisite is that it makes you happy.
	</p>

	<p>
	I'm going to mix up a little color. We’ll use Van Dyke Brown, Permanent
	Red, and a little bit of Prussian Blue. Let your heart take you to
	wherever you want to be. I thought today we would make a happy little
	stream that's just running through the woods here. Maybe we got a few
	little happy bushes here, just covered with snow.
	</p>

	<p>
	Let's go up in here, and start having some fun It's a very cold picture,
	I may have to go get my coat. It’s about to freeze me to death. Paint
	anything you want on the canvas. Create your own world. There it is. If
	you don't think every day is a good day - try missing a few. You'll see.
	</p>

	<p>
	I'm gonna start with a little Alizarin crimson and a touch of Prussian
	blue Maybe, just to play a little, we'll put a little tree here. You
	don't have to spend all your time thinking about what you're doing, you
	just let it happen.
	</p>

	<p>
	Let your heart be your guide. Use what you see, don't plan it. You don't
	want to kill all your dark areas they are very important. Mountains are
	so simple, they're hard.
	</p>

	<p>
	Just use the old one inch brush. It's life. It's interesting. It's fun.
	Maybe there's a little something happening right here. Any little thing
	can be your friend if you let it be. Get tough with it, get strong.
	We'll play with clouds today.
	</p>

	<p>
	We'll have a super time. If these lines aren't straight, your water's
	going to run right out of your painting and get your floor wet. You can
	create beautiful things - but you have to see them in your mind first.
	Anytime you learn something your time and energy are not wasted.
	</p>

	<p>
	It's important to me that you're happy. In this world, everything can be
	happy. Just a happy little shadow that lives in there. That easy. You
	can get away with a lot.
	</p>

	<p>
	Happy painting, God bless. Once you learn the technique, ohhh! Turn you
	loose on the world; you become a tiger. The man who does the best job is
	the one who is happy at his job.
	</p>

	<p>
	Do an almighty painting with us. Each highlight must have it's own
	private shadow. It all happens automatically. Let's make some happy
	little clouds in our world. We start with a vision in our heart, and we
	put it on canvas. Look at them little rascals.
	</p>

	<p>
	Isn't that fantastic? You can just push a little tree out of your brush
	like that. That's what painting is all about. It should make you feel
	good when you paint. Van Dyke Brown is a very nice brown, it's almost
	like a chocolate brown.
	</p>

	<p>
	Now we'll take the almighty fan brush. Now, we're going to fluff this
	cloud. A big strong tree needs big strong roots. Trees cover up a
	multitude of sins. I want everbody to be happy. That's what it's all
	about.
	</p>

	<p>
	Now let's put some happy little clouds in here. We don't have to be
	committed. We are just playing here. The secret to doing anything is
	believing that you can do it. Anything that you believe you can do
	strong enough, you can do. Anything. As long as you believe. Be careful.
	You can always add more - but you can't take it away. Talent is a
	pursued interest. That is to say, anything you practice you can do.
	</p>

	<p>
	I guess I'm a little weird. I like to talk to trees and animals. That's
	okay though; I have more fun than most people. We'll put all the little
	clouds in and let them dance around and have fun. Go out on a limb -
	that's where the fruit is. The first step to doing anything is to
	believe you can do it. See it finished in your mind before you ever
	start.
	</p>

	<p>
	Just go back and put one little more happy tree in there. Only God can
	make a tree - but you can paint one. Let all these things just sort of
	happen.
	</p>

	<p>
	Trees live in your fan brush, but you have to scare them out. Let's
	build some happy little clouds up here. Remember how free clouds are.
	They just lay around in the sky all day long. La- da- da- da- dah. Just
	be happy.
	</p>

	<p>
	Let's put some happy little clouds in our world. Everyone needs a
	friend. Friends are the most valuable things in the world. Clouds are
	free. They just float around the sky all day and have fun.
	</p>

	<p>
	We have a fantastic little sky! Without washing the brush, I'm gonna go
	right into some Van Dyke Brown, some Burnt Umber, and a little bit of
	Sap Green. There's not a thing in the world wrong with washing your
	brush. They say everything looks better with odd numbers of things. But
	sometimes I put even numbers—just to upset the critics.
	</p>

	<p>
	Isn't it great to do something you can't fail at? No worries. No cares.
	Just float and wait for the wind to blow you around. Work on one thing
	at a time. Don't get carried away - we have plenty of time. There are no
	limits in this world. That's a son of a gun of a cloud. Trees get lonely
	too, so we'll give him a little friend.
	</p>

	<p>
	Don't kill all your dark areas - you need them to show the light. You
	got your heavy coat out yet? It's getting colder. I guess that would be
	considered a UFO. A big cotton ball in the sky.
	</p>

	<p>
	We need a shadow side and a highlight side. Now we don't want him to get
	lonely, so we'll give him a little friend. When you buy that first tube
	of paint it gives you an artist license. There isn't a rule. You just
	practice and find out which way works best for you.
	</p>

	<p>
	This is unplanned it really just happens. Don't hurry. Take your time
	and enjoy. Let your imagination be your guide. You better get your coat
	out, this is going to be a cold painting. Let's just drop a little
	Evergreen right here. Trees grow in all kinds of ways. They're not all
	perfectly straight. Not every limb is perfect.
	</p>

	<p>
	Use what happens naturally, don't fight it. Isn't that fantastic? Maybe
	he has a little friend that lives right over here. Just beat the devil
	out of it.
	</p>
	</div>

	<div class="modal">
	<div class="modal__overlay"></div>

	<div class="modal__content">
	<h2>Modal</h2>
	<p>
	This is a modal. It's a dialog box that appears on top of the app's
	content and must be dismissed before the user can interact with the
	app again.
	</p>

	<button class="modal__close">Close</button>
	</div>
	</div>

	<script>
	const MODAL = document.querySelector(".modal");
	const MODAL_OVERLAY = document.querySelector(".modal__overlay");
	const MODAL_CONTENT = document.querySelector(".modal__content");
	const MODAL_CLOSE = document.querySelector(".modal__close");
	const MODAL_CONTENT_HEIGHT = 203;
	const CENTER = (window.innerHeight - MODAL_CONTENT_HEIGHT) / 2;
	const SHOW = 1500;
	const A = MODAL_CONTENT_HEIGHT;

	const update = (y) => {
	if (y > SHOW - A) {
	MODAL.classList.add("show");

	const percent = Math.min((y - (SHOW - A)) / A, 1);

	const show = () => {
	MODAL_OVERLAY.style.opacity = Math.max(0.1, percent);
	MODAL_CONTENT.style.transform = `translateY(${
	CENTER - CENTER * percent
	}px) scale(${1 * percent})`;
	};

	requestAnimationFrame(show);
	} else {
	MODAL.classList.remove("show");
	}
	};

	document.addEventListener("scroll", () => {
	const y = window.scrollY;

	requestAnimationFrame(() => update(y));
	});

	MODAL_CLOSE.addEventListener("click", () => {
	MODAL.classList.remove("show");
	});

	MODAL_OVERLAY.addEventListener("click", () => {
	MODAL.classList.remove("show");
	});
	</script>
	</body>
	</html>