https://smrtcity.ai/wp-content/themes/frisk/assets/js/imageRevealHover.js?ver=7.1.2

1/**
2 * demo.js
3 * http://www.codrops.com
4 *
5 * Licensed under the MIT license.
6 * http://www.opensource.org/licenses/mit-license.php
7 *
8 * Copyright 2018, Codrops
9 * http://www.codrops.com
10 */
11(function ($) {
12    "use strict";
13
14    const mapNumber = (X,A,B,C,D) => (X-A)*(D-C)/(B-A)+C;
15    // from http://www.quirksmode.org/js/events_properties.html#position
16	const getMousePos = (e) => {
17        let posx = 0;
18        let posy = 0;
19		if (!e) e = window.event;
20		if (e.pageX || e.pageY) {
21            posx = e.pageX;
22			posy = e.pageY;
23		}
24		else if (e.clientX || e.clientY) 	{
25			posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
26			posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
27		}
28        return { x : posx, y : posy }
29    }
30    // Generate a random float.
31    const getRandomFloat = (min, max) => (Math.random() * (max - min) + min).toFixed(2);
32
33    /**
34     * One class per effect.
35     * Lots of code is repeated, so that single effects can be easily used.
36     */
37
38    // Effect 1
39    class HoverImgFx1 {
40        constructor(el) {
41            this.DOM = {el: el};
42            this.DOM.reveal = document.createElement('div');
43            this.DOM.reveal.className = 'tg-img-reveal-wrapper';
44            this.DOM.reveal.innerHTML =
45            `<div class="tg-img-reveal-wrapper__inner">
46                <div class="tg-img-reveal-wrapper__img" style="background-image:url(${this.DOM.el.dataset.img})">
47                    <div class="tg-hover-wrapper" >
48                        <ul class="tgbanner__content-meta list-wrap">
49                            <li><span class="by">By</span> <a href="#">${this.DOM.el.dataset.author ? this.DOM.el.dataset.author: ''}</a></li>
50                            <li>${this.DOM.el.dataset.date ? this.DOM.el.dataset.date: ''}</li>
51                        </ul>
52                        <h3 class="tg-hover-title">${this.DOM.el.dataset.title ? this.DOM.el.dataset.title: ''}</h3>
53                    </div>
54                </div>
55            </div>`;
56            this.DOM.el.appendChild(this.DOM.reveal);
57            this.DOM.revealInner = this.DOM.reveal.querySelector('.tg-img-reveal-wrapper__inner');
58            this.DOM.revealInner.style.overflow = 'hidden';
59            this.DOM.revealImg = this.DOM.revealInner.querySelector('.tg-img-reveal-wrapper__img');
60
61            this.initEvents();
62        }
63        initEvents() {
64            this.positionElement = (ev) => {
65                const mousePos = getMousePos(ev);
66                const docScrolls = {
67                    left : document.body.scrollLeft + document.documentElement.scrollLeft,
68                    top : document.body.scrollTop + document.documentElement.scrollTop
69                };
70                this.DOM.reveal.style.top = `${mousePos.y+20-docScrolls.top}px`;
71                this.DOM.reveal.style.left = `${mousePos.x+20-docScrolls.left}px`;
72            };
73            this.mouseenterFn = (ev) => {
74                this.positionElement(ev);
75                this.showImage();
76            };
77            this.mousemoveFn = ev => requestAnimationFrame(() => {
78                this.positionElement(ev);
79            });
80            this.mouseleaveFn = () => {
81                this.hideImage();
82            };
83
84            this.DOM.el.addEventListener('mouseenter', this.mouseenterFn);
85            this.DOM.el.addEventListener('mousemove', this.mousemoveFn);
86            this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn);
87        }
88        showImage() {
89            TweenMax.killTweensOf(this.DOM.revealInner);
90            TweenMax.killTweensOf(this.DOM.revealImg);
91
92            this.tl = new TimelineMax({
93                onStart: () => {
94                    this.DOM.reveal.style.opacity = 1;
95                    TweenMax.set(this.DOM.el, {zIndex: 9});
96                }
97            })
98            .add('begin')
99            .add(new TweenMax(this.DOM.revealInner, 0.2, {
100                ease: Sine.easeOut,
101                startAt: {x: '-100%'},
102                x: '0%'
103            }), 'begin')
104            .add(new TweenMax(this.DOM.revealImg, 0.2, {
105                ease: Sine.easeOut,
106                startAt: {x: '100%'},
107                x: '0%'
108            }), 'begin');
109        }
110        hideImage() {
111            TweenMax.killTweensOf(this.DOM.revealInner);
112            TweenMax.killTweensOf(this.DOM.revealImg);
113
114            this.tl = new TimelineMax({
115                onStart: () => {
116                    TweenMax.set(this.DOM.el, {zIndex: 8});
117                },
118                onComplete: () => {
119                    TweenMax.set(this.DOM.el, {zIndex: ''});
120                    TweenMax.set(this.DOM.reveal, {opacity: 0});
121                }
122            })
123            .add('begin')
124            .add(new TweenMax(this.DOM.revealInner, 0.2, {
125                ease: Sine.easeOut,
126                x: '100%'
127            }), 'begin')
128
129            .add(new TweenMax(this.DOM.revealImg, 0.2, {
130                ease: Sine.easeOut,
131                x: '-100%'
132            }), 'begin');
133        }
134    }
135
136    [...document.querySelectorAll('[data-fx="pt1"] > .tg-img-reveal-item, .tg-img-reveal-item[data-fx="pt1"]')].forEac

136h(link => new HoverPTCard1(link));
137    [...document.querySelectorAll('[data-fx="1"] > .tg-img-reveal-item, .tg-img-reveal-item[data-fx="1"]')].forEach(link => new HoverImgFx1(link));
138
139    const contentel = document.querySelector('.content');
140    [...document.querySelectorAll('.block__title, .block__link, .content__text-link')].forEach((el) => {
141        const imgsArr = el.dataset.img.split(',');
142        const imgsSubtitle = el.dataset.subtitle.split(',');
143        const imgsTitle = el.dataset.title.split(',');
144        const imgsDate = el.dataset.metadate.split(',');
145        const imgsAuthor = el.dataset.metaauthor.split(',');
146        for (let i = 0, len = imgsArr.length; i <= len-1; ++i ) {
147            const imgel = document.createElement('img');
148            imgel.style.visibility = 'hidden';
149            imgel.style.width = 0;
150            imgel.src = imgsArr[i];
151            imgel.className = 'preload';
152            contentel.appendChild(imgel);
153        }
154    });
155
156})(jQuery);