Develop Reference

How to create Nest Thermostat like scrolling effect?

I am writing this after hundreds of references. I want to create/or Nest Thermostat like scrolling effect. I found this solution https://jsfiddle.net/desandro/daZmA/ but its parent has fixed position. Which I can't use within the website.
window.addEventListener( 'load', function() {
var box = document.getElementById('box'),
docHeight = document.documentElement.offsetHeight;
window.addEventListener( 'scroll', function() {
// normalize scroll position as percentage
var scrolled = window.scrollY / ( docHeight - window.innerHeight ),
transformValue = 'scale('+scrolled+')';
box.style.WebkitTransform = transformValue;
box.style.MozTransform = transformValue;
box.style.OTransform = transformValue;
box.style.transform = transformValue;
}, false);
}, false);
body {
height: 2000px;
}
#container {
width: 200px;
height: 200px;
border: 2px solid;
position: fixed;
}
#box {
width: 100%;
height: 100%;
background: red;
}
<div id="container"><div id="box"></div></div>
Can anybody assist me or suggest a good reference or a existing plugin to use?
Thanks in advance

I highly recommend the GSAP scrollTrigger plugin.
https://greensock.com/scrolltrigger/
https://greensock.com/docs/v3/Plugins/ScrollTrigger
https://codepen.io/GreenSock/pen/gOabMXv
https://greensock.com/st-demos/
It makes animating elements based on scroll position very easy. For example
gsap.timeline({
scrollTrigger: {
trigger: ".thermo",
start: "center center",
end: "bottom top",
scrub: true,
pin: true
}
})
.from(".dial", { y: innerWidth * 1.5 })

How do I move Phaser.Game to the center of a browser?

I'm new to JS/phaser and just create a Phaser.Game with
var game = new Phaser.Game(600, 490);
The game is created top left but I would like to have it placed in the center of a browser.
I checked the API and nothing looks relevant:
new Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)
Could someone tell me how do I do so?

Using Laravel 8 and phaser#3.24.1
The solution found here worked for me. The other answers provided in this thread did not (but did point me in the correct direction).
canvas {
display : block;
margin : auto;
}

Thanks to this link provided by #FedericoklezCulloca.
add
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.scale.refresh();
to function update and the Phaser.Game will be in the middle.

In this example the game will be centered but the logo is at 0,0
var game = new Phaser.Game(640, 480, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.crossOrigin = "Anonymous";
game.load.image('logo', 'https://cdn.rawgit.com/photonstorm/phaser-examples/master/examples/assets/sprites/phaser2.png');
}
function create() {
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
var logo = game.add.sprite(0, 0, 'logo');
}
* {
margin: 0;
padding: 0;
}
<meta name="viewport" content="initial-scale=1 user-scalable=no" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.11.0/phaser.js"></script>

Use game config options to work with size and scale
const gameConfig: Phaser.Types.Core.GameConfig = {
parent: 'game',
scale: {
mode: Phaser.Scale.RESIZE, // you can find another types in Phaser.Scale.ScaleModeType: RESIZE | FIT | ENVELOP ...
autoCenter: Phaser.Scale.CENTER_BOTH,
},
...yourRest
}
Also I recommend to add css to your :
#id {
width: 100vw; // you can skip it
height: 100vh; // you can skip it
display: flex;
align-items: center;
justify-content: center;
canvas {
padding: 0 !important;
margin: 0 !important;
}
}

How to repeat-x background of a image in fabric when rezise it

