summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFuwn <[email protected]>2022-10-31 13:33:34 -0700
committerFuwn <[email protected]>2022-10-31 13:33:34 -0700
commit7298705805db1d824cf692d464b94e341fce7431 (patch)
tree31522ffb8569282ea934272b6cf338b59efe0840
downloadfuwn.lol-7298705805db1d824cf692d464b94e341fce7431.tar.xz
fuwn.lol-7298705805db1d824cf692d464b94e341fce7431.zip
feat: initial releaseHEADmain
Diffstat
-rw-r--r--index.css103
-rw-r--r--index.css.map1
-rw-r--r--index.html73
-rw-r--r--index.js57
-rw-r--r--index.scss100
5 files changed, 334 insertions, 0 deletions
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..6738ba7
--- /dev/null
+++ b/index.css
@@ -0,0 +1,103 @@
+:root {
+ --text-color: #111;
+ --bg-color: #b9b3a9;
+}
+
+body {
+ font-family: termina, sans-serif;
+ color: var(--text-color);
+ background: var(--bg-color);
+ transition: 0.3s ease-out;
+ overflow-x: hidden;
+ max-width: 100%;
+ width: 100%;
+ -ms-scroll-chaining: none;
+ overscroll-behavior: none;
+}
+
+section:not(#sectionPin) {
+ min-height: 100vh;
+ width: 100%;
+ position: relative;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ grid-gap: 2rem;
+ padding: 50px 10vw;
+ margin: auto;
+ place-items: center;
+}
+
+img {
+ height: 80vh;
+ width: auto;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+
+h1 {
+ font-size: 5rem;
+ line-height: 1;
+ font-weight: 800;
+ margin-bottom: 1rem;
+ position: absolute;
+ top: 10vw;
+ left: 10vw;
+ z-index: 4;
+ overflow-wrap: break-word;
+ -webkit-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
+}
+@media (max-width: 768px) {
+ h1 {
+ font-size: 16vw;
+ }
+}
+h1 span {
+ display: block;
+}
+
+h2 {
+ font-size: 2rem;
+ max-width: 400px;
+}
+
+.credit {
+ font-family: Termina, sans-serif;
+}
+.credit a {
+ color: var(--text-color);
+}
+
+* {
+ box-sizing: border-box;
+}
+
+#sectionPin {
+ height: 100vh;
+ overflow: hidden;
+ display: flex;
+ left: 0;
+ background: var(--text-color);
+ color: var(--bg-color);
+}
+
+.pin-wrap {
+ height: 100vh;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ padding: 50px 10vw;
+}
+.pin-wrap > * {
+ min-width: 60vw;
+ padding: 0 5vw;
+}
+
+p {
+ position: absolute;
+ bottom: 10vw;
+ right: 10vw;
+ width: 200px;
+ line-height: 1.5;
+}/*# sourceMappingURL=index.css.map */ \ No newline at end of file
diff --git a/index.css.map b/index.css.map
new file mode 100644
index 0000000..0664032
--- /dev/null
+++ b/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACE,kBAAA;EACA,mBAAA;ACCF;;ADEA;EACE,gCAAA;EACA,wBAAA;EACA,2BAAA;EACA,yBAAA;EACA,kBAAA;EACA,eAAA;EACA,WAAA;EACA,yBAAA;MAAA,yBAAA;ACCF;;ADEA;EACE,iBAAA;EACA,WAAA;EACA,kBAAA;EACA,aAAA;EACA,2DAAA;EACA,cAAA;EACA,kBAAA;EACA,YAAA;EACA,mBAAA;ACCF;;ADEA;EACE,YAAA;EACA,WAAA;EACA,oBAAA;KAAA,iBAAA;ACCF;;ADEA;EACE,eAAA;EACA,cAAA;EACA,gBAAA;EACA,mBAAA;EACA,kBAAA;EACA,SAAA;EACA,UAAA;EACA,UAAA;EACA,yBAAA;EACA,qBAAA;MAAA,iBAAA;UAAA,aAAA;ACCF;ADCE;EAZF;IAaI,eAAA;ECEF;AACF;ADAE;EACE,cAAA;ACEJ;;ADEA;EACE,eAAA;EACA,gBAAA;ACCF;;ADEA;EACE,gCAAA;ACCF;ADAE;EACE,wBAAA;ACEJ;;ADEA;EACE,sBAAA;ACCF;;ADEA;EACE,aAAA;EACA,gBAAA;EACA,aAAA;EACA,OAAA;EACA,6BAAA;EACA,sBAAA;ACCF;;ADEA;EACE,aAAA;EACA,aAAA;EACA,2BAAA;EACA,mBAAA;EACA,kBAAA;ACCF;ADCE;EACE,eAAA;EACA,cAAA;ACCJ;;ADGA;EACE,kBAAA;EACA,YAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACAF","file":"index.css"} \ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1f1611d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+ <title>fuwn.lol</title>
+
+ <link
+ rel="icon"
+ href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎃</text></svg>"
+ />
+
+ <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
+ <script src="index.js" defer></script>
+
+ <link
+ rel="stylesheet"
+ href="https://meyerweb.com/eric/tools/css/reset/reset.css"
+ />
+ <link rel="stylesheet" href="https://use.typekit.net/skn8ash.css" />
+ <link
+ rel="stylesheet"
+ href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css"
+ />
+ <link rel="stylesheet" href="index.css" />
+ </head>
+
+ <body>
+ <div class="container">
+ <section data-bgcolor="#bcb8ad" data-textcolor="#032f35">
+ <div>
+ <h1 data-scroll data-scroll-speed="1">
+ <span>fuwn</span> <span>dot</span> <span>lol</span>
+ </h1>
+ <p data-scroll data-scroll-speed="2" data-scroll-delay="0.2">
+ happy halloween
+ </p>
+ </div>
+ </section>
+
+ <section id="sectionPin">
+ <div class="pin-wrap">
+ <h2>Here's some dogs that seem to be in the Halloween spirit.</h2>
+ <img
+ src="https://images.unsplash.com/photo-1507813686138-954c2c879e8d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
+ alt=""
+ />
+ <img
+ src="https://images.unsplash.com/photo-1481567799806-efb12789fa62?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=983&q=80"
+ alt=""
+ />
+ <img
+ src="https://images.unsplash.com/photo-1507629020616-5585874d0e26?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
+ alt=""
+ />
+ </div>
+ </section>
+ <section data-bgcolor="#e3857a" data-textcolor="#f1dba7">
+ <img
+ src="https://images.unsplash.com/photo-1588943211346-0908a1fb0b01?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80"
+ alt=""
+ />
+ <h2 data-scroll data-scroll-speed="1" class="credit">
+ <a href="https://fuwn.me" target="_blank">Made by Fuwn</a>
+ </h2>
+ </section>
+ </div>
+ </body>
+</html>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..bdb0add
--- /dev/null
+++ b/index.js
@@ -0,0 +1,57 @@
+gsap.registerPlugin(ScrollTrigger);
+
+const pageContainer = document.querySelector(".container");
+
+/* SMOOTH SCROLL */
+const scroller = new LocomotiveScroll({
+ el: pageContainer,
+ smooth: true,
+});
+
+scroller.on("scroll", ScrollTrigger.update);
+
+ScrollTrigger.scrollerProxy(pageContainer, {
+ scrollTop(value) {
+ return arguments.length
+ ? scroller.scrollTo(value, 0, 0)
+ : scroller.scroll.instance.scroll.y;
+ },
+ getBoundingClientRect() {
+ return {
+ left: 0,
+ top: 0,
+ width: window.innerWidth,
+ height: window.innerHeight,
+ };
+ },
+ pinType: pageContainer.style.transform ? "transform" : "fixed",
+});
+
+////////////////////////////////////
+////////////////////////////////////
+window.addEventListener("load", function () {
+ let pinBoxes = document.querySelectorAll(".pin-wrap > *");
+ let pinWrap = document.querySelector(".pin-wrap");
+ let pinWrapWidth = pinWrap.offsetWidth;
+ let horizontalScrollLength = pinWrapWidth - window.innerWidth;
+
+ // Pinning and horizontal scrolling
+
+ gsap.to(".pin-wrap", {
+ scrollTrigger: {
+ scroller: pageContainer, //locomotive-scroll
+ scrub: true,
+ trigger: "#sectionPin",
+ pin: true,
+ // anticipatePin: 1,
+ start: "top top",
+ end: pinWrapWidth,
+ },
+ x: -horizontalScrollLength,
+ ease: "none",
+ });
+
+ ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll
+
+ ScrollTrigger.refresh();
+});
diff --git a/index.scss b/index.scss
new file mode 100644
index 0000000..0fceb93
--- /dev/null
+++ b/index.scss
@@ -0,0 +1,100 @@
+:root {
+ --text-color: #111;
+ --bg-color: #b9b3a9;
+}
+
+body {
+ font-family: termina, sans-serif;
+ color: var(--text-color);
+ background: var(--bg-color);
+ transition: 0.3s ease-out;
+ overflow-x: hidden;
+ max-width: 100%;
+ width: 100%;
+ overscroll-behavior: none;
+}
+
+section:not(#sectionPin) {
+ min-height: 100vh;
+ width: 100%;
+ position: relative;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ grid-gap: 2rem;
+ padding: 50px 10vw;
+ margin: auto;
+ place-items: center;
+}
+
+img {
+ height: 80vh;
+ width: auto;
+ object-fit: cover;
+}
+
+h1 {
+ font-size: 5rem;
+ line-height: 1;
+ font-weight: 800;
+ margin-bottom: 1rem;
+ position: absolute;
+ top: 10vw;
+ left: 10vw;
+ z-index: 4;
+ overflow-wrap: break-word;
+ hyphens: auto;
+
+ @media (max-width: 768px) {
+ font-size: 16vw;
+ }
+
+ span {
+ display: block;
+ }
+}
+
+h2 {
+ font-size: 2rem;
+ max-width: 400px;
+}
+
+.credit {
+ font-family: Termina, sans-serif;
+ a {
+ color: var(--text-color);
+ }
+}
+
+* {
+ box-sizing: border-box;
+}
+
+#sectionPin {
+ height: 100vh;
+ overflow: hidden;
+ display: flex;
+ left: 0;
+ background: var(--text-color);
+ color: var(--bg-color);
+}
+
+.pin-wrap {
+ height: 100vh;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ padding: 50px 10vw;
+
+ & > * {
+ min-width: 60vw;
+ padding: 0 5vw;
+ }
+}
+
+p {
+ position: absolute;
+ bottom: 10vw;
+ right: 10vw;
+ width: 200px;
+ line-height: 1.5;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-10 22:56:34 +0000