ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದಾದ ಒಂದು ಸುತ್ತಿನ ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಎಚ್ಟಿಎಮ್ಎಲ್ ಕೋಡ್‌ನೊಂದಿಗೆ ನಾವು ಮುಂದುವರಿಯುತ್ತೇವೆ, ಅದನ್ನು ಉಳಿದವುಗಳಿಂದ ಬೇರ್ಪಡಿಸಲು ವಿಶೇಷ ಸ್ಪರ್ಶವನ್ನು ನೀಡುತ್ತದೆ. ನಾವು ಮಾಡಬಹುದಾದ + ಸಿ ನಿಯಂತ್ರಣ ಮತ್ತು + ವಿ ನಿಯಂತ್ರಣಕ್ಕೆ ಧನ್ಯವಾದಗಳು ನಮ್ಮ ಹ್ಯಾಂಡ್ ಕೋಡ್‌ನಲ್ಲಿ ಅದು ವೆಬ್ ಅನ್ನು ಸಿದ್ಧಗೊಳಿಸುತ್ತದೆ ಪರೀಕ್ಷೆಯಲ್ಲಿ ದಿನಗಳು ಅಥವಾ ವಾರಗಳನ್ನು ಕಳೆದ ನಂತರ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಪ್ರಕಟಿಸಲಾಗುವುದು.
ಎಚ್ಟಿಎಮ್ಎಲ್ ಮತ್ತು ಸಿಎಸ್ಎಸ್ನಲ್ಲಿ 27 ಸ್ಲೈಡರ್ಗಳ ಸಮಯ ಇದೀಗ, ಆ ಜಾಗವನ್ನು ತಯಾರಿಸಲು ನಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಇದರಲ್ಲಿ ನಾವು ಸಾಮಾನ್ಯವಾಗಿ ಕೆಲವು ಪಿಕ್ಸೆಲ್ಗಳಲ್ಲಿ ವರ್ಗೀಕರಿಸುತ್ತೇವೆ. ಈ ಸ್ಲೈಡರ್‌ಗಳು ಕಾರ್ಡ್‌ನಿಂದ ಹಿಡಿದು, ತುಲನಾತ್ಮಕ, ಪೂರ್ಣ ಪರದೆ, ಸ್ಪಂದಿಸುವ ಮತ್ತು ಸರಳವಾದ, ಆದರೆ ಅದೇ ಸಮಯದಲ್ಲಿ ತುಂಬಾ ಸೊಗಸಾದ. ನಾವು 27 ಸ್ಲೈಡರ್‌ಗಳೊಂದಿಗೆ ಹೋಗುತ್ತಿದ್ದೇವೆ ಅದು ಯಾರನ್ನೂ ಅಸಡ್ಡೆ ಬಿಡುವುದಿಲ್ಲ, ಅದರಲ್ಲೂ ವಿಶೇಷವಾಗಿ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಮೂಲಕ ವಿಷಯವನ್ನು ಓದಲು, ಉತ್ಪನ್ನವನ್ನು ಖರೀದಿಸಲು ಅಥವಾ ಚಿತ್ರವನ್ನು ಮೊದಲು ಮತ್ತು ನಂತರ ಹೋಲಿಸಲು ತುಲನಾತ್ಮಕ ಸ್ಲೈಡರ್ ಅನ್ನು ಬಳಸುವ ಗ್ರಾಹಕರು ಅಥವಾ ಬಳಕೆದಾರರು.
ಕಾರ್ಡ್‌ಗಳಲ್ಲಿ ಪರದೆಗಳು
HTML ಮತ್ತು CSS ನಲ್ಲಿ ವ್ಯವಹರಿಸುವ ಅತ್ಯಂತ ಅರ್ಥಗರ್ಭಿತ ಸ್ಲೈಡರ್ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ಗೆ ಸರಣಿ ಕಾರ್ಡ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ ಉತ್ತಮ ಶೈಲಿಯೊಂದಿಗೆ ಅನಿಮೇಷನ್‌ನೊಂದಿಗೆ ಒಂದರಿಂದ ಇನ್ನೊಂದಕ್ಕೆ ರವಾನಿಸಲಾಗುತ್ತದೆ. ಇದು ನಿಖರವಾಗಿ ಅನಿಮೇಷನ್ ಮತ್ತು ಹಿನ್ನೆಲೆ ಗ್ರೇಡಿಯಂಟ್ ಆಗಿದ್ದು, ಈ HTML ಮತ್ತು CSS ಕೋಡ್‌ಗೆ ಈ ಸೂಕ್ಷ್ಮ ಸ್ಪರ್ಶವನ್ನು ನೀಡುತ್ತದೆ, ಅದು ಸ್ವಲ್ಪ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗೂ ಸಹ ನಿಲ್ಲುತ್ತದೆ. ಈ ಗುಣಮಟ್ಟದ ಸ್ಲೈಡರ್ ಅನ್ನು ಚಿತ್ರಿಸಲು ಸೊಗಸಾದ ಪದವಾಗಿದೆ.
ಮಾಹಿತಿ ಕಾರ್ಡ್ ಸ್ಲೈಡರ್
ಈ ಮಾಹಿತಿ ಕಾರ್ಡ್ ಸ್ಲೈಡರ್ HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿಯೂ ಕೋಡ್ ಆಗಿದೆ. ಇದು ಸುಮಾರು ಕಾರ್ಡ್‌ಗಳ ಸರಣಿ ಅದು ಅನಿಮೇಷನ್‌ಗೆ ಹೆಚ್ಚಿನ ಗಮನವನ್ನು ಸೆಳೆಯುವುದಿಲ್ಲ, ಆದರೂ ಅದರ ಸರಳತೆಯು ಅದರ ದೊಡ್ಡ ಮೌಲ್ಯವಾಗಿದೆ. ಈ ಪಟ್ಟಿಯಿಂದ ಪರಿಗಣಿಸಬೇಕಾದ ಮತ್ತೊಂದು ಸ್ಲೈಡರ್.
ತುಲನಾತ್ಮಕ ಚಿತ್ರ ಸ್ಲೈಡರ್
ಈ ಸ್ಲೈಡರ್ ಆಗಿದೆ ಉತ್ತಮ ಉಪಯುಕ್ತತೆ ಮತ್ತು ಖಂಡಿತವಾಗಿಯೂ ನೀವು ಅದನ್ನು ಬಹುಸಂಖ್ಯೆಯ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ನೋಡಿದ್ದೀರಿ, ಅಲ್ಲಿ ಫೋಟೋಗಳನ್ನು ಮೊದಲು ಮತ್ತು ನಂತರ ಲಂಬ ಪಟ್ಟಿಯೊಂದಿಗೆ ಹೋಲಿಸಲಾಗುತ್ತದೆ ಅದು ಅಡ್ಡಲಾಗಿ ಜಾರುತ್ತದೆ. ಹೋಲಿಕೆಗಳಿಗೆ ಇದು ಉತ್ತಮ ಸಹಾಯವಾಗಿದೆ, ಆದ್ದರಿಂದ ನಾವು ಇದನ್ನು ಈ ಸ್ಲೈಡರ್ಗಳ ಪಟ್ಟಿಯಲ್ಲಿ ಅತ್ಯಗತ್ಯವಾಗಿ ಮಾಡಿದ್ದೇವೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲದೆ ತುಲನಾತ್ಮಕ ಸ್ಲೈಡರ್
ಈ ಸ್ಲೈಡರ್ನ ಉತ್ತಮ ಗುಣಮಟ್ಟವೆಂದರೆ ಅದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲದೆ ಬರುತ್ತದೆ, ಆದ್ದರಿಂದ ನೀವು ಇನ್ನೊಂದು ಹೋಲಿಕೆ ಹೊಂದಲು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ CSS ಮತ್ತು HTML ಕೋಡ್ ಅನ್ನು ಮಾತ್ರ ಕಾರ್ಯಗತಗೊಳಿಸಬೇಕಾಗುತ್ತದೆ. ಚಿತ್ರದ ಹೋಲಿಕೆಯನ್ನು ನೋಡಲು ನೀವು ಚಿತ್ರದ ಕೆಳಭಾಗದಲ್ಲಿರುವ ಕಪ್ಪು ಪೆಟ್ಟಿಗೆಯನ್ನು ಒಂದು ಬದಿಯಿಂದ ಇನ್ನೊಂದು ಬದಿಗೆ ಸ್ಲೈಡ್ ಮಾಡಲು ಬಳಸಬೇಕಾಗುತ್ತದೆ. ಹಿಂದಿನಂತೆ ಅರ್ಥಗರ್ಭಿತವಲ್ಲ, ಆದರೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲದೆ ತುಂಬಾ ಉಪಯುಕ್ತವಾಗಿದೆ.
ಮೂರು-ಪದರದ ತುಲನಾತ್ಮಕ ಚಿತ್ರ ಸ್ಲೈಡರ್
ಅದರ ಹೆಸರು ಎಲ್ಲವನ್ನೂ ಹೇಳುತ್ತದೆ, ಅದು ಇಮೇಜ್ ಸ್ಲೈಡರ್ ಒಂದು ಸಮಯದಲ್ಲಿ ಮೂರು ವರೆಗೆ ಹೋಲಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ನೀಡಿರುವ ಉದಾಹರಣೆಯೆಂದರೆ ಪ್ರೊಫೈಲ್‌ನಲ್ಲಿ ತಲೆ ನೋಡಲು, ಇನ್ನೊಂದು ಸ್ನಾಯುಗಳನ್ನು ತೋರಿಸಲು ಮತ್ತು ಎಲುಬುಗಳನ್ನು ನೋಡಲು ಮತ್ತೊಂದು ಸ್ಲೈಡರ್. ಇದು ಅದರ ಕಾರ್ಯಾಚರಣೆಗಾಗಿ HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ.
ವೆನಿಲ್ಲಾ ಜೆಎಸ್ ಇಮೇಜ್ ಸ್ಲೈಡರ್
ಮತ್ತೊಂದು ತುಲನಾತ್ಮಕ ಇಮೇಜ್ ಸ್ಲೈಡರ್ ದೊಡ್ಡ ಗುಂಡಿಯೊಂದಿಗೆ ಅದರೊಂದಿಗೆ ಚಿತ್ರವನ್ನು ಒಂದು ಬದಿಯಿಂದ ಇನ್ನೊಂದಕ್ಕೆ ಸ್ಲೈಡ್ ಮಾಡುವುದು. ಕನಿಷ್ಠ, ಕಡಿಮೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಉತ್ತಮ ದೃಶ್ಯ ಮುಕ್ತಾಯದೊಂದಿಗೆ. ಚಿತ್ರಗಳನ್ನು ಹೋಲಿಸಲು ಅತ್ಯಂತ ಗಮನಾರ್ಹವಾದದ್ದು.
ಪರದೆಯನ್ನು ಕರ್ಣೀಯವಾಗಿ ವಿಭಜಿಸಿ
ಈ ತುಲನಾತ್ಮಕ ಚಿತ್ರ ಸ್ಲೈಡರ್ ಇದನ್ನು ಎನ್ವಾಟೋ ಟಟ್ಸ್ ರಚಿಸಿದ್ದಾರೆ ಮತ್ತು ಎರಡು ಚಿತ್ರಗಳನ್ನು ಹೋಲಿಸುವಾಗ ಸ್ಲೈಡರ್ ಕರ್ಣೀಯವಾಗಿ ಇತರ ರೀತಿಯ ಸಂವೇದನೆಗಳನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ ಎಂಬ ವ್ಯತ್ಯಾಸವನ್ನು ಹೊಂದಿದೆ. ಇದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಎಚ್ಟಿಎಮ್ಎಲ್ ಅನ್ನು ಉತ್ತಮ ಗುಣಮಟ್ಟದ ತುಲನಾತ್ಮಕ ಸ್ಲೈಡರ್ ಆಗಿ ಬಳಸುತ್ತದೆ.
ಪೂರ್ಣ ಪರದೆ ಸ್ಲೈಡರ್
ನಾವು ಭೇಟಿಯಾಗಲು ಪೂರ್ಣ ಪರದೆಯ ಸ್ಲೈಡರ್ಗಳ ಭಾಗಕ್ಕೆ ಬಂದಿದ್ದೇವೆ ಸ್ಲೈಡರ್ ಪರಿವರ್ತನೆಯು ಪರಿವರ್ತನೆಯಿಂದ ನಿರೂಪಿಸಲ್ಪಟ್ಟಿದೆ ಉತ್ತಮ ಪರಿಣಾಮದ ಅನಿಮೇಷನ್ ಮೂಲಕ ನಡೆಸಲಾಗುತ್ತದೆ. ನೀವು ಚಿತ್ರಗಳನ್ನು ಪೂರ್ಣ ಪರದೆಯಲ್ಲಿ ತೋರಿಸಲು ಯೋಜಿಸುತ್ತಿದ್ದರೆ ಮತ್ತು ನೀವು ಬಹಳ ಎಚ್ಚರಿಕೆಯಿಂದ ಹಾದುಹೋಗುತ್ತಿದ್ದರೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಕೋಡ್ ಮಾಡಿ.
ಭ್ರಂಶದೊಂದಿಗೆ ಅಡ್ಡ ಸ್ಲೈಡರ್
ಫಾರ್ ಭ್ರಂಶದ ಅಭಿಮಾನಿಗಳು ಈ ಸ್ಲೈಡರ್ ಅನ್ನು ಪರಿಣಾಮ ಬೀರುತ್ತಾರೆ Swiper.js, HTML ಮತ್ತು CSS ನೊಂದಿಗೆ. ಪ್ರತಿ ಬದಿಯಲ್ಲಿರುವ ಎರಡು ಗುಂಡಿಗಳೊಂದಿಗೆ ಸ್ಲೈಡ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗುವುದರ ಹೊರತಾಗಿ, ಬಲಭಾಗದಲ್ಲಿ ನಾವು ಸಂಪೂರ್ಣ ಏರಿಳಿಕೆಗಳ ಎಲ್ಲಾ ಚಿತ್ರಗಳನ್ನು ಚಿಕಣಿ ಹೊಂದಿದ್ದೇವೆ. ವಿಭಿನ್ನ ಮತ್ತು ಉತ್ತಮ ಗುಣಮಟ್ಟದ ದೃಶ್ಯ ಸ್ಲೈಡರ್ ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ಗೆ ಭೇಟಿ ನೀಡುವ ಯಾರನ್ನೂ ಅಸಡ್ಡೆ ಬಿಡುವುದಿಲ್ಲ.
ಸುಗಮ 3D ದೃಷ್ಟಿಕೋನ ಸ್ಲೈಡರ್
ಅದು ಸ್ಪಂದಿಸುವ ಸ್ಲೈಡರ್ ಪಾಯಿಂಟರ್ ಚಲನೆಯನ್ನು ಅನುಸರಿಸಿ ಇಲಿ. ಇದು ಸಂದರ್ಶಕರಲ್ಲಿ ಮಿಶ್ರ ಭಾವನೆಗಳಿಗೆ ಕಾರಣವಾಗುವ ದೃಷ್ಟಿಕೋನದ ಉತ್ತಮ ಪರಿಣಾಮವನ್ನು ಉಂಟುಮಾಡುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಹೊಂದಿದೆ. ಅದನ್ನು ಸರಿಯಾಗಿ ಬಳಸುವುದು ನಿಮಗೆ ತಿಳಿದಿದ್ದರೆ, ನೀವು ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ಗೆ ಆ ಮೂಲ ಮತ್ತು ಸೂಕ್ಷ್ಮ ಸ್ಪರ್ಶವನ್ನು ನೀಡಬಹುದು. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಎಚ್ಟಿಎಮ್ಎಲ್ ಕೋಡ್ ಕಾಣೆಯಾಗಿಲ್ಲ.
ಹೀರೋ ಪೂರ್ಣ ಪರದೆ ಸ್ಲೈಡರ್
ಎಚ್ಟಿಎಮ್ಎಲ್, ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಪೂರ್ಣ ಸ್ಕ್ರೀನ್ ಹೀರೋ ಇಮೇಜ್ ಸ್ಲೈಡರ್. ಒಂದು ಪ್ರತಿ ಅನಿಮೇಷನ್‌ನಲ್ಲಿ ಬೌನ್ಸ್ ಪರಿಣಾಮ ಅದು ಅದನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ಸಾಮಾನ್ಯವಾಗಿ ನಾವು ಉಳಿದ ಪಟ್ಟಿಯಂತೆ ಗುಣಮಟ್ಟದ ಪೂರ್ಣ ಪರದೆ ಸ್ಲೈಡರ್ ಅನ್ನು ಎದುರಿಸುತ್ತಿದ್ದೇವೆ.
ಗಡಿಗಳೊಂದಿಗೆ VELO.JS ಸ್ಲೈಡರ್
ಸರಳವಾದ ಅದ್ಭುತ ಪರಿವರ್ತನೆ ಅನಿಮೇಶನ್‌ನೊಂದಿಗೆ ಪೂರ್ಣ ಪರದೆಯ ಸ್ಲೈಡರ್‌ನಂತೆ ಸ್ಟ್ಯಾಂಡ್‌ outs ಟ್‌ಗಳಲ್ಲಿ ಒಂದು. ವೆಬ್‌ನಲ್ಲಿ ಅದನ್ನು ಹೇಗೆ ಕಾರ್ಯಗತಗೊಳಿಸಬೇಕು ಎಂಬುದರ ಕುರಿತು ಯೋಚಿಸಲು ಪ್ರಾರಂಭಿಸಲು ನೀವು ಅದನ್ನು ಕಾರ್ಯಾಚರಣೆಯಲ್ಲಿ ನೋಡಲು ಹೋಗಬೇಕೆಂದು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ. ವೇಗ ಪರಿಣಾಮಗಳನ್ನು ಬಳಸಿ ಬಾಣದ ಗುಂಡಿಗಳನ್ನು ಬಳಸುವ ಆ ಅನಿಮೇಷನ್ ಅನ್ನು ಸುಧಾರಿಸಲು, ನ್ಯಾವಿಗೇಷನ್ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಸ್ಕ್ರೋಲಿಂಗ್ ಸಹ ಸರಳವಾಗಿ ಪರಿಪೂರ್ಣವಾಗಿದೆ.
ಥಂಬ್‌ನೇಲ್‌ಗಳೊಂದಿಗೆ ರೆಸ್ಪಾನ್ಸಿವ್ ಸಿಎಸ್ಎಸ್ ಲಂಬ ಸ್ಲೈಡರ್
ನಾವು ಸ್ಲೈಡರ್ಗಳಿಗೆ ಹೋಗುತ್ತೇವೆ ಮೊಬೈಲ್ಗಾಗಿ ರೆಸ್ಪಾನ್ಸಿವ್ ಸಿಎಸ್ಎಸ್ ಈ ರೀತಿಯ ಉತ್ತಮ ಗುಣಮಟ್ಟ. ನೀವು ಬಲಭಾಗದಲ್ಲಿ ಥಂಬ್‌ನೇಲ್‌ಗಳ ಸರಣಿಯನ್ನು ಹೊಂದಿರುತ್ತೀರಿ ಅದು ಒತ್ತಿದಾಗ ಲಂಬವಾಗಿ ಬೀಳುವ ಅನಿಮೇಷನ್ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ಈ ಪಟ್ಟಿಯ ಅತ್ಯುತ್ತಮವಾದ ಸ್ಲೈಡರ್ ಅನ್ನು ಬಿಡಲು ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಮಾತ್ರ ಬಳಸುವ ಉತ್ತಮ ಪರಿಣಾಮ.
ಚಿತ್ರ ಸ್ಲೈಡರ್ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್
ಇತರೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನೊಂದಿಗೆ ಮಾಡಿದ ರೆಸ್ಪಾನ್ಸಿವ್ ಇಮೇಜ್ ಸ್ಲೈಡರ್ ಮತ್ತು ಸಾಕಷ್ಟು ಸೊಗಸಾಗಿರುವುದು ಸರಳಕ್ಕಿಂತ ಹೆಚ್ಚು. ಇದಕ್ಕಿಂತ ಹೆಚ್ಚೇನೂ ಇಲ್ಲದ ಸಣ್ಣ, ಸರಳ ಮತ್ತು ಕನಿಷ್ಠ. ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಸ್ಲೈಡರ್ಗಳ ಈ ಪಟ್ಟಿಯಲ್ಲಿ ಇದು ತನ್ನ ಸ್ಥಾನವನ್ನು ಹೊಂದಿದೆ.
ಎಸ್‌ವಿಜಿ ಫಿಲ್ಟರ್‌ಗಳೊಂದಿಗೆ ಚಲನೆಯ ಮಸುಕು
ಇದರ ಪರಿಣಾಮವನ್ನು ಅನುಕರಿಸುವ ಪ್ರಯೋಗ ಚಲನೆಯು ಪ್ರತಿ ಬಾರಿ ಸ್ಲೈಡ್ ಅನ್ನು ಮಸುಕುಗೊಳಿಸುತ್ತದೆ ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ. ಇದು ಎಸ್‌ವಿಜಿ ಗೌಸಿಯನ್ ಮಸುಕು ಫಿಲ್ಟರ್ ಮತ್ತು ಕೆಲವು ಸಿಎಸ್ಎಸ್ ಆನಿಮೇಷನ್ ಕೀಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಬಳಸಲಾದ ಕೋಡ್ ಸಂಪೂರ್ಣವಾಗಿ ಕೊಟ್ಟಿರುವ ಉದಾಹರಣೆ ಮತ್ತು ಸ್ಲೈಡರ್ನ ಕ್ರಿಯಾತ್ಮಕತೆಗೆ ಮಾತ್ರ.
ಅನಿಮೇಟೆಡ್ ಸ್ಲೈಡರ್
ಅನಿಮೇಟೆಡ್ ಸ್ಲೈಡರ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, HTML ಮತ್ತು CSS ನೊಂದಿಗೆ ಸ್ಪಂದಿಸುತ್ತದೆ. ನಮ್ಮಲ್ಲಿ ಬಲಭಾಗದಲ್ಲಿ ಬಾಣಗಳಿವೆ, ಅದು ಆಕರ್ಷಕ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ಅನಿಮೇಶನ್‌ನೊಂದಿಗೆ ಹುಟ್ಟುವ ಚಿತ್ರಗಳ ಮೂಲಕ ಹೋಗಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಸ್ಲೈಡ್‌ಗಳಲ್ಲಿ ಸ್ವತಃ ಎದ್ದು ಕಾಣುವಂತೆ ಮಾಡಲು ಉತ್ತಮ ಪರಿಣಾಮ. ಅನಿಮೇಷನ್ಗಳಲ್ಲಿ ಬಹಳ ಪ್ರಸ್ತುತ.
ಎಸ್‌ವಿಜಿ ಮಾದರಿಗಳೊಂದಿಗೆ ಚಿತ್ರ ಸ್ಲೈಡರ್
ಪ್ರಯತ್ನಿಸುವ ಆ ಪ್ರಯೋಗಗಳಲ್ಲಿ ಇನ್ನೊಂದು svg ಮಾದರಿಗಳನ್ನು ಒಯ್ಯಿರಿ ಸಿಎಸ್ಎಸ್ ಸ್ಲೈಡರ್ಗಾಗಿ ಕೆಲವು ಮುಖವಾಡ ಚಿತ್ರಗಳನ್ನು ರಚಿಸಲು. ಇದು ಉತ್ತಮ ಫಿನಿಶ್ನೊಂದಿಗೆ ಬಹಳ ಗಮನಾರ್ಹವಾದ ಮಸುಕು ಪರಿಣಾಮವನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ. ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಸಂದರ್ಶಕರಲ್ಲಿ ಉತ್ತಮ ಭಾವನೆಗಳನ್ನು ಉಂಟುಮಾಡಲು ಆ ಸ್ಲೈಡರ್ಗಳಲ್ಲಿ ಮತ್ತೊಂದು.
ಸರಳ ಲೇಯರ್ ಸ್ಲೈಡರ್
ಒಂದಕ್ಕಿಂತ ಹೆಚ್ಚಿನದನ್ನು ಹೊಂದಿರುವ ಸ್ಲೈಡರ್ ವಿಶಿಷ್ಟ ಅನಿಮೇಷನ್ ಹೊಸ ಚಿತ್ರವನ್ನು ಸ್ಲೈಡ್ ಮಾಡಲು ನಾವು ಪ್ರತಿ ಬಾರಿ ಐಕಾನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅದು ಆ ತರಂಗ ಪರಿಣಾಮವನ್ನು ನೀಡುತ್ತದೆ. ಎಚ್ಟಿಎಮ್ಎಲ್, ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಮುಗಿದಿದೆ ಇದು ಮತ್ತೊಂದು ಇಮೇಜ್ ಸ್ಲೈಡರ್ ಆಗುತ್ತದೆ.
ಶುದ್ಧ ಸಿಎಸ್ಎಸ್ ಸ್ಲೈಡರ್
ಸರಳವಾದ ಸ್ಲೈಡರ್ಗಳಲ್ಲಿ ಮತ್ತೊಂದು ಮತ್ತು ಅದು ಶುದ್ಧ ಸಿಎಸ್ಎಸ್ ಆಗಿದೆ. ಹಾಕಲು ಅದರ ಅನುಕೂಲಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ ಕೆಳಗೆ ಚುಕ್ಕೆಗಳ ಸರಣಿಯನ್ನು ಬಿಟ್ಟಿದೆ ಯಾವುದೇ ವಿಶೇಷ ಅನಿಮೇಷನ್ ಇಲ್ಲದೆ ನಮ್ಮ ಮುಂದೆ ಹಾದುಹೋಗುವ ಪ್ರತಿಯೊಂದು ಚಿತ್ರಗಳನ್ನು ತಲುಪಲು ಅದು ಗುಂಡಿಗಳಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
ಕೇಕುಗಳಿವೆ ಕೇವಲ ಸಿಎಸ್ಎಸ್ ಸ್ಲೈಡರ್
El ಪಟ್ಟಿಯಲ್ಲಿ ಸ್ವೀಟೆಸ್ಟ್ ಸ್ಲೈಡರ್ ಮತ್ತು ಅದು CSS ಮತ್ತು HTML ನಲ್ಲಿ ಮಾತ್ರ. ಕಪ್‌ಕೇಕ್‌ಗಳ ವಿಭಿನ್ನ ಮಾರ್ಪಾಡುಗಳನ್ನು ಬಲಭಾಗದಲ್ಲಿ ಹೊಂದಲು ಇದು ಇಡೀ ಪಟ್ಟಿಯ ಅತ್ಯಂತ ವಿಶೇಷವಾದದ್ದು. ಒಂದನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಕಪ್ಕೇಕ್ ಅದ್ಭುತ ಅನಿಮೇಷನ್‌ನೊಂದಿಗೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ, ಅದು ಉತ್ತಮ ಬೌನ್ಸ್ ಪರಿಣಾಮದಲ್ಲಿ ಕೊನೆಗೊಳ್ಳುತ್ತದೆ. ನಿಸ್ಸಂದೇಹವಾಗಿ ಅತ್ಯುತ್ತಮವಾದದ್ದು.
ಸ್ಲೈಡರ್ ಅನಿಮೇಷನ್ ಪರಿಣಾಮ
ಅನಿಮೇಷನ್ ಮತ್ತು ಯಾವುದರಲ್ಲಿ ಅತ್ಯಂತ ಸೊಗಸಾದ ಸ್ಲೈಡರ್ಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ ಮೊದಲ ಬದಲಾವಣೆಯಲ್ಲಿ ನಮ್ಮನ್ನು ವಿಸ್ಮಯಗೊಳಿಸುತ್ತದೆ. ಅನಿಮೇಷನ್ ಉದ್ಭವಿಸಿದ ಮೊದಲ ಕ್ಷಣದಿಂದ, ಅದರ HTML, CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ನಮಗೆ ಆಶ್ಚರ್ಯವನ್ನುಂಟು ಮಾಡುತ್ತದೆ. ಅದು ನೀಡುವ ಕನಿಷ್ಠ ಸ್ಪರ್ಶದಲ್ಲಿ ಅತ್ಯುತ್ತಮವಾದದ್ದು.
ಸ್ಲೈಡರ್ ಸ್ಲೈಸ್
Un ಸರಳ ಆಡ್ ವರ್ಗವನ್ನು ಬಳಸುವ ಪರಿವರ್ತನೆ ಸ್ಲೈಡರ್ ಮತ್ತು ಈ ಪಟ್ಟಿಯಲ್ಲಿ ಮೆಚ್ಚಿನವುಗಳಲ್ಲಿ ಒಂದಾಗಲು ಇದು ತುಂಬಾ ನಯವಾದ ಅನಿಮೇಷನ್‌ಗಳಿಂದ ನಿರೂಪಿಸಲ್ಪಟ್ಟಿದೆ. ವೆಬ್‌ನ ಮೊಬೈಲ್ ಆವೃತ್ತಿಯಲ್ಲಿ ನಿಮ್ಮನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ನೀವು ಬಯಸಿದರೆ, ಅದು ಅತ್ಯಗತ್ಯ. ದೃಷ್ಟಿಗೆ ದೊಡ್ಡದು.
ಸ್ಲೈಡರ್ ಭ್ರಂಶ ನ್ಯೂಯಾರ್ಕ್
ಇದರ ದೊಡ್ಡ ಅನುಕೂಲವೆಂದರೆ ಸಿಎಸ್ಎಸ್ನಲ್ಲಿ ಭ್ರಂಶ ಸ್ಲೈಡರ್ ಅದನ್ನು ಸಾಕಷ್ಟು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು. ಇದರರ್ಥ ನೀವು ಫಾಂಟ್, ಅದರ ಗಾತ್ರ, ಅದರ ಬಣ್ಣ ಮತ್ತು ಅನಿಮೇಷನ್ ವೇಗವನ್ನು ಬದಲಾಯಿಸಬಹುದು. ಹೊಸ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅರೇ ಸ್ಟ್ರಿಂಗ್‌ನಲ್ಲಿ ಪ್ರತಿ ನಗರದ ಮೊದಲ ಅಕ್ಷರ ಹೊಸ ಸ್ಲೈಡ್‌ನಲ್ಲಿ ಗೋಚರಿಸುತ್ತದೆ. ಈ ಪೋಸ್ಟ್‌ನ ಮತ್ತೊಂದು ಅಮೂಲ್ಯವಾದ ಸ್ಲೈಡರ್‌ಗಳು.
ಸ್ಲೈಡರ್ ಪಾಪ್ out ಟ್
ಎ ಈ ಸ್ಲೈಡರ್ ಅನ್ನು ಕನಿಷ್ಠ ಶೈಲಿಯಲ್ಲಿ ಪ್ರಸ್ತುತಪಡಿಸಲಾಗಿದೆ ಇದರಲ್ಲಿ ಚಿತ್ರದ ಪ್ರತಿಯೊಂದು ಭಾಗವು ಪ್ರತಿ ಸ್ಲೈಡ್‌ನೊಂದಿಗೆ ಹೊರಬರುತ್ತದೆ. ಸ್ಲೈಡರ್ಗಳ ಪಟ್ಟಿಯಲ್ಲಿ ಕಂಡುಬರುವದಕ್ಕಿಂತ ಹೆಚ್ಚು ಸೃಜನಶೀಲ ಮತ್ತು ಭಿನ್ನವಾಗಿದೆ ಮತ್ತು ಅದು ತನ್ನದೇ ಆದ ಸ್ಥಾನದಲ್ಲಿದೆ.
ಏರಿಳಿತದ ಪರಿಣಾಮದೊಂದಿಗೆ ಸ್ಲೈಡರ್
Un ಉನ್ನತ-ಪರಿಣಾಮದ ಪೂರ್ಣ-ಪರದೆ ಸ್ಲೈಡರ್ ಅದರ ಎಲ್ಲಾ ರಸವನ್ನು ಪಡೆಯಲು ಚಪ್ಪಟೆ ಬಣ್ಣಗಳೊಂದಿಗೆ. ಕಣ್ಣಿಗೆ ಕಟ್ಟುವ ಪರಿಣಾಮವನ್ನು ಹೊಂದಿರುವ ಮತ್ತೊಂದು ಸ್ಲೈಡರ್ಗಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, HTML ಮತ್ತು CSS.
ಚಿತ್ರ ಪೂರ್ವವೀಕ್ಷಣೆಯೊಂದಿಗೆ ಸ್ಲೈಡರ್
ಸ್ಲೈಡರ್ ಮುಂದಿನ ಸ್ಲೈಡ್‌ಗಳ ಪೂರ್ವವೀಕ್ಷಣೆಯೊಂದಿಗೆ ಜಿಎಸ್‌ಎಪಿ ಅದನ್ನು ಬಳಕೆದಾರರಿಗೆ ಪ್ರಸ್ತುತಪಡಿಸಲಾಗುತ್ತದೆ. ಫ್ಯಾಷನ್ ಅಥವಾ ವಿನ್ಯಾಸ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಮಾಡೆಲಿಂಗ್‌ಗೆ ಸೂಕ್ತವಾಗಿದೆ.
ಸ್ಲೈಡರ್ ಪರಿವರ್ತನೆಗಳು
ನಾವು ಪಟ್ಟಿಯನ್ನು a ನೊಂದಿಗೆ ಕೊನೆಗೊಳಿಸುತ್ತೇವೆ ಬಾಂಬ್ಯಾಸ್ಟಿಕ್ ಪರಿಣಾಮದೊಂದಿಗೆ ಉತ್ತಮ-ಗುಣಮಟ್ಟದ ಸ್ಲೈಡರ್ ಮತ್ತು ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ವಿಶೇಷ ಸ್ಪರ್ಶವನ್ನು ಪಡೆಯುವ ಅನಿಮೇಷನ್‌ಗಳ ಸರಣಿ. ಭ್ರಂಶ ಪರಿಣಾಮವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು.
ಇದನ್ನು ತಪ್ಪಿಸಬೇಡಿ ಮತ್ತೊಂದು ಸಿಎಸ್ಎಸ್ ಕೋಡ್ ಪಟ್ಟಿ ಗುಂಡಿಗಳಿಗಾಗಿ.
ಈ ಪೋಸ್ಟ್ ತುಂಬಾ ಚೆನ್ನಾಗಿದೆ, ಹಂಚಿಕೊಂಡಿದ್ದಕ್ಕಾಗಿ ತುಂಬಾ ಧನ್ಯವಾದಗಳು. ನೇರವಾಗಿ ತಡೆರಹಿತವಾಗಿ ಮೆಚ್ಚಿನವುಗಳಿಗೆ ಹೋಗುತ್ತದೆ.
ಶುಭಾಶಯಗಳು ಗೆಳೆಯ.