01 ರ 03
ಇತ್ತೀಚಿನ ಅಟಾಮಿಕ್.ಯೋ ಅಪ್ಡೇಟ್ ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಕಂಟೇನರ್ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ
ಕೆಲವು ತಿಂಗಳುಗಳ ಹಿಂದೆ ನಾನು ಆಟೋಮಿಕ್.ಯೋ ಅನ್ನು ಚಲನೆಯ ಮೂಲಮಾದರಿಗಾಗಿ ಹೇಗೆ ಬಳಸಬಹುದೆಂದು ತೋರಿಸಿದೆ . ನಾನು ತುಣುಕಿನಲ್ಲಿ ಮಾಡಿದ್ದ ಪ್ರಮುಖ ಅಂಶವೆಂದರೆ ಅದು ಕ್ಲೈಂಟ್ನ ಅಥವಾ ತಂಡದ ಕಲ್ಪನೆಯಿಂದ ಹೊರಬರುವುದನ್ನು ಹೊರತುಪಡಿಸಿ "ಚಲನೆಯನ್ನು ತೋರಿಸುವುದು" ಮುಖ್ಯವಾಗಿದೆ. ವಾಸ್ತವವಾಗಿ, UX / UI ಪರಿಕರಗಳ ಒಂದು ಸಂಪೂರ್ಣ ಹೊಸ ವರ್ಗವು ದೃಶ್ಯದಲ್ಲಿ ಕಾಣಿಸುತ್ತಿದೆ ಎಂದು ಇದು ತುಂಬಾ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಅವುಗಳು ಸೇರಿವೆ - ಆಪಲ್ ಕೀನೋಟ್, ಅಡೋಬ್ನ ಎಡ್ಜ್ ಅನಿಮೇಟ್, ಪರಿಣಾಮಗಳು ಮತ್ತು UXPin ನಂತರ, ಕೆಲವು ಹೆಸರಿಸಲು. ಬ್ಲಾಕ್ನಲ್ಲಿನ ಹೊಸ ಮಗು Atomic.io ಆಗಿದೆ, ಅದು ನಾನು ಮೊದಲ ಉತ್ಪನ್ನದ ಬಗ್ಗೆ ಬರೆದಾಗ ತೆರೆದ ಬೀಟಾದಲ್ಲಿದೆ.
ತೆರೆದ ಬೀಟಾಗಳ ಬಗ್ಗೆ ಅಚ್ಚುಕಟ್ಟಾದ ವಿಷಯವೆಂದರೆ ಅವರು ವೈಶಿಷ್ಟ್ಯಗಳ ಸೆಟ್ನಲ್ಲಿ ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸಂಗ್ರಹಿಸಲು ಅವಕಾಶವನ್ನು ನೀಡುತ್ತಾರೆ, ಇದರಲ್ಲಿ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಕಳೆದುಕೊಂಡಿರುವುದು ಸೇರಿದಂತೆ, ಮತ್ತು ಅವುಗಳನ್ನು ಅಪ್ಲಿಕೇಶನ್ಗೆ ಸೇರಿಸಿ ಮತ್ತು ವಾಣಿಜ್ಯ ಬಿಡುಗಡೆಯ ಮೊದಲು ಅವುಗಳನ್ನು ಪರೀಕ್ಷಿಸಬಹುದಾಗಿದೆ. ಪರಮಾಣು ವಿಷಯದಲ್ಲಿ, ಲಂಬವಾಗಿ ಅಥವಾ ಅಡ್ಡಡ್ಡಲಾಗಿ ವಿಷಯವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡುವ ಸಾಮರ್ಥ್ಯ ನಾನು ನಿಜವಾಗಿಯೂ ಕಳೆದುಕೊಂಡಿದ್ದೇನೆ. ಇದು ಕಾರ್ಡ್ಗಳು, ಸ್ಲೈಡ್ ಶೋಗಳು ಅಥವಾ ಬಳಕೆದಾರರ ಅಪ್ಲಿಕೇಶನ್ ಅಥವಾ ಸೈಟ್ನ ಇಂಟರ್ಫೇಸ್ನ ಮಿತಿಯಲ್ಲಿಯೇ ಸ್ವೈಪ್ ಅಥವಾ ಡ್ರ್ಯಾಗ್ ಮಾಡುವಂತಹ ಪ್ರಾಯೋಗಿಕವಾಗಿ ಅಂತಹ ವಿಷಯಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.
ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಕಂಟೇನರ್ಗಳು ಕೇವಲ ಈ ತಿಂಗಳು ಅಪ್ಲಿಕೇಶನ್ಗೆ ಪರಿಚಯಿಸಲ್ಪಟ್ಟಿದ್ದರಿಂದ ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಬಹುದಾದ ವಿಷಯವನ್ನು ರಚಿಸುವುದಕ್ಕಾಗಿ ಡೈನಲ್ ಸರಳವಾಗಿದೆ ಎಂದು ನಾನು ಒಪ್ಪಿಕೊಳ್ಳಬೇಕಾಗಿದೆ.
ಇಲ್ಲಿ ಹೇಗೆ ...
02 ರ 03
ಅಟಾಮಿಕ್ನಲ್ಲಿ ಲಂಬ ಸ್ಕ್ರೋಲಿಂಗ್ ವಿಷಯವನ್ನು ಹೇಗೆ ರಚಿಸುವುದು
ನೀವು ಉಚಿತ 30 ದಿನದ ಪ್ರಯೋಗಕ್ಕಾಗಿ ಮೊದಲು ಸೈನ್ ಅಪ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ ಮತ್ತು ಆ ಅವಧಿಯ ಅಂತ್ಯದಲ್ಲಿ, ನೀವು ಮೂರು ಬೆಲೆ ಯೋಜನೆಗಳನ್ನು ನೀಡಲಾಗುವುದು.
ನೀವು ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದ ಮೊದಲನೆಯ ವಿಷಯವೆಂದರೆ ನೀವು ಮಾಡುತ್ತಿರುವ ಎಲ್ಲಾ ಕೆಲಸವು ಬ್ರೌಸರ್ನಲ್ಲಿದೆ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು Google Chrome ನಲ್ಲಿ ಕಟ್ಟುನಿಟ್ಟಾಗಿ ಗುರಿಯಿರಿಸಲಾಗುತ್ತದೆ. ನೀವು ಲಾಗ್ ಇನ್ ಮಾಡಿದ ನಂತರ, ನೀವು ಯೋಜನೆಗಳ ಪುಟಕ್ಕೆ ತೆಗೆದುಕೊಳ್ಳಲಾಗುವುದು. ಅಪ್ಲಿಕೇಶನ್ ತೆರೆಯಲು, ಹೊಸ ಪ್ರಾಜೆಕ್ಟ್ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ.
ಇಂಟರ್ಫೇಸ್ ಕಾಣಿಸಿಕೊಂಡಾಗ ನೀವು ಸೀಮಿತ ಸಂಖ್ಯೆಯ ಪರಿಕರಗಳು, ಪುಟಗಳು ಮತ್ತು ಲೇಯರ್ಗಳನ್ನು ಪುಟಗಳಿಗೆ ಸೇರಿಸುವ ಸಾಮರ್ಥ್ಯ, ಕಲಾಕೃತಿ ಮತ್ತು ಬಲ, ಒಂದು ಸನ್ನಿವೇಶ-ಸೂಕ್ಷ್ಮ ಗುಣಲಕ್ಷಣಗಳ ಫಲಕ ಇವೆ ಎಂದು ನೋಡುತ್ತಾರೆ.
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಐಫೋನ್ನ 5 ಮೊದಲೇ ನಾನು ಪ್ರಾರಂಭಿಸಿದೆ ಅದು ಅದು 320 x 568 ಆಗಿದೆ. ನಂತರ ಚಿತ್ರಗಳನ್ನು ಸುತ್ತುವರೆಯಲು ಫೋಲ್ಡರ್ ಅನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಅವುಗಳನ್ನು ಕ್ಯಾನ್ವಾಸ್ಗೆ ಎಳೆಯಿರಿ. ಅವುಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪ್ರಾಜೆಕ್ಟ್ಗೆ ಸೇರಿಸಲಾಗಿದೆ ಮತ್ತು ನೀವು ಪದರಗಳು ಟ್ಯಾಬ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದರೆ ಅವರು ವೈಯಕ್ತಿಕ ಪದರಗಳಲ್ಲಿದ್ದಾರೆ ಎಂದು ನೀವು ನೋಡಬಹುದು. ನಾನು ನಂತರ ಬಾಣದ ಉಪಕರಣವನ್ನು (ಆಯ್ಕೆ) ಆಯ್ಕೆಮಾಡಿ, ಚಿತ್ರವನ್ನು ಆಯ್ಕೆಮಾಡಿ ಮತ್ತು ಅವುಗಳ ನಡುವೆ ಕೆಲವು ಸ್ಥಳವನ್ನು ಸೇರಿಸಲು ಒಂದು ಹೊಸ ಸ್ಥಾನಕ್ಕೆ ಎಳೆದಿದ್ದ. ನಾನು ಎಲ್ಲಾ ಚಿತ್ರಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಿ ಮತ್ತು ಟೂಲ್ಬಾರ್ನಲ್ಲಿ ಡಿಸ್ಟ್ರಿಬ್ಯೂಟ್ ಲಂಬವಾಗಿ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ. ಇದು ಸಮವಾಗಿ ಚಿತ್ರಗಳನ್ನು ಬಿಟ್ಟಿದೆ.
ಮುಂದಿನ ಹಂತವೆಂದರೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಬೇಕಾದ ಎಲ್ಲಾ ವಿಷಯವನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದು ಮತ್ತು ಕಂಟೈನರ್ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ಅಥವಾ ಗ್ರೂಪ್ ಬಟನ್ ಪಾಪ್ ಡೌನ್ ನಿಂದ ಸ್ಕ್ರೋಲ್ ಕಂಟೇನರ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿಕೊಳ್ಳಿ. ಕಂಟೇನರ್ ಅನ್ನು ರಚಿಸಿದ ನಂತರ - ನೀವು ಅದನ್ನು ಪದರಗಳ ಫಲಕದಲ್ಲಿ ನೋಡುತ್ತೀರಿ - ಕಂಟೇನರ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಕೆಳಗೆ ಕ್ಯಾನ್ವಾಸ್ನ ಕೆಳಗೆ ಹಿಡಿಯಲು ಎಳೆಯಿರಿ . ಪ್ರಾಪರ್ಟೀಸ್ ಪ್ಯಾನಲ್ನ ಕೆಳಭಾಗದಲ್ಲಿರುವ ಮುನ್ನೋಟ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಇದು ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ವಿಷಯವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡಲು ನಿಮ್ಮ ಮೌಸ್ ಚಲನ ಚಲನೆಯನ್ನು ಬಳಸಿ. ನಿಮ್ಮ ಯೋಜನೆಗೆ ಹಿಂತಿರುಗಲು, ಬ್ರೌಸರ್ ವಿಂಡೋದ ಕೆಳಗಿನ ಬಲಭಾಗದಲ್ಲಿರುವ ಸಂಪಾದಿಸು ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ .
03 ರ 03
ಅಟಾಮಿಕ್ನಲ್ಲಿ ಅಡ್ಡಲಾಗಿರುವ ಸ್ಕ್ರೋಲ್ ವಿಷಯವನ್ನು ಹೇಗೆ ರಚಿಸುವುದು
ಸಮತಲ ಸ್ಕ್ರೋಲಿಂಗ್ ಮಾಡುವುದು ಸುಲಭವಾಗಿದೆ.
ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಚಿತ್ರಗಳ ಸರಣಿಯನ್ನು ಕ್ಯಾನ್ವಾಸ್ಗೆ ಎಳೆಯಿರಿ ಮತ್ತು ಪರಸ್ಪರ ವಿರುದ್ಧವಾಗಿ ಅವುಗಳನ್ನು ಮೇಲಕ್ಕೆತ್ತಿ. ಚಿತ್ರಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿದ ನಂತರ, ನಾನು ಎಲ್ಲರೂ ಪರಸ್ಪರ ಒಗ್ಗೂಡಿಸಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಾನು ಟಾಪ್ ಅಲೈನ್ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.
ನಾನು ಶಿಫ್ಟ್ ಕೀಲಿಯನ್ನು ಕೆಳಗೆ ಇಟ್ಟುಕೊಂಡು ಪ್ರತಿ ಪದರವನ್ನು ಪದರಗಳ ಫಲಕದಲ್ಲಿ ಆಯ್ಕೆಮಾಡಿದೆ. ಚಿತ್ರಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿದಲ್ಲಿ, ನಾನು ಕಂಟೇನರ್ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದ್ದೇನೆ ಮತ್ತು ಪ್ರಾಪರ್ಟೀಸ್ ಪ್ಯಾನೆಲ್ಗಳಲ್ಲಿ, ಬದಲಿ ಸ್ಥಳಗಳಲ್ಲಿ ಆಯ್ಕೆಮಾಡಿದ ಅಡ್ಡಲಾಗಿ .
ನಾನು ಮುನ್ನೋಟ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ಬ್ರೌಸರ್ ವಿಂಡೋದಲ್ಲಿ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಿದೆ.
ನಾನು ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ವಿಷಯವನ್ನು ಧಾರಕದಲ್ಲಿ ಇರಿಸಿದಾಗ ಎಲ್ಲಿಯವರೆಗೆ ಲಂಬ ಮತ್ತು ಅಡ್ಡ ಸ್ಕ್ರೋಲಿಂಗ್ನ ವೈಯಕ್ತಿಕ ಆವೃತ್ತಿಗಳನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂದು ತೋರಿಸಿದ್ದರೂ, ನೀವು ಈ ಧಾರಕಗಳನ್ನು ಪರದೆಯ ಪ್ರತ್ಯೇಕ ಪ್ರದೇಶಗಳಲ್ಲಿ ಹೊಂದಬಹುದು. ಉದಾಹರಣೆಗೆ, ವೆಬ್ ಪುಟವು ಅಡ್ಡ ಮೆನುವಿನಲ್ಲಿ ಲಂಬವಾಗಿ ಸ್ಕ್ರೋಲಿಂಗ್ ವಿಷಯವನ್ನು ಮತ್ತು ಒಂದೇ ಪುಟದಲ್ಲಿ ಸ್ಲೈಡ್-ಶೋನಲ್ಲಿ ಅಡ್ಡಲಾಗಿ ಸ್ಕ್ರೋಲಿಂಗ್ ವಿಷಯವನ್ನು ಹೊಂದಿರುತ್ತದೆ. ವಾಸ್ತವವಾಗಿ, ಒಂದು ಧಾರಕವು ಒಂದು ಡಜನ್ ಅಥವಾ ಅದಕ್ಕಿಂತ ಚಿಕ್ಕ ಚಿಕ್ಕಚಿತ್ರಗಳನ್ನು ಹೊಂದಿರುವ ಇಮೇಜ್ ಪಿಕ್ಕರ್ನಂತಹ ಲಂಬ ಮತ್ತು ಅಡ್ಡ ಸ್ಕ್ರೋಲಿಂಗ್ಗಳನ್ನು ಹೊಂದಬಹುದು.
Atomic.io ನಲ್ಲಿ ಈ ವೈಶಿಷ್ಟ್ಯದ ಕುರಿತು ಇನ್ನಷ್ಟು ತಿಳಿಯಲು:
- ಬ್ಲಾಗ್ ಪ್ರಕಟಣೆ
- ಸ್ಕ್ರೋಲ್ ಮಾಡುವ ಧಾರಕ ಟ್ಯುಟೋರಿಯಲ್
- ಕಂಟೇನರ್ಗಳನ್ನು ಬಳಸಿ ಮರೆಮಾಚುವಿಕೆ
- ನಿವಾರಿಸುವ ಸ್ಕ್ರೋಲ್ ಕಂಟೇನರ್ಗಳು