![]() This function takes in one argument.Menus Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Split Navigation Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Bottom Border Nav Links Right Aligned Menu Links Centered Menu Link Equal Width Menu Links Fixed Menu Slide Down Bar on Scroll Hide Navbar on Scroll Shrink Navbar on Scroll Sticky Navbar Navbar on Image Hover Dropdowns Click Dropdowns Cascading Dropdown Dropdown in Topnav Dropdown in Sidenav Resp Navbar Dropdown Subnavigation Menu Dropup Mega Menu Mobile Menu Curtain Menu Collapsed Sidebar Collapsed Sidepanel Pagination Breadcrumbs Button Group Vertical Button Group Sticky Social Bar Pill Navigation Responsive Header ➔ updateStyles in the MouseParallaxChild Props can be supplied with a middleware function instead of a regular CSS styles object. React.CSSProperties (Object) or Middleware Function (Explained below)Īdditional CSS attributes which are applied directly to the parallax child container element (equal to style on HTML elements) on each offset calculation - A Middleware function can be used Inverts the offset of the specific child element on mouse movement Strength factor for the movement on the Y axis Strength factor for the movement on the X axis Strength multiplier of the effect on the Y axis for every child componentĪdditional CSS attributes which are applied directly to the parallax container element (equal to style on HTML elements)ĭisables a CSS transition which smoothens the transform Strength multiplier of the effect on the X axis for every child component Inverts the offset of ParallaxChildren on mouse movement Uses the window event handler instead of the container event handler to track mouse movement Resets the view to 0:0 offset when the mouse leaves the container Only works within the MouseParallaxContainer component. It provides a container for all of its children, which will stay on the same layer. It takes in an infinite amount of MouseParallaxChild components as its children. ➔ The main container in which the effect will take place. The library provides you with two components. Usage import from "react-parallax-mouse" ➔ An editable example can be found on CodeSandbox below. ![]() For example, your cursor enters the slider and the layers start to move away or approach to the cursor. It uses the mouse cursor position on the container and creates the illusion of depth for the layers visible in the container. The child of the container which is farthest from the user moves at the slowest speed, while the nearest child moves at the fastest speed. ![]() ➔ The parallax effect creates the illusion of depth when the cursor moves inside a specified container. ? Ready to use and provided with types What is the Mouse Parallax Effect? ? Using react-motion under the hood for fluid animations ? Efficient and lag free animations optimized for performance ❤️ A lightweight react component to add a mouse parallax effect to your website
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |