M

MLOG

ಕನ್ನಡ

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

ಸಿಎಸ್ಎಸ್ ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್: ಸ್ಕ್ರಾಲ್ ಪೊಸಿಷನ್ ಆಧರಿಸಿ ಅನಿಮೇಟಿಂಗ್

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

ಸಿಎಸ್ಎಸ್ ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳು ಎಂದರೇನು?

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

ಸಿಎಸ್ಎಸ್ ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳನ್ನು ಏಕೆ ಬಳಸಬೇಕು?

ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಪ್ರಾಪರ್ಟೀಸ್

ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಲು ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಪ್ರಾಪರ್ಟೀಸ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ:

1. ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್

scroll-timeline ಪ್ರಾಪರ್ಟಿಯು ಅನಿಮೇಷನ್‌ಗಾಗಿ ಟೈಮ್‌ಲೈನ್ ಆಗಿ ಬಳಸಬೇಕಾದ ಸ್ಕ್ರಾಲ್ ಕಂಟೇನರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ನೀವು ಹೆಸರಿಸಲಾದ ಟೈಮ್‌ಲೈನ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು (ಉದಾ., --my-scroll-timeline) ಅಥವಾ auto (ಹತ್ತಿರದ ಪೂರ್ವಜ ಸ್ಕ್ರಾಲ್ ಕಂಟೇನರ್), none (ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್ ಇಲ್ಲ), ಅಥವಾ root (ಡಾಕ್ಯುಮೆಂಟ್‌ನ ವ್ಯೂಪೋರ್ಟ್) ನಂತಹ ಪೂರ್ವನಿರ್ಧರಿತ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಬಹುದು.

/* ಹೆಸರಿಸಲಾದ ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್ ಅನ್ನು ವಿವರಿಸಿ */
.scroll-container {
  scroll-timeline: --my-scroll-timeline;
}

/* ಅನಿಮೇಷನ್‌ನಲ್ಲಿ ಹೆಸರಿಸಲಾದ ಟೈಮ್‌ಲೈನ್ ಬಳಸಿ */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

2. ಅನಿಮೇಷನ್ ಟೈಮ್‌ಲೈನ್

animation-timeline ಪ್ರಾಪರ್ಟಿಯು ಅನಿಮೇಷನ್‌ಗೆ ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್ ಅನ್ನು ನಿಯೋಜಿಸುತ್ತದೆ. ಈ ಪ್ರಾಪರ್ಟಿಯು ಅನಿಮೇಷನ್‌ನ ಪ್ರಗತಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಸ್ಕ್ರಾಲ್ ಕಂಟೇನರ್‌ನ ಸ್ಕ್ರಾಲ್ ಪೊಸಿಷನ್‌ಗೆ ಲಿಂಕ್ ಮಾಡುತ್ತದೆ. ನೀವು view() ಫಂಕ್ಷನ್ ಅನ್ನು ಸಹ ಬಳಸಬಹುದು, ಇದು ವ್ಯೂಪೋರ್ಟ್‌ನೊಂದಿಗೆ ಎಲಿಮೆಂಟ್ ಛೇದಿಸುವ ಆಧಾರದ ಮೇಲೆ ಟೈಮ್‌ಲೈನ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.

/* ಅನಿಮೇಷನ್ ಅನ್ನು ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

/* ವ್ಯೂಪೋರ್ಟ್-ಆಧಾರಿತ ಅನಿಮೇಷನ್‌ಗಳಿಗಾಗಿ view() ಬಳಸಿ */
.animated-element {
  animation-timeline: view();
}

3. ಸ್ಕ್ರಾಲ್ ಆಫ್‌ಸೆಟ್‌ಗಳು

ಸ್ಕ್ರಾಲ್ ಆಫ್‌ಸೆಟ್‌ಗಳು ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್‌ನ ಪ್ರಾರಂಭ ಮತ್ತು ಅಂತಿಮ ಬಿಂದುಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ, ಅದು ಅನಿಮೇಷನ್‌ನ ಆರಂಭ ಮತ್ತು ಅಂತ್ಯಕ್ಕೆ ಅನುಗುಣವಾಗಿರುತ್ತದೆ. ಈ ಆಫ್‌ಸೆಟ್‌ಗಳು ಸ್ಕ್ರಾಲ್ ಪೊಸಿಷನ್ ಆಧಾರದ ಮೇಲೆ ಅನಿಮೇಷನ್ ಯಾವಾಗ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಮತ್ತು ನಿಲ್ಲುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಖರವಾಗಿ ನಿಯಂತ್ರಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಈ ಆಫ್‌ಸೆಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನೀವು cover, contain, entry, exit, ಮತ್ತು ಸಂಖ್ಯಾತ್ಮಕ ಮೌಲ್ಯಗಳಂತಹ (ಉದಾ., 100px, 50%) ಕೀವರ್ಡ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.

