CSS ಅನಿಮೇಷನ್ ಟೈಮ್‌ಲೈನ್‌ನಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ: ಆಧುನಿಕ ವೆಬ್ ಅನುಭವಗಳಿಗಾಗಿ ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳು

ವೆಬ್ ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ, ಹೆಚ್ಚು ಆಕರ್ಷಕ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ಬಯಸುತ್ತಿದೆ. ಇದನ್ನು ಸಾಧಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ತಂತ್ರವೆಂದರೆ ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳು, ಇದು CSS ಅನಿಮೇಷನ್ ಟೈಮ್‌ಲೈನ್ ವೈಶಿಷ್ಟ್ಯದಿಂದ ಸಾಧ್ಯವಾಗಿದೆ. ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ CSS ಅನಿಮೇಷನ್ ಟೈಮ್‌ಲೈನ್‌ನ ಜಟಿಲತೆಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ, ಆಕರ್ಷಕ ಮತ್ತು ಕ್ರಿಯಾತ್ಮಕ ವೆಬ್ ವಿಷಯವನ್ನು ರಚಿಸಲು ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನವನ್ನು ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳುವುದು ಎಂಬುದರ ಮೇಲೆ ನಿರ್ದಿಷ್ಟವಾಗಿ ಗಮನಹರಿಸುತ್ತದೆ.

CSS ಅನಿಮೇಷನ್ ಟೈಮ್‌ಲೈನ್ ಎಂದರೇನು?

CSS ಅನಿಮೇಷನ್ ಟೈಮ್‌ಲೈನ್, ಒಂದು ಟೈಮ್‌ಲೈನ್‌ನ ಪ್ರಗತಿಯ ಆಧಾರದ ಮೇಲೆ CSS ಅನಿಮೇಷನ್‌ಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಕೇವಲ ಸಮಯ-ಆಧಾರಿತ ಅವಧಿಗಳನ್ನು ಅವಲಂಬಿಸುವ ಬದಲು, ನೀವು ಪುಟದ ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನ ಅಥವಾ ಮಾಧ್ಯಮ ಅಂಶದ ಪ್ರಗತಿಯಂತಹ ಇತರ ಅಂಶಗಳಿಗೆ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಜೋಡಿಸಬಹುದು. ಇದು ಬಳಕೆದಾರರ ಸಂವಹನಕ್ಕೆ ಹೆಚ್ಚು ಸ್ವಾಭಾವಿಕ ಮತ್ತು ಸ್ಪಂದನಶೀಲವೆನಿಸುವ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಲು ಹೊಸ ಸಾಧ್ಯತೆಗಳ ಕ್ಷೇತ್ರವನ್ನು ತೆರೆಯುತ್ತದೆ.

ಸಾಂಪ್ರದಾಯಿಕ CSS ಅನಿಮೇಷನ್‌ಗಳು animation-duration ಪ್ರಾಪರ್ಟಿಯಿಂದ ಚಾಲಿತವಾಗುತ್ತವೆ, ಇದು ಅನಿಮೇಷನ್ ಪೂರ್ಣಗೊಳ್ಳಲು ಎಷ್ಟು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ದೇಶಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, CSS ಅನಿಮೇಷನ್ ಟೈಮ್‌ಲೈನ್ animation-timeline ಮತ್ತು animation-range ನಂತಹ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ, ಕಂಟೇನರ್‌ನ ಸ್ಕ್ರೋಲ್ ಪ್ರಗತಿಯಂತಹ ನಿರ್ದಿಷ್ಟ ಟೈಮ್‌ಲೈನ್‌ಗೆ ಅನಿಮೇಷನ್ ಪ್ರಗತಿಯನ್ನು ಮ್ಯಾಪ್ ಮಾಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳು CSS ಅನಿಮೇಷನ್‌ನ ಪ್ರಗತಿಯನ್ನು ಒಂದು ಅಂಶದ ಅಥವಾ ಸಂಪೂರ್ಣ ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನಕ್ಕೆ ಲಿಂಕ್ ಮಾಡುತ್ತವೆ. ಬಳಕೆದಾರರು ಸ್ಕ್ರೋಲ್ ಮಾಡಿದಂತೆ, ಅನಿಮೇಷನ್ ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಮುಂದುವರಿಯುತ್ತದೆ. ಇದು ತಡೆರಹಿತ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ, ಅಲ್ಲಿ ಅಂಶಗಳು ಬಳಕೆದಾರರ ಸ್ಕ್ರೋಲಿಂಗ್ ನಡವಳಿಕೆಗೆ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತವೆ.

ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳ ಪ್ರಯೋಜನಗಳು

