Hello there, I am making a portfolio, where there is a laptop which is animated with scroll, and there is an i frame with my original website , i want that website to be in screen of laptop, i could set the i frame in the mesh and it follows the rotation of the laptop, but when i scroll for the animation, the i frame goes up( which it shouldn;t as the 3D model doesn’t, Can anyone help me fix it, its been quite a while I have spent on it and i am going no where, https://new-port-phi.vercel.app/ this is the webstie, i cal let you know about everything that you need to know, I had to put rest of website below the model and it doesn’t look good. Thanks in advance
Hi, watching your site i will say that probably to fix this issue you could set the iframe to follow the laptop mesh (as you are doing) with css3d but instead of having the whole site 2 times like you have now you could have the canvas stay fixed in the screen and then scroll the site directly in the iframe (or use as css3 target the section containing the site instead of an iframe), in this way you can remove the scroll from the external part of the site and this should fix your problem.
Basically to sum up i will remove the iframe, use css3d to have the section containing the site follow the model screen, and keep the cnvas always fixed scrolling only the inner section.
Hope this help
Thanks for replying man, actually I specificly wanted that scroll effect it looked good, what i really want is both scroll animation and the website in laptop, its hard to set that thing up, if i set a div on position fixed in dev tool inspect element, i get those results, but i am not getting them on react somehow.
I’m not very familiar with react but if you found a specific element and what style to give to it to get the result you want you could give to it the style with js when the page load, it’s not a clean solution but if it work it can save you time