Sasial 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.

	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>;
	}

	// 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;

	// 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;
	}