/* ಎಲಿಮೆಂಟ್ ಸಂಪೂರ್ಣವಾಗಿ ಗೋಚರಿಸುವಾಗ ಅನಿಮೇಟ್ ಮಾಡಿ */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: entry 0% cover 100%;
}

/* ಮೇಲಿನಿಂದ 100px ದೂರದಲ್ಲಿ ಅನಿಮೇಷನ್ ಪ್ರಾರಂಭಿಸಿ, ಕೆಳಗಿನಿಂದ 200px ದೂರದಲ್ಲಿರುವಾಗ ಕೊನೆಗೊಳಿಸಿ */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: 100px exit 200px;
}

4. ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್ ಆಕ್ಸಿಸ್

scroll-timeline-axis ಪ್ರಾಪರ್ಟಿಯು ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್ ಪ್ರಗತಿಯಾಗುವ ಅಕ್ಷವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಇದನ್ನು block (ಲಂಬ ಸ್ಕ್ರೋಲಿಂಗ್), inline (ಅಡ್ಡ ಸ್ಕ್ರೋಲಿಂಗ್), both (ಎರಡೂ ಅಕ್ಷಗಳು), ಅಥವಾ auto (ಬ್ರೌಸರ್‌ನಿಂದ ನಿರ್ಧರಿಸಲ್ಪಡುತ್ತದೆ) ಗೆ ಹೊಂದಿಸಬಹುದು. `view()` ಬಳಸುವಾಗ, ಅಕ್ಷವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ.

/* ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್ ಅಕ್ಷವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ */
.scroll-container {
  scroll-timeline-axis: y;
}

/* view ಜೊತೆಗೆ */
.animated-element {
  scroll-timeline-axis: block;
}

5. ಅನಿಮೇಷನ್ ರೇಂಜ್

`animation-range` ಪ್ರಾಪರ್ಟಿಯು ಸ್ಕ್ರಾಲ್ ಆಫ್‌ಸೆಟ್‌ಗಳನ್ನು (ಪ್ರಾರಂಭ ಮತ್ತು ಅಂತಿಮ ಬಿಂದುಗಳು) ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಅದು ಅನಿಮೇಷನ್‌ನ ಆರಂಭಕ್ಕೆ (0%) ಮತ್ತು ಅಂತ್ಯಕ್ಕೆ (100%) ಅನುಗುಣವಾಗಿರುತ್ತದೆ. ಇದು ನಿರ್ದಿಷ್ಟ ಸ್ಕ್ರಾಲ್ ಪೊಸಿಷನ್‌ಗಳನ್ನು ಅನಿಮೇಷನ್‌ನ ಪ್ರಗತಿಗೆ ಮ್ಯಾಪ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

/* ಸಂಪೂರ್ಣ ಸ್ಕ್ರಾಲ್ ಶ್ರೇಣಿಯನ್ನು ಅನಿಮೇಷನ್‌ಗೆ ಮ್ಯಾಪ್ ಮಾಡಿ */
.animated-element {
  animation-range: entry 0% cover 100%;
}

/* ಸ್ಕ್ರಾಲ್ ಶ್ರೇಣಿಯ ಅರ್ಧದಾರಿಯಲ್ಲೇ ಅನಿಮೇಷನ್ ಪ್ರಾರಂಭಿಸಿ */
.animated-element {
  animation-range: 50% 100%;
}

/* ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿ */
.animated-element {
  animation-range: 100px 500px;
}

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

ಆಕರ್ಷಕ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಲು ಸಿಎಸ್ಎಸ್ ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ:

1. ಪ್ರಗತಿ ಪಟ್ಟಿ

ಸ್ಕ್ರಾಲ್-ಡ್ರೈವನ್ ಅನಿಮೇಷನ್‌ಗಳ ಒಂದು ಕ್ಲಾಸಿಕ್ ಬಳಕೆಯ ಪ್ರಕರಣವೆಂದರೆ ಬಳಕೆದಾರರು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಿದಂತೆ ತುಂಬುವ ಪ್ರಗತಿ ಪಟ್ಟಿ. ಇದು ಬಳಕೆದಾರರು ವಿಷಯದ ಮೂಲಕ ಎಷ್ಟು ದೂರ ಸಾಗಿದ್ದಾರೆ ಎಂಬುದರ ಕುರಿತು ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ.

/* CSS */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 5px;
  background-color: #4CAF50;
  width: 0%;
  animation: fillProgressBar linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 0%;
  animation-fill-mode: forwards;
}

