Blurred background effect

tutorials
1

Hi, the other day was a bit bored so i made this effect to make the background blur while showing the menu and i wanted to share it with the community.

ezgif-3-f597c30ad7dc
It’s a subtle effect, i don’t know if it can be appreciated in a low resolution gif, sorry.

Anyways, in case it fits your project you can follow this steps:

Generate a new directive: ionic generate directive blur-menu

Then paste this code to blur-menu-directive.ts

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { Platform } from '@ionic/angular';

@Directive({
  selector: '[appBlurMenu]'
})
export class BlurMenuDirective {
  @Input('appBlurMenu') blurLevel;

  constructor(private el: ElementRef, private platform: Platform) {
    const platforms = platform.platforms();
    const applePlatforms = ['ios', 'iphone', 'ipad'];
    const apple = applePlatforms.some(p => platforms.includes(p)) ? true : false;
    el.nativeElement.style.transition = apple ? '0.4s backdrop-filter' : '0.3s backdrop-filter';
  }

  @HostListener('ionWillOpen') ionWillOpen() {
    this.setBackdropFilter(`blur(${this.blurLevel.toString() || '2'}px)`);
  }

  @HostListener('ionWillClose') ionWillClose() {
    this.setBackdropFilter('None');
  }

  setBackdropFilter(value) {
    this.el.nativeElement.style.backdropFilter = value;
  }
}

Add the appBlurMenu directive to ion-menu like this

<ion-menu contentId="main-content" type="overlay" appBlurMenu>

You may also adjust the effect level like this: (default value is 2)

<ion-menu contentId="main-content" type="overlay" appBlurMenu="5">

It’s a very simple code but i hope some of you may use it!

3 Likes
2

Hi @pabloo87!
Thanks for sharing!

3

@pabloo87 hey man thanks for sharing you help me out.