• ಬಳಕೆದಾರರ ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆ ಹೆಚ್ಚಳ: ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳು ಬಳಕೆದಾರರ ಗಮನವನ್ನು ಸೆಳೆಯುತ್ತವೆ ಮತ್ತು ವಿಷಯವನ್ನು ಮತ್ತಷ್ಟು ಅನ್ವೇಷಿಸಲು ಅವರನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತವೆ.
• ಸುಧಾರಿತ ಕಥಾನಿರೂಪಣೆ: ಬಳಕೆದಾರರು ಸ್ಕ್ರೋಲ್ ಮಾಡಿದಂತೆ ಮಾಹಿತಿಯನ್ನು ಹಂತಹಂತವಾಗಿ ಬಹಿರಂಗಪಡಿಸಲು ಅವುಗಳನ್ನು ಬಳಸಬಹುದು, ಇದು ಹೆಚ್ಚು ಬಲವಾದ ನಿರೂಪಣೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ಒಂದು ಉತ್ಪನ್ನದ ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರೋಲ್ ಮಾಡಿದಂತೆ, ಉತ್ಪನ್ನದ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒಂದೊಂದಾಗಿ ಪ್ರದರ್ಶಿಸುವ ಉತ್ಪನ್ನ ಅನಾವರಣವನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ.
• ಅರ್ಥಗರ್ಭಿತ ನ್ಯಾವಿಗೇಷನ್: ಅನಿಮೇಷನ್‌ಗಳು ಪುಟದಲ್ಲಿ ಬಳಕೆದಾರರ ಸ್ಥಾನದ ಬಗ್ಗೆ ದೃಶ್ಯ ಸುಳಿವುಗಳನ್ನು ಒದಗಿಸಬಹುದು ಮತ್ತು ವಿಷಯದ ಮೂಲಕ ಅವರಿಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಸ್ಕ್ರೋಲ್ ಮಾಡಿದಂತೆ ತುಂಬುವ ಪ್ರಗತಿ ಪಟ್ಟಿ (progress bar).
• ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್: CSS ಅನಿಮೇಷನ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಹಾರ್ಡ್‌ವೇರ್-ಆಕ್ಸಿಲರೇಟೆಡ್ ಆಗಿರುತ್ತವೆ, ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಆಧಾರಿತ ಪರಿಹಾರಗಳಿಗೆ ಹೋಲಿಸಿದರೆ, ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ ಅನಿಮೇಷನ್‌ಗಳಿಗೆ ಸುಗಮವಾದ ಅನಿಮೇಷನ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
• ಲಭ್ಯತೆಯ ಪರಿಗಣನೆಗಳು: ಸರಿಯಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಿದಾಗ, CSS ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರ್ಯಾಯಗಳಿಗಿಂತ ಹೆಚ್ಚು ಸುಲಭವಾಗಿ ಲಭ್ಯವಾಗಬಹುದು. ಅನಿಮೇಷನ್‌ಗಳು ಅಪಸ್ಮಾರವನ್ನು ಪ್ರಚೋದಿಸುವುದಿಲ್ಲ ಅಥವಾ ಅರಿವಿನ ದೌರ್ಬಲ್ಯ ಹೊಂದಿರುವ ಬಳಕೆದಾರರ ಗಮನವನ್ನು ಬೇರೆಡೆಗೆ ಸೆಳೆಯುವುದಿಲ್ಲ ಎಂದು ಯಾವಾಗಲೂ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ವಿರಾಮ/ಪ್ಲೇ ನಿಯಂತ್ರಣಗಳನ್ನು ನೀಡಿ.

ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳಿಗಾಗಿ ಪ್ರಮುಖ CSS ಪ್ರಾಪರ್ಟಿಗಳು

ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಲು, ನೀವು ಪ್ರಾಥಮಿಕವಾಗಿ ಈ ಕೆಳಗಿನ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುತ್ತೀರಿ:

