REACT: Cursor blob on mouse ovrLoop inside React JSXShow or hide element in ReactWhat is the difference between state and props in React?React js onClick can't pass value to methodCan you force a React component to rerender without calling setState?What is the difference between using constructor vs getInitialState in React / React Native?What do these three dots in React do?Programmatically navigate using react routerHow to conditionally add attributes to React components?What is the difference between React Native and React?
A reference to a well-known characterization of scattered compact spaces
Why was the shrinking from 8″ made only to 5.25″ and not smaller (4″ or less)?
Is it inappropriate for a student to attend their mentor's dissertation defense?
Watching something be written to a file live with tail
I'm flying to France today and my passport expires in less than 2 months
What do you call someone who asks many questions?
Intersection of two sorted vectors in C++
Facing a paradox: Earnshaw's theorem in one dimension
Is it possible to create light that imparts a greater proportion of its energy as momentum rather than heat?
Assassin's bullet with mercury
Were any external disk drives stacked vertically?
Can a virus destroy the BIOS of a modern computer?
Is it legal for company to use my work email to pretend I still work there?
What exploit are these user agents trying to use?
Can a rocket refuel on Mars from water?
Why is Collection not simply treated as Collection<?>
Is "remove commented out code" correct English?
Fully-Firstable Anagram Sets
How to prevent "they're falling in love" trope
What is going on with Captain Marvel's blood colour?
90's TV series where a boy goes to another dimension through portal near power lines
Alternative to sending password over mail?
How can I fix/modify my tub/shower combo so the water comes out of the showerhead?
Has there ever been an airliner design involving reducing generator load by installing solar panels?
REACT: Cursor blob on mouse ovr
Loop inside React JSXShow or hide element in ReactWhat is the difference between state and props in React?React js onClick can't pass value to methodCan you force a React component to rerender without calling setState?What is the difference between using constructor vs getInitialState in React / React Native?What do these three dots in React do?Programmatically navigate using react routerHow to conditionally add attributes to React components?What is the difference between React Native and React?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
-1
I've been saving some interesting things out of code pen and sometimes they don't work when I copy the js into my react components. An example of this is below with the cursor blob.
I'm just starting out with react, I'm assuming it's better practise to keep the functions related to the component in the same file. Which is what I'm trying to do here. I did also think about importing the js file but I'm not sure if that's the best way to go about this type of situation.
import React,
Component
from 'react'
export class AboutPillars extends Component
render()
const blobCursor = (() =>
const cursor = document.querySelectorAll('.cursorBlob');
const sectionLink = document.querySelectorAll('.nav-link');
const setCursorPos = (e) =>
const
pageX: posX,
pageY: posY
= e;
cursor.style.top = `$posY - (cursor.offsetHeight / 2)px`;
cursor.style.left = `$posX - (cursor.offsetWidth / 2)px`;
;
document.addEventListener('mousemove', setCursorPos);
const setCursorHover = () => cursor.style.transform = 'scale(2.5)';
const removeCursorHover = () => cursor.style.transform = '';
sectionLink.forEach(link => link.addEventListener('mouseover', setCursorHover));
sectionLink.forEach(link => link.addEventListener('mouseleave', removeCursorHover));
);
return ( <
div className = "about-pillars-section" >
<
div className = "cursorBlob" > < /div> <
ul class = "nav" >
<
li class = "nav-link" > Vision < /li> <
li class = "nav-link" > Music < /li> <
li class = "nav-link" > Workshops < /li> <
li class = "nav-link" > Techstyle < /li> <
/ul> <
/div>
)
export default AboutPillars.cursorBlob
width: 50px;
height: 50px;
background: linear-gradient( 120deg, $mikado-yellow, $giants-orange, $desire, $rebecca-purple, $sea-serpent);
background-size: 1600% 1600%;
position: absolute;
mix-blend-mode: difference;
pointer-events: none;
z-index: 1;
transition: 0.15s linear;
animation: blobRadius 5s ease infinite, blobBackground 15s ease infinite;
@keyframes blobRadius
0%,
100%
border-radius: 43% 77% 80% 40% / 40% 40% 80% 80%;
20%
border-radius: 47% 73% 61% 59% / 47% 75% 45% 73%;
40%
border-radius: 46% 74% 74% 46% / 74% 58% 62% 46%;
60%
border-radius: 47% 73% 61% 59% / 40% 40% 80% 80%;
80%
border-radius: 50% 70% 52% 68% / 51% 61% 59% 69%;
@keyframes blobBackground
0%,
100%
background-position: 0% 50%;
50%
background-position: 100% 50%;
.nav
margin: 0;
padding: 0;
width: 100%;
background: $gray-scale;
&-link
display: inline-block;
width: 50%;
height: 10vw;
color: $ghost;
text-align: center;
line-height: 10vw;
list-style: none;
cursor: pointer;
font-size: $section-heading;
font-family: $header-font;
transition: 0.25s ease;
&:not(:last-child)
margin-bottom: 50px;
&:hover
transform: scale(1.2);
&:after
content: " ";
width: 4vw;
height: 0.3rem;
display: block;
margin: auto;
background-color: white;
position: relative;
top: -3rem;
-webkit-animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
//ANIMATION
@-webkit-keyframes scale-in-ver-center
0%
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
100%
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
@keyframes scale-in-ver-center
0%
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
100%
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
@-webkit-keyframes shake-lr
0%,
100%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
10%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
20%,
40%,
60%
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
30%,
50%,
70%
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
80%
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
90%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
@keyframes shake-lr
0%,
100%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
10%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
20%,
40%,
60%
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
30%,
50%,
70%
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
80%
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
90%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>This is the expected result: https://codepen.io/jasmineibikunle/pen/jJEENp?editors=0010#0
javascript reactjs
asked Mar 21 at 22:04
Jasmine IbikunleJasmine Ibikunle
14
add a comment |
-1
I've been saving some interesting things out of code pen and sometimes they don't work when I copy the js into my react components. An example of this is below with the cursor blob.
I'm just starting out with react, I'm assuming it's better practise to keep the functions related to the component in the same file. Which is what I'm trying to do here. I did also think about importing the js file but I'm not sure if that's the best way to go about this type of situation.
import React,
Component
from 'react'
export class AboutPillars extends Component
render()
const blobCursor = (() =>
const cursor = document.querySelectorAll('.cursorBlob');
const sectionLink = document.querySelectorAll('.nav-link');
const setCursorPos = (e) =>
const
pageX: posX,
pageY: posY
= e;
cursor.style.top = `$posY - (cursor.offsetHeight / 2)px`;
cursor.style.left = `$posX - (cursor.offsetWidth / 2)px`;
;
document.addEventListener('mousemove', setCursorPos);
const setCursorHover = () => cursor.style.transform = 'scale(2.5)';
const removeCursorHover = () => cursor.style.transform = '';
sectionLink.forEach(link => link.addEventListener('mouseover', setCursorHover));
sectionLink.forEach(link => link.addEventListener('mouseleave', removeCursorHover));
);
return ( <
div className = "about-pillars-section" >
<
div className = "cursorBlob" > < /div> <
ul class = "nav" >
<
li class = "nav-link" > Vision < /li> <
li class = "nav-link" > Music < /li> <
li class = "nav-link" > Workshops < /li> <
li class = "nav-link" > Techstyle < /li> <
/ul> <
/div>
)
export default AboutPillars.cursorBlob
width: 50px;
height: 50px;
background: linear-gradient( 120deg, $mikado-yellow, $giants-orange, $desire, $rebecca-purple, $sea-serpent);
background-size: 1600% 1600%;
position: absolute;
mix-blend-mode: difference;
pointer-events: none;
z-index: 1;
transition: 0.15s linear;
animation: blobRadius 5s ease infinite, blobBackground 15s ease infinite;
@keyframes blobRadius
0%,
100%
border-radius: 43% 77% 80% 40% / 40% 40% 80% 80%;
20%
border-radius: 47% 73% 61% 59% / 47% 75% 45% 73%;
40%
border-radius: 46% 74% 74% 46% / 74% 58% 62% 46%;
60%
border-radius: 47% 73% 61% 59% / 40% 40% 80% 80%;
80%
border-radius: 50% 70% 52% 68% / 51% 61% 59% 69%;
@keyframes blobBackground
0%,
100%
background-position: 0% 50%;
50%
background-position: 100% 50%;
.nav
margin: 0;
padding: 0;
width: 100%;
background: $gray-scale;
&-link
display: inline-block;
width: 50%;
height: 10vw;
color: $ghost;
text-align: center;
line-height: 10vw;
list-style: none;
cursor: pointer;
font-size: $section-heading;
font-family: $header-font;
transition: 0.25s ease;
&:not(:last-child)
margin-bottom: 50px;
&:hover
transform: scale(1.2);
&:after
content: " ";
width: 4vw;
height: 0.3rem;
display: block;
margin: auto;
background-color: white;
position: relative;
top: -3rem;
-webkit-animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
//ANIMATION
@-webkit-keyframes scale-in-ver-center
0%
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
100%
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
@keyframes scale-in-ver-center
0%
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
100%
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
@-webkit-keyframes shake-lr
0%,
100%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
10%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
20%,
40%,
60%
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
30%,
50%,
70%
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
80%
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
90%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
@keyframes shake-lr
0%,
100%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
10%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
20%,
40%,
60%
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
30%,
50%,
70%
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
80%
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
90%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>This is the expected result: https://codepen.io/jasmineibikunle/pen/jJEENp?editors=0010#0
javascript reactjs
asked Mar 21 at 22:04
Jasmine IbikunleJasmine Ibikunle
14
add a comment |
-1
-1
-1
I've been saving some interesting things out of code pen and sometimes they don't work when I copy the js into my react components. An example of this is below with the cursor blob.
I'm just starting out with react, I'm assuming it's better practise to keep the functions related to the component in the same file. Which is what I'm trying to do here. I did also think about importing the js file but I'm not sure if that's the best way to go about this type of situation.
import React,
Component
from 'react'
export class AboutPillars extends Component
render()
const blobCursor = (() =>
const cursor = document.querySelectorAll('.cursorBlob');
const sectionLink = document.querySelectorAll('.nav-link');
const setCursorPos = (e) =>
const
pageX: posX,
pageY: posY
= e;
cursor.style.top = `$posY - (cursor.offsetHeight / 2)px`;
cursor.style.left = `$posX - (cursor.offsetWidth / 2)px`;
;
document.addEventListener('mousemove', setCursorPos);
const setCursorHover = () => cursor.style.transform = 'scale(2.5)';
const removeCursorHover = () => cursor.style.transform = '';
sectionLink.forEach(link => link.addEventListener('mouseover', setCursorHover));
sectionLink.forEach(link => link.addEventListener('mouseleave', removeCursorHover));
);
return ( <
div className = "about-pillars-section" >
<
div className = "cursorBlob" > < /div> <
ul class = "nav" >
<
li class = "nav-link" > Vision < /li> <
li class = "nav-link" > Music < /li> <
li class = "nav-link" > Workshops < /li> <
li class = "nav-link" > Techstyle < /li> <
/ul> <
/div>
)
export default AboutPillars.cursorBlob
width: 50px;
height: 50px;
background: linear-gradient( 120deg, $mikado-yellow, $giants-orange, $desire, $rebecca-purple, $sea-serpent);
background-size: 1600% 1600%;
position: absolute;
mix-blend-mode: difference;
pointer-events: none;
z-index: 1;
transition: 0.15s linear;
animation: blobRadius 5s ease infinite, blobBackground 15s ease infinite;
@keyframes blobRadius
0%,
100%
border-radius: 43% 77% 80% 40% / 40% 40% 80% 80%;
20%
border-radius: 47% 73% 61% 59% / 47% 75% 45% 73%;
40%
border-radius: 46% 74% 74% 46% / 74% 58% 62% 46%;
60%
border-radius: 47% 73% 61% 59% / 40% 40% 80% 80%;
80%
border-radius: 50% 70% 52% 68% / 51% 61% 59% 69%;
@keyframes blobBackground
0%,
100%
background-position: 0% 50%;
50%
background-position: 100% 50%;
.nav
margin: 0;
padding: 0;
width: 100%;
background: $gray-scale;
&-link
display: inline-block;
width: 50%;
height: 10vw;
color: $ghost;
text-align: center;
line-height: 10vw;
list-style: none;
cursor: pointer;
font-size: $section-heading;
font-family: $header-font;
transition: 0.25s ease;
&:not(:last-child)
margin-bottom: 50px;
&:hover
transform: scale(1.2);
&:after
content: " ";
width: 4vw;
height: 0.3rem;
display: block;
margin: auto;
background-color: white;
position: relative;
top: -3rem;
-webkit-animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
//ANIMATION
@-webkit-keyframes scale-in-ver-center
0%
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
100%
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
@keyframes scale-in-ver-center
0%
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
100%
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
@-webkit-keyframes shake-lr
0%,
100%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
10%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
20%,
40%,
60%
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
30%,
50%,
70%
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
80%
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
90%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
@keyframes shake-lr
0%,
100%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
10%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
20%,
40%,
60%
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
30%,
50%,
70%
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
80%
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
90%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>This is the expected result: https://codepen.io/jasmineibikunle/pen/jJEENp?editors=0010#0
javascript reactjs
asked Mar 21 at 22:04
Jasmine IbikunleJasmine Ibikunle
14
I've been saving some interesting things out of code pen and sometimes they don't work when I copy the js into my react components. An example of this is below with the cursor blob.
I'm just starting out with react, I'm assuming it's better practise to keep the functions related to the component in the same file. Which is what I'm trying to do here. I did also think about importing the js file but I'm not sure if that's the best way to go about this type of situation.
import React,
Component
from 'react'
export class AboutPillars extends Component
render()
const blobCursor = (() =>
const cursor = document.querySelectorAll('.cursorBlob');
const sectionLink = document.querySelectorAll('.nav-link');
const setCursorPos = (e) =>
const
pageX: posX,
pageY: posY
= e;
cursor.style.top = `$posY - (cursor.offsetHeight / 2)px`;
cursor.style.left = `$posX - (cursor.offsetWidth / 2)px`;
;
document.addEventListener('mousemove', setCursorPos);
const setCursorHover = () => cursor.style.transform = 'scale(2.5)';
const removeCursorHover = () => cursor.style.transform = '';
sectionLink.forEach(link => link.addEventListener('mouseover', setCursorHover));
sectionLink.forEach(link => link.addEventListener('mouseleave', removeCursorHover));
);
return ( <
div className = "about-pillars-section" >
<
div className = "cursorBlob" > < /div> <
ul class = "nav" >
<
li class = "nav-link" > Vision < /li> <
li class = "nav-link" > Music < /li> <
li class = "nav-link" > Workshops < /li> <
li class = "nav-link" > Techstyle < /li> <
/ul> <
/div>
)
export default AboutPillars.cursorBlob
width: 50px;
height: 50px;
background: linear-gradient( 120deg, $mikado-yellow, $giants-orange, $desire, $rebecca-purple, $sea-serpent);
background-size: 1600% 1600%;
position: absolute;
mix-blend-mode: difference;
pointer-events: none;
z-index: 1;
transition: 0.15s linear;
animation: blobRadius 5s ease infinite, blobBackground 15s ease infinite;
@keyframes blobRadius
0%,
100%
border-radius: 43% 77% 80% 40% / 40% 40% 80% 80%;
20%
border-radius: 47% 73% 61% 59% / 47% 75% 45% 73%;
40%
border-radius: 46% 74% 74% 46% / 74% 58% 62% 46%;
60%
border-radius: 47% 73% 61% 59% / 40% 40% 80% 80%;
80%
border-radius: 50% 70% 52% 68% / 51% 61% 59% 69%;
@keyframes blobBackground
0%,
100%
background-position: 0% 50%;
50%
background-position: 100% 50%;
.nav
margin: 0;
padding: 0;
width: 100%;
background: $gray-scale;
&-link
display: inline-block;
width: 50%;
height: 10vw;
color: $ghost;
text-align: center;
line-height: 10vw;
list-style: none;
cursor: pointer;
font-size: $section-heading;
font-family: $header-font;
transition: 0.25s ease;
&:not(:last-child)
margin-bottom: 50px;
&:hover
transform: scale(1.2);
&:after
content: " ";
width: 4vw;
height: 0.3rem;
display: block;
margin: auto;
background-color: white;
position: relative;
top: -3rem;
-webkit-animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
//ANIMATION
@-webkit-keyframes scale-in-ver-center
0%
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
100%
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
@keyframes scale-in-ver-center
0%
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
100%
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
@-webkit-keyframes shake-lr
0%,
100%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
10%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
20%,
40%,
60%
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
30%,
50%,
70%
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
80%
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
90%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
@keyframes shake-lr
0%,
100%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
10%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
20%,
40%,
60%
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
30%,
50%,
70%
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
80%
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
90%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>This is the expected result: https://codepen.io/jasmineibikunle/pen/jJEENp?editors=0010#0
import React,
Component
from 'react'
export class AboutPillars extends Component
render()
const blobCursor = (() =>
const cursor = document.querySelectorAll('.cursorBlob');
const sectionLink = document.querySelectorAll('.nav-link');
const setCursorPos = (e) =>
const
pageX: posX,
pageY: posY
= e;
cursor.style.top = `$posY - (cursor.offsetHeight / 2)px`;
cursor.style.left = `$posX - (cursor.offsetWidth / 2)px`;
;
document.addEventListener('mousemove', setCursorPos);
const setCursorHover = () => cursor.style.transform = 'scale(2.5)';
const removeCursorHover = () => cursor.style.transform = '';
sectionLink.forEach(link => link.addEventListener('mouseover', setCursorHover));
sectionLink.forEach(link => link.addEventListener('mouseleave', removeCursorHover));
);
return ( <
div className = "about-pillars-section" >
<
div className = "cursorBlob" > < /div> <
ul class = "nav" >
<
li class = "nav-link" > Vision < /li> <
li class = "nav-link" > Music < /li> <
li class = "nav-link" > Workshops < /li> <
li class = "nav-link" > Techstyle < /li> <
/ul> <
/div>
)
export default AboutPillars.cursorBlob
width: 50px;
height: 50px;
background: linear-gradient( 120deg, $mikado-yellow, $giants-orange, $desire, $rebecca-purple, $sea-serpent);
background-size: 1600% 1600%;
position: absolute;
mix-blend-mode: difference;
pointer-events: none;
z-index: 1;
transition: 0.15s linear;
animation: blobRadius 5s ease infinite, blobBackground 15s ease infinite;
@keyframes blobRadius
0%,
100%
border-radius: 43% 77% 80% 40% / 40% 40% 80% 80%;
20%
border-radius: 47% 73% 61% 59% / 47% 75% 45% 73%;
40%
border-radius: 46% 74% 74% 46% / 74% 58% 62% 46%;
60%
border-radius: 47% 73% 61% 59% / 40% 40% 80% 80%;
80%
border-radius: 50% 70% 52% 68% / 51% 61% 59% 69%;
@keyframes blobBackground
0%,
100%
background-position: 0% 50%;
50%
background-position: 100% 50%;
.nav
margin: 0;
padding: 0;
width: 100%;
background: $gray-scale;
&-link
display: inline-block;
width: 50%;
height: 10vw;
color: $ghost;
text-align: center;
line-height: 10vw;
list-style: none;
cursor: pointer;
font-size: $section-heading;
font-family: $header-font;
transition: 0.25s ease;
&:not(:last-child)
margin-bottom: 50px;
&:hover
transform: scale(1.2);
&:after
content: " ";
width: 4vw;
height: 0.3rem;
display: block;
margin: auto;
background-color: white;
position: relative;
top: -3rem;
-webkit-animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
//ANIMATION
@-webkit-keyframes scale-in-ver-center
0%
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
100%
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
@keyframes scale-in-ver-center
0%
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
100%
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
@-webkit-keyframes shake-lr
0%,
100%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
10%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
20%,
40%,
60%
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
30%,
50%,
70%
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
80%
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
90%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
@keyframes shake-lr
0%,
100%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
10%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
20%,
40%,
60%
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
30%,
50%,
70%
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
80%
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
90%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>import React,
Component
from 'react'
export class AboutPillars extends Component
render()
const blobCursor = (() =>
const cursor = document.querySelectorAll('.cursorBlob');
const sectionLink = document.querySelectorAll('.nav-link');
const setCursorPos = (e) =>
const
pageX: posX,
pageY: posY
= e;
cursor.style.top = `$posY - (cursor.offsetHeight / 2)px`;
cursor.style.left = `$posX - (cursor.offsetWidth / 2)px`;
;
document.addEventListener('mousemove', setCursorPos);
const setCursorHover = () => cursor.style.transform = 'scale(2.5)';
const removeCursorHover = () => cursor.style.transform = '';
sectionLink.forEach(link => link.addEventListener('mouseover', setCursorHover));
sectionLink.forEach(link => link.addEventListener('mouseleave', removeCursorHover));
);
return ( <
div className = "about-pillars-section" >
<
div className = "cursorBlob" > < /div> <
ul class = "nav" >
<
li class = "nav-link" > Vision < /li> <
li class = "nav-link" > Music < /li> <
li class = "nav-link" > Workshops < /li> <
li class = "nav-link" > Techstyle < /li> <
/ul> <
/div>
)
export default AboutPillars.cursorBlob
width: 50px;
height: 50px;
background: linear-gradient( 120deg, $mikado-yellow, $giants-orange, $desire, $rebecca-purple, $sea-serpent);
background-size: 1600% 1600%;
position: absolute;
mix-blend-mode: difference;
pointer-events: none;
z-index: 1;
transition: 0.15s linear;
animation: blobRadius 5s ease infinite, blobBackground 15s ease infinite;
@keyframes blobRadius
0%,
100%
border-radius: 43% 77% 80% 40% / 40% 40% 80% 80%;
20%
border-radius: 47% 73% 61% 59% / 47% 75% 45% 73%;
40%
border-radius: 46% 74% 74% 46% / 74% 58% 62% 46%;
60%
border-radius: 47% 73% 61% 59% / 40% 40% 80% 80%;
80%
border-radius: 50% 70% 52% 68% / 51% 61% 59% 69%;
@keyframes blobBackground
0%,
100%
background-position: 0% 50%;
50%
background-position: 100% 50%;
.nav
margin: 0;
padding: 0;
width: 100%;
background: $gray-scale;
&-link
display: inline-block;
width: 50%;
height: 10vw;
color: $ghost;
text-align: center;
line-height: 10vw;
list-style: none;
cursor: pointer;
font-size: $section-heading;
font-family: $header-font;
transition: 0.25s ease;
&:not(:last-child)
margin-bottom: 50px;
&:hover
transform: scale(1.2);
&:after
content: " ";
width: 4vw;
height: 0.3rem;
display: block;
margin: auto;
background-color: white;
position: relative;
top: -3rem;
-webkit-animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
//ANIMATION
@-webkit-keyframes scale-in-ver-center
0%
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
100%
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
@keyframes scale-in-ver-center
0%
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
100%
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
@-webkit-keyframes shake-lr
0%,
100%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
10%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
20%,
40%,
60%
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
30%,
50%,
70%
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
80%
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
90%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
@keyframes shake-lr
0%,
100%
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
10%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
20%,
40%,
60%
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
30%,
50%,
70%
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
80%
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
90%
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>javascript reactjs
javascript reactjs
asked Mar 21 at 22:04
Jasmine IbikunleJasmine Ibikunle
14
asked Mar 21 at 22:04
Jasmine IbikunleJasmine Ibikunle
14
asked Mar 21 at 22:04
Jasmine IbikunleJasmine Ibikunle
14
asked Mar 21 at 22:04
Jasmine IbikunleJasmine Ibikunle
14
asked Mar 21 at 22:04
Jasmine IbikunleJasmine Ibikunle
14
14
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55289957%2freact-cursor-blob-on-mouse-ovr%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55289957%2freact-cursor-blob-on-mouse-ovr%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
