I am attempting to convert this code (Code pen) into my react JavaScript code, but I am failing, probably not least because I don't know what language the original code is in!
This is as far as I've got:
index.js:
import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import utilStyles from '../styles/utils.module.css'
import { getSortedPostsData } from '../lib/posts'
import Link from 'next/link'
import Date from '../components/date'
import react from 'react'
export default function Home({ allPostsData }) {
return (
statics: {
droplets = 250
rain
- for (let r = 0; r < droplets; r )- const droplets = 250
rain
- for (let r = 0; r < droplets; r )
}
<Layout home>
<Head>
<title>{siteTitle}</title>
</Head>
svg.rain__drop(preserveAspectRatio="xMinYMin", viewBox='0 0 5 50', style=`--x:
${Math.floor(Math.random() * 100)}; --y:
${Math.floor(Math.random() * 100)}; --o:
${Math.random()}; --a: ${Math.random() 0.5}; --d:
${(Math.random() * 2) - 1}; --s: ${Math.random()}`)
path(stroke='none', d="M 2.5,0 C 2.6949458,3.5392017 3.344765,20.524571 4.4494577,30.9559 5.7551357,42.666753 4.5915685,50 2.5,50 0.40843152,50 -0.75513565,42.666753 0.55054234,30.9559 1.655235,20.524571 2.3050542,3.5392017 2.5,0 Z")
<section className={utilStyles.headingMd}>
<p>'Very capable, friendly individual. Have been off work due to illness and have recently got back into
the workforce and am now looking for something more challenging which would enable me to
support a family. I have great skills and knowledge in the hospitality sector and am also very
technologically minded. I have experience with HTML, CSS, JAVA, & other languages. I feel capable of
learning any programming language. I would like the opportunity to develop my skills and a career in
the technology sector.'
</p>
<p>
(This is a sample website - you’ll be building a site like this in{' '}
<a href="https://nextjs.org/learn">our Next.js tutorial</a>.)
</p>
</section>
<section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
<h2 className={utilStyles.headingLg}>Blog</h2>
<ul className={utilStyles.list}>
{allPostsData.map(({ id, date, title }) => (
<li className={utilStyles.listItem} key={id}>
<Link href={`/posts/${id}`}>
<a>{title}</a>
</Link>
<br />
<small className={utilStyles.lightText}>
<Date dateString={date} />
</small>
</li>
))}
</ul>
</section>
</Layout>
)
}
export async function getStaticProps() {
const allPostsData = getSortedPostsData()
return {
props: {
allPostsData
}
}
}layout.module.css:
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
}
.backToHome {
margin: 3rem 0 0;
}
*
*:before
*:after
box-sizing border-box
body
background-color #6c78a9
display flex
align-items center
justify-content center
.rain__drop
animation-delay calc(var(--d) * 1s)
animation-duration calc(var(--a) * 1s)
animation-iteration-count infinite
animation-name drop
animation-timing-function linear
height 30px
left calc(var(--x) * 1%)
position absolute
top calc((var(--y) 50) * -1px)
path
fill #808fbf
opacity var(--o)
transform scaleY(calc(var(--s) * 1.5))
@keyframes drop
90%
opacity 1
100%
opacity 0
transform translateY(100vh)Any help would be much appreciated!
Thank you very much, ClaaziX
CodePudding user response：
Here is a one to one conversion of the PUG and SCSS to vanilla JS
Just change the innerHTML= to your react element
document.querySelector(".rain").innerHTML = Array.from({ length: 250 })
.map((_, i) => `<svg preserveAspectRatio = "xMinYMin" viewBox = '0 0 5 50'
style="
--x: ${Math.floor(Math.random() * 100)};
--y: ${Math.floor(Math.random() * 100)};
--o: ${Math.random()};
--a: ${Math.random() 0.5};
--d: ${(Math.random() * 2) - 1};
--s: ${Math.random()}">
<path stroke="none"
d="M 2.5,0 C 2.6949458,3.5392017 3.344765,20.524571 4.4494577,30.9559 5.7551357,42.666753 4.5915685,50 2.5,50 0.40843152,50 -0.75513565,42.666753 0.55054234,30.9559 1.655235,20.524571 2.3050542,3.5392017 2.5,0 Z"></path></svg>`).join("")*,
*:before,
*:after {
box-sizing: border-box;
}
body {
background-color: #6c78a9;
display: flex;
align-items: center;
justify-content: center;
}
.rain__drop {
-webkit-animation-delay: calc(var(--d) * 1s);
animation-delay: calc(var(--d) * 1s);
-webkit-animation-duration: calc(var(--a) * 1s);
animation-duration: calc(var(--a) * 1s);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: drop;
animation-name: drop;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
height: 30px;
left: calc(var(--x) * 1%);
position: absolute;
top: calc((var(--y) 50) * -1px);
}
.rain__drop path {
fill: #a1c6cc;
opacity: var(--o);
transform: scaleY(calc(var(--s) * 1.5));
}
@-webkit-keyframes drop {
90% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(100vh);
}
}
@keyframes drop {
90% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(100vh);
}
}<div ></div>So in React I guess it would be something like
render() {
const div = `<div className="rain">
${Array.from({ length: 250 })
.map((_, i) => `<svg className="rain__drop" preserveAspectRatio = "xMinYMin" viewBox = '0 0 5 50'
style="
--x: ${Math.floor(Math.random() * 100)};
--y: ${Math.floor(Math.random() * 100)};
--o: ${Math.random()};
--a: ${Math.random() 0.5};
--d: ${(Math.random() * 2) - 1};
--s: ${Math.random()}">
<path stroke="none"
d="M 2.5,0 C 2.6949458,3.5392017 3.344765,20.524571 4.4494577,30.9559 5.7551357,42.666753 4.5915685,50 2.5,50 0.40843152,50 -0.75513565,42.666753 0.55054234,30.9559 1.655235,20.524571 2.3050542,3.5392017 2.5,0 Z"></path></svg>`).join("")}
</div>}`
return div
};
CodePudding user response：
Going to try this: https://github.com/pugjs/babel-plugin-transform-react-pug
I hope it works!