zoom and change color Ui when Scrolling

Question

I have ScrollRect with number inside (is working fine) I want when if any number position is in image with blue color than number change color (red) and also increase font size i don't know how to achieve that please help

Answer 1

There are probably multiple ways of how to achieve this.

I would probably go with something like this:

First on your Image have a dedicated component - this is just for finding it easier and have some pre-cached references:

[RequireComponent(typeof(RectTransform))]
public class TargetImage : MonoBehaviour
{
    [SerializeField]
    private RectTransform _rectTransform;

    public RectTransform RectTransform => _rectTransform;
    
    private void Awake()
    {
        if (!_rectTransform) _rectTransform = GetComponent<RectTransform>();
    }
}

and then on every text you can have another component which controls what you want to achieve:

[RequireComponent(typeof(TMP_Text))]
// or if using Text
//[RequireComponent(typeof(Text))]
public class Example : NetworkBehaviour
{
    [SerializeField]
    private TMP_Text _text;
    // or if using Text
    //private Text _text;

    [SerializeField]
    private TargetImage _targetage;

    [SerializeField]
    private float _hitFontSize = 40;
    // or if using Text
    //private int _hitFontSize = 40;

    [SerializeField]
    private Color _hitFontColor = Color.red;

    
    private float _normalFontSize;
    // or if using Text
    //private int _normalFontSize;

    private Color _normalFontColor;
   
    private void Awake()
    {
        if (!_text) _text = GetComponent<TMP_Text>();
        if (!_targetage) _targetage = FindObjectOfType<TargetImage>();

        _normalFontColor = _text.color;
        _normalFontSize = _text.fontSize;
    }

    private void LateUpdate()
    {
        var isInsideTargetImage = _targetage && _targetage.RectTransform.FullyContains(_text.rectTransform);

        _text.color = isInsideTargetImage ? _hitFontColor : _normalFontColor;
        _text.fontSize = isInsideTargetImage ? _hitFontSize : _normalFontSize;
    }
}

where FullyContains is a little extension method I came up with a while ago

public static class RectTransformExtensions
{     
    ///<summary>
    /// Returns a Rect in WorldSpace dimensions using <see cref="RectTransform.GetWorldCorners"/>
    ///</summary>
    public static Rect GetWorldRect(this RectTransform rectTransform)
    {
        // This returns the world space positions of the corners in the order
        // [0] bottom left,
        // [1] top left
        // [2] top right
        // [3] bottom right
        var corners = new Vector3[4];
        rectTransform.GetWorldCorners(corners);

        Vector2 min = corners[0];
        Vector2 max = corners[2];
        Vector2 size = max - min;

        return new Rect(min, size);
    }

    ///<summary>
    /// Checks if a <see cref="RectTransform"/> fully encloses another one
    ///</summary>
    public static bool FullyContains (this RectTransform rectTransform, RectTransform other)
    {       
        var rect = rectTransform.GetWorldRect();
        var otherRect = other.GetWorldRect();

        // Now that we have the world space rects simply check
        // if the other rect lies completely between min and max of this rect
        return rect.xMin <= otherRect.xMin 
            && rect.yMin <= otherRect.yMin 
            && rect.xMax >= otherRect.xMax 
            && rect.yMax >= otherRect.yMax;
    }
}

Then the following would happen when you scroll now