• animation-timeline: ಈ ಪ್ರಾಪರ್ಟಿಯು ಅನಿಮೇಷನ್ ಅನ್ನು ಚಾಲನೆ ಮಾಡುವ ಟೈಮ್‌ಲೈನ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳಿಗಾಗಿ, ನೀವು ಸಾಮಾನ್ಯವಾಗಿ scroll() ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸುತ್ತೀರಿ.
• animation-range: ಈ ಪ್ರಾಪರ್ಟಿಯು ಅನಿಮೇಷನ್ ಪ್ಲೇ ಆಗಬೇಕಾದ ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನಗಳ ವ್ಯಾಪ್ತಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ನೀವು entry, cover, contain ನಂತಹ ಕೀವರ್ಡ್‌ಗಳನ್ನು ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಆರಂಭ ಮತ್ತು ಅಂತಿಮ ಬಿಂದುಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.
• scroll-timeline-axis: ಅನಿಮೇಷನ್ ಟೈಮ್‌ಲೈನ್‌ಗಾಗಿ ಬಳಸಬೇಕಾದ ಸ್ಕ್ರೋಲಿಂಗ್‌ನ ಅಕ್ಷವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಸಂಭಾವ್ಯ ಮೌಲ್ಯಗಳು block (ಲಂಬ), inline (ಅಡ್ಡ), x, y, ಮತ್ತು auto.
• scroll-timeline-name: ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್‌ಗೆ ಹೆಸರನ್ನು ನಿಯೋಜಿಸುತ್ತದೆ, animation-timeline ಪ್ರಾಪರ್ಟಿಯಲ್ಲಿ ಅದನ್ನು ಉಲ್ಲೇಖಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು

ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಹೇಗೆ ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಎಂಬುದನ್ನು ವಿವರಿಸಲು ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

ಉದಾಹರಣೆ 1: ಸ್ಕ್ರೋಲ್‌ನಲ್ಲಿ ಅಂಶಗಳನ್ನು ಫೇಡ್ ಇನ್ ಮಾಡುವುದು

