Jump to content

Text in between two images


Recommended Posts

sorry for the beginner Question, currently I am beginning using Pixi and it's quite overwhelming to start with.

I created a fake 3D image with the help of a replacement map:


  let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});

  let img = new PIXI.Sprite.from("image.jpg");
  img.width = window.innerWidth;
  img.height = window.innerHeight;

  depthMap = new PIXI.Sprite.from("image-map.jpg");

  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;

That works great so far.

I would like to use it as a background for a website.

On top of that image I need to write text which should NOT be affected by the displacement filter.
That would be easy but above the text I need another image which is also manipulated by the displacement filter.
The text is so to speak "sandwiched" and partly visible (because the top image will cover parts of the text).

Additionally it would be great if I can change / access the text via JavaScript.

Me questions are now:

- What do you consider best practice for that? Should I create two canvas with HTML text in between? Or should I add the text with Pixi?
- How would a good solution look like?

Thank you very much in advance and for your patients, I know that noobie questions are quite annoying sometimes but it's really hard for me finding a solution here.

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...