Привет! По этому примеру написала css стили для параллакс эффекта - http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/
Но не получается добавить переход по навигационным якорям, например, как тут - http://chriswojcik.net/demos/single-page-nav/
Без параллакса (при max-width tablet
), плавный скролл работает, когда в силу вступает media
с параллаксом, переход к якорю не срабатывает.
Код представлен ниже.
CSS:
.parallax
@media (min-width tablet)
perspective: 300px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
.parallax__layer
position relative
@media (min-width tablet)
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
.parallax__group
@media (min-width tablet)
position: relative;
min-height: 100vh;
height 100%
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: transform 0.5s;
.parallax__layer--base
@media (min-width tablet)
transform: translateZ(0);
z-index: 4;
.parallax__layer.parallax__layer--base.right-col
@media (min-width tablet)
transform: translateZ(0);
.parallax__layer--back
@media (min-width tablet)
transform: translateZ(-300px) scale(2);
z-index: 3;
.parallax__layer--fore
@media (min-width tablet)
transform: translateZ(150px) scale(.5);
z-index: 1;
JS:
$(".single-page-nav").on("click","a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
if (window.matchMedia("(min-width: 450px)").matches) {
$('body,html').animate({scrollTop: top - 110}, 1500);
}else{
$('body,html').animate({scrollTop: top - 80}, 1500);
}
});