Observable Magic Gradient

Developer
Oliver Turner
Size
3,409 Kb
Views
12,144
  1. Observable Magic Gradient Previews
  2. Observable Magic Gradient HTML Codes
  3. Observable Magic Gradient CSS Codes
  4. Observable Magic Gradient JS Codes

How do I make an observable magic gradient?

This updates an older pen so as to play with RxCSS: mapping streams of user input to CSS Custom Props. What is a observable magic gradient? How do you make a observable magic gradient? This script and codes were developed by Oliver Turner on 28 November 2022, Monday.

Observable Magic Gradient Previews
IQ Test

Observable Magic Gradient - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Observable Magic Gradient</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>I whip my mouse back and forth</p> <script src='https://unpkg.com/rxcss@latest/dist/rxcss.min.js'></script>
<script src='https://unpkg.com/@reactivex/rxjs/dist/global/Rx.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Observable Magic Gradient - Script Codes CSS Codes

:root { --font-title: 18px; --grad-xStart: 280; --grad-xEnd: 40; --grad-start: hsl(var(--grad-xStart), 100%, 75%); --grad-end: hsl(var(--grad-xEnd), 100%, 50%);
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh; padding: 20px; background: -webkit-linear-gradient(315deg, var(--grad-start), var(--grad-end)); background: linear-gradient(135deg, var(--grad-start), var(--grad-end))
}
p { counter-reset: hueStart var(--grad-xStart) hueEnd var(--grad-xEnd); position: relative; padding: 5px 10px; border: 1px solid currentColor; border-radius: var(--font-title); font: 100 var(--font-title)/1 sans-serif; text-align: center; text-transform: uppercase; letter-spacing: 3px; color: #fff;
}
p::before, p::after { position: absolute; display: block; width: 100%; padding: 5px; font-size: 12px; color: #fff;
}
p::before { content: 'hsl(' counter(hueStart) ', 100%, 75%)'; bottom: 100%;
}
p::after { content: 'hsl(' counter(hueEnd) ', 100%, 50%)'; top: 100%;
}

Observable Magic Gradient - Script Codes JS Codes

'use strict';
var w = window.innerWidth;
var getPercentX = function getPercentX(x) { return Math.round(x / w * 360);
};
var mouse$ = Rx.Observable.fromEvent(document, 'mousemove').map(function (_ref) { var clientX = _ref.clientX; var percentX = getPercentX(clientX); return { xStart: percentX, xEnd: percentX + 120 };
});
RxCSS({ grad: mouse$ });
Observable Magic Gradient - Script Codes
Observable Magic Gradient - Script Codes
Home Page Home
Developer Oliver Turner
Username codedsignal
Uploaded November 28, 2022
Rating 4.5
Size 3,409 Kb
Views 12,144
Do you need developer help for Observable Magic Gradient?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Oliver Turner (codedsignal) Script Codes
Name
Frosted glass background
Single-element 3d speech bubble
Responsive progress reloaded
Remcon navigation
ColorLovers Reloadable
Coded Signal Logo
Isometric projection using skew
Single element title decoration
Magic Gradient
Cagey Avatar
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!