Page Transition style 3

Description

• page transition with slide overlay
• view demo – password: abc (click on 3 buttons to see effect)
• 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

<!-- 07.26c15v8 Page Transition style 3 -->
<script>
window.PageTransition3Config = {
  selector: 'a[href]',
  exclude: '',
  mode: 'reload',
  color: '#252525',
  direction: 'left-to-right',
  duration: 550,
  easing: 'cubic-bezier(0.76, 0, 0.24, 1)',
  enterDelay: 0,
  exitDelay: 0,
  navigateDelay: 150,
  holdAfterCover: 0,
  ajaxTimeout: 4000,
  prefetchOnHover: true,
  label: '',
  labelColor: '#fdfdfd',
  labelSize: '2rem',
  labelFont: 'inherit',
  zIndex: 2147483000,
  skipExtensions: ['pdf','zip','rar','doc','docx','xls','xlsx','ppt','pptx','csv','jpg','jpeg','png','gif','webp','svg','mp3','mp4','mov'],
  respectReducedMotion: true,
  enableOnMobile: true,
  mobileBreakpoint: 767,
  failsafe: 4000,
  debug: false
};
</script>
<script src="https://code.beaverhero.com/other/0726c15v8pagetransition3.js"></script>

#2. Customize

#2.1. To change page overlay color, change line 07

color: '#252525',

#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.PageTransition3Config = {
  selector: 'a[href]',
  exclude: '',
  mode: 'reload',
  color: '#252525',
  direction: 'left-to-right',
  duration: 550,
  easing: 'cubic-bezier(0.76, 0, 0.24, 1)',
  enterDelay: 0,
  exitDelay: 0,
  navigateDelay: 150,
  holdAfterCover: 0,
  ajaxTimeout: 4000,
  prefetchOnHover: true,
  label: '',
  labelColor: '#fdfdfd',
  labelSize: '2rem',
  labelFont: 'inherit',
  zIndex: 2147483000,
  skipExtensions: ['pdf','zip','rar','doc','docx','xls','xlsx','ppt','pptx','csv','jpg','jpeg','png','gif','webp','svg','mp3','mp4','mov'],
  respectReducedMotion: true,
  enableOnMobile: true,
  mobileBreakpoint: 767,
  failsafe: 4000,
  debug: false
};
</script>
<script src="https://code.beaverhero.com/other/0726c15v8pagetransition3.js"></script>