SlabText Big & Bold Responsive Headline for jQuery. In an effort to not have a jQuery or Vanilla, etc. dependency attempting to re-implement in just plain JS.
A Pen by molotov.bliss on CodePen.
Created
April 23, 2022 09:39
-
-
Save molotovbliss/167ac74575c3e1d8d3e0c678d121a99e to your computer and use it in GitHub Desktop.
Mb BG (SlabText Big )
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <head></head> | |
| <h1 style="color:#00ff69">molotov.bliss</h1> | |
| <hr> | |
| <h1>BACKGROUND</h1> | |
| <hr> | |
| <img src="https://www.dropbox.com/s/jwvdexm63prx1oh/mb-newlogo.png?dl=1" style="width: 500px; padding-bottom: 100px;" /> | |
| <div id="blob"> | |
| <svg viewBox="0 0 200 200" style="z-index: -2"> | |
| <defs> | |
| <linearGradient id="gradient" gradientTransform="rotate(90)"> | |
| <stop id="gradientStop1" offset="0%" stop-color="var(--startColor)" /> | |
| <stop id="gradientStop2 " offset="100%" stop-color="var(--stopColor)" /> | |
| </linearGradient> | |
| </defs> | |
| <path d="" fill="url('#gradient')"></path> | |
| </svg> | |
| </div> | |
| <h1> | |
| B00MER, [boomer the bass pig (early alias)], Bliss Productions, 2TryP2 (2T2) | |
| Kosmic Free Music Foundation (KFMF) AKA Kosmic Loader Foundation (KLF) 1994-2000, Relic, Integrity (INT), Paramount (PMT) | |
| Background (Circa January 1991-1992) | |
| Before the Internet boom, dialing into local BBS’s at 2400-9600 baud & even running a small local board with Oblivion/2 BBS. Eventually moving onto the internet via a SLIP/PPP shell account shared by a friend when the internet was still in its infancy. (Web was nothing more than plain text with Gopher/Lynx/IRCII/etc.) Becoming friends with other like minded individuals on IRC especially #trax on EFNet that were also into trackers and the demo scene. | |
| After learning to create ANSI Art with theDraw, and digital artworks with Deluxe Paint 2e. Eventually moving to Audio Production after seeing a Demo for Tetra Compositor by Bram Graveland Ultraforce in 1992 that was included with a Creative Labs Sound Blaster 8bit mono card. Eventually finding other Tracker Software such as Fast Tracker 2 by Triton, Scream Tracker from Future Crew, Farandole by Daniel Potter (local friend via BBS LAN Parties) & eventually Impulse Tracker by Jeffrey Liam. | |
| Previously a part of one of the very first net-labels: Kosmic Free Music Foundation or KFMF, (1994-2000). Still producing today. Releasing most tracks for free via Soundcloud and other channels independently. My current choice of Digital Audio Workstations/Tracker is <u>ReNoise</u>. | |
| </h1> | |
| <a href="http://molotovbliss.com/">http://molotovbliss.com</a> | |
| https://soundcloud.com/molotovbliss | |
| https://www.pouet.net/user.php?who=99211 | |
| http://amp.dascene.net/detail.php?detail=modules&view=754 | |
| https://hornet.org/cgi-bin/scene-search.cgi?search=B00mer | |
| https://hornet.org/cgi-bin/scene-search.cgi?search=Boomer | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { spline } from "https://cdn.skypack.dev/@georgedoescode/[email protected]"; | |
| import SimplexNoise from "https://cdn.skypack.dev/[email protected]"; | |
| // our <path> element | |
| const path = document.querySelector("path"); | |
| // used to set our custom property values | |
| const root = document.documentElement; | |
| let hueNoiseOffset = 0; | |
| let noiseStep = 0.005; | |
| const simplex = new SimplexNoise(); | |
| const points = createPoints(); | |
| (function animate() { | |
| path.setAttribute("d", spline(points, 1, true)); | |
| // for every point... | |
| for (let i = 0; i < points.length; i++) { | |
| const point = points[i]; | |
| // return a pseudo random value between -1 / 1 based on this point's current x, y positions in "time" | |
| const nX = noise(point.noiseOffsetX, point.noiseOffsetX); | |
| const nY = noise(point.noiseOffsetY, point.noiseOffsetY); | |
| // map this noise value to a new value, somewhere between it's original location -20 and it's original location + 20 | |
| const x = map(nX, -1, 1, point.originX - 20, point.originX + 20); | |
| const y = map(nY, -1, 1, point.originY - 20, point.originY + 20); | |
| // update the point's current coordinates | |
| point.x = x; | |
| point.y = y; | |
| // progress the point's x, y values through "time" | |
| point.noiseOffsetX += noiseStep; | |
| point.noiseOffsetY += noiseStep; | |
| } | |
| const hueNoise = noise(hueNoiseOffset, hueNoiseOffset); | |
| const hue = map(hueNoise, -1, 1, 0, 360); | |
| root.style.setProperty("--startColor", `hsl(${hue}, 100%, 75%)`); | |
| root.style.setProperty("--stopColor", `hsl(${hue + 60}, 100%, 75%)`); | |
| //document.body.style.background = `hsl(${hue + 60}, 75%, 5%)`; | |
| hueNoiseOffset += noiseStep / 6; | |
| requestAnimationFrame(animate); | |
| })(); | |
| function map(n, start1, end1, start2, end2) { | |
| return ((n - start1) / (end1 - start1)) * (end2 - start2) + start2; | |
| } | |
| function noise(x, y) { | |
| return simplex.noise2D(x, y); | |
| } | |
| function createPoints() { | |
| const points = []; | |
| // how many points do we need | |
| const numPoints = 6; | |
| // used to equally space each point around the circle | |
| const angleStep = (Math.PI * 2) / numPoints; | |
| // the radius of the circle | |
| const rad = 75; | |
| for (let i = 1; i <= numPoints; i++) { | |
| // x & y coordinates of the current point | |
| const theta = i * angleStep; | |
| const x = 100 + Math.cos(theta) * rad; | |
| const y = 100 + Math.sin(theta) * rad; | |
| // store the point's position | |
| points.push({ | |
| x: x, | |
| y: y, | |
| // we need to keep a reference to the point's original point for when we modulate the values later | |
| originX: x, | |
| originY: y, | |
| // more on this in a moment! | |
| noiseOffsetX: Math.random() * 1000, | |
| noiseOffsetY: Math.random() * 1000 | |
| }); | |
| } | |
| return points; | |
| } | |
| document.querySelector("path").addEventListener("mouseover", () => { | |
| noiseStep = 0.01; | |
| }); | |
| document.querySelector("path").addEventListener("mouseleave", () => { | |
| noiseStep = 0.005; | |
| }); | |
| //the plugin is included as an external resource to this pen | |
| // source: https://freqdec.github.io/slabText/js/jquery.slabtext.min.js | |
| $("h1").slabText({ | |
| viewportBreakpoint: 380 | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/slabText/2.3/jquery.slabtext.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(https://fonts.googleapis.com/css?family=Oswald:400,700); | |
| body { | |
| background-color: #000; | |
| color: #444; | |
| font-family: "Oswald", sans-serif; | |
| padding: 30px; | |
| font-size: 100%; | |
| text-align: center; | |
| } | |
| h1 { | |
| text-transform: uppercase; | |
| font-size: 4em; | |
| line-height: 0.9; | |
| } | |
| .slabtexted .slabtext { | |
| display: -moz-inline-box; | |
| display: inline-block; | |
| white-space: nowrap; | |
| } | |
| .slabtextinactive .slabtext { | |
| display: inline; | |
| white-space: normal; | |
| font-size: 1em !important; | |
| letter-spacing: inherit !important; | |
| word-spacing: inherit !important; | |
| *letter-spacing: 0 !important; | |
| *word-spacing: 0 !important; | |
| } | |
| .slabtextdone .slabtext { | |
| display: block; | |
| } | |
| :root { | |
| --startColor: hsl(0, 100%, 75%); | |
| --stopColor: hsl(0, 100%, 75%); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| height: 100vh; | |
| display: grid; | |
| place-items: center; | |
| } | |
| svg { | |
| width: 90vmin; | |
| height: 90vmin; | |
| } | |
| path { | |
| cursor: pointer; | |
| } | |
| p { | |
| position: absolute; | |
| font-size: 1.125rem; | |
| font-weight: 500; | |
| bottom: 1rem; | |
| right: 1rem; | |
| color: #fff; | |
| font-family: system-ui, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| #blob { | |
| position: absolute; | |
| top: -10%; | |
| z-index: -1; | |
| } | |
| hr { | |
| width: 100%; | |
| color: white; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment