-1

I am using tumblr theme that is scrolling sideways (this is the theme http://smpldesign.tumblr.com/post/4547439061/sleep-wave-2-0)

can someone show me how to make the background change to red on scroll? and then when it stops scrolling it reverts back to white?

this is what i put in css of this theme:

body {font-size: {text:Font Size}px; font-family: {font:Body}; 
color: {color:Text}; text-align:justify; height:100%;
}

body {background:#F50;
transition:all 400ms ease-in;
}

.scrolling {
background:#FF0;
transition:all 400ms ease-in;
} 
table tr { 
vertical-align: top; 
});

this is what i put before closing body tag:

{/block:Posts}
</div>
</div>

<script>
$(document).on('scrollstart',function(){
$('body').addClass('scrolling');
});

$(document).on("scrollstop",function() {
$('body').removeClass('scrolling');
}); </script>

});

it's not working for me.

i put the entire code here in a pastebin

http://pastebin.com/FX2a8nin

user3446988
  • 31
  • 1
  • 8

3 Answers3

1

Assuming you have a #wrapper div you could do something like is shown in this fiddle here

With the information I could gather I'm assuming you wanted to change the background as the user scrolls down the page and then when they stop scrolling change the background back.

The jQuery would be such:

jQuery(window).load(function () {
    $(window).scroll(function() {
        $("#wrapper").css('background', 'red');
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer',setTimeout(function() {
            $("#wrapper").css('background', 'blue');
        }, 250));
    });
});

You should be able to tack this on to your tumblr theme, but make sure that jQuery has been loaded previously:

You could also just use your body tag by replacing $('#wrapper').css("background", "red"); with $('body').css("background", "red");. Feel free to replace the 'red' and 'blue' with the colors you want

Finally if you wanted to use classes instead of just the background CSS selector, just use .addClass('classname') instead of .css('background', 'color')

EDIT: Feel free to use the 'stopscroll' event posted by @Shaharz to make the code a little cleaner

Schybo
  • 1,653
  • 1
  • 13
  • 12
1

To add to @ShaharZ answer, I forked a fiddle that is referenced in the link question.

http://jsfiddle.net/lharby/fbSbT/78/

Basically we add or remove the scrolling class on the body, and this class also contains transitions to smooth the effect.

The final js (once you are using those custom events) looks like this: 

$(document).on('scrollstart',function(){
    $('body').addClass('scrolling');
});

$(document).on("scrollstop",function() {
   $('body').removeClass('scrolling');
});

Then the css is as simple as this: 

body {
   background:#F50;
   transition:all 400ms ease-in;
}

.scrolling {
    background:#FF0;
    transition:all 400ms ease-in;
}

EDIT

Actually I have forked @Schybo fiddle, as the code is much cleaner and easier to understand. Here is a forked fiddle:

https://jsfiddle.net/lharby/xxmgceh9/3/

lharby
  • 3,057
  • 5
  • 24
  • 56
  • ok i understand how this is working i just don't understand how to put the jquery script into the tumblr theme. – user3446988 Apr 09 '15 at 13:21
  • Most themes ship with jquery and there are a couple of ways to test this. I went to your theme link opened the console and typed $; and return and then I can see jquery is available. You can also look inside the template and just search for jquery. It should also be listed in the 'Resources' panel. – lharby Apr 09 '15 at 14:15
  • So at the bottom of your template before the closing body tag create a script tag and insert your custom jquery in there. – lharby Apr 09 '15 at 14:15
  • You could dump the entire contents into pastebin, and then someone can edit it. It's not very SO friendly though. If you have tried to implement it in the theme, it's possible to check the url and open the console and look for errors. – lharby Apr 09 '15 at 15:20
  • ok I edited question and also put pastebin link. – user3446988 Apr 09 '15 at 15:30
  • http://pastebin.com/F6G4gvy3 – lharby Apr 09 '15 at 15:46
  • Surprised it worked actually, but I used the code from @Schybo as it is better, but it targets and element called #wrapper which is not in your code, so I targeted the body element. – lharby Apr 09 '15 at 15:47
  • one more question, how would i add infinite scrolling to this theme? the typical way doesn't apply – user3446988 Apr 09 '15 at 19:08
  • I would post that as a new question. – lharby Apr 10 '15 at 07:35
0

This question describes how to know when a user starts and stops scrolling: Fire event after scrollling scrollbars or mousewheel with javascript

Once you have those events, all you have to do is something like

css:

body.scrolling {
    background-color: red;
}

javascript:

$(window).on('startScroll', function() {
    $('body').addClass('scrolling')
}
$(window).on('stopScroll', function() {
    $('body').removeClass('scrolling')
}
Community
  • 1
  • 1
ShaharZ
  • 389
  • 5
  • 11
  • im very new to coding, can you possibly show me exactly where i would post each bits that i need? also..i want a fade effect...not a blunt change. – user3446988 Apr 08 '15 at 22:16