Jump to content
Ahsan Jamal

Background parallax effect on mouse move

Recommended Posts

I am trying to create a website using the background effect exactly similar as implemented in this website, http://brightmedia.pl/ . On inspect element the div that creating the parallax effect on background from mouse move and scroll as well, we can see that it is changing the translate3D() property of the element on mouse move. Please guide me how can I achieve this same background effect?

Share this post


Link to post
Share on other sites

Here is very basic demo.  You can change movement based on element you are animating.

 

You can also use parallax.js which responds to gyroscope on mobile devices.

 

See the Pen OxeeNV by Sahil89 (@Sahil89) on CodePen

 

  • Like 6
  • Thanks 1

Share this post


Link to post
Share on other sites

@OSUblake I thought you will have some corrections or different approach. :-D

 

One question, in case I try to implement parallax effect to respond to gyroscope, what entire set up is going to be? No, I am not going to actually do it, I would rather use parallax.js but curious about how you can implement/test such device specific effects.

 

Edit: it can be emulated on chrome.

Share this post


Link to post
Share on other sites

@Sahil there are I think two backgrounds running in this site  http://brightmedia.pl/ . I think one background is fixed and one background is moving which is showing the effect. Can we use this code to create a similar effect like in this site ? Also can you please explain gyroscope concept ?

Share this post


Link to post
Share on other sites

Ya you can have multiple elements with different movement, which creates this effect. They all are probably reacting to same event with different movements. You can create similar effect by setting different movement. I have updated demo with two elements.

 

About gyroscope, you must have seen 360 video on mobile. By using parallax.js you can have same movement as we move mouse whenever user physically moves the mobile.

Share this post


Link to post
Share on other sites

Here is demo with delay before parallax effect happens. You can play with movement, timeout and ease effects to see what works best for you.

 

See the Pen wrVEOj by Sahil89 (@Sahil89) on CodePen

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites
On 10/26/2017 at 3:36 PM, Sahil said:

Here is demo with delay before parallax effect happens. You can play with movement, timeout and ease effects to see what works best for you.

 

See the Pen wrVEOj by Sahil89 (@Sahil89) on CodePen

 

 

 

Can you please give me some code for this  http://brightmedia.pl/

i was wondering what was the code he is using for the line..

 

Please help me. 

Thank you

Share this post


Link to post
Share on other sites

Hi Wyne,

 

welcome to the GreenSock forums.

 

If you open up Dev Tools and inspect the site you will see that the majority of the fancy background visuals are rendered using HTML5 canvas

 

Screen Shot on 2018-12-27 at 09-50-35.png

 

You can also go to the network tab in dev tools and look at the source of this js: http://brightmedia.pl/js/main.min.js Dev tools will make it pretty / readable.

Even with the code readable it could take quite some time to reverse-engineer what they are doing.

 

If you are not familiar with canvas, I would strongly suggest you use DrawSVGPlugin which makes it SUPER easy to reveal SVG strokes in a wide variety of ways

 

https://greensock.com/drawSVG

 

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.