Converting jQuery parallax function to vanilla javascript - javascript

This is a working parallax function that works by adding ' data-type="parallax" ' and ' data-speed="5" ' data attributes to the HTML element you wish to parallax.
However, it is the only jQuery I am using on my site. I was hoping to convert it to vanilla js to save some bundle size.
All of my attempt have failed. Any help is appricated!
$(() => {
// Cache the Window object
const $window = $(window);
$('[data-type="parallax"]').each(function() {
const paraElm = $(this); // assigning the object
$window.scroll(() => {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
const yPos = -($window.scrollTop() / paraElm.data('speed'));
// Put together our final background position
const coords = `50% ${yPos}px`;
// Move the background
paraElm.css({ backgroundPosition: coords });
});
});
});

Related

jQuery zoom function not working on hover image

I am using this library: https://www.jacklmoore.com/zoom/
It adds a zoom function when hovering over an image. I did add the library in my theme and added this jQuery code to my js file:
$(document).ready(function(){
$('.head-image img').zoom();
});
This is the HTML where the image is located:
<div class="head-image">
<img src="<?php the_post_thumbnail_url('full'); ?>" class="img-fluid">
</div>
When I hover the image on the webpage nothing changes but if I look in the inspector I do see that the zoomImg class is added and the CSS is changing but I dont see the image zooming.
Here is the webpage URL: https://www.dev.ruitershopboxmeer.nl/paard/zadels-en-toebehoren/zadeldekjes/kingsland-zadeldekje-carin/
Does someone know why the image is not zooming?
Thanks for your time!
First fix the error in the beginning of the page (line 14 generated HTML)
<script>if(flycart_woo_discount_rules_strikeout_script_executed == undefined){jQuery( document ).ready( /* .... */
This needs to be moved at the end of the body to avoid issues
Next, make sure to include JQuery and Zoom correctly (from demo)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src='path/to/jquery.zoom.js'></script>
The imported JQuery is 3.4.1 and I am not sure Zoom is still compatible with it as demo was using 1.10.2.
I have an alternate solution to your requirement here:
const img=document.querySelector('.image');
const pro=document.querySelector('.image img');
img.style.width=(pro.clientWidth)+'px';
var zoomSize = pro.clientHeight*6;
img.addEventListener('mousemove', printPosition);
img.addEventListener('mouseout', back);
function getPosition(e) {
var rect = e.target.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
return {
x,
y
}
}
function printPosition(e) {
var position = getPosition(e);
xpos=position.x * (100/pro.clientWidth);
ypos=position.y * (100/pro.clientHeight);
pro.style.transition="0s";
pro.style.transform='translate('+xpos*-5+'%, '+ypos*-5+'%)';
pro.style.height=zoomSize+"px";
console.log('X: ' + xpos + ' Y: ' + ypos);
}
function back(e) {
pro.style.transform='translate(0px, 0px)';
pro.style.height='100%';
pro.style.transition="1s";
}
https://codepen.io/thevectorator/pen/NWGeBPm

Redrawing background using ResizeObserver causes flashing in FireFox

I'm using Trianglify to create backgrounds for a div element. I wanted to write the function to regenerate the background anytime the window is resized.
Here is the function that adds the generated png to the div.
const header = document.querySelector('#header');
const addBackground = target =>{
const dimensions = target.getClientRects()[0];
const pattern = Trianglify({
width: dimensions.width,
height: dimensions.height,
cell_size: Math.random()*200 + 40
});
target.style['background-image'] = 'url(' + pattern.png() + ')';
}
addBackground(header);
And here is the ResizeObserver
const ro = new ResizeObserver( () => {
addBackground(header);
});
ro.observe(header);
This works fine in chrome and edge but it creates an effect in FireFox where the background image isn't generated until the user is done resizing. This would be fine if it didn't clear the background during the resizing.
I've created a fiddle that recreates the issue.
Link to Fiddle

how to find the mouse position x/y using phaser

I'm having problems, trying to display the mouse position x/y when they click on an image, im using one of the click on and image example that phaser provides.
here is the code
var game = new Phaser.Game(800, 500, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
var text;
var counter = 0;
function preload () {
// You can fill the preloader with as many assets as your game requires
// Here we are loading an image. The first parameter is the unique
// string by which we'll identify the image later in our code.
// The second parameter is the URL of the image (relative)
game.load.image('Happy-face', 'happy.png');
}
function create() {
// This creates a simple sprite that is using our loaded image and
// displays it on-screen and assign it to a variable
var image = game.add.sprite(game.world.centerX, game.world.centerY, 'Happy-face');
// Moves the image anchor to the middle, so it centers inside the game properly
image.anchor.set(0.5);
// Enables all kind of input actions on this image (click, etc)
image.inputEnabled = true;
this.position = new Phaser.Point();
text = game.add.text(250, 16, '', { fill: '#ffffff' });
image.events.onInputDown.add(listener, this);
}
function listener () {
counter++;
text.text = "Position x/y " + counter + "!";
}
if you want x and y position o f input
game.input.x;
game.input.y;
if you want for mouse specifically
game.input.mousePointer.x;
game.input.mousePointer.y;
the listener function will be like
function listener () {
counter++;
text.text = game.input.mousePointer.x +"/"+game.input.mousePointer.y + counter + "!";
}
Just to add that the listener function will be sent 2 parameters: sprite and pointer. So you can do:
function listener (sprite, pointer) {
var x = pointer.x;
var y = pointer.y;
...
}
This will be the most accurate method to use as it accounts for multi-touch devices, where-as accessing input.x/y directly doesn't, it only contains the most recent touch event coordinates (which in a mouse only environment is fine, but not anywhere else).

Is there a way to animate the size of the header in the HeaderFooterLayout?

Is it possible to animate the size of the header in a HeaderFooterLayout? I am trying to change it's size with an animation but I am not seeing any API for this. So I was wondering about a technique for doing it.
You can achieve this by using a Transitionable. This is done by the following:
Create a transition for the animation:
var transition = {
duration: 400,
curve: Easing.inOutQuad
};
Set the start & end pixel counts:
var start = open ? 200 : 100;
var end = open ? 100 : 200;
Instantiate your new Transitionable with the starting pixel count:
var transitionable = new Transitionable(start);
Create the function that will be executed to apply the pixel count:
var prerender = function () {
layout.setOptions({
headerSize: transitionable.get()
})
};
Attache the function to the Engine event:
Engine.on('prerender', prerender);
Add transition to end state to the queue of pending transitions:
transitionable.set(end, transition, complete);
Here is a working fiddle for you to reference: http://jsfiddle.net/Mabuti/4or8nxh4/
In full disclosure I did use the following post as a point of reference: famo.us: can I animate the header/footer heights of a header footer layout? but I tried to add some context to the process.
You could also review the Transitionable documentation to see better understand what it is doing: https://famo.us/docs/transitions/Transitionable
An alternative could be to use the famous-flex LayoutController and HeaderFooterLayout.
The code is pretty straightforward:
var LayoutController = require('famous-flex/LayoutController');
var HeaderFooterLayout = require('famous-flex/layouts/HeaderFooterLayout');
// Create header/content surface/views
var header = new Surface(..);
var content = new Surface(..);
// Create header-footer layout
var layout = new LayoutController({
layout: HeaderFooterLayout,
layoutOptions: {
headerSize: 40
},
flow: true, // this causes a smooth transition when changing the header-size
reflowOnResize: false, // do not reflow on resize
dataSource: {
header: header,
content: content
}
});
...
// Change the height of the header (because flow is enabled,
// this will automatically cause it to smoothly animate from
// the old height to the new height)
layout.setLayoutOptions({
headerSize: 100
});
Library: https://github.com/IjzerenHein/famous-flex

Draw2D Set Position

I am new to this library and cannot seem to find anything that gives good detail on how to size and position the canvas. Hopefully someone here can direct me in the best way of positioning the canvas
$(window).load(function () {
// create the canvas for the user interaction
//
var canvas = new draw2d.Canvas("gfx_holder");
// unmarshal the JSON document into the canvas
// (load)
var reader = new draw2d.io.json.Reader();
reader.unmarshal(canvas, jsonDocument);
// display the JSON document in the preview DIV
//
displayJSON(canvas);
// add an event listener to the Canvas for change notifications.
// We just dump the current canvas document into the DIV
//
canvas.getCommandStack().addEventListener(function (e) {
if (e.isPostChangeEvent()) {
displayJSON(canvas);
}
});
});
function displayJSON(canvas) {
var writer = new draw2d.io.json.Writer();
writer.marshal(canvas, function (json) {
$("#json").text(JSON.stringify(json, null, 2));
});
}
"gfx_holder" is the id of your HTML element. You can set the width and height using regular JavaScript.

Categories

Resources