Develop Reference

How can call VAR jquery when see div that have this VAR

I have some Jquery
I need do call the var called ServicesAnimation when I scroll to main div or section that have div called for example regtangle-blue.
how can do that ?
jQuery(document).ready(function() {
var ServicesAnimation = anime.timeline().add({
targets: ['.box-info', '.regtangle-blue .h2', '.regtangle-blue .h3', '.regtangle-blue .h4', '.services .serv-box', '.how-it-works .h2', '.how-it-works .h3', '.how-it-works .col-md-4'],
translateY: [60, 0],
translateZ: 0,
opacity: [0, 1],
duration: 1600,
delay: anime.stagger(100)
});
});

`Phaser.Display.Align.In.Center` works well with the first line of my text but doesn't center my 2nd line. How do I fix it?

I'm trying to make some kind of a notification/message box giving players hints to advance the gameplay, here is the code
var game = new Phaser.Game({
width: 320, height: 200,
scene: {
create: create
}
});
function create() {
let noti_bg = this.add.rectangle(160, 100, 200, 120, 0x000000, .5);
let noti_txt = this.add.text(0, 0, 'Magic is not ready yet\n\nwait a sec');
Phaser.Display.Align.In.Center(noti_txt, noti_bg);
}
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
Phaser.Display.Align.In.Center works well with the first line of my text but doesn't center my 2nd line. How do I fix it?

Phaser.Display.Align.In.Center just aligns single GameObjects. Both lines of text are in the same GameObject noti_txt.
If you want to align both textlines, you could use the align property of the text GameObject, on creating it. { align: 'center' }
(Or after creation with the property setStyle here a link to the documentation)
Here the adapted Code:
var game = new Phaser.Game({
width: 320, height: 200,
scene: {
create: create
}
});
function create() {
let noti_bg = this.add.rectangle(160, 100, 200, 120, 0x000000, .5);
let noti_txt = this.add.text(0, 0, 'Magic is not ready yet\n\nwait a sec', { align: 'center' });
Phaser.Display.Align.In.Center(noti_txt, noti_bg);
}
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
Alternatively / Extra:
I would only recommended it, if you are reusing text blocks (or dramatic effect), you could split the text, into two GameObjects.
But for that to work you would also have use the function Phaser.Display.Align.To.BottomCenter:
var game = new Phaser.Game({
width: 320, height: 200,
scene: {
create: create
}
});
function create() {
let noti_bg = this.add.rectangle(160, 100, 200, 120, 0x000000, .5);
let noti_txt1 = this.add.text(0, 0, 'Magic is not ready yet');
let noti_txt2 = this.add.text(0, 0, 'wait a sec');
// extra visual effect
this.tweens.add({
targets: noti_txt2 ,
alpha: 0,
ease: 'Power1',
duration: 1000,
yoyo: true,
repeat: -1,
});
Phaser.Display.Align.In.Center(noti_txt1, noti_bg);
// Just adding a minor horizontal offset
Phaser.Display.Align.To.BottomCenter(noti_txt2, noti_txt1, 0, 10);
}
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>

Why does FabricJS scale pattern differently on different devices/browsers?

See Fiddle: I am trying to render a background image on a FabricJS polygon, but for some reason the scale of the pattern is different on different devices / browsers for no obvious reason.
Here is the code:
HTML:
<canvas id="tcanvas" width="200" height="200" />
JavaScript:
function testPattern(id) {
var url = 'https://dummyimage.com/200x200/aff/000',
tCanvas = new fabric.Canvas(id);
new fabric.Image.fromURL(url, function(img) {
var tPoints = [{
x: 0,
y: 0
},
{
x: 0,
y: 200
},
{
x: 200,
y: 200
},
{
x: 200,
y: 0
}
];
var tPatternWidth = 200;
var tPatternHeight = 200;
var tImgXScale = tPatternWidth / img.width;
var tImgYScale = tPatternHeight / img.height;
img.set({
left: 0,
top: 0,
scaleX: tImgXScale,
scaleY: tImgYScale
});
var tPatternSourceCanvas = new fabric.StaticCanvas();
tPatternSourceCanvas.add(img);
tPatternSourceCanvas.renderAll();
var tPattern = new fabric.Pattern({
offsetX: 0,
offsetY: 0,
source: function() {
tPatternSourceCanvas.setDimensions({
width: tPatternWidth,
height: tPatternHeight
});
tPatternSourceCanvas.renderAll();
return tPatternSourceCanvas.getElement();
},
repeat: 'no-repeat'
});
var tImgPoly = new fabric.Polygon(tPoints, {
left: 100,
top: 100,
originX: 'center',
originY: 'center',
fill: tPattern,
objectCaching: false,
selectable: false,
stroke: 'red',
strokeWidth: 1
});
tCanvas.add(tImgPoly);
tCanvas.renderAll();
});
}
testPattern('tcanvas');
This is what I see on my desktop Chrome:
... and this what I see on a (Samsung) tablet Chrome:
How can I fix the code so that the both patterns look the same, i.e., like the first one?

