Styjun

Using PTSerif-TLF for Cyrillic with TeX Gyre Pagella

Emphasize numbers in tables

Cannot overlay, because ListPlot does not draw same X range despite the same PlotRange

Why would a propellor have blades of different lengths?

Could citing a database like libgen get one into trouble?

Why can't i use !(single pattern) in zsh even after i turn on kshglob?

What was the ASCII end of medium (EM) character intended to be used for?

My players like to search everything. What do they find?

Square wave to sawtooth wave using two BJT

Why are examinees often not allowed to leave during the start and end of an exam?

How to model a Coral or Sponge Structure?

Non-inverting amplifier ; Single supply ; Bipolar input

Available snapshots for main net?

Why am I getting an electric shock from the water in my hot tub?

How does entropy depend on location and scale?

How did sloshing prevent the Apollo Service Module from moving safely away from the Command Module and how was this fixed?

Can you run PoE Cat6 alongside standard Cat6 cables?

Disk usage confusion: 10G missing on Linux home partition on SSD

Russian equivalents of 能骗就骗 (if you can cheat, then cheat)

How do I use efficient repeats in sheets for pop music?

Is this house-rule removing the increased effect of cantrips at higher character levels balanced?

Can you help me, to widen the page. Thank you

What's the difference between the Find Steed and Find Greater Steed spells?

Can I deep fry food in butter instead of vegetable oil?

React Materialize Parallax image is not scrolling with background

How to Check if element is visible after scrolling?How do I give text or an image a transparent background using CSS?Scroll to the top of the page using JavaScript/jQuery?Preview an image before it is uploadedjQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?Loop inside React JSXProgrammatically navigate using react routerHow to use materialize-css with React?react-materialize SideNav & trigger placement

1

I am trying to use a parallax from react-materiallize for a portfolio site. I've got the images working in the parallax however it doesn't not seem to be scrolling.

I've loaded JQuery before material CSS in the index.html file

import React, Component from 'react'
import Parallax, Row from 'react-materialize'



export default class ParalaxComponent extends Component 

 render()
 debugger
 return (
 <Row>
 <Parallax imageSrc="https://www.thoughtco.com/thmb/DF3Q0T5_0O5CmGBTCWCBTcyGgmw=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/JavaScript-58acbb8a3df78c345bad32c2.jpg"></Parallax>
 </Row>
 )
 

The image shows up but the animation is not being triggered thank you for your help.

Here is the app on github if that's an easier way to debug the issue.

javascript jquery html reactjs materialize

share|improve this question

edited Mar 25 at 21:43

Rotemya

1,59855 gold badges1717 silver badges2626 bronze badges

asked Mar 25 at 17:05

harryharry

3688 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  A quick demo would be helpful here. Any console errors?
  
  – justDan
  Mar 25 at 17:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  github.com/harryFBloch/portfolio
  
  – harry
  Mar 25 at 17:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i pushed it up to github im not sure how else to give you a quick demo not getting any console errors
  
  – harry
  Mar 25 at 17:15
  

  
  
  
  

add a comment | 

1

I am trying to use a parallax from react-materiallize for a portfolio site. I've got the images working in the parallax however it doesn't not seem to be scrolling.

I've loaded JQuery before material CSS in the index.html file

import React, Component from 'react'
import Parallax, Row from 'react-materialize'



export default class ParalaxComponent extends Component 

 render()
 debugger
 return (
 <Row>
 <Parallax imageSrc="https://www.thoughtco.com/thmb/DF3Q0T5_0O5CmGBTCWCBTcyGgmw=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/JavaScript-58acbb8a3df78c345bad32c2.jpg"></Parallax>
 </Row>
 )
 

The image shows up but the animation is not being triggered thank you for your help.

Here is the app on github if that's an easier way to debug the issue.

javascript jquery html reactjs materialize

share|improve this question

edited Mar 25 at 21:43

Rotemya

1,59855 gold badges1717 silver badges2626 bronze badges

asked Mar 25 at 17:05

harryharry

3688 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  A quick demo would be helpful here. Any console errors?
  
  – justDan
  Mar 25 at 17:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  github.com/harryFBloch/portfolio
  
  – harry
  Mar 25 at 17:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i pushed it up to github im not sure how else to give you a quick demo not getting any console errors
  
  – harry
  Mar 25 at 17:15
  

  
  
  
  

add a comment | 

I am trying to use a parallax from react-materiallize for a portfolio site. I've got the images working in the parallax however it doesn't not seem to be scrolling.

I've loaded JQuery before material CSS in the index.html file

import React, Component from 'react'
import Parallax, Row from 'react-materialize'



