/react-3d-animated-card

3D Animated card component for ReactJs.

Primary LanguageTypeScriptMIT LicenseMIT

@sl-codeblaster/react-3d-animated-card

3D Animated card component for ReactJs.


NPM JavaScript Style Guide

Install

NPM

npm install --save @sl-codeblaster/react-3d-animated-card

Yarn

yarn add @sl-codeblaster/react-3d-animated-card

You should need to import the css.

@import "~@sl-codeblaster/react-3d-animated-card/dist/index.css";

Live Demo

Demo Picture

Usage

<AnimatedCard
    config={{
        rotation: 15, // this value for the divide (window.innerWidth / 2 - e.pageX) / rotation && (window.innerWidth / 2 - e.pageY) / rotation
        transition:{
            duration:0.5,
            timingMode: "ease"
        },
        transform:{
            figureIcon: {
                rotation: 20,
                translateZ: 160
            },
            titleTranslateZ: 140,
            bodyTextTranslateZ: 100,
            buttonTranslateZ: 80
        }
    }}
    style={{
        width:560 //container style (you can use className as well)
    }}
>
    <div className="card">
        <div className="figure">
            <div className="figure_bg"/> // not required, just used for design
            <img src={require('./images/image.png').default} alt=""/>
        </div>
        <div className="content">
            <h2 className="title">Animated Card</h2>
            <p className={"body"}>Lorem Ipsum is simply dummy text of the
                printing and typesetting industry</p>
        </div>
        <div className="footer">
            <button className={"footer_btn"}>BUTTON</button>
        </div>
    </div>
</AnimatedCard>

Configuration

use config prop to pass configuration object to the component.

Property Value
rotation number
transition object
transform object
style react default style object
className string

transition

Property Value
duration number
timingMode 'ease','ease-out','ease-in','ease-in-out' use one of these

transform

Property Value
figureIcon object
titleTranslateZ number
bodyTextTranslateZ number
buttonTranslateZ number

figureIcon

Property Value
rotation number
translateZ number

License

© MIT