Изменять высоту блока при скролле одновременно с моментом скролла?

Question

[Чёкатилло]

Изменять высоту одновременно- имею ввиду, в зависимости от положения скролла, изменяется одновременно и плавно высота определенного блока див Но важно, что бы скорость изменения высоты блока отличалась от скорости движения скролла

Спасибо огромнейшее!

Answer 1

[Anton fon Faust]

Ну, так привяжите размер блока к скроллу...
например, так:

document.getElementById("myDiv").style.height = document.body.scrollTop/2+"px"

Comments

[Чёкатилло]

Блин...я вот в скриптах вообще не силен Это весь скрипт? ))

[Anton fon Faust]

Дмитрий: это код для обработчика события scroll.
Делает вот что: высоту блока с id="myDiv" делает равной половине от позиции скролла документа.
Полный код будет как-то так выгдялеть:

window.addEventListener('scroll', function(e){
  document.getElementById("myDiv").style.height = document.body.scrollTop/2+"px";
}

[Чёкатилло]

Anton fon Faust: Окей Круто А нельзя ли перевести скрипт из id в div? а то у меня нюанс Легче перевести скрипт если получится

[Чёкатилло]

Anton fon Faust: в общем этот все для изменения дива основного фона в Вордпресс И если изменять див на ид везде то сайт грузит только цвет фона и скролл-бар

[Чёкатилло]

Anton fon Faust: а фон в стилях я только подшаманил что б он был в position: absolute; и находится "прилепленным" слева и справа
.page-cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-attachment: scroll;
background-position: center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
width: 100%;
height: 900px;
}

[Anton fon Faust]

Дмитрий: а зачем? Здается мне основную задачу нужно решать иначе.

[Чёкатилло]

Anton fon Faust: совсем иначе) пора выпить кофейку

[Чёкатилло]

Anton fon Faust: а что вы имеете ввиду?

[Anton fon Faust]

Дмитрий: я имею в виду, что для получения конечного результата нужно не менять размер дива, а делать что-то другое. Но я не могу сказать что делать, т.к. не знаю, чего вы хотите добиться в конечном итоге.

[Чёкатилло]

Anton fon Faust: В этом блоке, если изменять высоту, то картинка просто заходит вверх за экран, но не изменяется по размеру И задумка какая..если, при скролле уменьшать размер этого блока, то изображение в нем, относительно всего контента, визуально быстрее будет скроллица Типа параллакс И я вроде представляю, что должен получится параллакс, но кажется только в эксперименте удастся понять

[Anton fon Faust]

Дмитрий: о, господи...
а не проще ли менять background-position?
А еще лучше ...
getinstance.info/articles/css/pure-css-parallax-we... - вот вам инструкция, как делать параллакс.

[Чёкатилло]

Anton fon Faust: такое извращение да ) А background-position как менять? ))))

[Anton fon Faust]

так же как и все остальные свойства при помощи javascript:
https://learn.javascript.ru/styles-and-classes

[Чёкатилло]

Anton fon Faust: Согласен ) хотелось бес скрипта
Добавил скрипт и все сразу заработало
$(window).bind('scroll',function(e){
parallaxScroll();
});

function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('#parallax-bg1').css('top',(0-(scrolled*.25))+'px');
$('#parallax-bg2').css('top',(0-(scrolled*.5))+'px');
$('#parallax-bg3').css('top',(0-(scrolled*.75))+'px');
}

Единственно, скроллица картинка с параллакс как-то чуть-чуть дерганно
Что может быть причиной или можно ли это исправить дописав сам скрипт
А может есть у вас как раз кусочек этого скрипта? ))

[Anton fon Faust]

Дмитрий: можно, например, избавиться от парсинга, убрав из обработчика событий всякие ненужности, например, сделать var p1=$('#parallax-bg1'); и в parallaxScroll() использовать p1.css('top',(0-(scrolled*.25))+'px'); , а не каждый раз производить поиск по DOM. Одно это должно существенно увеличить скорость.

[Чёкатилло]

Anton fon Faust: а тут так? p1=$parallaxScroll();

[Чёкатилло]

а понял
я короче так сделал и кажется так же подергивается Но капельку Это может скорее напоминает дергание самого скролла
$(window).bind('scroll',function(e){
p1=$(parallaxScroll);
});

function parallaxScroll(){
var scrolled = $(window).scrollTop();
var p1=$('.page-cover');p1.css('top',(0-(scrolled*.25))+'px');
}

[Anton fon Faust]

Дмитрий: ужаскакой вы натворили. У меня чуть инфаркт микарда не случился)))

var p1 = $('#parallax-bg1');
var p2 = $('#parallax-bg2');
var p3 = $('#parallax-bg3');

$(window).bind('scroll',parallaxScroll);

function parallaxScroll(){
    var scrolled = $(window).scrollTop();
    p1.css('top',(0-(scrolled*.25))+'px');
    p2.css('top',(0-(scrolled*.5))+'px');
    p3.css('top',(0-(scrolled*.75))+'px');
}

хотя бы так...

[Чёкатилло]

Anton fon Faust: не, у меня просто один див .page-cover

[Чёкатилло]

Anton fon Faust: но еще подергивается Спасибище, добрый человек!

Answer 2

[Роман Савицкий]

Дмитрий если через jQuery, то
Добавьте у себя между $(document).ready(function(){

$(window).scroll(function(){
       console.log($(this).scrollTop());
       var attrstyle = 'height:' + $(this).scrollTop()/2 + 'px;';
       $("#Vash-id").attr('style', attrstyle);
    });

Comments

[Чёкатилло]

Спаисбо А можно на див изменить id? что то подругому не хочет работать сайт вообще

[Роман Савицкий]

Дмитрий: $("#Vash-id")- Какой хотите придумайте

[Чёкатилло]

Роман Савицкий: у меня уже работает див и он связан как то в Вордпресс так что не работает если я див изменю на ид

[Роман Савицкий]

Дмитрий: $(".Vash-class") - так попробуйте

[Чёкатилло]

Роман Савицкий: вписал в хедер



И теперь есть что ли какая то взаимосвязь между скриптом и фоном но в\фон при скролле просто исчезает cg91812-wordpress-3.tw1.ru
Может дело в позитион или зед-индекс фона в css?

[Чёкатилло]

Роман Савицкий: это

$(document).ready(function(){
$(window).scroll(function(){
console.log($(this).scrollTop());
var attrstyle = 'height:' + $(this).scrollTop()/2 + 'px;';
$(".page-cover").attr('style', attrstyle);
});
});

[Чёкатилло]

Роман Савицкий: если добавляю то высота изменяется но не видно изображения в этом блоке

[Чёкатилло]

Роман Савицкий: может дело в css этого блока
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-attachment: scroll;
background-position: center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
width: 100%;
height: 900px;