Sign in to follow this  
dotun1

How to make background image cover and responsive

Recommended Posts

I am trying to implement a 3D photo which I found here (redstapler.co/3d-photo-from-image-javascript-tutorial ) which works, but I want the background image to cover and fit 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%; height: 100vh;
}

#display{
 width: 100%; height: 100vh;
}

<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;
        };


 

Share this post


Link to post
Share on other sites

ok, so you have width and height of window, and you want to re-position image. Fortunately, the task is very easy if you know a pair of tricks. You can deduce everything else yourself:

How to center element:

img.anchor.set(0.5); //center of image
//is mapped to
img.position.set(app.screen.width/2 app.screen.height/2); //center of screen

now you only have to adjust the scale.. hm... something like min(app.screen.width / img.texture.width,  app.screen.height / img.texture.height) , or maybe max?

img.scale.set(img.texture.width / app.screen.width, img.texture.height / app.screen.height);

learning transforms is one of first steps dealing with PixiJS. Position, scale, rotation , pivot, anchor are first-class citizens. width/height is tricky, its not like in DOM, they are calculated.

If you dont go through this step now, you'll have big problems ahead, so my advice is to go through pixijs demos and understand how the transform position/rotation/scale/pivot can be used, and how it affects children of element.

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

Hi  ivanpopelyshev,  thanks for your respond I have added the code to mine see below but still did not work

also create a codepen https://codepen.io/onseyi/pen/XWdBjOW

        let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight, antialias: true ,transparent: true});
        document.getElementById('display').appendChild(app.view);

        img.anchor.set(0.5); //center of image
        img.position.set(app.screen.width/2, app.screen.height/2);
        img.scale.set(img.texture.width / app.screen.width, img.texture.height / app.screen.height);

        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;
        };

 

 
Edited by dotun1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.