На выходных, просматривая Instagram, я заметил, что посты встали на свои места. Этот эффект сразу привлек мое внимание, и я начал думать, насколько он будет полезен в конкретных ситуациях. Например, если бы я мог привязать прокрутку к определенному порту просмотра, я мог бы в полной мере использовать порт просмотра для анимации.
Когда я впервые попытался это сделать, я подумал, что мне нужно будет использовать Javascript. Я подумал о том, чтобы добавить прослушиватель событий при прокрутке и, возможно, создать эффект плавной прокрутки, который будет привязываться к тегу привязки. Хотя это решение определенно может работать, существует гораздо более простое решение, использующее только CSS. Чтобы реализовать это, мы будем использовать свойство CSS, называемое привязкой прокрутки. Вы можете прочитать больше об этом здесь".
Код шаблона
Прежде чем мы начнем, скопируйте HTML и CSS-код этого шаблона. Ниже вы сможете увидеть GIF того, что выводит этот код.
Добавляем эффект привязки
Теперь, когда у нас есть код шаблона, мы можем добавить следующие свойства CSS, чтобы создать эффект привязки. В этом примере эффект привязки I будет работать вертикально и будет автоматически привязываться при прокрутке.
После добавления этих свойств CSS эффект прокрутки должен выглядеть следующим образом.
Теперь, когда мы создали эффект привязки, я рекомендую вам ознакомиться с документацией, чтобы узнать, какие другие функции доступны и как они работают. Документация предлагает несколько очень простых примеров, а также описания многих других свойств привязки, которые я здесь не рассматривал.
До скорого. Удачного кодирования!
