I am building a website that has some parallax on the site. Below is what the console says is in the javascript file. I keep getting cannot read data destroy property, because the program has nothing to delete. The picture at the bottom is what I wrote vs what showed up? This is bootstrap studio and I was wondering if anyone has had this problem before?
window.addEventListener("resize", colReset);
let col = document.querySelectorAll(".col-xxl-6");
function colReset() {
window.matchMedia("(min-width: 992px)").matches ? VanillaTilt.init(col, {
max: 15,
speed: 400,
perspective: 750,
scale: 1.005
}) : col.vanillaTilt.destroy()
}
VanillaTilt.init(col, {
max: 15,
speed: 400,
perspective: 750,
scale: 1.005
});
Related
I'm making a game with Phaser, and I need to have an animation for the health bar going down dynamically stop on a frame, and I couldn't find any clear documentation on the stopOnFrame() method, or the this.anims.getFrame(index) method, both of which woulden't work. I believe that stopOnFrame accepts a frame object, not a frame number but I coulden't figure out how to get that specific frame, as the getFrame() method returned undefined. If there's something I'm missing, my ideal solution looks something like this:
this.hpBar.play({key: 'damageAnimation', startFrame: this.hp})
this.hpBar.stopOnFrame(this.hpBar.getFrame(this.hp - amountOfDamage))
Thanks for any suggestions, cheers!
PS: I know there's some more nuance to how I would use the animations in forwards and reverse to properly create this effect, the example is purely for demonstration.
Two points, you would have to pass a Phaser.Textures.Frame to the stopOnFrame function, and as far as I know the function getFrame doesn't exist (atleast on the phaser sprite GameObject, as shown in your code).
You can use the function getFrameAt on the Animation object, the index has to be here only a valid integer, in the range from 0 - to max frame of the animation.
(btw.: here is the link to the documenation of the stopOnFrame function)
Info: the frame index-count, is based on the frames of the specific animation, not the frame in the spritesheet. (In this example the sprite frame index of the kick is 12, but in the kick animation the index for that specific frame is 2)
Here a Demo:
document.body.style = 'margin:0;';
var config = {
type: Phaser.AUTO,
width: 536,
height: 183,
scene: {
preload,
create
}
};
function preload(){
this.load.spritesheet('brawler',
'http://labs.phaser.io/assets/animations/brawler48x48.png',
{ frameWidth: 48, frameHeight: 48 }
);
this.load.image('brawler-sheet',
'http://labs.phaser.io/assets/animations/brawler48x48.png');
}
function create () {
this.add.text(10,10, 'Click, to Stop on kick (third frame)')
.setScale(1.5)
.setOrigin(0)
.setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
this.anims.create({
key: 'kick',
frames: this.anims.generateFrameNumbers('brawler',
{ frames: [ 10, 11, 12, 13, 10 ] }),
frameRate: 8,
repeat: -1,
repeatDelay: 0
});
this.add.image(140, 20, 'brawler-sheet')
.setOrigin(0)
const cody = this.add.sprite(100, 90);
cody.setScale(3);
cody.play('kick');
this.input.on('pointerdown', () => {
cody.stopOnFrame(cody.anims.currentAnim.getFrameAt(2))
});
}
new Phaser.Game(config);
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
But for a simple healt-bar, I would use a phaser tween, not an animation, like this you can set the value more precise, you can easily update the max-health and "animation" is easy.
Here a demo how I would do it (two visula alternatives):
(I would opt for the second version, if you have some nice heart images or so, I could find a better image for the demo)
document.body.style = 'margin:0;';
var config = {
type: Phaser.AUTO,
width: 536,
height: 183,
scene: {
create,
preload
},
banner: false
};
function preload ()
{
this.load.image('mushroom',
'https://labs.phaser.io/assets/sprites/mushroom16x16.png');
}
let healthMax = 32*5
function create () {
this.add.text(10,10, 'Click, to animate healthbar')
.setScale(1.5)
.setOrigin(0)
.setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
this.healthbarBG = this.add.rectangle(10, 50, 32*5, 10, 0xffffff)
.setOrigin(0);
this.healthbar = this.add.rectangle(12, 52, healthMax - 4, 10 - 4, 0xff0000)
.setOrigin(0);
this.add.text(10, 75, 'Or abit more flashy')
.setOrigin(0)
.setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
let tilespriteBG = this.add.tileSprite(10, 100, 16*5, 16, 'mushroom')
.setOrigin(0)
.setScale(2);
tilespriteBG.setTint(0x2a2a2a)
let tilesprite = this.add.tileSprite(10, 100, 16*5, 16, 'mushroom')
.setOrigin(0)
.setScale(2);
this.input.on('pointerdown', () => {
// remove 50% health
let newHealthWidth = healthMax * .5;
this.tweens.add({
targets: this.healthbar,
width: newHealthWidth,
duration: 750,
ease: 'Power2',
/* this two following properties must be remove, just for demo
yoyo: true,
repeat:-1*/
});
this.tweens.add({
targets: tilesprite,
width: { to: 16 * 5 * .5, from: 16 * 5},
duration: 750,
/* this two following properties must be remove, just for demo
yoyo:true,
repeat:-1*/
});
})
}
new Phaser.Game(config);
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
modifying the ease and/or the duration property (and others), you can make the animation suitable (and spicy) for the most usecases.
I've started trying to make a game with kaboom.js and have come across a problem where the animation for an arrow which flashes isn't playing, it just freeze frames at the first frame. Does anybody know what I'm doing wrong?
The Code
const k = kaboom({
width: 320,
height: 240,
scale: 2,
});
k.loadSprite("selArrow", "sprites/selArrow.png", {
sliceX: 2,
sliceY: 2,
anims: {
main: {
from: 0,
to: 3,
speed: 2,
loop: true}
}});
const selArrow = k.add([
k.sprite("selArrow", {anim: "main"}),
k.pos(50),
k.scale(1.5),
k.origin("center"),
]);
The Spritesheet
I am trying to use this example from Noty's site: http://ned.im/noty/animations.bouncejs.html
I have installed noty.js and its CSS counter part. And I also have downloaded velocity.js and have it linked properly in my site. I know it is linked properly because I can use JQuery to select an element and perform a function on it that is provided by velocity:
$("table").velocity("fadeOut", {
duration: 3500
});
The example that is provided on the noty site though uses a call formatted like this:
new Noty({
text: 'NOTY - animating with velocity!',
animation: {
open: function () {
var n = this;
Velocity(n.barDom, {
left: 450,
scaleY: 2
}, {
duration: 0
});
Velocity(n.barDom, {
left: 0,
scaleY: 1
}, {
easing: [ 8, 8 ]
});
},
It calls it by using Velocity(... when I put this code into my page it errors and using the chrome F12 it says it is undefined. What am I missing from the example? The example for bounce works but I don't like the movement as much.
With the help of the developer we found an issue with the declaration on his site. Velocity doesn't work the way it is called in the question. It needs to be declared with $.Velocity with the current version of NOTY & Velocity
new Noty({
text: 'NOTY - animating with velocity!',
animation: {
open: function () {
var n = this;
$.Velocity(n.barDom, {
left: 450,
scaleY: 2
}, {
duration: 0
});
$.Velocity(n.barDom, {
left: 0,
scaleY: 1
}, {
easing: [ 8, 8 ]
});
},
I've used the rcarousel plugin a couple of times without encountering any problem.
While implementing it on a new website, rcarousel suddenly duplicates the first slide (I'm showing 3).
This is happening on both slides on the bottom of this page:
http://www.expertmarketermagazine.com/en/home
When you navigate the slider you can see that the "duplicate" reverts to the correct slide just before the whole thing slides away.
Has anyone encountered something similar before?
change your rcarousel selectors to:
<script>
$(function() {
$("#carousel-authors .wrapper").rcarousel({
visible: 3,
step: 3,
width: 127,
height: 200,
navigation: {
prev: "#ui-carousel-next-authors",
next: "#ui-carousel-prev-authors"
}
});
$("#carousel-books .wrapper").rcarousel({
visible: 3,
step: 3,
width: 127,
height: 200,
navigation: {
prev: "#ui-carousel-next-books",
next: "#ui-carousel-prev-books"
}
});
});
</script>
I'm running this script on a page which shows a box with more information when you roll over it.
site for review
The script works fine, except theres a flicker of the box before it actually scales.
What is causing this? I use the same thing in the main navigation with the same flicking.
Any ideas whats causing this?
//work page springing box
$$('.box').each(function(s) {
var more = $(s).down(2);
$(s).observe('mouseenter', function(e) {
$(more).show();
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
});
});
$(s).observe('mouseleave', function(e) {
new Effect.Fade(more, {
duration: 0.2
})
});
});
Thanks.
Rich
I should note, I am testing in Safari 4.0.4
#Allen is correct. When you call $(more).show(); The entire box is shown. Then, when you call new Effect.Scale(more the box is scalled down and slide in. So $(more).show(); is what's causing the flickering. You could try:
$(more).show.bind(more).delay(0.01);
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
})
The site looks fine to me. I did notice a very little something, but it could be my imagination.
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
});
$(more).show();
You may want to try this though, it seems to show it, then update it, as the code says. Update it first, then show it.
Firefox, fully updated btw.