export default class ParalaxComponent extends Component 

 render()
 debugger
 return (
 <Row>
 <Parallax imageSrc="https://www.thoughtco.com/thmb/DF3Q0T5_0O5CmGBTCWCBTcyGgmw=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/JavaScript-58acbb8a3df78c345bad32c2.jpg"></Parallax>
 </Row>
 )
 

The image shows up but the animation is not being triggered thank you for your help.

Here is the app on github if that's an easier way to debug the issue.

javascript jquery html reactjs materialize

share|improve this question

edited Mar 25 at 21:43

Rotemya

1,59855 gold badges1717 silver badges2626 bronze badges

asked Mar 25 at 17:05

harryharry

3688 bronze badges

import React, Component from 'react'
import Parallax, Row from 'react-materialize'



export default class ParalaxComponent extends Component 

 render()
 debugger
 return (
 <Row>
 <Parallax imageSrc="https://www.thoughtco.com/thmb/DF3Q0T5_0O5CmGBTCWCBTcyGgmw=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/JavaScript-58acbb8a3df78c345bad32c2.jpg"></Parallax>
 </Row>
 )
 

share|improve this question

edited Mar 25 at 21:43

Rotemya

1,59855 gold badges1717 silver badges2626 bronze badges

asked Mar 25 at 17:05

harryharry

3688 bronze badges

share|improve this question

edited Mar 25 at 21:43

Rotemya

1,59855 gold badges1717 silver badges2626 bronze badges

asked Mar 25 at 17:05

harryharry

3688 bronze badges

edited Mar 25 at 21:43

Rotemya

1,59855 gold badges1717 silver badges2626 bronze badges

edited Mar 25 at 21:43

Rotemya

1,59855 gold badges1717 silver badges2626 bronze badges

asked Mar 25 at 17:05

harryharry

3688 bronze badges

asked Mar 25 at 17:05

harryharry

3688 bronze badges

1 Answer
1

active

oldest

votes

0

Ended up using 'npm react-parallax' instead.
There is great documentation and a demo app here

share|improve this answer

answered Mar 26 at 1:39

harryharry

3688 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why to use a npm module for all those small things, first you moved from materialize-CSS to react-materialize (react-Materialize got materialize-css as dependency in its package.json). So indirectly you were using materialize-CSS. Now you're using react-parallax, only for a parallax, if you want then this could be done using materialize-CSS only, why to use too many npm modules and make your app slow. Check this - github.com/GermaVinsmoke/Reactize?files=1
  
  – Germa Vinsmoke
  Mar 26 at 2:40
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I used react-parallax because the react-materialize parallax was not working for me, and I could not find a solution. I am using materialize for the rest of the styling of the app.
  
  – harry
  Mar 27 at 17:16
  

  
  
  
  

add a comment | 

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55343039%2freact-materialize-parallax-image-is-not-scrolling-with-background%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Ended up using 'npm react-parallax' instead.
There is great documentation and a demo app here

share|improve this answer

answered Mar 26 at 1:39

harryharry

3688 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why to use a npm module for all those small things, first you moved from materialize-CSS to react-materialize (react-Materialize got materialize-css as dependency in its package.json). So indirectly you were using materialize-CSS. Now you're using react-parallax, only for a parallax, if you want then this could be done using materialize-CSS only, why to use too many npm modules and make your app slow. Check this - github.com/GermaVinsmoke/Reactize?files=1
  
  – Germa Vinsmoke
  Mar 26 at 2:40
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I used react-parallax because the react-materialize parallax was not working for me, and I could not find a solution. I am using materialize for the rest of the styling of the app.
  
  – harry
  Mar 27 at 17:16
  

  
  
  
  

add a comment | 

0

Ended up using 'npm react-parallax' instead.
There is great documentation and a demo app here

share|improve this answer

answered Mar 26 at 1:39

harryharry

3688 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why to use a npm module for all those small things, first you moved from materialize-CSS to react-materialize (react-Materialize got materialize-css as dependency in its package.json). So indirectly you were using materialize-CSS. Now you're using react-parallax, only for a parallax, if you want then this could be done using materialize-CSS only, why to use too many npm modules and make your app slow. Check this - github.com/GermaVinsmoke/Reactize?files=1
  
  – Germa Vinsmoke
  Mar 26 at 2:40
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I used react-parallax because the react-materialize parallax was not working for me, and I could not find a solution. I am using materialize for the rest of the styling of the app.
  
  – harry
  Mar 27 at 17:16
  

  
  
  
  

add a comment | 

Ended up using 'npm react-parallax' instead.
There is great documentation and a demo app here

share|improve this answer

answered Mar 26 at 1:39

harryharry

3688 bronze badges

share|improve this answer

answered Mar 26 at 1:39

harryharry

3688 bronze badges

answered Mar 26 at 1:39

harryharry

3688 bronze badges

answered Mar 26 at 1:39

harryharry

3688 bronze badges