Jump to content


  • Content Count

  • Joined

  • Last visited

  1. I've made a custom PIXI.js slider for my wordpress website. It works pretty damn fine but i've got an issue : i'm trying to make the images that are loaded `background-size: cover` and centered. Right now on mobile, the images are stretched. But i can't find out how to do this ... Any help would be much much appreciated !Here is my js : window.onload = function () { class PIXIScene { constructor(container) { this.container = container; if (!this.container) return; this.init(); } init() { this.state(); this.setup(); this.animate(); }
  2. @ivan.popelyshev Yess thanks, what i did is change the bg.width and set the container position. It works but the thing is that now the image is smaller than the original. I wonder if there's a better way to preserve the layout. If someone could check the code that would be awesome!
  3. Thanks @ivan.popelyshev So i've tried to apply this to my code but for some reason i can't figure out how to implement this. I've started by adding this line in my constructor this.container.filterArea = this.app.screen; Resizing the renderer doesn't work, but i think i don't do it the right way.. i've tried many things, as modyfing the line 16 with this.app.renderer.resize(parent.clientWidth + 100, parent.clientHeight + 100); but it scales the entire thing and its borders, so it only makes my image bigger with the same issue. And when using this.displacementFilter
  4. Hey @ivan.popelyshev, Thanks for the answer! Sorry but i'm new to webgl and PIXI, so i might have some more questions.. I'm not sure to understand how to do this. For the canvas, i guess i might change its size in my constructor by changing this line this.app.renderer.resize(parent.clientWidth, parent.clientHeight); But i couldn't find how to use the `containerfilterArea = app.screen` .. For the last part i've read about it, i might have to create a plane that i'll reuse each time so only one animation car happer at a time right? Thanks for your time 🙏
  5. Hey guys, I'm using Pixi.js to create a blog page template that uses a displacement texture to distort the post images (on load, on hover and reverse it on click). My issue is that i can't figure out how to affect the borders of my image, so when you hover it for example, the borders also move (now they are static). The image texture is displaced, but i'd like it to affect the containers borders. I know this might sound easy, but for some reason i can't figure out what i'm missing here... I've created a jsfiddle for live code. here is my html <div class="section
  • Create New...