I want to repeat background when i resize it.
Here is my code, i've tried.
var canvas = new fabric.Canvas('c', {
clipTo: function(ctx) {
ctx.rect(1000, 1000, 400, 400);
}
});
fabric.Image.fromURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAASdEVYdFNvZnR3YXJlAEdyZWVuc2hvdF5VCAUAAADLSURBVFhH7ZnBCoMwEET9/68URBHSNj0UolFoI+aQickKlT05jz0MGQIPkb2kadu3ta42ff/MTtLRazct55bajOMjO0lHr920vnWMMTGV0GuphVALoRaiqNV1dq4TLsdUIrTe+z0fw+ndmEo0w/D61AmXYyqh1179WjGVuNLyl0eohVALuZ8Wtzwgt9zyiNxSC6EWQi1EUYtbHpBbbnlEbqmFUAuhFqKoxS0PyC23PCK31EKohVAL0dXK3vLSOX0TnKZ1z8fw/3uiW37L27QIZwrV4gAAAABJRU5ErkJggg==', function(img) {
var patternSourceCanvas = new fabric.StaticCanvas();
patternSourceCanvas.add(img);
var pattern = new fabric.Pattern({
source: function() {
patternSourceCanvas.setDimensions({
width: img.getWidth(),
height: img.getHeight()
});
return patternSourceCanvas.getElement();
},
repeat: 'repeat'
});
var rectangle = new fabric.Rect({
fill: pattern,
left: 1150,
top: 1150,
width: img.getWidth(),
height: img.getHeight()
});
canvas.add(rectangle);
canvas.renderAll();
});
canvas.on('object:scaling', function(e) {
if (e.target != null) {
console.log(e.target);
}
});
body {
overflow: hidden;
}
.container {
top: -1000px;
left: -1000px;
position: relative;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<div class="container">
<canvas id="c" width="2400" height="2400"></canvas>
</div>
How can I make, background repeat?
Here is jsFiddle

#Ngọc Hòa we'll have to use object:scaling event to scale the object back to 1x and change size of the object to make repeat the pattern instead of scaling it. See it here
var canvas = new fabric.Canvas('c');
fabric.Object.prototype.transparentCorners = false;
var padding = 0;
fabric.Image.fromURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAASdEVYdFNvZnR3YXJlAEdyZWVuc2hvdF5VCAUAAADLSURBVFhH7ZnBCoMwEET9/68URBHSNj0UolFoI+aQickKlT05jz0MGQIPkb2kadu3ta42ff/MTtLRazct55bajOMjO0lHr920vnWMMTGV0GuphVALoRaiqNV1dq4TLsdUIrTe+z0fw+ndmEo0w/D61AmXYyqh1179WjGVuNLyl0eohVALuZ8Wtzwgt9zyiNxSC6EWQi1EUYtbHpBbbnlEbqmFUAuhFqKoxS0PyC23PCK31EKohVAL0dXK3vLSOX0TnKZ1z8fw/3uiW37L27QIZwrV4gAAAABJRU5ErkJggg==', function(img) {
img.scaleToWidth(50);
var patternSourceCanvas = new fabric.StaticCanvas();
patternSourceCanvas.add(img);
patternSourceCanvas.renderAll();
var pattern = new fabric.Pattern({
source: function() {
patternSourceCanvas.setDimensions({
width: img.getScaledWidth() + padding,
height: img.getScaledHeight() + padding
});
patternSourceCanvas.renderAll();
return patternSourceCanvas.getElement();
},
repeat: 'repeat'
});
var rect = new fabric.Rect({
width: 250,
height: 250,
fill: pattern,
objectCaching: false
});
canvas.add(rect);
rect.center().setCoords();
});
canvas.on('object:scaling', function(e) {
if (e.target != null) {
console.log(e.target);
var obj = e.target;
var height = obj.height * obj.scaleY;
var width = obj.width * obj.scaleX;
obj.height = height;
obj.width = width;
obj.scaleX = 1;
obj.scaleY = 1;
}
});
https://jsfiddle.net/dotriz/ajsdmg4s/

jQuery animation: move image up-down in smaller height div with overflow:hidden

