Share Posted October 25, 2017 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? Link to comment Share on other sites More sharing options...
Share Posted October 25, 2017 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 6 1 Link to comment Share on other sites More sharing options...
Share Posted October 25, 2017 @OSUblake I thought you will have some corrections or different approach. 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. Link to comment Share on other sites More sharing options...
Author Share Posted October 26, 2017 @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 ? Link to comment Share on other sites More sharing options...
Share Posted October 26, 2017 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. Link to comment Share on other sites More sharing options...
Share Posted October 26, 2017 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 4 1 Link to comment Share on other sites More sharing options...
Share Posted October 26, 2017 Nice background haha Link to comment Share on other sites More sharing options...
Author Share Posted October 27, 2017 Thankyou so much @Sahil this really helped me implementing the effect. Thankyou 2 Link to comment Share on other sites More sharing options...
Share Posted September 19, 2018 How did you insert the background images Link to comment Share on other sites More sharing options...
Share Posted December 27, 2018 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 Link to comment Share on other sites More sharing options...
Share Posted December 27, 2018 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 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 3 Link to comment Share on other sites More sharing options...
Share Posted July 11, 2019 Hi Sahil, How could this work for multiple images? Link to comment Share on other sites More sharing options...
Share Posted July 11, 2019 @Gumbo I don't understand your question. The demo above works on multiple elements (the image and the .slide element) already. Do you mean how can you have multiple sections, each with this type of behavior? Or do you mean something else? A minimal demo or at least a picture would help us be able to help you 1 Link to comment Share on other sites More sharing options...
Share Posted July 11, 2019 Hi Zach, At the mo, you have a red square on the background image. What if you had multiple images on the background image, each with its own type of movement? So like the below example but with images? http://www.loveuropedigital.com/2019/Jupiter/Parallax_example_300x600/index.html Link to comment Share on other sites More sharing options...
Share Posted July 11, 2019 You can just add more elements to your HTML and call parallaxIt on them from callParallax like so: See the Pen OeqgrZ by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Share Posted July 11, 2019 But instead of using classes, can you not just call different img? Link to comment Share on other sites More sharing options...
Share Posted July 11, 2019 20 minutes ago, Gumbo said: But instead of using classes, can you not just call different img? Sure you can. But you need to be able to select it somehow. Why don't you try editing the demo to reproduce whatever you're imagining and then posting that demo here so that we can give you feedback? 4 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now