Parallex & css/js linked Help- website with webstudio.

sorry, i was only looking at "AboutDake" am testing parallex feature. As given in above image.

So it is not home page. only AboutDake page where i am testing that.

Above link codepen parallax am trying it out. .js and .css with that text.

cchandra

this page not main home, but there is a second page which is created. that one is done for parallax feature.

cchandra

it has .js, .css and div

cchandra

@Oleg Isonen did you check it. or should i make this the main home page for checking

OOleg Isonen

why are you setting background position on the h1 when the background is on it's parent element?

OOleg Isonen

https://share.descript.com/view/y74ngZZNP5B

OOleg Isonen

for the test I changed elem.parentElement, but you should query the right element in the first place

OOleg Isonen

for the next time, always provide clear steps to get to your repro, it took several back and forth

cchandra

thankyou. appreciate you helping in fixing. so in principle it is fine. but adding parentElement. ok.

OOleg Isonen

Add you id on the right elementvinstead

cchandra

https://codepen.io/Podgro/pen/oNOKYqr

on this one how should i go about it.

i add box and then add html embed to add the js script- module

and add the code in it?

css? by each element. or tokens?

This one i didnt create a page. i want to know how i go about it in thinkng.

cchandra

this structuring would help as there are more codepen codes which can be used on this topic.

OOleg Isonen

it depends on the logic, generally css first, then html then script

cchandra

how do we do it. i mean can you guide through a page for this. .css script can we do like a script?

Can you do a page and share please.

cchandra

https://apps.webstudio.is/builder/9c973650-96e8-46b8-8f3d-ab6d75af6c9a?authToken=751140c7-0c46-4455-a49f-a84e3991058d&mode=edit

cchandra

check this. i added css and javascript as 2 seperate html embed and then added container with the div names.

cchandra

is it wrong?

OOleg Isonen

css is defined inside <style> tag, not script

cchandra

Thankyou so much.

structure of this was perfect.

It worked, Sometimes we as new dont know, thanks for pointing it out. Now it opens lot more options on how i can get it to work.

In this example, i got svgs and layers with css and javascript. so a good complex one to make it work on this.

cchandra

one thing i have noticed these javascript based animations are not working on mobile browser.

cchandra

on chrome on mobile phone.

cchandra

https://dakegroup2024.wstd.io/

cchandra

this css works, but javascript animation works on design time but when published it is not working. is there something i need to check or do?

OOleg Isonen

Client only checked? For js

cchandra

yes. small mistakes ok. got it. working on desktop but not on mobile.