I'm make a graphical website, so I use three.js for implement it.
For a reference, I searched a lots of site and found some interest site.
https://www.magicleap.com/ is made with React.js.
Connect the site and scroll up/down, it's effect like move forward and backward.
So I wonder that, which library used in this site to implement animation with scroll?
Anyone who know about that, please comment it.
Thanks.
It seems they are using next.js.
Sources:
https://react-etc.net/entry/who-is-using-next-js
https://builtwith.com/?https%3a%2f%2fwww.magicleap.com%2f
Related
I've built my website in Next.js, deployed statically via Netlify. Whenever I load it in a new tab, I get a white flash where the SVG logos are visible but nothing else, before the rest of the content loads in. I don't think this is a Flash Of Unstyled Content but it has a similar effect. I'm experiencing on desktop Chrome, Safari and Firefox, but doesn't seen to be happening on mobile. I've been trouble shooting for hours and am no closer to solving. Here's the repo if anyone wants to have a look. Any insights greatly appreciated.
Quoting directly from styled-components' docs:
Basically you need to add a custom pages/_document.js (if you don't
have one). Then copy the logic for styled-components to inject the
server side rendered styles into the .
Refer to our example in the Next.js repo for an up-to-date usage
example.
When using styled-components with Next.js you need to do a little magic in the _document.js. There is a with-styled-components example in the Next.js' repository. Please see here: https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js
I have been using semantic ui for the components and the site turns out very nice on desktop,
but it fairly breaks on mobile.
How can I transform it to be fully responsive
I highly recommend you to read this CSS guide
You can create a fully responsive website via Flex-box.
Looks like there is a responsive add-on for semantic, https://react.semantic-ui.com/addons/responsive/
Take a look through the documentation in the link above. You will still have to make the choice yourself of how to make the UI be responsive, but you have helpers from semantic to help with breakpoints.
Ideally you want to start with the grid being responsive: https://semantic-ui.com/collections/grid.html
I had a same question before After I learn media queries with CSS. You can build your app with any view-port with this.
refer this, for the beginer https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I'm creating a gallery of images in ReactJs. There are a lot of examples online, but i didn't find anything that is perfectly responsive on desktop browsers and also completely mobile friendly.
In particular, when an image is opened on the mobile browser, i need to be able to zoom the photo with a double tap, and close the photo when i drag it to the bottom
I already tried all the principal solution that i found online.
For example, i tried all of these https://reactjsexample.com/tag/lightbox/
and much much more.
I also tried different approaches like CSS rules, Viewport rules, create a simple zoomable html div, etc... But nothing worked.
Basically, what i what to achieve is exactly something like this: https://www.lucapetruzzi.com/gallery/1
Created thanks to this library: https://photoswipe.com/ that unfortunately i can't use in React.
(I also tried the react-photoswipe and react-photoswipe-2 libraries but it seems not maintained and not working with new versions of React)
Thank you for any help
So for previous comments, I wrote a snippet for you, check here
Here are the mainly steps:
use npm install photoswipe so DON'T need to include builded js but NEED to include css in index.html (or you can import in App.css)
write the markup in js component
init it by click button or in useEffect
I'am using Reactjs for the first time and I want to make my website responsive .
So, Is there a library helps me to get a responsive design ?
thank you.
So this isn't something that React will do for you as building a responsive site is something more along the css that you decide to use.
What I would recommend you adding to your react project is another project like bootstrap which will give you the power to create a responsive website. It also has a lot of other basics that you can use in your project to build upon. Specifically for the responsive overview you will want to check out this link => https://getbootstrap.com/docs/4.0/layout/overview/
I'm starting to build a new portfolio with this Gumby framework. I've chosen Gumby because I like SASS more than LESS, so I would like to try a framework based on this language.
The problem is that the mobile navigation doesn't work for me.
If I use the ui.html inside the downloaded package and I resize the browser window, the "three lines icon" appears, but if I click nothing happend!
If I use the Gumby's UI demo on the website it works...either for some website I saw here on stackoverflow that use gumby!
I've checked all the paths, the developer told me that I have to use gumby.min.js and it's uncomment by default, so i don't know why this mobile menu doesn't work for me.
Maybe I have to work online with the website hosted on a server? But I'ts strange...
I don't know what code to post, because it's simply the ui.html who all of you can find inside the downloaded gumby package.
I don't know javascript well so I cannot explain how/why this works but there is an issue with toggleswitch.js. Add e.stopImmediatePropagation(); to line 45. That's what worked for me.
If someone knows how or why this works I would love to learn.