Параллакс-эффект с переходом CSS

Можно ли сделать эффект параллакса фонового изображения с помощью css-переходов? Параллакс должен быть медленнее, чем прокрутка, поэтому требуется замедление - возможно ли это сделать с помощью css? Или, если нет, как лучше всего это сделать с помощью js/jquery?Параллакс-эффект с переходом CSS

Мне очень нравится сценарий наилучшей производительности, потому что моя веб-страница немного перегружена.

Может кто-нибудь сказать или показать, как это сделать? Я буду очень благодарен.

источник

2015-11-27 zyx4sdk

Нет, потому что этот параллакс будет работать со списком прокрутки и css не разбираться в событиях прокрутки, поэтому с помощью css мы можем сделать простой фиксированный фоновый эффект, но не оригинальный параллакс с движущимся передним и фоновым изображениями, для чего вам нужно использовать только js :) –

Итак, как лучше всего разрешить это с помощью js/jquery? (в то время как лучшая производительность) – zyx4sdk

Если вам действительно нужен эффект движущегося фона, тогда нам нужно использовать какой-то строгий js aur плагин в соответствии с вашей пригодностью, но если вы в порядке с аналогичным эффектом параллакса с фиксированным фоном, тогда его так просто вы просто должны поместите фоновое изображение в css с свойством 'background-size: cover', оно будет работать нормально. :) –

В CSS есть свойство perspective, которое вы можете комбинировать с zoom, чтобы получить элемент «сзади» или «напротив» других элементов, которые будут таким образом прокручиваться с разной скоростью.

Есть много ресурсов, о том, что тот, который @ dwreck08 дал это один из лучших: http://keithclark.co.uk/articles/pure-css-parallax-websites/

Вот быстрая репликация:

.parallax { 
 
    height: 100vh; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    -webkit-perspective: 1px; 
 
    perspective: 1px; 
 
} 
 
.parallax__layer { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
.parallax__layer--base { 
 
    transform: translateZ(0); 
 
    color: white; 
 
    background: url(http://cliparts.co/cliparts/pT5/A7L/pT5A7L8T9.png) center no-repeat; 
 
    background-size: 50% auto; 
 
} 
 
.parallax__layer--back { 
 
    transform: translateZ(-1px) scale(2); 
 
    background: url(http://www.hdiphone6wallpapers.net/iphone-6-backgrounds/iphone-6-wallpapers-2/iphone-6-wallpapers-hd-100pb94q-1080x1920.jpg) no-repeat; 
 
} 
 
.parallax__layer--slow { 
 
    transform: translateZ(-4px) scale(4); 
 
    background: url(http://1.bp.blogspot.com/-ZRDN2sugdrg/UXa1qeFfjYI/AAAAAAAAVjo/1m10L-jCIgo/s1600/starcraft_2_render7E0.png) no-repeat center; 
 
    background-size: 100%; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.parallax { 
 
    font-size: 16px; 
 
} 
 

 
.parallax__layer { 
 
    padding: 75vh 0; 
 
}

<div class="parallax"> 
 
    <div class="parallax__layer parallax__layer--back"> 
 
    </div> 
 
    <div class="parallax__layer parallax__layer--slow"> 
 
    </div> 
 
    <div class="parallax__layer parallax__layer--base"> 
 
    </div> 
 
</div>

Для управления свитка скорость каждого слоя, измените свойства translateZ и scale.

источник

2015-11-27 21:17:34 Shomz

Выглядит неплохо, но возможно ли в этом случае сделать эффект параллакса фона (значение в фоновом режиме - изображение со 100% шириной и указанной высотой, а переднем плане - некоторый контент)? Я просто пытаюсь добиться этого, но до сих пор без эффекта. – zyx4sdk

Да, вы можете поместить почти все, что вам нравится в этих блоках параллакса, без ограничений. – Shomz

Просто сделал это немного прохладнее. – Shomz

Параллакс-эффект с переходом CSS

ответ

Смежные вопросы