Автор оригинала: LAU TIAM KOK.
Как веб-разработчик, вам было бы попросить сделать параллакс В какой-то момент и много плагинов вы можете выбрать. Проблема с этими плагинами заключается в том, что некоторые из них не обновляются в течение многих лет, вы можете сделать некоторые исследования, прежде чем учитывать любой из них.
Если вы не хотите попасть в устаревшую «ловушку», эта статья показывает, как вы можете создать простое решение с CSS3 и jQuery. С CSS3 Фон-размер: крышка и Фоновое крепление: фиксированное Мы можем создать чистый CSS Pseudo ‘Parallax для Пример и пример из W3Schools Отказ
Я называю их «псевдо» параллакс, потому что они не совсем правильно, как Фон это Исправлено Когда вы прокрутите вверх и вниз по странице. Чтобы получить правильный эффект параллакса, Фон следует двигаться по разной скорости, когда передний план движется. Есть методика с CSS трансформировать Для достижения чистого CSS Parallax, посмотрите на это Учебное пособие Отказ Но мне трудно управлять макетом с этой техникой, поэтому мое решение – использовать JavaScript, чтобы помочь мне сделать Два вещи, чтобы сделать этот параллакс.
- Чтобы проверить, находится ли элемент в просмотре:
function isInViewport(node) {
var rect = node.getBoundingClientRect()
return (
(rect.height > 0 || rect.width > 0) &&
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth || document.documentElement.clientWidth)
)
}
- Для расчета соотношения прокрутки каждого элемента.
$(window).scroll(function() {
var scrolled = $(window).scrollTop()
$('.parallax').each(function(index, element) {
var initY = $(this).offset().top
var height = $(this).height()
var endY = initY + $(this).height()
// Check if the element is in the viewport.
var visible = isInViewport(this)
if(visible) {
var diff = scrolled - initY
var ratio = Math.round((diff / height) * 100)
$(this).css('background-position','center ' + parseInt(-(ratio * 1.5)) + 'px')
}
})
})
Заключение
Результатом является просто простой параллакс, и у вас больше контроля над кодом и макетом. Вы можете посмотреть, как это работает здесь Отказ Вы можете скачать работу образец выше на Github. Дайте мне знать, что вы думаете, и какие бы ваши решения были бы вашими решениями. Все предложения, пожалуйста, оставьте комментарий ниже. Надеюсь это поможет.