Good day! im trying to work with parallax(materializecss) in reactjs but the pictures does not come out.
i already install the materializecss using npm,
heres my code:
import React from 'react';
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';
import Pic1 from '../img/Pic1.jpg'
import Pic2 from '../img/Pic2.jpg';
import 'materialize-css/js/parallax';
const About = () => {
return (
<div className="paralax">
<div className="parallax-container">
<div className="parallax"><img src={Pic1} alt="Building"/></div>
</div>
<div className="class section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 ligthen-3">
Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.
</p>
</div>
</div>
<div className="parallax-container">
<div className="parallax"><img src={Pic2} alt="Building"/></div>
</div>
</div>
)
}
export default About;
Use react-materialize.
Install: npm install react-materialize
And import Parallax like import {Parallax} from 'react-materialize';
Hence your code becomes:
import React, { Component } from 'react';
import './App.css';
import {Parallax} from 'react-materialize';
class App extends Component {
render() {
return (
<div>
<Parallax imageSrc="http://materializecss.com/images/parallax1.jpg"/>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<Parallax imageSrc="http://materializecss.com/images/parallax2.jpg"/>
</div>
);
}
}
export default App;
I have used image hyperlinks. But you can replace them with static images also.
Also, import jquery befor materialise.min.js in your index.html
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
For Reference : https://react-materialize.github.io/#/
PEACE
To use Javascript components of Materialize CSS, we need to get the reference of that particular element that we're gonna use.
We're using ref because we're triggering imperative animations.
When to Use Refs
Triggering imperative animations.
Integrating with third-party DOM libraries.
As we're using MaterializeCSS which is a third-party CSS framework so in order to use the animations of that we're using ref.
When to use refs in React
CodeSandbox - Parallax Demo
You can check other Materialize CSS components in React from this repository - GermaVinsmoke - Reactize
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import Image1 from "../public/parallax2.jpg";
import Image2 from "../public/parallax1.jpg";
class Parallax extends Component {
componentDidMount() {
M.Parallax.init(this.Parallax1);
M.Parallax.init(this.Parallax2);
}
render() {
return (
<>
<div className="parallax-container">
<div
ref={Parallax => {
this.Parallax1 = Parallax;
}}
className="parallax"
>
<img src={Image2} />
</div>
</div>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">
Parallax is an effect where the background content or image in
this case, is moved at a different speed than the foreground
content while scrolling.
</p>
</div>
</div>
<div
ref={Parallax => {
this.Parallax2 = Parallax;
}}
className="parallax-container"
>
<div className="parallax">
<img src={Image1} />
</div>
</div>
</>
);
}
}
export default Parallax;
Related
First question on StackOverflow.
So, I have a Next App and the Navbar is being imported in the _app.js.
import Navbar from "../Components/Navbar";
function MyApp({ Component, pageProps }) {
return (
<>
<Navbar />
<Component {...pageProps} />
</>
);
}
Color or Navbar links is grey so when it is rendered on the most of the pages it works fine, as the BG is of light color. However, in some pages when navigated the color is not visible.
So, I want to know if there is a way to change the color of the Navbar links only when we are on that page. Like, for example when we visit the page :: http://localhost:3000/model3 , the color of the Navbar links should be white.
I am using the module approach on the Navbar and using sass as the CSS compiler with a Navbar.module.scss
Model3.js
import React from "react";
import section from "../styles/section.module.css";
import S from "../styles/models.module.css";
import E from "../styles/model3.module.css";
import Link from "next/link";
import Head from "next/head";
import { Fade } from "react-reveal";
function model3() {
return (
<div>
<Head SameSite="None">
<title>Model 3 | Tesla</title>
<link
rel="icon"
href="https://www.tesla.com/themes/custom/tesla_frontend/assets/favicons/favicon.ico"
/>
</Head>
<div className={S.Wrapper}>
<div className={S.Maincontainer}>
<div className={S.Container}>
<div className={E.TopSection}>
<Fade bottom>
<div className={section.carname}>
<div className={section.title}>
<h2 style={{ color: "white" }}>Model 3</h2>
</div>
</div>
</Fade>
<Fade bottom>
<div className={E.Details}>
<div className={S.DetailsContainer}>
<div className={S.DetailsHeading}>
<h3>3.1 s</h3>
</div>
<div className={S.DetailsData}>0-60 mph*</div>
</div>
<div className={S.DetailsContainer}>
<div className={S.DetailsHeading}>
<h3>358 mi</h3>
</div>
<div className={S.DetailsData}>Range (EPA est.)</div>
</div>
<div className={S.DetailsContainer}>
<div className={S.DetailsHeading}>
<h3>AWD</h3>
</div>
<div className={S.DetailsData}>Dual Motor</div>
</div>
<div className={S.DetailsContainer}>
<Link href="">
<span>Order Now</span>
</Link>
</div>
</div>
</Fade>
</div>
</div>
</div>
</div>
</div>);}
export default model3;
If there is anything that I should include please let me know. Thank you.
Please check at the top, all the Navlinks in the Navbar are grey, I need to change all of them to white when this page is rendered so that they will be visible
The page looks like this
There are many ways to do that:
you can use your route hooks, React Router has useLocation(), you can verify the location and set a class to modify the behaviour based on the path.
you can send a props to your navbar
you can set a class to the body based on the route and then target your navabar with css .dark .navbar
The best method depends on the structure of your project
here is my code where i'm trying to pass object like{title,description,backgroundImg ....} to section component using props , I am getting all the key & value but when I use it on section component getting all data value instead of backgroundImg why..?
import React from "react";
import Section from "./Section";
function Home() {
return (
<div>
<div className="container">
<Section
title="Model S"
description="Order Online for Touchless Delivery"
backgroundImg="model-s.jpg"
leftButton="custom order"
rightButton="existing inventory"
/>
<Section
title="Model Y"
description="Order Online for Touchless Delivery"
backgroundImg="../images/model-y.jpg"
leftButton="custom order"
rightButton="existing inventory"
/>
</div>
);
}
export default Home;
to
import React from "react";
import DownArrow from "../images/down-arrow.svg";
const Section = (props) => {
return (
<div
className="Wrap"
style={{ backgroundImage: `url(${props.backgroundImg})` }}
>
<div className="item_text">
<h1>{props.title}</h1>
<p>{props.description}</p>
</div>
<div className="">
<div className="item_buttom">
<div className="leftButton">{props.leftButton}</div>
<div className="RightButton">{props.rightButton}</div>
</div>
<div>
<img src={DownArrow} alt="svgImg" className="DownArrow" />
</div>
</div>
</div>
);
};
export default Section;
My image folder path is "../images/..."
You need to import image in your home component.
Like
import sectionImage from "../images/image.jpg";
then pass the image like
<Section
backgroundImg={sectionImage}
/>
Then it should work fine.
I am trying to make a site that has a table of contents with links on the left hand side, contents of each section in the middle, then an overview on the right.
General concept:
Currently all of the code is in one function call:
import React from 'react';
import styles from '../styles/Home.module.css'
import table_of_contents from './test.js'
export default function Home() {
return (
<div className={styles.grid_container}>
<div className={styles.left_pane}>
<h3>1. Overview</h3>
<div className={styles.subsection_nav_link}>
<p>1.1 Hey</p>
<p>1.2 Hey</p>
</div>
<h3>2. Hey</h3>
<div className={styles.subsection_nav_link}>
<h4>2.1 Hey</h4>
<div className={styles.subsection_nav_link}>
<p>2.1.1 Hey</p>
<p>2.1.2 Hey</p>
<p>2.1.3 Hey </p>
</div>
<h4>2.2 Hey</h4>
<h4>2.3 Hey</h4>
<div className={styles.subsection_nav_link}>
<p>2.3.1 Hey</p>
<p>2.3.2 Hey</p>
</div>
<h4>2.4 Hey</h4>
</div>
<h3>3. Hey</h3>
<div className={styles.subsection_nav_link}>
<p>3.1 Hey</p>
<p>3.2 Hey</p>
<p>3.3 Hey</p>
<p>3.4 Hey</p>
</div>
<h3>4. Hey</h3>
<h4>4.1 Hey</h4>
<h4>4.2 Hey</h4>
<h4>4.3 Hey</h4>
<div className={styles.subsection_nav_link}>
<p>4.3.1 Hey</p>
<p>4.3.2 Hey (BT)</p>
<p>4.3.3 Hey</p>
<p>4.3.4 Hey</p>
<p>4.3.5 Hey</p>
<p>4.3.6 Hey</p>
</div>
</div>
<div className={styles.center_pane}>
<h2>Center Pane</h2>
<p>HeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHeyHey</p>
</div>
<div className={styles.right_pane}>
<h2>Right Pane</h2>
</div>
<div className={styles.footer}>
Test
</div>
</div>
)
}
I want to make the <div className={styles.left_pane}>...</div> reusable as I need it to be rendered for each link in the document that can be navigated to but I am still learning Nextjs/js/CSS etc. so I don't understand how this needs to be structured.
I tried making another js file and creating another function:
import React from 'react';
import styles from '../styles/Home.module.css'
export default function table_of_contents () {
return (the div here)
but I could not get it to render.
How can this be done?
I would put the "navbar" in a seperate file. I would make a folder called components and put this in there. Than you should create a seperate component called Layout and put the navbar in there with all the children that it will receive see the code below: `
import NavBar from "./NavBar";
const Layout = ({ children }) => {
return (
<div>
<NavBar />
{children}
</div>
);
};
export default Layout;
Than go to your _app.js file and wrap your layout around everything, see the code below:
import "../styles/globals.css";
import Layout from "../components/Layout";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
This is my first post on stackoverflow sorry if explanation isn't clear. Let me know if you need more information.
It's the first time I'm building a website with GatsbyJS and I'm trying to build some components to use all over the site.
One of these components is the footer. I wrote its structure but I want to change the color of a <div> that is part of the footer based on which page am I visiting. I don't want the whole footer to change color, only this div that is part of the footer.
To be more accurate: if I'm visiting the Homepage I want this div to have an orange Background whereas if I'm inside the contact page I want it to have a blue background.
Is it possible?
This is part of the code of my footer (that is the footer.js gatsby component that I import in my pages):
<footer className={footerStyle.footer}>
<div className={footerStyle.parteSopra}>
<div className={footerStyle.parteSopra}>
<div className={footerStyle.ottanta}>
<h3 className={footerStyle.rimaniamo+ ' '+footerStyle.dimTitoli}>rimaniamo<br />in contatto</h3>
</div>
<div className={footerStyle.venti}>
</div>
</div>
<div className={footerStyle.parteSotto}>
<div className={footerStyle.ottanta+ ' '+footerStyle.boxFrecciaBlu}>
<div className={footerStyle.contieniFrecciaBlu}>
<img className={footerStyle.frecciaBlu} src={frecciaBlu} alt="Freccia giù" />
</div>
</div>
<div className={footerStyle.venti+ ' '+footerStyle.boxFbEInstaBlu}>
<div className={footerStyle.contieniFbBlu}>
<a href="https://it-it.facebook.com/DiamanteCalzature" target="_blank" rel="noopener noreferrer">
<img className={footerStyle.fbBlu} src={iconaFbBlu} alt="Facebook" />
</a>
</div>
<div className={footerStyle.contieniInstaBlu}>
<a href="https://instagram.com/diamantecalzature?igshid=cta3uh8iob7a" target="_blank" rel="noopener noreferrer">
<img className={footerStyle.instaBlu} src={iconaInstaBlu} alt="Instagram" />
</a>
</div>
</div>
</div>
</div>
<div id="coloreFootSotto" className={footerStyle.parteSotto+ ' '+footerStyle.coloreFooterSotto}>
<div className={footerStyle.ottanta}>
</div>
<div className={footerStyle.venti+ ' '+footerStyle.boxTornaSu}>
</div>
</div>
</footer>
I import it in my pages writing <Footer /> and I thought I could add an attribute, a prop, or something inside that tag to realize what I want. I need the div with Id id="coloreFootSotto" to have a different background-color based on the page I am visiting. At the moment I'm just manipulating the DOM in some pages to change the background-color but I was wondering if it is possible to do it with props or something like that (maybe not).
Does anyone know it?
Thank you
Gatsby uses reach router so you can use useLocation in your component and do something with the location.pathname for specific routes.
// Footer.js
import React from 'react';
import { useLocation } from "#reach/router"
import Container from 'components/Container';
const Footer = () => {
const {pathname} = useLocation()
console.log(pathname)
return (
<footer style={pathname=== '/' ? {backgroundColor: 'blue'} : null} >
<Container>
<p>© {new Date().getFullYear()}, My Gatsby Site</p>
</Container>
</footer>
);
};
export default Footer;
It's also worth mentioning that you can get location data from a gatsby page via its location prop.
Depending on how your app is structured, you could also get this data from your page component, and pass the relevant data down via props down through your component tree.
eg IndexPage > Layout > Footer
For multiple pages, you could do something like this.
// Footer.js
import React from 'react';
import { useLocation } from "#reach/router"
import Container from 'components/Container';
const pagesWithColoredFooter = ['/', '/page-2', 'page-3'];
const Footer = () => {
const {pathname} = useLocation()
console.log(pathname)
return (
<footer style={pagesWithColoredFooter.includes(pathname) ? {backgroundColor: 'blue'} : null} >
<Container>
<p>© {new Date().getFullYear()}, My Gatsby Site</p>
</Container>
</footer>
);
};
export default Footer;
I have a problem adding React to my project. The component is not rendered. This is not SPA project.
I've tried easiest way. I've setup new project with 'laravel new reactexample', next I made 'php artisan preset react' and 'yarn run'. After that I added in welcome blade.php.
Example.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Example extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">
Example Component
</div>
<div className="card-body">
I am an example component!
</div>
</div>
</div>
</div>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
welcome.blade.php, fragmen
<div class="content">
{...}
<div id="example"></div>
{...}
</div>
webpack.mix.js
const mix = require('laravel-mix');
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
app.js
require('./bootstrap');
require('./components/Example');
Did I miss something in the configuration? What should I do to get rendered component on page?
Ok, I found solutoin. I must add
<script src="{{asset('js/app.js')}}" ></script>
to the page.