Fade in Fade Out

Description

• fade in and out of black and white when transitioning pages
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Use this code to Code Injection > Header

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #2.2

<!-- 06.26c15v3 Fade in Fade Out -->
<script>
window.FadeTransitionConfig = {
  GRAY_DURATION: 1500,
  COLOR_DURATION: 1500
};
</script>
<script>
if (sessionStorage.getItem('fromTransition')) {
  document.documentElement.style.filter = 'grayscale(1)';
}
</script>
<script src="https://code.beaverhero.com/other/0626c15v3fadeinfadeout.js"></script>

#2. Customize

#2.1. To change transition speed, change Line 04, Line 05

• 1500 = 1.5 second

GRAY_DURATION: 1500,
  COLOR_DURATION: 1500

#2.2. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer

Add a Block

Choose Markdown

Paste this code into Markdown

<script>
window.FadeTransitionConfig = {
  GRAY_DURATION: 1500,
  COLOR_DURATION: 1500
};
</script>
<script>
if (sessionStorage.getItem('fromTransition')) {
  document.documentElement.style.filter = 'grayscale(1)';
}
</script>
<script src="https://code.beaverhero.com/other/0626c15v3fadeinfadeout.js"></script>