sasial-dev

Header/Footer Parallax Effect

• A small example of how to create a simple parallax.
• In the example we have a header size of the screen (window), that can be used as a slide.
• The size of the content is dynamic and fully customized.
• The size of the footer is define the main.js file.

A Pen by sasial-roblox on CodePen.

License.

sasial-dev

// Under the MIT
import { useHookState } from "@rbxts/matter";
import { createElement as e } from "@rbxts/react";
import type { Root } from "@rbxts/react-roblox";
import { mount } from "shared/gui";

interface HandleState {
	props: object;
	handle?: Root;
}

sasial-dev

// Under the MIT
import type { Producer, InferState, InferActions } from "@rbxts/reflex";
import { createProducer } from "@rbxts/reflex";
import { Dictionary as Object } from "@rbxts/sift";

// from reflex!
type ReplaceStateParameters<State, Actions> = {
	readonly [K in keyof Actions]: Actions[K] extends (state: any, ...args: infer Args) => any
		? (state: State, player: Player, ...args: Args) => State
		: never;

sasial-dev

import React, { useEffect, useState } from "@rbxts/react";
import { useSelector } from "@rbxts/react-reflex";

interface RouteProps extends React.PropsWithChildren {
	path?: string;
	visible?: boolean;
	mount?: () => Promise<void>;
	unmount?: () => Promise<void>;
}