ಈ ಉದಾಹರಣೆಯು ಸ್ಕ್ರೋಲಿಂಗ್ ಮಾಡುವಾಗ ವೀಕ್ಷಣೆಗೆ ಬರುವ ಅಂಶಗಳನ್ನು ಹೇಗೆ ಫೇಡ್ ಇನ್ ಮಾಡುವುದು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.

            
.fade-in {
  opacity: 0;
  animation: fade-in 1s forwards;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

            

              
                Copy
              
            
          

ವಿವರಣೆ:

• .fade-in: ನಾವು ಫೇಡ್ ಇನ್ ಮಾಡಲು ಬಯಸುವ ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸಲಾದ ಕ್ಲಾಸ್. ಆರಂಭದಲ್ಲಿ ಅಪಾರದರ್ಶಕತೆಯನ್ನು 0 ಗೆ ಹೊಂದಿಸುತ್ತದೆ.
• animation: fade-in 1s forwards;: ಅನಿಮೇಷನ್ ಹೆಸರು (fade-in), ಅವಧಿ (1s), ಮತ್ತು ಫಿಲ್ ಮೋಡ್ (ಅಂತಿಮ ಸ್ಥಿತಿಯನ್ನು ಉಳಿಸಿಕೊಳ್ಳಲು forwards) ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
• animation-timeline: view();: ಅನಿಮೇಷನ್ ಅನ್ನು ವ್ಯೂಪೋರ್ಟ್‌ನಲ್ಲಿನ ಅಂಶದ ಗೋಚರತೆಗೆ ಸಂಪರ್ಕಿಸುತ್ತದೆ. ಅನಿಮೇಷನ್ ಟೈಮ್‌ಲೈನ್ ಅಂಶದ ನೋಟವಾಗಿದೆ.
• animation-range: entry 25% cover 75%;: ಇದು ಸ್ಕ್ರೋಲ್ ವ್ಯಾಪ್ತಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಅಂಶದ ಮೇಲ್ಭಾಗ (entry) ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲಿನಿಂದ 25% ದೂರದಲ್ಲಿದ್ದಾಗ ಅನಿಮೇಷನ್ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಮತ್ತು ಅಂಶದ ಕೆಳಭಾಗ (cover) ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲಿನಿಂದ 75% ದೂರದಲ್ಲಿದ್ದಾಗ ಮುಗಿಯುತ್ತದೆ.
• @keyframes fade-in: ಅನಿಮೇಷನ್ ಅನ್ನು ಸ್ವತಃ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಕೇವಲ ಅಪಾರದರ್ಶಕತೆಯನ್ನು 0 ರಿಂದ 1 ಕ್ಕೆ ಬದಲಾಯಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ 2: ಪ್ರಗತಿ ಪಟ್ಟಿ (Progress Bar) ಅನಿಮೇಷನ್

ಈ ಉದಾಹರಣೆಯು ಬಳಕೆದಾರರು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರೋಲ್ ಮಾಡಿದಂತೆ ತುಂಬುವ ಪ್ರಗತಿ ಪಟ್ಟಿಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

            
.progress-bar {
  width: 100%;
  height: 10px;
  background-color: #eee;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.progress-bar-inner {
  height: 100%;
  background-color: #4CAF50;
  width: 0;
  animation: fill-progress forwards;
  animation-timeline: scroll(root);
  animation-range: 0vh 100vh;
}

@keyframes fill-progress {
  to {
    width: 100%;
  }
}

            

              
                Copy
              
            
          

ವಿವರಣೆ:

• .progress-bar: ಪ್ರಗತಿ ಪಟ್ಟಿಗಾಗಿ ಕಂಟೇನರ್ ಅನ್ನು ಶೈಲೀಕರಿಸುತ್ತದೆ. ಇದನ್ನು ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲ್ಭಾಗಕ್ಕೆ ಸ್ಥಿರಪಡಿಸಲಾಗಿದೆ.
• .progress-bar-inner: ಪ್ರಗತಿಯನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಒಳಗಿನ ಬಾರ್ ಅನ್ನು ಶೈಲೀಕರಿಸುತ್ತದೆ. ಆರಂಭದಲ್ಲಿ, ಅದರ ಅಗಲವನ್ನು 0 ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ.
• animation: fill-progress forwards;: ಅನಿಮೇಷನ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
• animation-timeline: scroll(root);: ಅನಿಮೇಷನ್ ಅನ್ನು ರೂಟ್ ಸ್ಕ್ರೋಲ್ ಟೈಮ್‌ಲೈನ್‌ಗೆ (ಅಂದರೆ, ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಸ್ಕ್ರೋಲ್) ಲಿಂಕ್ ಮಾಡುತ್ತದೆ.
• animation-range: 0vh 100vh;: ಬಳಕೆದಾರರು ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಮೇಲಿನಿಂದ (0vh) ಕೆಳಕ್ಕೆ (100vh) ಸ್ಕ್ರೋಲ್ ಮಾಡಿದಂತೆ ಅನಿಮೇಷನ್ ಪೂರ್ಣಗೊಳ್ಳಬೇಕು ಎಂದು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಇದು ವಿಷಯವು ವ್ಯೂಪೋರ್ಟ್ ಅನ್ನು ತುಂಬುತ್ತದೆ ಎಂದು ಭಾವಿಸುತ್ತದೆ. ದೀರ್ಘ ವಿಷಯಕ್ಕಾಗಿ, ಈ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸಿ.
• @keyframes fill-progress: ಅನಿಮೇಷನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಇದು ಒಳಗಿನ ಬಾರ್‌ನ ಅಗಲವನ್ನು 0 ರಿಂದ 100% ಗೆ ಹೆಚ್ಚಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ 3: ಚಿತ್ರದ ಪ್ಯಾರಲಾಕ್ಸ್ ಪರಿಣಾಮ (Image Parallax Effect)

ಈ ಉದಾಹರಣೆಯು ಬಳಕೆದಾರರು ಸ್ಕ್ರೋಲ್ ಮಾಡುವಾಗ ಚಿತ್ರದ ಮೇಲೆ ಸೂಕ್ಷ್ಮವಾದ ಪ್ಯಾರಲಾಕ್ಸ್ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

            
.parallax-container {
  height: 500px;
  overflow: hidden;
  position: relative;
}

.parallax-image {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 50% 0;
  animation: parallax 1s linear forwards;
  animation-timeline: view();
  animation-range: entry cover;
}

@keyframes parallax {
  to {
    transform: translateY(50px);
  }
}

            

              
                Copy
              
            
          

ವಿವರಣೆ:

• .parallax-container: ಪ್ಯಾರಲಾಕ್ಸ್ ಚಿತ್ರಕ್ಕಾಗಿ ಗೋಚರ ಪ್ರದೇಶವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಕಂಟೇನರ್. ಚಿತ್ರವು ಉಕ್ಕಿ ಹರಿಯುವುದನ್ನು ತಡೆಯಲು overflow: hidden ನಿರ್ಣಾಯಕವಾಗಿದೆ.
• .parallax-image: ಪ್ಯಾರಲಾಕ್ಸ್ ಪರಿಣಾಮವನ್ನು ಹೊಂದಿರುವ ಚಿತ್ರ. transform-origin: 50% 0; ರೂಪಾಂತರದ ಮೂಲವನ್ನು ಚಿತ್ರದ ಮೇಲಿನ ಕೇಂದ್ರಕ್ಕೆ ಹೊಂದಿಸುತ್ತದೆ.
• animation: parallax 1s linear forwards;: ಅನಿಮೇಷನ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
• animation-timeline: view();: ಅನಿಮೇಷನ್ ಅನ್ನು ವ್ಯೂಪೋರ್ಟ್‌ನಲ್ಲಿನ ಅಂಶದ ಗೋಚರತೆಗೆ ಲಿಂಕ್ ಮಾಡುತ್ತದೆ.
• animation-range: entry cover;: ಅಂಶವು ವ್ಯೂಪೋರ್ಟ್‌ಗೆ ಪ್ರವೇಶಿಸಿದಾಗ ಮತ್ತು ಆವರಿಸಿದಾಗ ಅನಿಮೇಷನ್ ಪ್ಲೇ ಆಗುತ್ತದೆ.
• @keyframes parallax: ಅನಿಮೇಷನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಇದು ಚಿತ್ರವನ್ನು ಲಂಬವಾಗಿ 50px ರಷ್ಟು ವರ್ಗಾಯಿಸುತ್ತದೆ.

ಸುಧಾರಿತ ತಂತ್ರಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು

ವರ್ಧಿತ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುವುದು

CSS ಅನಿಮೇಷನ್ ಟೈಮ್‌ಲೈನ್ ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಲು ಪ್ರಬಲವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸಿದರೂ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸಂಯೋಜಿಸುವ ಮೂಲಕ ನೀವು ನಿಯಂತ್ರಣ ಮತ್ತು ಗ್ರಾಹಕೀಕರಣವನ್ನು ಮತ್ತಷ್ಟು ಹೆಚ್ಚಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಇದಕ್ಕೆ ಬಳಸಬಹುದು:

• ಸಾಧನದ ಗಾತ್ರ ಅಥವಾ ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳ ಆಧಾರದ ಮೇಲೆ ಅನಿಮೇಷನ್ ನಿಯತಾಂಕಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಹೊಂದಿಸಿ.
• ನಿರ್ದಿಷ್ಟ ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನಗಳು ಅಥವಾ ಈವೆಂಟ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸಿ.
• ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಅನಿಮೇಷನ್ ಅನುಕ್ರಮಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ.

ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್

ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಬಹಳ ಮುಖ್ಯ. ಈ ಕೆಳಗಿನ ಸಲಹೆಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• ಹಾರ್ಡ್‌ವೇರ್-ಆಕ್ಸಿಲರೇಟೆಡ್ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ: transform ಮತ್ತು opacity ನಂತಹ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ, ಅವುಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಹಾರ್ಡ್‌ವೇರ್-ಆಕ್ಸಿಲರೇಟೆಡ್ ಆಗಿರುತ್ತವೆ.
• DOM ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಿ: DOM ಅನ್ನು ಆಗಾಗ್ಗೆ ನವೀಕರಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ, ಏಕೆಂದರೆ ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.
• ಸ್ಕ್ರೋಲ್ ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಡಿಬೌನ್ಸ್ ಮಾಡಿ: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುತ್ತಿದ್ದರೆ, ಅನಿಮೇಷನ್ ನವೀಕರಿಸುವ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸ್ಕ್ರೋಲ್ ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಡಿಬೌನ್ಸ್ ಮಾಡಿ.
• `will-change` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಬಳಸಿ: will-change ಪ್ರಾಪರ್ಟಿಯು ಒಂದು ಅಂಶದ ಪ್ರಾಪರ್ಟಿಗಳು ಬದಲಾಗುತ್ತವೆ ಎಂದು ಬ್ರೌಸರ್‌ಗೆ ಸೂಚಿಸಬಹುದು, ಇದು ರೆಂಡರಿಂಗ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಅತಿಯಾದ ಬಳಕೆಯು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು.

ಲಭ್ಯತೆಯ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ ಲಭ್ಯತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ:

• ಅನಿಮೇಷನ್‌ಗಳನ್ನು ವಿರಾಮಗೊಳಿಸಲು ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸಿ: ಕೆಲವು ಬಳಕೆದಾರರು ಚಲನೆ ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳಿಗೆ ಸೂಕ್ಷ್ಮವಾಗಿರಬಹುದು, ಆದ್ದರಿಂದ ಅವುಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಒಂದು ಆಯ್ಕೆಯನ್ನು ಒದಗಿಸಿ. ಇದು ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳಲ್ಲಿ ಸರಳ ಟಾಗಲ್ ಆಗಿರಬಹುದು.
• ಮಿನುಗುವ ಅಥವಾ ವೇಗವಾಗಿ ಬದಲಾಗುವ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ತಪ್ಪಿಸಿ: ಇವು ಕೆಲವು ವ್ಯಕ್ತಿಗಳಲ್ಲಿ ಅಪಸ್ಮಾರವನ್ನು ಪ್ರಚೋದಿಸಬಹುದು.
• ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಬಳಸಿ ಮತ್ತು ಅನಗತ್ಯ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ತಪ್ಪಿಸಿ: ಅನಿಮೇಷನ್‌ಗಳು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಬೇಕೇ ಹೊರತು ಅದರಿಂದ ಗಮನವನ್ನು ಬೇರೆಡೆಗೆ ಸೆಳೆಯಬಾರದು.
• ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಅನಿಮೇಷನ್‌ಗಳು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಮತ್ತು ಇತರ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

Can I use ನಂತಹ ಸಂಪನ್ಮೂಲಗಳಲ್ಲಿ CSS ಅನಿಮೇಷನ್ ಟೈಮ್‌ಲೈನ್ ವೈಶಿಷ್ಟ್ಯಗಳಿಗಾಗಿ ಪ್ರಸ್ತುತ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ಪರಿಶೀಲಿಸಿ. ವ್ಯಾಪಕ ಹೊಂದಾಣಿಕೆಯ ಅಗತ್ಯವಿದ್ದರೆ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಇದೇ ರೀತಿಯ ಕಾರ್ಯವನ್ನು ಒದಗಿಸುವ ಪಾಲಿಫಿಲ್‌ಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ವೆಬ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವಾಗ, ಸಾಂಸ್ಕೃತಿಕ ವ್ಯತ್ಯಾಸಗಳು ಮತ್ತು ಲಭ್ಯತೆಯ ಅವಶ್ಯಕತೆಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ. ಇದರಲ್ಲಿ ಇವು ಸೇರಿವೆ:

• ಭಾಷಾ ಬೆಂಬಲ: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನೇಕ ಭಾಷೆಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ ಮತ್ತು ಅನಿಮೇಷನ್ ಪಠ್ಯ ಸೇರಿದಂತೆ ಎಲ್ಲಾ ವಿಷಯಗಳಿಗೆ ಸೂಕ್ತವಾದ ಅನುವಾದಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಸಾಂಸ್ಕೃತಿಕ ಸೂಕ್ಷ್ಮತೆ: ಚಿತ್ರಣ, ಬಣ್ಣಗಳು ಮತ್ತು ವಿನ್ಯಾಸದ ಅಂಶಗಳಲ್ಲಿನ ಸಾಂಸ್ಕೃತಿಕ ವ್ಯತ್ಯಾಸಗಳ ಬಗ್ಗೆ ಗಮನವಿರಲಿ. ಒಂದು ಸಂಸ್ಕೃತಿಯಲ್ಲಿ ಆಕರ್ಷಕವೆಂದು ಪರಿಗಣಿಸಲ್ಪಡುವುದು ಇನ್ನೊಂದರಲ್ಲಿ ಆಕ್ರಮಣಕಾರಿಯಾಗಿರಬಹುದು. ಉದಾಹರಣೆಗೆ, ಬಣ್ಣಗಳ ಸಂಬಂಧಗಳು ವ್ಯಾಪಕವಾಗಿ ಬದಲಾಗುತ್ತವೆ; ಬಿಳಿ ಬಣ್ಣವು ಅನೇಕ ಪಾಶ್ಚಿಮಾತ್ಯ ಸಂಸ್ಕೃತಿಗಳಲ್ಲಿ ಶುದ್ಧತೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಆದರೆ ಇದು ಕೆಲವು ಏಷ್ಯಾದ ಸಂಸ್ಕೃತಿಗಳಲ್ಲಿ ಶೋಕದ ಸಂಕೇತವಾಗಿದೆ.
• ಬಲದಿಂದ ಎಡಕ್ಕೆ (RTL) ವಿನ್ಯಾಸಗಳು: ಅರೇಬಿಕ್ ಮತ್ತು ಹೀಬ್ರೂನಂತಹ RTL ಭಾಷೆಗಳನ್ನು ಬೆಂಬಲಿಸಿ, ಇದಕ್ಕೆ ವೆಬ್‌ಸೈಟ್‌ನ ವಿನ್ಯಾಸವನ್ನು ಪ್ರತಿಬಿಂಬಿಸುವ ಅಗತ್ಯವಿದೆ. CSS ತಾರ್ಕಿಕ ಗುಣಲಕ್ಷಣಗಳು ಇದಕ್ಕೆ ಸಹಾಯ ಮಾಡಬಹುದು.
• ಸಮಯ ವಲಯಗಳು ಮತ್ತು ದಿನಾಂಕ ಸ್ವರೂಪಗಳು: ಬಳಕೆದಾರರ ಸ್ಥಳೀಯ ಸಮಯ ವಲಯದಲ್ಲಿ ಮತ್ತು ಸೂಕ್ತವಾದ ದಿನಾಂಕ ಸ್ವರೂಪಗಳನ್ನು ಬಳಸಿಕೊಂಡು ದಿನಾಂಕ ಮತ್ತು ಸಮಯವನ್ನು ಪ್ರದರ್ಶಿಸಿ.
• ಕರೆನ್ಸಿ ಮತ್ತು ಮಾಪನ ಘಟಕಗಳು: ಬಳಕೆದಾರರ ಸ್ಥಳೀಯ ಕರೆನ್ಸಿ ಮತ್ತು ಘಟಕಗಳಲ್ಲಿ ಬೆಲೆಗಳು ಮತ್ತು ಅಳತೆಗಳನ್ನು ಪ್ರದರ್ಶಿಸಿ.
• ಲಭ್ಯತೆಯ ಮಾನದಂಡಗಳು: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅಂಗವಿಕಲರಿಗೆ ಬಳಸಲು ಯೋಗ್ಯವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು WCAG (ವೆಬ್ ವಿಷಯ ಲಭ್ಯತೆ ಮಾರ್ಗಸೂಚಿಗಳು) ನಂತಹ ಲಭ್ಯತೆಯ ಮಾನದಂಡಗಳಿಗೆ ಬದ್ಧರಾಗಿರಿ.

ತೀರ್ಮಾನ

CSS ಅನಿಮೇಷನ್ ಟೈಮ್‌ಲೈನ್, ಮತ್ತು ನಿರ್ದಿಷ್ಟವಾಗಿ ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳು, ಆಕರ್ಷಕ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಪ್ರಬಲವಾದ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತವೆ. ಪ್ರಮುಖ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಲಭ್ಯತೆಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಪ್ರೇಕ್ಷಕರನ್ನು ಆಕರ್ಷಿಸುವ ಮತ್ತು ಒಟ್ಟಾರೆ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುವ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ನೀವು ರಚಿಸಬಹುದು. ವೈವಿಧ್ಯಮಯ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸುವಾಗ ಜಾಗತಿಕ ದೃಷ್ಟಿಕೋನಗಳನ್ನು ಪರಿಗಣಿಸಲು ಮರೆಯದಿರಿ, ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ವಿಶ್ವಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ ಲಭ್ಯವಾಗುವಂತೆ ಮತ್ತು ಸಾಂಸ್ಕೃತಿಕವಾಗಿ ಸೂಕ್ಷ್ಮವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸುಧಾರಿಸುತ್ತಲೇ ಇರುವುದರಿಂದ, CSS ಅನಿಮೇಷನ್ ಟೈಮ್‌ಲೈನ್ ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ಮಹತ್ವದ ಸಾಧನವಾಗಲಿದೆ.

ಒದಗಿಸಿದ ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ, ವಿಭಿನ್ನ ಅನಿಮೇಷನ್ ತಂತ್ರಗಳನ್ನು ಅನ್ವೇಷಿಸಿ, ಮತ್ತು ಅನನ್ಯ ಮತ್ತು ಸ್ಮರಣೀಯ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸುವಲ್ಲಿ ನಿಮ್ಮ ಸೃಜನಶೀಲತೆಯು ನಿಮಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡಲಿ. ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ವೈವಿಧ್ಯಮಯ, ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರನ್ನು ಪರಿಗಣಿಸುವಾಗ, ನಿಮ್ಮ ಯೋಜನೆಗಳಲ್ಲಿ CSS ಅನಿಮೇಷನ್ ಟೈಮ್‌ಲೈನ್, ನಿರ್ದಿಷ್ಟವಾಗಿ ಸ್ಕ್ರೋಲ್-ಡ್ರಿವನ್ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸಲು ಪ್ರಾರಂಭಿಸಲು ನಿಮಗೆ ಬಲವಾದ ಅಡಿಪಾಯವನ್ನು ಒದಗಿಸಬೇಕು.