Open onseyi opened 4 years ago
I have a background image which I want it to fit the section (background cover) and also but be responsive, I will appreciate if you can work on my code I am a newbie in pixiJS and canvas.
canvas{ width: 100%; } #display{ width: 100%; } <div id="display"></div> let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight, antialias: true ,transparent: true}); document.getElementById('display').appendChild(app.view); let img = new PIXI.Sprite.from("images/ban3.jpg"); img.width = window.innerWidth; img.height = window.innerHeight; app.stage.addChild(img); depthMap = new PIXI.Sprite.from("images/ban3-map.jpg"); app.stage.addChild(depthMap); displacementFilter = new PIXI.filters.DisplacementFilter(depthMap); app.stage.filters = [displacementFilter]; window.onmousemove = function(e) { displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) /20; displacementFilter.scale.y = (window.innerHeight / 2 - e.clientY) /20; };
I have a background image which I want it to fit the section (background cover) and also but be responsive, I will appreciate if you can work on my code I am a newbie in pixiJS and canvas.