Please Help me for mix Blend mod

Ask the community
,
1

How can I add a blend mode to an element in Wix? I tried to achieve this by creating a new HTML, but I found that it can’t be associated with Wix’s component elements. So I started using Velo code React, and the code is also correct, but it can’t be displayed on the page. Could you tell me what the reason is? Looking forward to your answer.

importReactfrom’react’; constImageWithBlendMode = () => ( <imgstyle={{mixBlendMode: ‘difference’ }} src={$w(‘#ImageX1’).src} /> ); exportdefaultImageWithBlendMode

2

What kind of blend-mode do you need?

Example…

  1. Put a HTML-Component onto your site.
  2. Put the following code into your HTML-Component (iFrame)…
<style> body {
  background-color: black;
  margin: 0;
}

b {
  color: red;
  mix-blend-mode: difference;
  font-family: sans-serif;
  font-size: 60px;
  position: absolute;
  left: 50px;
  top: 50px;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

span {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: yellow;
  animation: rotating 3s linear infinite;
}

div {
  background: black url(//i.imgur.com/AKNHZ86.gif) no-repeat;
  padding: 50px;
  min-height: 670px;
  position: relative;
}

</style>
<div>
  <span></span>
  <b>Hello World!</b>
</div>
3

Yes, the method you mentioned can indeed create a blend mode effect, but the text or background with the blend mode effect created cannot be effectively associated with text and components in Wix, they are separate and do not have a blended relationship with each other.

4

You can connect your text inside your wix page and text inside HTML-COMPONENT.
This ways you can control everything what has to be inside the iFrame.

  1. Sending plain text from your wix-page to component.
  2. Recieving the text inside component.
  3. Adding the BLEND-MODE-EFFECT inside COMPONENT.
  4. Catching the eye of the user inside of your COMPONENT, showing the BLEND-EFFECT with the controled text from your wix-page to your user.

The same way, you could also use a CUSTOM-ELEMENT → But this will get even more difficult.

5

Hello, do you mean that I need to rearrange and set the position of text in HTML? If not, could you please tell me how to connect HTML with Wix’s text, and could you provide the corresponding code? Thank you very much and looking forward to your reply! I am not a coder.

6

Here…
https://www.wix.com/velo/reference/$w/htmlcomponent/onmessage
…you will find what you need.

And here…
https://www.wix.com/velo/reference/$w/htmlcomponent/postmessage?_gl=113xyf1_ga*MTk3MDg2ODc5My4xNjc1NzIyNTkz

7

very thankyou !

8

Oh my goodness, I’ve been trying all day and still no progress. Can you give me an example code, please?

9 
$w.onReady(function() {
  // when a message is received from the HTML Component
  $w("#myHtmlComponent").onMessage((event) => {
    console.log(`Received message from HTML${event.data}`);
  });
  
  $w('#mySendButton').onClick(()=>{
    let myMessage = {};
    myMessage.value1 = 40;
    myMessage.value2 = 40;
    myMessage.value3 = 40;
    
    // send message to the HTML Component
    $w("#myHtmlComponent").postMessage(myMessage);  
  });
});

This code part sends some data to HTML-component.

This is an example for the CODE on your Wix-page.

Now you have just to generate the code for the HTML-COMPONENT, to recieve data inside HTML-COMPONENT. You will find it also inside the Wix-HTML-COMPONENT-API.

Expand and modify this… (you send 3 different VALUES to the HTML-Component here)…

Complete the code for HTML-COMPONENT…

<html>
<head>
  <style>
    circle { mix-blend-mode: screen; }  
  .isolate { isolation: isolate; }
  </style>  
  
  <script>
    //complete your CODE here......
  </script>
</head>

<body>
  //complete your CODE here......
  <svg>
    <g class="isolate">
      <circle cx="40" cy="40" r="40" fill="red"/>
      <circle cx="80" cy="40" r="40" fill="lightgreen"/>
      <circle cx="60" cy="80" r="40" fill="blue"/>
    </g>
  </svg>
</body>
</html>