This is the fiddle!
The image should move up until it's bottom edge reaches the bottom of div and then move down until it's top edge reaches the top edge of parent div, to reveal it.
This has to work with different sized images.
$(document).ready(function() {
move();
});
function move() {
$(".image").animate({
bottom: "-=50%"
}, 10000, 'linear', function() {
$(".image").animate({
bottom: "+=50%"
}, 10000, 'linear', move);
});
}
.container {
position: relative;
width: 1100px;
height: 480px;
overflow: hidden;
background-color: #000;
}
.image {
position: absolute;
max-width: 100%;
min-width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<img class="image" src="http://www.hotel-aramis.com/slider/home/notre-dame-de-paris.jpg />
</div>

Something like this seems to work:
$(document).ready(function () {
move();
});
function move() {
$img = $(".image");
var i = new Image();
i.src = $img.attr('src');
var d = i.height - $('.container').height();
$img.animate({
bottom: "+="+d+'px'
}, 10000, 'linear', function () {
$img.animate({
bottom: "-="+d+'px'
}, 10000, 'linear', move);
});
}
This is a little sneaky, it creates a new javascript image Object (non Jquery) using the same src as the selected one and uses its natural height to perform the animation. It seems that if we create a jQuery object its height isn't the same, maybe it needs to be attached to the dom or similar.
Jsfiddle: http://jsfiddle.net/VqzvR/8/
moving the setup code outside of the move() function will mean that the http get (for the img src) will only be performed once:
$(document).ready(function () {
setupMove();
});
function setupMove() {
$img = $(".image");
var i = new Image();
i.src = $img.attr('src');
var d = i.height - $('.container').height();
function move() {
$img.animate({
bottom: "+="+d+'px'
}, 10000, 'linear', function () {
$img.animate({
bottom: "-="+d+'px'
}, 10000, 'linear', move);
});
}
move();
}
Is this the effect you were looking for?

Problem showing loader GIF in Internet Explorer

I'm trying to show a loader gif, on a jquery dialog(with no title bar of course) after a user clicks submit on a form.
After doing a couple of thing I came up with this: demo ,and said to myself "Finally! Success!", but when I tested it on IE (I usually use Chrome),much to my disappointment, the animation (loader.gif) didn't seem to be that animated, I mean it looked like a static image and I don't know why it works so fine in FF, Chrome and safary and it simply doesn't work in IE.
I know that gif works wonders on the jsfiddle , even If you use IE, but for some reason when I do the same on my project it doesn't :(
PS:I have no problem if you have another way of doing the same thing, as long as it also works in IE
Hope you can help me out with this.

Ok Here is how I got around it. It seems to be dependent on the time the overlay is added to the document.
Explanations:
If the image is added to chrome and FF's DOM during onclick it won't show my wait GIF... but it will show up in IE. I'm not sure as to why it shows up in IE and not ff or chrome. It could have something to do with the fact that it's added to the DOM on the fly just before a postback.
If the image is added to the DOM at page load time and just slid off the screen, I can simply move it to the proper place just before postback and it will work in FF and chrome but not in IE. IE stops the GIF from animating when doing it this way.
Works in IE
function IeWaitOverlayObj() {
var _waitoverlay = null;
var _waitImage = null;
var _isHidden = true;
this.showOverlay = function() {
if (!_waitoverlay) {
_waitoverlay =
$('<div></div>')
.css({
zIndex: '9998',
backgroundColor: '#000000',
width: $(window).width(),
height: $(window).height(),
top: '0px',
left: '0px',
position: 'absolute',
opacity: '0.5'
});
var tag = '<img alt="pleaseWait" src="../Images/wait.gif" />';
_waitImage = $(tag).css({
zIndex: '9999',
position: 'absolute',
top: $(window).height() / 2 - 75,
left: $(window).width() / 2 - 200,
width: '400px',
height: '150px'
});
$('body').append(_waitoverlay);
$('body').append(_waitImage);
_isHidden = false;
}
};
this.hideOverlay = function() {
_waitoverlay.hide();
_isHidden = true;
};
this.OnWindowResize = function() {
if (!_isHidden) {
_waitoverlay.css({
width: $(window).width(),
height: $(window).height()
});
_waitImage.css({
top: $(window).height() / 2 - 75,
left: $(window).width() / 2 - 200
});
}
}
}
Works in Chrome and FF
function WaitOverlayObj() {
var _waitoverlay = $('<div></div>');
var _waitImage = $('<img alt="pleaseWait" src="../Images/wait.gif" />');
var _isHidden = true;
$('body').append(_waitoverlay);
$('body').append(_waitImage);
_waitoverlay.css({
zIndex: '9998',
backgroundColor: '#000000',
width: $(window).width(),
height: $(window).height(),
top: '0px',
left: $(window).width() * -1,
position: 'absolute',
opacity: '0.5'
});
_waitImage.css({
zIndex: '9999',
position: 'absolute',
top: '0px',
left: '-400px',
width: '400px',
height: '150px'
});
this.showOverlay = function() {
_waitImage.css({ top: $(window).height() / 2 - 75, left: $(window).width() / 2 - 200 });
_waitoverlay.css({ top: '0px', left: '0px' });
_isHidden = false;
};
this.hideOverlay = function() {
_waitImage.css({ top: '0px', left: '-400px' });
_waitoverlay.css({ top: '0px', left: $(window).width() * -1 });
_isHidden = true;
};
this.OnWindowResize = function() {
if (!_isHidden) {
_waitoverlay.css({
width: $(window).width(),
height: $(window).height()
});
_waitImage.css({
top: $(window).height() / 2 - 75,
left: $(window).width() / 2 - 200
});
}
}
}
And in my Document.Ready
if (navigator.appName == "Microsoft Internet Explorer") {
wait = new IeWaitOverlayObj();
}
else{
wait = new WaitOverlayObj();
}

Base64-encode the image into your CSS. IE8 continues to animate it then.

window.onbeforeunload = function() { jQuery("img").attr("src", "image.gif") }; should work. I didn't check it now but the idea is the same I successfully used sometime ago