CSS ਕਿਊਬਿਕ ਬੇਜ਼ੀਅਰ (Cubic Bezier) ਜਨਰੇਟਰ
ਈਜ਼ਿੰਗ ਕਰਵ ਬਣਾਉਣ ਲਈ ਦੋ ਹੈਂਡਲਾਂ ਨੂੰ ਖਿੱਚੋ, ਇੱਕ ਸਥਿਰ ਬਿੰਦੂ ਦੇ ਮੁਕਾਬਲੇ ਇੱਕ ਬਿੰਦੂ ਨੂੰ ਚਲਦੇ ਹੋਏ ਦੇਖੋ, ਅਤੇ cubic-bezier() ਮੁੱਲ ਕਾਪੀ ਕਰੋ।
cubic-bezier(0.25, 0.1, 0.25, 1)ਕਰਵ ਸਿੱਧਾ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ। ਤੁਹਾਡੇ ਵੱਲੋਂ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਕੋਈ ਵੀ ਡਾਟਾ BroBroGo 'ਤੇ ਅੱਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।
ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ
ਦੋ ਹੈਂਡਲ ਅਤੇ ਚਾਰ ਨੰਬਰਾਂ ਦਾ ਕੀ ਅਰਥ ਹੈ?
ਕਰਵ ਹੇਠਾਂ-ਖੱਬੇ (ਸ਼ੁਰੂਆਤ) ਤੋਂ ਉੱਪਰ-ਸੱਜੇ (ਅੰਤ) ਤੱਕ ਚੱਲਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਸਮਾਂ ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਜਾਂਦਾ ਹੈ ਅਤੇ ਪ੍ਰਗਤੀ ਉੱਪਰ ਵੱਲ ਜਾਂਦੀ ਹੈ। ਦੋ ਹੈਂਡਲ ਕੰਟਰੋਲ ਪੁਆਇੰਟ ਹਨ ਜੋ ਇਸਨੂੰ ਮੋੜਦੇ ਹਨ — ਹਰੇਕ ਕੋਲ ਇੱਕ X ਅਤੇ ਇੱਕ Y ਹੁੰਦਾ ਹੈ, ਇਸ ਲਈ ਇਕੱਠੇ ਉਹ cubic-bezier(x1, y1, x2, y2) ਹੁੰਦੇ ਹਨ। X ਹਮੇਸ਼ਾ 0 ਅਤੇ 1 ਦੇ ਵਿਚਕਾਰ ਰਹਿੰਦਾ ਹੈ, ਜਦੋਂ ਕਿ Y ਮੋਸ਼ਨ ਨੂੰ ਓਵਰਸ਼ੂਟ ਕਰਨ ਜਾਂ ਸਥਿਰ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਪਿੱਛੇ ਖਿੱਚਣ ਲਈ ਉੱਪਰ ਜਾਂ ਹੇਠਾਂ ਜਾ ਸਕਦਾ ਹੈ।
ਮੈਂ ਆਪਣੇ CSS ਵਿੱਚ ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਾਂ?
cubic-bezier() ਨੂੰ ਕਾਪੀ ਕਰੋ ਅਤੇ ਇਸਨੂੰ ਉੱਥੇ ਵਰਤੋ ਜਿੱਥੇ ਟਾਈਮਿੰਗ ਫੰਕਸ਼ਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ — transition-timing-function, animation-timing-function, ਜਾਂ ਸ਼ਾਰਟਹੈਂਡ, ਜਿਵੇਂ ਕਿ transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)। ease, ease-in, ease-out ਅਤੇ ease-in-out ਕੀਵਰਡ ਸਿਰਫ਼ ਨਿਸ਼ਚਿਤ cubic-bezier ਕਰਵ ਹਨ, ਇਸ ਲਈ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਇੱਕ ਪ੍ਰੀਸੈੱਟ ਨੂੰ ਚੁਣਨ ਨਾਲ ਤੁਹਾਨੂੰ ਕੀਵਰਡ ਦੇ ਪਿੱਛੇ ਦਾ ਸਹੀ ਮੁੱਲ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।
ਕੀ ਇਹ ਇੱਕ ਬਾਊਂਸ (bounce) ਜਾਂ ਇਲਾਸਟਿਕ (elastic) ਪ੍ਰਭਾਵ ਬਣਾ ਸਕਦਾ ਹੈ?
ਆਪਣੇ ਆਪ ਨਹੀਂ। ਇੱਕ ਸਿੰਗਲ cubic-bezier ਪਹਿਲਾਂ ਤੋਂ ਅੰਦਾਜ਼ਾ ਲਗਾ ਸਕਦਾ ਹੈ ਅਤੇ ਓਵਰਸ਼ੂਟ ਕਰ ਸਕਦਾ ਹੈ — "back" ਪ੍ਰੀਸੈੱਟ ਅਜਿਹਾ ਕਰਨ ਲਈ ਇੱਕ ਹੈਂਡਲ ਨੂੰ ਬਾਕਸ ਤੋਂ ਅੱਗੇ ਖਿੱਚਦੇ ਹਨ — ਪਰ ਇਹ ਸਿਰਫ਼ ਇੱਕ ਪਾਸੇ ਜਾ ਸਕਦਾ ਹੈ ਅਤੇ ਫਿਰ ਸਥਿਰ ਹੋ ਸਕਦਾ ਹੈ। Bounce ਅਤੇ elastic ਕਈ ਵਾਰ ਦਿਸ਼ਾ ਬਦਲਦੇ ਹਨ, ਜਿਸ ਨੂੰ ਕੋਈ ਵੀ ਸਿੰਗਲ cubic-bezier ਪ੍ਰਗਟ ਨਹੀਂ ਕਰ ਸਕਦਾ; ਉਹਨਾਂ ਲਈ CSS ਕੀਫ੍ਰੇਮ (keyframes) ਜਾਂ ਕਈ ਸਟਾਪਾਂ ਵਾਲੇ linear() ਫੰਕਸ਼ਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।