показать изображение на свитке

Question

показать изображение на свитке

0

Я пытаюсь показать изображение на прокрутке на основе px на px. Подобно тому, как этот сайт оживляет красную линию, http://www.teslamotors.com/goelectric#. Изображение должно быть скрыто в той же усадьбе, поэтому, если пользователь прокручивается, они будут видеть меньше строки.

Я чувствую, что приближаюсь, но мой javascript не совсем понюхает. Вот URL-адрес того, что я сделал до сих пор, http://trippruitt.com/fuckinLineAnimationBullshit/, и вот мой сценарий. Любая помощь будет очень оценена, спасибо!

init();

/*==========  init calls all custom functions  ==========*/
function init() {

    $(window).on("scroll", scrolling);
    console.log("init works");
}
/*==========  ==========  ==========*/


/*==========  get scrollTop  ==========*/
function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers except IE before #9
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
}
/*==========  ==========  ==========*/


/*==========  scrolling function  ==========*/
function scrolling() {

    console.log(getScrollTop());

    if (getScrollTop() > 64) {
        addHeight();
    }
}
/*==========  ==========  ==========*/


/*==========  add height to line  ==========*/
function addHeight() {

    $(window).on("scroll", function() {
        var i = 0,
            line = $(".fuckinLine");
        while (i < 209) {
            line.css("height", i++ + "px");
            event.preventDefault();
            console.log("addHeight works");
        }
    });
}
/*==========  ==========  ==========*/

tripstar 26 апр. 2014, в 01:29

Источник

0

Можете ли вы создать jsfiddle для этого, у меня есть несколько идей.
mambrow 25 апр. 2014, в 23:05
0

Ага! jsfiddle.net/dd2Ga
tripstar 25 апр. 2014, в 23:13

Теги:

javascript

jquery

scroll

1 ответ

Ещё вопросы

Можете ли вы создать jsfiddle для этого, у меня есть несколько идей.

mambrow · Accepted Answer · 2014-04-25T23-27-00.000Z

Ваша проблема здесь:

function addHeight() {

    $(window).on("scroll", function() {
        var i = 0,
            line = $(".fuckinLine");
        while (i < 209) {
            line.css("height", i++ + "px");
            event.preventDefault();
            console.log("addHeight works");
        }
    });
}

Вы уже установили событие для $(window).on("scroll", function() { в функции init. Посредством этого вы по существу выполняли функцию addHeight дважды при каждом прокрутке окна.

Это должно сработать для вас:

/*==========  scrolling function  ==========*/
function scrolling() {

    console.log(getScrollTop());
    addHeight(getScrollTop());
//Great place for logic to addwidth to make the line move horizontally.
}
/*==========  ==========  ==========*/


/*==========  add height to line  ==========*/
function addHeight(newHeight) {
    $(".fuckinLine").css("height", newHeight + "px");
}
/*==========  ==========  ==========*/

Заметьте, я также удалил цикл while. Это приведет к тому, что div будет расти до максимальной высоты после одного прокрутки. Мы хотим, чтобы это увеличивало 1px для каждого пикселя в окне, прокручиваемом.

Ты имеешь в виду, не сжиматься, когда вы прокручиваете назад?
Неважно, мой глаз играл со мной шутки.
Что было бы лучшим способом поставить смещение параметра? Например, если я хочу начать добавлять и / или вычитать высоту изображения после getScrollTop = 400?
В вашей функции прокрутки при вызове addHeight: if (getScrollTop ()> 400) {addHeight (getScrollTop () - 400); }