ਸਕ੍ਰੌਲ ਨਾਲ ਚੱਲਣ ਵਾਲੀ ਫ਼ਿਲਮੀ ਪ੍ਰਦਰਸ਼ਨੀ
ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਭਾਗ ਜੋ ਹਰ ਨਮੂਨੇ ਨੂੰ ਛੋਟੀ ਫ਼ਿਲਮ ਬਣਾਉਂਦਾ ਹੈ: ਸਕ੍ਰੌਲ ਕਰਨ ਤੇ ਵੀਡੀਓ ਛੋਟੀ ਖਿੜਕੀ ਤੋਂ ਪੂਰੀ ਸਕ੍ਰੀਨ ਤੱਕ ਖੁੱਲ੍ਹਦੀ ਹੈ, ਫਿਰ ਫ਼ੋਟੋ ਗੈਲਰੀ ਆਉਂਦੀ ਹੈ।
ਤਕਨੀਕੀ ਉਦੇਸ਼
ਹਰ ਨਮੂਨੇ ਨੂੰ ਏਜੰਸੀ ਵੱਲੋਂ ਬਣੀ ਸਾਈਟ ਵਰਗਾ ਅਹਿਸਾਸ ਦੇਣਾ — ਅਸਲ ਵੀਡੀਓ, ਭਰੋਸੇਮੰਦ ਅੱਖਰ ਅਤੇ ਹਿਲਜੁਲ — ਅਤੇ ਇਸਨੂੰ ਫ਼ੋਨ ਉੱਤੇ ਚੱਲਣ ਵਾਲੀ ਇੱਕ ਨਿਰਭਰਤਾ-ਰਹਿਤ ਸਕ੍ਰਿਪਟ ਰੱਖਣਾ।
ਪਾਬੰਦੀਆਂ
- ਕੋਈ ਐਨੀਮੇਸ਼ਨ ਲਾਇਬ੍ਰੇਰੀ ਨਹੀਂ: ਹਰ ਹਿੱਸੇ ਲਈ ਇੱਕ ਛੋਟੀ ਸਕ੍ਰਿਪਟ।
- ਬੈਟਰੀ ਅਤੇ ਡਾਟਾ ਬਚਾਉਣ ਲਈ ਇੱਕ ਸਮੇਂ ਸਿਰਫ਼ ਇੱਕ ਵੀਡੀਓ ਡੀਕੋਡ ਹੋਵੇ।
- ਘੱਟ ਹਿਲਜੁਲ ਦੀ ਪਸੰਦ ਦਾ ਆਦਰ ਕਰੇ ਅਤੇ ਸਥਿਰ ਲੇਆਉਟ ਵਿੱਚ ਬਦਲ ਜਾਵੇ।
ਢਾਂਚਾ
- 01
ਪਿੰਨ ਕੀਤੀ ਰੀਲ
ਸਥਿਰ ਮੰਚ ਵਾਲਾ ਉੱਚਾ ਹਿੱਸਾ; ਸਕ੍ਰੋਲ ਦੀ ਤਰੱਕੀ clip-path, ਆਕਾਰ ਅਤੇ ਅਧਿਆਇ ਚਲਾਉਂਦੀ ਹੈ।
- 02
ਅਧਿਆਇ
ਕੈਪਸ਼ਨਾਂ ਨਾਲ ਤਿੰਨ ਤੱਕ ਕਲਿੱਪ ਇੱਕ-ਦੂਜੇ ਵਿੱਚ ਘੁਲਦੇ ਹਨ; ਸਿਰਫ਼ ਸਰਗਰਮ ਕਲਿੱਪ ਚੱਲਦਾ ਹੈ।
- 03
ਪਿੰਨ ਕੀਤੀ ਗੈਲਰੀ
ਸਕ੍ਰੋਲ ਨਾਲ ਖਿਸਕਦੀ ਲੇਟਵੀਂ ਪੱਟੀ, ਹਰ ਕਾਰਡ ਉੱਤੇ ਪੈਰਾਲੈਕਸ ਨਾਲ।
- 04
ਪਹਿਲਾਂ ਆਪਣੀਆਂ ਫ਼ੋਟੋਆਂ
ਜਦੋਂ ਕਾਰੋਬਾਰ ਦੀਆਂ ਆਪਣੀਆਂ ਫ਼ੋਟੋਆਂ ਪਤਾ ਹੋਣ, ਗੈਲਰੀ ਉਨ੍ਹਾਂ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ।
ਵਹਾਅ ਖੱਬੇ ਤੋਂ ਸੱਜੇ, ਉੱਪਰ ਤੋਂ ਹੇਠਾਂ ਹੈ।
ਮੁੱਖ ਫ਼ੈਸਲੇ
ਕੋਡ ਵਾਲੇ 3D ਦੀ ਬਜਾਏ ਵੀਡੀਓ
ਪਹਿਲਾਂ ਵਾਲਾ ਕੋਡ ਨਾਲ ਬਣਿਆ 3D ਕਮਰਾ ਬਣਾਵਟੀ ਲੱਗਦਾ ਸੀ। ਲਾਇਸੈਂਸ ਵਾਲੀ ਵੀਡੀਓ ਨੇ ਉਸੇ ਹਿੱਸੇ ਨੂੰ ਤੁਰੰਤ ਅਸਲ ਬਣਾ ਦਿੱਤਾ।
ਨੇਮਸਪੇਸ ਵਾਲੀਆਂ ਸਟਾਈਲਾਂ
ਇਹ ਹਿੱਸਾ ਕਈ ਵੱਖਰੇ ਟੈਂਪਲੇਟਾਂ ਵਿੱਚ ਪਾਇਆ ਜਾਂਦਾ ਹੈ, ਇਸ ਲਈ ਟੈਂਪਲੇਟ CSS ਨਾਲ ਟਕਰਾਅ ਤੋਂ ਬਚਣ ਲਈ ਹਰ ਕਲਾਸ ਦਾ ਅਗੇਤਰ ਹੈ — ਇੱਕ ਅਸਲ ਲੇਆਉਟ ਬੱਗ ਤੋਂ ਸਿੱਖਿਆ ਸਬਕ।
ਸਿਰਫ਼ ਅਗਲਾ ਕਲਿੱਪ ਪਹਿਲਾਂ ਲੋਡ ਕਰੋ
ਪਹਿਲਾ ਕਲਿੱਪ ਤੁਰੰਤ ਲੋਡ ਹੁੰਦਾ ਹੈ; ਹਰ ਅਗਲਾ ਕਲਿੱਪ ਲੋੜ ਤੋਂ ਠੀਕ ਪਹਿਲਾਂ preload='none' ਤੋਂ ਅੱਪਗ੍ਰੇਡ ਹੁੰਦਾ ਹੈ।
ਸਕ੍ਰੀਨਸ਼ਾਟ
ਚੁਣੌਤੀਆਂ
CSS ਟਕਰਾਅ
ਗੈਲਰੀ ਦਾ ਇੱਕ ਆਮ ਕਲਾਸ ਨਾਮ ਇੱਕ ਟੈਂਪਲੇਟ ਦੇ ਗ੍ਰਿਡ ਨਿਯਮ ਨਾਲ ਟਕਰਾਇਆ ਅਤੇ ਪੱਟੀ ਸੁੰਗੜ ਗਈ। ਹਰ ਸਿਲੈਕਟਰ ਨੂੰ ਅਗੇਤਰ ਦੇਣ ਨਾਲ ਇਹ ਪੱਕੇ ਤੌਰ 'ਤੇ ਠੀਕ ਹੋਇਆ।
ਫ਼ੋਨ ਉੱਤੇ ਓਵਰਲੈਪ
ਆਖ਼ਰੀ ਬਟਨ ਫ਼ੋਨ ਦੀ ਸਥਿਰ ਪੱਟੀ ਉੱਤੇ ਚੜ੍ਹ ਜਾਂਦਾ ਸੀ; ਛੋਟੀਆਂ ਸਕ੍ਰੀਨਾਂ ਉੱਤੇ ਹੁਣ ਇਹ ਪੱਟੀ ਦੇ ਹੱਕ ਵਿੱਚ ਲੁਕਿਆ ਰਹਿੰਦਾ ਹੈ।
ਸਿੱਖੇ ਸਬਕ
- ਸਕ੍ਰੋਲ ਨਾਲ ਜੁੜੀ ਹਿਲਜੁਲ ਇੱਕ ਤਰੱਕੀ ਮੁੱਲ ਉੱਤੇ ਅਧਾਰਿਤ ਹੋਵੇ; ਬਾਕੀ ਸਭ ਉਸੇ ਤੋਂ ਨਿਕਲੇ।
- ਪਾਏ ਗਏ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਆਪਣੀਆਂ ਸਟਾਈਲਾਂ ਦੀ ਰਾਖੀ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।
- ਅਸਲ ਵੀਡੀਓ ਅਤੇ ਸੰਜਮ ਭਾਰੀ ਬਣਾਏ ਗ੍ਰਾਫ਼ਿਕਸ ਨੂੰ ਹਰਾਉਂਦੇ ਹਨ।