Awwward : Mouse Wheel Event + CSS Perspective, REACT.JS
Tags: javascript, react, tutorial
Published: 2021-06-17 14:45:14


## Awwward : Mouse Wheel Event + CSS Perspective, REACT.JS

![](https://cdn-images-1.medium.com/max/2560/1*EK8nXViqIdf7vyZEj297zA.gif)

I love to spend time studying cool websites on [awwward.com](https://www.awwwards.com/), there are always impressive and inspiring effects.

In this tutorial, we are building an interactive vinyl box using React.

Original website [here](https://music.zajno.com/)

### The plan

 1. **Install React, SASS, …**

 2. **Create your folder structure**

 3. **Create the Home page and your components**

 4. **Create data and setup vinyls with CSS**

 5. **Create your wheel event**

 6. **Handle click on current vinyl**

### 1. Install React, SASS, …

To use React, you first have to install it using NPM:

    npx create-react-app nameOfYourProject

Install SASS

    npm install node-sass@4.14.1

Launch your app

    cd nameOfYourProject
    npm start

### 2. Create your folder structure

Add the following folders in **/src :**

* /**components** (It will contain our Cursor component)

* /**pages** (It will contain our Home page)

* /**services** (It will contain utils functions)

* /**styles** (It will contain styles of our app)

* /**assets **(It will contain your images)

![](https://cdn-images-1.medium.com/max/2000/1*RUnbBz-v-x6tPASMZddudw.png)

### 3. **Create the Home page and your components**

Now we need to create a Home page so add **Home.jsx **in the pages folder. Don’t forget to also create a home folder in /**styles** and add to it **Home.scss**
{% gist https://gist.github.com/TheCodingFreak-Github/47e20ce81f7d312656a21ae5b331fbf4.js %}
In **index.css **add few lines to your body tag.
{% gist https://gist.github.com/TheCodingFreak-Github/1b597f6efcb50f9f45a8161e0bc7ae0b.js %}
Then add **Home **in your **app.js**
{% gist https://gist.github.com/TheCodingFreak-Github/55ac53ecf88a5774bd9658083c7c5f53.js %}
Easy, isn’t it! Create a new folder /**vinyleBox **in **/components **and add to it **VinyleBox.jsx**. **VinyleBox.jsx **contain one parameter which is data. Add your **VinyleBox **component in **Home.jsx. **Do the same thing for the CSS that we did previously.
{% gist https://gist.github.com/TheCodingFreak-Github/5e31d205f4ebf4c95d16a8b354ec3bec.js %}{% gist https://gist.github.com/TheCodingFreak-Github/ee7668c8cd5d6d12420a33a1921c8455.js %}
Create a new folder /**vinyles **in **/components **and add to it **Vinyles.jsx **and save images bellow like **cover.jpg** to your folder **/assets. Vinyles.jsx **contains two parameters id and styles! Then add your **Vinyles **component in **VinylesBox.jsx.**

![](https://cdn-images-1.medium.com/max/2000/1*AqacQCXkyOt1I_ZF0TVxsg.jpeg)
{% gist https://gist.github.com/TheCodingFreak-Github/7c18f098e9f300c359371d9be18b5319.js %}{% gist https://gist.github.com/TheCodingFreak-Github/4978a813daa64f47b8351036e32585bd.js %}
You should have this result :

![](https://cdn-images-1.medium.com/max/3796/1*f3oEIDjrMn6rB-MxB10MtA.png)

### 4. **Create data and setup vinyls with CSS**

First, we need two functions to generate random ID and background color. So add **VinylesServices.js** to **/services**
{% gist https://gist.github.com/TheCodingFreak-Github/4f02c6aafdcc1404a33b2bd8f634424d.js %}
You’ll initialize a new state data and create a new function initData. Each vinyl contains an id, parameters position, and style.

To place vinyls like on the image with CSS you need to use the property transform and three transform-function. The first one is perspective which will be similar for each vinyls, it’s to sets the distance between the user and the z=0 plane. In other words, have a logic scaling if your item is far or near to you. The second is translateZ to move an element along the z-axis and the last one is translateY to move an element vertically.

![](https://cdn-images-1.medium.com/max/2000/1*p2GUOLx4xIMGkSRNfjVSGw.png)

So let’s do this in **Home.jsx** by including the two previous new services functions. And pass data to your **VinylesBox **component.
{% gist https://gist.github.com/TheCodingFreak-Github/ba79d2889a8cb5ef704647b688fc8d0e.js %}
Add a map function in **VinylesBox.js.**
{% gist https://gist.github.com/TheCodingFreak-Github/9c417eb6a7a25291a0b1a4c3f44638c8.js %}
Now you should have this result :

![](https://cdn-images-1.medium.com/max/2182/1*GJONgJ0N6gXKCu6WUzen-w.png)


#[Read the rest of the article on medium](https://thecodingfreak.medium.com/awwward-mouse-wheel-event-css-perspective-react-js-a04e874f37ea)