@keyframes fillProgressBar {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <p>... ನಿಮ್ಮ ವಿಷಯ ಇಲ್ಲಿ ...</p>
</div>

ಈ ಕೋಡ್ ಪುಟದ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಸ್ಥಿರವಾದ ಪ್ರಗತಿ ಪಟ್ಟಿಯನ್ನು ರಚಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ fillProgressBar ಅನಿಮೇಷನ್ ಪ್ರಗತಿ ಪಟ್ಟಿಯ ಅಗಲವನ್ನು 0% ರಿಂದ 100% ಕ್ಕೆ ಕ್ರಮೇಣ ಹೆಚ್ಚಿಸುತ್ತದೆ. animation-timeline: view() ಅನಿಮೇಷನ್ ಅನ್ನು ವ್ಯೂಪೋರ್ಟ್‌ನ ಸ್ಕ್ರಾಲ್ ಪ್ರಗತಿಗೆ ಲಿಂಕ್ ಮಾಡುತ್ತದೆ, ಮತ್ತು `animation-range` ಸ್ಕ್ರೋಲಿಂಗ್ ಅನ್ನು ದೃಶ್ಯ ಪ್ರಗತಿಗೆ ಜೋಡಿಸುತ್ತದೆ.

2. ಇಮೇಜ್ ಫೇಡ್-ಇನ್

ಚಿತ್ರಗಳು ವ್ಯೂಪೋರ್ಟ್‌ಗೆ ಪ್ರವೇಶಿಸಿದಾಗ ಸೂಕ್ಷ್ಮವಾದ ಫೇಡ್-ಇನ್ ಪರಿಣಾಮವನ್ನು ರಚಿಸಲು ನೀವು ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳನ್ನು ಬಳಸಬಹುದು, ಇದು ನಿಮ್ಮ ವಿಷಯದ ದೃಶ್ಯ ಆಕರ್ಷಣೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

/* CSS */
.fade-in-image {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn linear;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HTML */
<img src="image.jpg" class="fade-in-image" alt="Image">

ಈ ಕೋಡ್ ಆರಂಭದಲ್ಲಿ ಚಿತ್ರವನ್ನು ಮರೆಮಾಡುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಅದರ ಅಂತಿಮ ಸ್ಥಾನಕ್ಕಿಂತ ಸ್ವಲ್ಪ ಕೆಳಗೆ ಇರಿಸುತ್ತದೆ. ಚಿತ್ರವು ವೀಕ್ಷಣೆಗೆ ಸ್ಕ್ರಾಲ್ ಆಗುತ್ತಿದ್ದಂತೆ, fadeIn ಅನಿಮೇಷನ್ ಕ್ರಮೇಣ ಅಪಾರದರ್ಶಕತೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ ಮತ್ತು ಚಿತ್ರವನ್ನು ಅದರ ಮೂಲ ಸ್ಥಾನಕ್ಕೆ ಚಲಿಸುತ್ತದೆ, ಸುಗಮವಾದ ಫೇಡ್-ಇನ್ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. `animation-range` ಚಿತ್ರದ ಮೇಲಿನ ಅಂಚು ವ್ಯೂಪೋರ್ಟ್‌ನೊಳಗೆ 25% ಪ್ರವೇಶಿಸಿದಾಗ ಅನಿಮೇಷನ್ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಮತ್ತು ಕೆಳಗಿನ ಅಂಚು 75% ಪ್ರವೇಶಿಸಿದಾಗ ಪೂರ್ಣಗೊಳ್ಳುತ್ತದೆ ಎಂದು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.

3. ಸ್ಟಿಕ್ಕಿ ಎಲಿಮೆಂಟ್‌ಗಳು

ಸ್ಕ್ರೋಲಿಂಗ್ ಸಮಯದಲ್ಲಿ ಎಲಿಮೆಂಟ್‌ಗಳು ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲ್ಭಾಗಕ್ಕೆ ಅಂಟಿಕೊಳ್ಳುವ "ಸ್ಟಿಕ್ಕಿ" ಪರಿಣಾಮಗಳನ್ನು ಸಾಧಿಸಿ - ಆದರೆ ವರ್ಧಿತ ನಿಯಂತ್ರಣ ಮತ್ತು ಪರಿವರ್ತನೆಗಳೊಂದಿಗೆ. ಬಳಕೆದಾರರು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್ ನಯವಾಗಿ ಚಿಕ್ಕ ಆವೃತ್ತಿಗೆ ರೂಪಾಂತರಗೊಳ್ಳುವುದನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ.

/*CSS*/
.sticky-container {
  height: 200px; /* ನಿಮ್ಮ ಅಗತ್ಯಗಳಿಗೆ ತಕ್ಕಂತೆ ಹೊಂದಿಸಿ */
  position: relative;
}

.sticky-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
  animation: stickyAnimation linear;
  animation-timeline: view();
  animation-range: entry 0% cover 20%; /* ಅಗತ್ಯವಿರುವಂತೆ ಶ್ರೇಣಿಯನ್ನು ಹೊಂದಿಸಿ */
  animation-fill-mode: both;
  z-index: 10;
}

@keyframes stickyAnimation {
  0% {
    position: absolute;
    top: 0;
  }
  100% {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ddd; /* ಅಂಟಿಕೊಳ್ಳುವಿಕೆಯನ್ನು ಸೂಚಿಸಲು ಬಣ್ಣ ಬದಲಾಯಿಸಿ */
  }
}

/* HTML */
<div class="sticky-container">
  <div class="sticky-element">My Sticky Element</div>
</div>

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಎಲಿಮೆಂಟ್ ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲಿನ 20% ಗೆ ಪ್ರವೇಶಿಸಿದಾಗ position: absolute ನಿಂದ position: fixed ಗೆ ಪರಿವರ್ತನೆಗೊಳ್ಳುತ್ತದೆ, ಇದು ನಯವಾದ "ಅಂಟಿಕೊಳ್ಳುವ" ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ನಡವಳಿಕೆಯನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಕೀಫ್ರೇಮ್‌ಗಳಲ್ಲಿ `animation-range` ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಹೊಂದಿಸಿ.

4. ಪ್ಯಾರಾಲಾಕ್ಸ್ ಸ್ಕ್ರೋಲಿಂಗ್ ಪರಿಣಾಮ

ಬಳಕೆದಾರರು ಸ್ಕ್ರಾಲ್ ಮಾಡಿದಾಗ ವಿಷಯದ ವಿವಿಧ ಪದರಗಳು ವಿಭಿನ್ನ ವೇಗದಲ್ಲಿ ಚಲಿಸುವ ಪ್ಯಾರಾಲಾಕ್ಸ್ ಸ್ಕ್ರೋಲಿಂಗ್ ಪರಿಣಾಮವನ್ನು ರಚಿಸಿ, ಪುಟಕ್ಕೆ ಆಳ ಮತ್ತು ದೃಶ್ಯ ಆಸಕ್ತಿಯನ್ನು ಸೇರಿಸುತ್ತದೆ.

/* CSS */
.parallax-container {
  position: relative;
  height: 500px; /* ನಿಮ್ಮ ಅಗತ್ಯಗಳಿಗೆ ತಕ್ಕಂತೆ ಹೊಂದಿಸಿ */
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.parallax-layer--bg {
  background-image: url("background.jpg");
  animation: parallaxBg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

.parallax-layer--fg {
 background-image: url("foreground.png");
  animation: parallaxFg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

@keyframes parallaxBg {
 to {
    transform: translateY(50px); /* ಪ್ಯಾರಾಲಾಕ್ಸ್ ವೇಗಕ್ಕಾಗಿ ಹೊಂದಿಸಿ */
 }
}

@keyframes parallaxFg {
 to {
   transform: translateY(100px); /* ಪ್ಯಾರಾಲಾಕ್ಸ್ ವೇಗಕ್ಕಾಗಿ ಹೊಂದಿಸಿ */
 }
}

/* HTML */
<div class="parallax-container">
  <div class="parallax-layer parallax-layer--bg"></div>
  <div class="parallax-layer parallax-layer--fg"></div>
</div>

ಈ ಉದಾಹರಣೆಯು ವಿಭಿನ್ನ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳೊಂದಿಗೆ ಎರಡು ಪದರಗಳನ್ನು ರಚಿಸುತ್ತದೆ. `parallaxBg` ಮತ್ತು `parallaxFg` ಅನಿಮೇಷನ್‌ಗಳು ಪದರಗಳನ್ನು ವಿಭಿನ್ನ ವೇಗದಲ್ಲಿ ಚಲಿಸುತ್ತವೆ, ಪ್ಯಾರಾಲಾಕ್ಸ್ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತವೆ. ಪ್ರತಿ ಪದರದ ವೇಗವನ್ನು ನಿಯಂತ್ರಿಸಲು ಕೀಫ್ರೇಮ್‌ಗಳಲ್ಲಿನ `translateY` ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿಸಿ.

5. ಟೆಕ್ಸ್ಟ್ ರಿವೀಲ್ ಅನಿಮೇಷನ್

ಬಳಕೆದಾರರು ಒಂದು ನಿರ್ದಿಷ್ಟ ಬಿಂದುವನ್ನು ದಾಟಿ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ ಅಕ್ಷರದಿಂದ ಅಕ್ಷರಕ್ಕೆ ಪಠ್ಯವನ್ನು ಬಹಿರಂಗಪಡಿಸಿ, ಗಮನ ಸೆಳೆಯಿರಿ ಮತ್ತು ವಿಷಯದ ಕಥೆ ಹೇಳುವ ಅಂಶವನ್ನು ಹೆಚ್ಚಿಸಿ.

/* CSS */
.text-reveal-container {
  position: relative;
  overflow: hidden;
}

.text-reveal {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: textRevealAnimation steps(1) forwards;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
  width: 0;
}

@keyframes textRevealAnimation {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="text-reveal-container">
  <span class="text-reveal">ನೀವು ಸ್ಕ್ರಾಲ್ ಮಾಡಿದಂತೆ ಈ ಪಠ್ಯವು ಬಹಿರಂಗಗೊಳ್ಳುತ್ತದೆ.</span>
</div>

ಈ ಉದಾಹರಣೆಯು ಪಠ್ಯವನ್ನು ಅಕ್ಷರದಿಂದ ಅಕ್ಷರಕ್ಕೆ ಬಹಿರಂಗಪಡಿಸಲು `steps(1)` ಟೈಮಿಂಗ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. `width: 0` ಆರಂಭದಲ್ಲಿ ಪಠ್ಯವನ್ನು ಮರೆಮಾಡುತ್ತದೆ, ಮತ್ತು `textRevealAnimation` ಕ್ರಮೇಣ ಅಗಲವನ್ನು ಹೆಚ್ಚಿಸಿ ಸಂಪೂರ್ಣ ಪಠ್ಯವನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಪಠ್ಯ ಬಹಿರಂಗಪಡಿಸುವ ಅನಿಮೇಷನ್ ಯಾವಾಗ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಮತ್ತು ಕೊನೆಗೊಳ್ಳುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸಲು `animation-range` ಅನ್ನು ಹೊಂದಿಸಿ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಪಾಲಿಫಿಲ್‌ಗಳು

ಸಿಎಸ್ಎಸ್ ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳು ತುಲನಾತ್ಮಕವಾಗಿ ಹೊಸ ತಂತ್ರಜ್ಞಾನವಾಗಿದೆ, ಮತ್ತು ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಇನ್ನೂ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ. 2023 ರ ಕೊನೆಯಲ್ಲಿ, ಕ್ರೋಮ್ ಮತ್ತು ಎಡ್ಜ್‌ನಂತಹ ಪ್ರಮುಖ ಬ್ರೌಸರ್‌ಗಳು ಉತ್ತಮ ಬೆಂಬಲವನ್ನು ನೀಡುತ್ತವೆ. ಫೈರ್‌ಫಾಕ್ಸ್ ಮತ್ತು ಸಫಾರಿ ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸಕ್ರಿಯವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿವೆ. ಉತ್ಪಾದನೆಯಲ್ಲಿ ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಮೊದಲು ಪ್ರಸ್ತುತ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ಪರಿಶೀಲಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಬೆಂಬಲ ಸ್ಥಿತಿಯನ್ನು ಪರಿಶೀಲಿಸಲು ನೀವು Can I use ನಂತಹ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಳಸಬಹುದು.

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

ಪ್ರವೇಶಿಸುವಿಕೆ ಪರಿಗಣನೆಗಳು

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

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

ಸಿಎಸ್ಎಸ್ ಸ್ಕ್ರಾಲ್ ಟೈಮ್‌ಲೈನ್‌ಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಲು ಕೆಲವು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಸಲಹೆಗಳು ಇಲ್ಲಿವೆ:

ಅನಿಮೇಷನ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವಾಗ, ಈ ಅಂಶಗಳನ್ನು ಮನಸ್ಸಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಿ:

ತೀರ್ಮಾನ

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

ಈ ರೋಮಾಂಚಕಾರಿ ಹೊಸ ತಂತ್ರಜ್ಞಾನವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಯೋಜನೆಗಳಿಗಾಗಿ ಸೃಜನಾತ್ಮಕ ಸಾಧ್ಯತೆಗಳ ಜಗತ್ತನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ. ವೆಬ್ ಅನಿಮೇಷನ್‌ನ ಭವಿಷ್ಯ ಇಲ್ಲಿದೆ, ಮತ್ತು ಅದು ಸ್ಕ್ರಾಲ್‌ನಿಂದ ಚಾಲಿತವಾಗಿದೆ!