Posandu · July 3, 2024 10:28
diff --git a/offsetmodal.html b/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/[email protected]/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/[email protected]/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>