https://shop.scatteredthoughtsofacraftymom.com/wp-content/themes/r…/assets/js/block-effects.js?ver=1618255606

1/**
2 * Animate elements with CSS as they appear in the viewport via custom classes.
3 *
4 * Add a single custom class to a block's Advanced field in the block editor:
5 * - fade-in
6 * - fade-in-up
7 *
8 * Blocks will be hidden but then animate into view when their top or bottom
9 * appears between the viewport top and bottom.
10 *
11 * Enqueueing this file at the bottom of your site's body element is enough to
12 * make the effects available. No further configuration or CSS is required.
13 *
14 * @author  Restored 316 // Lauren Gaige
15 * @link    http://www.restored316designs.com/
16 * @version 1.0.0
17 * @license GPL-2.0-or-later
18 */
19
20var restored = restored || {};
21
22restored.blockEffects = ( function() {
23	'use strict';
24
25	// Classes that can be applied to elements.
26	var effectClasses = [ '.fade-in', '.fade-in-up' ];
27
28	// Whether a position check is running or not.
29	var ticking = false;
30
31	/**
32	 * Injects effects CSS into the page dynamically.
33	 * @since 1.0.0
34	 */
35	var addCSS = function() {
36		var style = document.createElement( 'style' );
37		style.classList.add( 'restored-block-effects-js' ); // To help identify where inline styles are coming from.
38
39		style.innerHTML =
40
41			// Hide elements with effects on page load, set up animation duration.
42			'.fade-in, .fade-in-up { opacity: 0; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } ' +
43
44			// Do not apply effects when pages are printed.
45			'@media print { .fade-in, .fade-in-up { opacity: 1 !important; -webkit-animation: unset !important; animation: unset !important; -webkit-transition: none !important; transition: none !important; } } ' +
46
47			// Fade in effect.
48			'@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } ' +
49			'@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } ' +
50			'.fade-in.in-viewport { -webkit-animation-name: fadeIn; animation-name: fadeIn; } ' +
51
52			// Fade in up effect.
53			'@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } ' +
54			'to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } ' +
55			'@keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } ' +
56			'to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } ' +
57			'.fade-in-up.in-viewport { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } ';
58
59		document.body.appendChild( style );
60	};
61
62	/**
63	 * Checks if the top or bottom of the given element is within the viewport.
64	 * Uses top and bottom bounds only and ignores left and right position.
65	 * @since 1.0.0
66	 * @param {object} elem The element to check.
67	 * @returns {bool}
68	 */
69	var isInViewport = function( elem ) {
70		var bounding = elem.getBoundingClientRect();
71		return (
72			( 0 <= bounding.top &&
73			bounding.top <= ( window.innerHeight || document.documentElement.clientHeight ) ) ||
74			( 0 <= bounding.bottom &&
75			bounding.bottom <= ( window.innerHeight || document.documentElement.clientHeight ) )
76		);
77	};
78
79	/**
80	 * Iterates over elements with effect classes.
81	 * Applies in-viewport class when in viewport.
82	 * @since 1.0.0
83	 */
84	var addInViewPortClass = function() {
85		var i, j, elements;
86
87		for ( i = 0; i < effectClasses.length; ++i ) {
88			elements = document.querySelectorAll( effectClasses[i]);
89
90			for ( j = 0; j < elements.length; ++j ) {
91				if ( isInViewport( elements[j]) ) {
92					elements[j].classList.add( 'in-viewport' );
93				}
94			}
95		}
96
97		ticking = false;
98	};
99
100	/**
101	 * Triggers a new animation frame request if none are running.
102	 * @since 1.0.0
103	 */
104	var update = function() {
105		if ( ! ticking ) {
106			window.requestAnimationFrame( addInViewPortClass );
107			ticking = true;
108		}
109	};
110
111	return {
112
113		/**
114		 * Adds CSS and sets up viewport check.
115		 * Runs on ready to fade as early as possible, on load to account for
116		 * reflow that moves content into the viewport, and on scroll or resize
117		 * to show elements that are moved into the viewport by the user.
118		 * @since 1.0.0
119		 */
120		init: function() {
121			addCSS();
122			update();
123			window.addEventListener( 'load', update, false );
124			window.addEventListener( 'scroll', update, false );
125			window.addEventListener( 'resize', update, false );
126		}
127	};
128}() );
129
130restored.blockEffects.init();