opencode18/OpenCode-Collaborative

Add paralax effect on opencode logo

aswinzz opened this issue · 17 comments

aswinzz commented

https://www.hackinthenorth.com/ we need something like this on opencode logo!

aadixiiita commented

I would like to take this one ... I have to work on landing page logo ???

aswinzz commented

@aadixiiita
yeah landing page one

gauthamzz commented

@aswinzz people are making pr very different from what you have in mind, write descriptions and examples. See this pr

aadixiiita commented

I m not getting exact way of doing this ... Pass this to someone else ...

shivhek25 commented

I would like to work on this.

gauthamzz commented

ok use parallax.js

shivhek25 commented

Please reassign. I don't understand what has to be done.

gauthamzz commented

See th code. It’s simple. Add parallax.js in the bottom.

Take the image and split into different components. Add the x of each in different value . So that when the mouse moves each moves in different speed. See the same code in hack in the north repo.

shivhek25 commented

Okay, I will try again. @gauthamzz

shivhek25 commented

The thing is that they have different components in the image. The gears, the mountain, etc. but opencode's logo is one whole image.

gauthamzz commented

yes, use an image editor like gimp or photoshop and cut into small induvijual components, a web dev should know a bit of image editing 😄
after that make different images.

shivhek25 commented

I have never used photoshop or gimp and it won't be possible right now to learn those softwares from scratch. Could we not just move this whole image when the cursor is hovered over it just like in hackinthenorth webpage ?

gauthamzz commented

wait ill get that done for you 😄

  • 👍1
shivhek25 commented

Thank you. That would be quite helpful. :)

gauthamzz commented

Closing since event is almost over