Canvas Support

Demo-photographer.html

3 replies · opened Feb 19, 2020

VvbruzeauFeb 19, 2020

Context:

  • I'm using the demo-photographer.html
  • I'm clicking on the hamburger menu while on a smartphone.

Could you please explain :

  1. How can I disable the "wave" background animation
  2. How can I change the background color of the svg / <path> when the menu is open

Thank you.

SSemicolon WebSTAFFFeb 19, 2020

Hello,

  1. This feature cannot be disabled on Mobile Devices at the moment. We will introduce more control options for this in the Future Updates.

  2. To change the Background Colors, simply change the --path-fill-* Colors in the demos/photographer/css/menu.css File.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

VvbruzeauFeb 20, 2020

Hello I successfully changed the background color thank you.

  • Is there any chance to replace the animation by a simple background appearing? My client wants to disable this animation and I need to find a solution... :(
SSemicolon WebSTAFFFeb 21, 2020

Hello,

Apologies about the Inconveniences!

However, this type of Header is only included with the Photographer Niche Demos and currently everything is synced together. So, removing the Animation will require the SVG Paths to be disabled and other customizations. Currently, you can open the demos/photographer/js/menu-easing.js File and edit the following settings according to what suits you best:


this.elm = elm;
this.path = elm.querySelectorAll('path');
this.numPoints = 4;
this.duration = 800;
this.delayPointsArray = [];
this.delayPointsMax = 180;
this.delayPerPath = 70;
this.timeStart = Date.now();
this.isOpened = false;
this.isAnimating = false;

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard