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.
<div class="marquee-container">
<div class="marquee marquee--top">
<div></div>
</div>
<div class="marquee marquee--right">
<div></div>
</div>
<div class="marquee marquee--bottom">
<div></div>
</div>
<div class="marquee marquee--left">
<div></div>
</div>
</div>
<main class="page-content">
<h1>You'll <u>never</u> believe how chill it is!</h1>
<p>The chill zone is where all the things are copacetic. Think about all the unchill things in your life. Think about them, just for a moment. And now? Just forget about 'em. Why? Because, my friend: you've just entered the <em>Chill Zone</em>. The following passages of text are pulled from this <a href="https://www.wikihow.com/Be-Chill">wikiHow article</a>.</p>
<section class="page-content__section" data-bg-color="#17202A">
<h2>Welcome to the chill zone</h2>
<p>Do your own thing, and let others do theirs. If they're not hurting anyone, what's the problem? Chill people don't look for reasons or opportunities to hate on others just for being different. There's no reason to bully or tread on other people's territory. Try to be happy with yourself and encourage self-love in others, too and remember be yourself.</p>
<p>Unless someone is rude to you, your day should go by smoothly by being polite, considerate, and nice. Chill people don't antagonize for the sake of it or stir up a bunch of negative emotions by being jerks; chill people are generally kind and get along well with others. However, try to avoid going overboard so you don't become a people-pleaser or pushover.</p>
<p>Don't sweat the small stuff. Take your life in stride. Roll with the punches and be accepting of the little things life throws your way, reserving your passion for what matters to you most. This is pretty much the defining feature of a chill person.</p>
</section>
<section class="page-content__section" data-bg-color="#1C2833">
<h2>Prepare your chill</h2>
<p>Be fun to hang out with. Don't be someone who is really boring and afraid to try new things. Go out and do stuff you consider fun and be someone that other people want to spend time with. Talk with people, go see movies, play games, go on hikes or go camping: it's all good!</p>
<p>Make and follow your own trends. Be unique. A chill person doesn't feel the need to follow all the trends set by others, they just do what they want and what makes them happy. This laid back attitude inspires others to be more laid back and people will want to be around you more often.</p>
</section>
<section class="page-content__section" data-bg-color="#212F3D">
<h2>The best chills are those most chilled</h2>
<p>Pick your battles. Some things in life are bound to upset or anger you, and while it's okay to have those feelings, it's best not to nosedive into every argument that presents itself. Stop, take a deep breath, and decide whether an unpleasant situation is worth getting into. Catch yourself before you get stuck in a pointless argument or a big scene. From here, you can redirect the situation to be in your favor.</p>
<p>Redirect your thoughts. Distract yourself from your immediate feelings by redirecting your thoughts. There are lots of ways you can do this. You can count your breaths. You can even sing a song (inside your head is probably better than out loud).</p>
</section>
<section class="page-content__section" data-bg-color="#273746">
<h2>Chill all day and night</h2>
<p>Chew some gum. Studies have shown that we can reduce a significant amount of stress by chewing gum. Pop a stick of that winter fresh if you’re just not feeling calm in the moment.</p>
<p>Evaluate how much this matters. Think about how much your problem matters in the grand scheme of things. Will it still affect you a year from now? Does it even help to be so hard on yourself? If you made it out alive, chances are you’ll find a way to get through it and move on to more happiness and hardships.</p>
<p>Do what your grandma would do. By the time we’re much older, we usually don’t get so worried when things don’t go our way, because we get used to it. Think of how your grandma would react in a situation and do that. She’d probably say something funny and then move on to the next thing, which is really the best thing to do if you want to stay sane.</p>
</section>
<section class="page-content__section" data-bg-color="#2C3E50">
<h2>When the chill gets chiller</h2>
<p>Go somewhere else. If you just can’t handle the situation, take yourself out of it. No reason to stick around if you’re going to lose your cool and make some mistakes. Remove yourself from the room for a few minutes and then try again once you’ve managed to work through the initial anger or fear (or whatever you’re feeling).</p>
<p>
Stay away from toxic people and situations. Avoiding such things is the best way to be chill in life. Just say no to all the bullies, liars, and trash-talkers. You don’t need that in your life! Cut toxic people out of your life and don’t go around causing trouble yourself.</p>
<p>Get proactive. There's a difference between being chill and being passive. Instead of sitting around thinking your problems could be worse, always try to make things better for yourself. It'll be a lot easier to be genuinely laid-back when you're satisfied with your life as opposed to settling for less.</p>
</section>
<section class="page-content__section" data-bg-color="#34495E">
<h2>Should I bring a jacket?</h2>
<p>Maybe. But be confident. When you have lots of self confidence and comfort with who you are, you will have a much easier time being chill. You will know that it’s okay if you make a mistake, that it doesn’t make you worthless or something like that. You will know you can handle whatever crazy life manages to throw at you.</p>
<p>
Find enjoyment in life. Do things in life that make you happy. Don’t do things that stress you out just to accommodate others and not yourself. Doing things that make you happy will make you more calm and relaxed, helping you deal with all your problems in a better way.</p>
<p>
Ignore ignorant opinions. Not caring what others think will make many situations in your life less stressful, like arguments and rumors.</p>
<p>
Keep a sense of humor. You’ve got to laugh about stuff in life, especially the stuff that doesn’t go your way, or you’re going to spend life grumpy and stressed out. When someone is a jerk to you, relieve your anger through humor. Just laugh at them because they are clearly very boring and miserable.</p>
</section>
</main>
:root {
--color-background: #151818;
--color-text: whitesmoke;
--color-chill: #ecf232;
--marquee-font-size: min(max(12px, 2vw), 22px);
--headline-font-size: min(max(40px, 6vw), 70px);
--paragraph-font-size: min(max(16px, 4vw), 22px);
--section-heading-font-size: min(max(30px, 4vw), 50px);
--duration: 300ms;
--ease: cubic-bezier(0.33, 1, 0.68, 1);
}
* {
box-sizing: border-box;
}
body {
background-color: var(--color-background);
font-family: "Inter", sans-serif;
color: var(--color-text);
width: 100%;
transition: background-color var(--duration) var(--ease);
}
.page-content {
max-width: 90ch;
padding: 4rem;
margin: 8rem auto;
* + * {
margin-top: 2.5rem;
}
a {
color: var(--color-chill);
}
h1 {
font-size: var(--headline-font-size);
font-weight: 700;
line-height: 1.2;
}
h2 {
margin-top: 6rem;
font-size: var(--section-heading-font-size);
font-weight: 700;
line-height: 1.2;
}
em {
font-style: italic;
}
p {
font-size: var(--paragraph-font-size);
line-height: 1.75;
letter-spacing: 0.0125rem;
}
}
.page-content__section {
transition: opacity var(--duration) var(--ease);
h2 {
transform-origin: 50% 100%;
}
}
.page-content__section.active {
opacity: 1;
h2 {
animation: activate calc(var(--duration) * 2) var(--ease) forwards;
@keyframes activate {
25% {
color: var(--color-chill);
transform: translateY(-12px);
}
40% {
transform: translateY(2px);
}
50% {
transform: translateY(-4px);
}
60% {
color: var(--color-text);
transform: translateY(1px);
}
65%,
100% {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
animation: none;
}
}
}
.marquee-container {
position: fixed;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-weight: 700;
font-family: "Karla", sans-serif;
text-transform: uppercase;
z-index: 1;
}
.marquee {
position: absolute;
font-size: var(--marquee-font-size);
line-height: 1;
white-space: nowrap;
letter-spacing: 0.25rem;
overflow: hidden;
padding: 2vmin 0;
min-width: 100%;
user-select: none;
background-color: var(--color-background);
box-shadow: var(--color-background) 0 2vmin 2vmin 1vmin;
transition: background-color var(--duration) var(--ease),
box-shadow var(--duration) var(--ease);
&--top {
top: -1px;
}
&--left {
left: -1px;
bottom: -6vmin;
transform: rotate(-0.25turn);
transform-origin: 0 0;
}
&--right {
left: calc(100% + 1px);
top: 0;
transform: rotate(0.25turn);
transform-origin: 0 0;
}
&--bottom {
bottom: -1px;
right: 0;
transform: rotate(0.5turn);
}
div {
opacity: 1;
transition: opacity var(--duration) var(--ease);
&.active {
opacity: 0;
}
}
}
gsap.registerPlugin(ScrollTrigger);
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion)");
const sections = document.querySelectorAll(".page-content__section");
const marquees = document.querySelectorAll(".marquee div");
let marqueeText = "";
const updateMarqueeText = () => {
[...marquees].forEach((marquee) => {
marquee.classList.add("active");
marquee.addEventListener("transitionend", () => {
marquee.classList.remove("active");
marquee.innerText = `${marqueeText} 😎 `.repeat(20);
});
});
};
const updateBgColor = (color) =>
document.documentElement.style.setProperty("--color-background", color);
const setActiveSection = (section) => {
marqueeText = section.querySelector("h2").textContent;
[...sections].forEach((section) => section.classList.remove("active"));
section.classList.add("active");
!prefersReducedMotion.matches && updateBgColor(section.dataset.bgColor);
updateMarqueeText();
};
if (!prefersReducedMotion.matches) {
gsap.to(".marquee div", {
scrollTrigger: {
trigger: ".page-content",
scrub: 0.25,
start: "top bottom",
end: "bottom top",
ease: "power2"
},
xPercent: -50
});
}
gsap.utils.toArray(".page-content__section h2").forEach((heading) => {
ScrollTrigger.create({
trigger: heading,
start: "top center",
end: "bottom 200px",
toggleActions: "play reset play reset",
ease: "power2",
onEnter: () =>
marqueeText !== heading.textContent &&
setActiveSection(heading.parentElement),
onEnterBack: () =>
marqueeText !== heading.textContent &&
setActiveSection(heading.parentElement)
});
});
Also see: Tab Triggers