https://github.com/patrick-s-young/box-kite

Make Floating Boxes with CSS 3D Transforms
https://github.com/patrick-s-young/box-kite

3d animation css es6 frontend html5 javascript react

Last synced: 3 months ago
JSON representation

Make Floating Boxes with CSS 3D Transforms

• Host: GitHub
• URL: https://github.com/patrick-s-young/box-kite
• Owner: patrick-s-young
• License: mit
• Created: 2019-11-27T18:39:03.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-14T05:10:51.000Z (about 2 years ago)
• Last Synced: 2023-03-04T10:04:15.786Z (almost 2 years ago)
• Topics: 3d, animation, css, es6, frontend, html5, javascript, react
• Language: JavaScript
• Homepage: https://patrick-s-young.github.io/BoxKite
• Size: 4.67 MB
• Stars: 4
• Watchers: 1
• Forks: 2
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# BoxKite

## Make Floating Boxes with CSS 3D Transforms

BoxKite renders WebGL-like 3D cuboids using CSS 3D Transforms. Since the 3D object is CSS, it can interact more seamlessly with any background HTML elements. For instance, imagine a BoxKite ad unit that starts in the corner of the page and expands to the center when clicked.

![bttf-3-980x750](https://user-images.githubusercontent.com/42591798/69761255-b4016180-111b-11ea-867f-f140920f82fc.gif)

## Running Locally

Make sure you have [Node.js](http://nodejs.org/) installed.

```sh

git clone https://github.com/patrick-s-young/BoxKite.git # or clone your own fork

cd box-kite

npm install

npm start

```

## Features

Explode View 

![exploded-980x750](https://user-images.githubusercontent.com/42591798/69767334-9ab6e000-1130-11ea-86c0-f6bc571fb874.gif)

Zoom In/Out 

![zoom-in-out-980x750](https://user-images.githubusercontent.com/42591798/69767780-af947300-1132-11ea-85b2-d646a958705d.gif)

Prev/Next Gallery

![hero-980x750](https://user-images.githubusercontent.com/42591798/69759814-d2655e00-1117-11ea-8002-b7892865d2a7.gif)

## Built With

* [React](https://react-cn.github.io/react/downloads.html) - JavaScript UI library.

* [react-spring](https://www.react-spring.io/) - JavaScript spring-physics based animation library.

* [webpack](https://webpack.js.org/) - Static module builder.

## Authors

* **Patrick Young** - [Patrick Young](https://github.com/patrick-s-young)

* **Adam Stover** - [Adam Stover](https://github.com/adam-stover)

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Acknowledgments

Thanks to @citrusvanilla and @jacobbanks for the initial inspiration.