It s a retina support side effect.
When initializing the canvas for the Pattern, please pass as option:
enableRetinaScaling: false
var tPatternSourceCanvas = new fabric.StaticCanvas(null, {enableRetinaScaling: false});
This will avoid fabric trying to enhance the canvas twice.

Create JS function add to stage

In createjs I'm trying to add elements to the stage but only when called by a function.
If I add this code into my onload init() function the code works:
function init()
{
background = new createjs.Shape();
background.graphics.beginLinearGradientFill(["blue", "darkgreen"], [0, 1], 0, 0, 100, 100).drawRect(0, 0, 70, 70);
background.x = 0;
background.y = 0;
stage.addChild(background);
}
However if I add it like
function init()
{
loadScreen();
}
function loadScreen()
{
background = new createjs.Shape();
background.graphics.beginLinearGradientFill(["blue", "darkgreen"], [0, 1], 0, 0, 100, 100).drawRect(0, 0, 70, 70);
background.x = 0;
background.y = 0;
stage.addChild(background);
}
I'm probably just doing something silly, any tips appreciated.
Thanks,

Remove the semicolon(;) after loadScreen() function defenition
function init()
{
loadScreen();
}
function loadScreen()
{
background = new createjs.Shape();
background.graphics.beginLinearGradientFill(["blue", "darkgreen"], [0, 1], 0, 0, 100, 100).drawRect(0, 0, 70, 70);
background.x = 0;
background.y = 0;
stage.addChild(background);
}

Make sure that your variables are declared.
E.g.
var stage; var background;
And make sure that they are global.
window.onload = function(){
var stage;
var background;
function init(){
// create reference to stage and add 'tick' listener.
}
function loadScreen(){
// draw something onto the stage.
}
};
Check out this website for an example: http://createjs.com/docs/easeljs/modules/EaselJS.html.

I can see that you removed this line ->
myGraphics.beginLinearGradientFill(["#000","#FFF"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);
Have you tried instantiating background inside init() and then passing the object to the load function?

Var working but stops when doing the same using an array

I'm practicing some Javascript. I used a var to create an object (because before that I created a class) and now I'm trying to do the same, but instead of using a variable I want to use an array.
While this is working:
function start (){
var brick = new create_class_brick(10, 400, 10, 400, 0, 2.5, "brick");
window.setInterval(function(){brick.MOVE_BRICK();}, 25);
the MOVE_BRICK function doesn't work here:
function start (){
var i = 0;
vector_bricks[i++] = new create_class_brick(300, 500, 800, 600, 0, 2.5, "brick");
vector_bricks[i++] = new create_class_brick(200, 200, 600, 300, 0, 2.5, "brick");
for ( i = 0; i<vector_bricks.length; i++ ){
vector_bricks[i].create_brick();
vector_bricks[i].MOVE_BRICK();
}
}
Can anyone give me a hand?

Do you forget to call the function move_brick with window.setInterval? So it's not looping.

Simply change where you put the interval.
You get an error if you put it inside the for loop.
Meaning you should have this :
function start (){
var i = 0;
vector_bricks[i++] = new create_class_brick(300, 500, 800, 600, 0, 2.5, "brick");
vector_bricks[i++] = new create_class_brick(200, 200, 600, 300, 0, 2.5, "brick");
setInterval(function(){
for (var i = 0; i<vector_bricks.length; i++ ){
vector_bricks[i].create_brick(); // Not sure what this is for
vector_bricks[i].MOVE_BRICK();
}
}, 25);
}