261 lines
11 KiB
JavaScript
261 lines
11 KiB
JavaScript
// Flowmap deformation effect
|
|
function flowmap_deformation() {
|
|
jQuery('.flowmap-deformation-wrapper').each(function(){
|
|
let box = jQuery(this);
|
|
|
|
setTimeout(function() {box.addClass('active');}, 300);
|
|
|
|
const imgSize = [box.data('bg-width'), box.data('bg-height')];
|
|
|
|
const vertex = `
|
|
attribute vec2 uv;
|
|
attribute vec2 position;
|
|
varying vec2 vUv;
|
|
void main() {
|
|
vUv = uv;
|
|
gl_Position = vec4(position, 0, 1);
|
|
}
|
|
`;
|
|
const fragment = `
|
|
precision highp float;
|
|
precision highp int;
|
|
uniform sampler2D tWater;
|
|
uniform sampler2D tFlow;
|
|
uniform float uTime;
|
|
varying vec2 vUv;
|
|
uniform vec4 res;
|
|
|
|
void main() {
|
|
|
|
// R and G values are velocity in the x and y direction
|
|
// B value is the velocity length
|
|
vec3 flow = texture2D(tFlow, vUv).rgb;
|
|
|
|
vec2 uv = .5 * gl_FragCoord.xy / res.xy ;
|
|
vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);
|
|
myUV -= flow.xy * (0.15 * 0.7);
|
|
|
|
vec3 tex = texture2D(tWater, myUV).rgb;
|
|
|
|
gl_FragColor = vec4(tex.r, tex.g, tex.b, 1.0);
|
|
}
|
|
`;
|
|
{
|
|
const renderer = new ogl.Renderer({ dpr: 2 });
|
|
const gl = renderer.gl;
|
|
box.append(gl.canvas);
|
|
|
|
// Variable inputs to control flowmap
|
|
let aspect = 1;
|
|
const mouse = new ogl.Vec2(-1);
|
|
const velocity = new ogl.Vec2();
|
|
function resize() {
|
|
let a1, a2;
|
|
var imageAspect = imgSize[1] / imgSize[0];
|
|
if (box.outerHeight() / box.outerWidth() < imageAspect) {
|
|
a1 = 1;
|
|
a2 = box.outerHeight() / box.outerWidth() / imageAspect;
|
|
} else {
|
|
a1 = (box.outerWidth() / box.outerHeight()) * imageAspect;
|
|
a2 = 1;
|
|
}
|
|
mesh.program.uniforms.res.value = new ogl.Vec4(
|
|
box.outerWidth(),
|
|
box.outerHeight(),
|
|
a1,
|
|
a2
|
|
);
|
|
|
|
renderer.setSize(box.outerWidth(), box.outerHeight());
|
|
aspect = box.outerWidth() / box.outerHeight();
|
|
}
|
|
const flowmap = new ogl.Flowmap(gl, {
|
|
falloff: 0.6
|
|
});
|
|
// Triangle that includes -1 to 1 range for 'position', and 0 to 1 range for 'uv'.
|
|
const geometry = new ogl.Geometry(gl, {
|
|
position: {
|
|
size: 2,
|
|
data: new Float32Array([-1, -1, 3, -1, -1, 3])
|
|
},
|
|
uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) }
|
|
});
|
|
const texture = new ogl.Texture(gl, {
|
|
minFilter: gl.LINEAR,
|
|
magFilter: gl.LINEAR
|
|
});
|
|
const img = new Image();
|
|
img.onload = () => (texture.image = img);
|
|
img.crossOrigin = "Anonymous";
|
|
img.src = box.data('bg');
|
|
|
|
let a1, a2;
|
|
var imageAspect = imgSize[1] / imgSize[0]; //0.5573
|
|
if (box.outerHeight() / box.outerWidth() < imageAspect) { // 0.4146 < 0.5573
|
|
a1 = 1;
|
|
a2 = box.outerHeight() / box.outerWidth() / imageAspect; // 0.7439
|
|
} else {
|
|
a1 = (box.outerWidth() / box.outerHeight()) * imageAspect;
|
|
a2 = 1;
|
|
}
|
|
|
|
const program = new ogl.Program(gl, {
|
|
vertex,
|
|
fragment,
|
|
uniforms: {
|
|
uTime: { value: 0 },
|
|
tWater: { value: texture },
|
|
res: {
|
|
value: new ogl.Vec4(box.outerWidth(), box.outerHeight(), a1, a2)
|
|
},
|
|
img: { value: new ogl.Vec2(imgSize[0], imgSize[1]) },
|
|
// Note that the uniform is applied without using an object and value property
|
|
// This is because the class alternates this texture between two render targets
|
|
// and updates the value property after each render.
|
|
tFlow: flowmap.uniform
|
|
}
|
|
});
|
|
const mesh = new ogl.Mesh(gl, { geometry, program });
|
|
|
|
window.addEventListener("resize", resize, false);
|
|
resize();
|
|
|
|
// Create handlers to get mouse position and velocity
|
|
const isTouchCapable = "ontouchstart" in window;
|
|
const section = box.closest('section')[0];
|
|
if (isTouchCapable) {
|
|
section.addEventListener("touchstart", updateMouse, false);
|
|
section.addEventListener("touchmove", updateMouse, { passive: false });
|
|
} else {
|
|
section.addEventListener("mousemove", updateMouse, false);
|
|
}
|
|
let lastTime;
|
|
const lastMouse = new ogl.Vec2();
|
|
function updateMouse(e) {
|
|
// e.preventDefault();
|
|
if (e.changedTouches && e.changedTouches.length) {
|
|
e.x = e.changedTouches[0].pageX;
|
|
e.y = e.changedTouches[0].pageY;
|
|
}
|
|
if (e.x === undefined) {
|
|
e.x = e.pageX;
|
|
e.y = e.pageY;
|
|
}
|
|
// Get mouse value in 0 to 1 range, with y flipped
|
|
mouse.set(e.x / gl.renderer.width, 1.0 - e.y / gl.renderer.height);
|
|
// Calculate velocity
|
|
if (!lastTime) {
|
|
// First frame
|
|
lastTime = performance.now();
|
|
lastMouse.set(e.x, e.y);
|
|
}
|
|
|
|
const deltaX = e.x - lastMouse.x;
|
|
const deltaY = e.y - lastMouse.y;
|
|
|
|
lastMouse.set(e.x, e.y);
|
|
|
|
let time = performance.now();
|
|
|
|
// Avoid dividing by 0
|
|
let delta = Math.max(10.4, time - lastTime);
|
|
lastTime = time;
|
|
velocity.x = deltaX / delta;
|
|
velocity.y = deltaY / delta;
|
|
// Flag update to prevent hanging velocity values when not moving
|
|
velocity.needsUpdate = true;
|
|
}
|
|
requestAnimationFrame(update);
|
|
function update(t) {
|
|
requestAnimationFrame(update);
|
|
// Reset velocity when mouse not moving
|
|
if (!velocity.needsUpdate) {
|
|
mouse.set(-1);
|
|
velocity.set(0);
|
|
}
|
|
velocity.needsUpdate = false;
|
|
// Update flowmap inputs
|
|
flowmap.aspect = aspect;
|
|
flowmap.mouse.copy(mouse);
|
|
// Ease velocity input, slower when fading out
|
|
flowmap.velocity.lerp(velocity, velocity.len ? 0.15 : 0.1);
|
|
flowmap.update();
|
|
program.uniforms.uTime.value = t * 0.01;
|
|
renderer.render({ scene: mesh });
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
jQuery(window).on('elementor/frontend/init', function () {
|
|
elementorFrontend.hooks.addAction('frontend/element_ready/icon.default', function ($scope) {
|
|
if( $scope.hasClass('aiero-icon-decoration-on') ) {
|
|
$scope.find('.elementor-icon-wrapper').wrapInner('<div class="elementor-icon-inner"></div>');
|
|
}
|
|
if( $scope.find('.elementor-icon').hasClass('elementor-animation-slide-aslant') ) {
|
|
$scope.find('.elementor-icon i, .elementor-icon svg').clone().appendTo($scope.find('.elementor-icon'));
|
|
$scope.find('.elementor-animation-slide-aslant').wrapInner('<span class="elementor-icon-slide-aslant-inner"></span>');
|
|
}
|
|
});
|
|
elementorFrontend.hooks.addAction( 'frontend/element_ready/global', function( $scope ) {
|
|
if( jQuery('body').hasClass('elementor-editor-active') ) {
|
|
if($scope.hasClass('elementor-section') && !$scope.children('.elementor-container').children('.elementor-row').length) {
|
|
$scope.children('.elementor-container').wrapInner('<div class="elementor-row ui-sortable"></div>');
|
|
} else if($scope.hasClass('elementor-column') && !$scope.parent('.elementor-row').length) {
|
|
$scope.siblings('.elementor-row').children().unwrap();
|
|
$scope.parent('.elementor-container').wrapInner('<div class="elementor-row ui-sortable"></div>');
|
|
}
|
|
}
|
|
} );
|
|
elementorFrontend.hooks.addAction( 'frontend/element_ready/section', function( $scope ) {
|
|
if( !jQuery('body').hasClass('elementor-editor-active') ) {
|
|
if(!$scope.children('.elementor-container').children('.elementor-row').length) {
|
|
$scope.children('.elementor-container').wrapInner('<div class="elementor-row"></div>');
|
|
if($scope.data('parallax') == 'scroll') {
|
|
background_image_parallax($scope, 0.7);
|
|
}
|
|
} else {
|
|
if($scope.data('parallax') == 'scroll') {
|
|
background_image_parallax($scope, 0.7);
|
|
}
|
|
}
|
|
if ( $scope.hasClass('elementor-section-scroll-animation-on') ) {
|
|
jQuery('.body-container').css('overflow', 'visible');
|
|
$scope.css({
|
|
position: 'sticky',
|
|
top: jQuery('.sticky-header').length > 0 ? '140px' : '0px'
|
|
});
|
|
$scope.closest('.elementor-widget-wrap').height(1.2 * $scope.height());
|
|
jQuery(window).on('resize', function() {
|
|
$scope.closest('.elementor-widget-wrap').height(1.2 * $scope.height());
|
|
});
|
|
const { ScrollObserver, valueAtPercentage } = aat;
|
|
$scope.each(function(index) {
|
|
ScrollObserver.Element(jQuery(this)[0], {
|
|
offsetTop: jQuery('.sticky-header').length > 0 ? 140 : 0,
|
|
offsetBottom: 0
|
|
}).onScroll(({ percentageY }) => {
|
|
const clipPath = `inset(${valueAtPercentage({
|
|
from: 350,
|
|
to: 0,
|
|
percentage: percentageY
|
|
})}px round ${jQuery(this).css('border-radius')})`;
|
|
jQuery(this).css('will-change', 'clip-path');
|
|
jQuery(this).css('clip-path', clipPath);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
if ( $scope.data('flowmap') === 'on' && $scope.data('flowmap-url') !== '') {
|
|
$scope.prepend('<div class="flowmap-deformation-wrapper"></div>');
|
|
$scope.find('.flowmap-deformation-wrapper').attr({
|
|
'data-bg': $scope.data('flowmap-url'),
|
|
'data-bg-width': $scope.data('flowmap-width'),
|
|
'data-bg-height': $scope.data('flowmap-height')
|
|
});
|
|
$scope.find('.flowmap-deformation-wrapper').css('background-image', 'url(' + $scope.data('flowmap-url') + ')');
|
|
// Flowmap Effect
|
|
$scope.one('mouseover', flowmap_deformation);
|
|
}
|
|
});
|
|
}); |