Change background image if scrolled

Question

var swap;
function run(interval, frames) {
    var int = 1;

    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }

    var swap = window.setInterval(func, interval);
}

run(1000, 10);


$(window).scroll(function(){
    //... your logic goes here...
    $("body").css("background-image", "background-image: url(1.jpg)");
    if(youWantToStopTheInterval){
        window.clearInterval(swap);
        $("body").css("background-image", "background-image: url(1.jpg)");
    }
});

html * {
  box-sizing: border-box;
  padding:0;
  margin:0;
}
html,
body {
  height: 100%;
    font-family: 'Roboto', sans-serif;
    color:#666666;
    line-height: 1.7em;
    
}

#b1 {/* Location of the image */
  background-image: url(1.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b2 {/* Location of the image */
  background-image: url(2.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b3 {/* Location of the image */
  background-image: url(3.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}

#b4 {/* Location of the image */
  background-image: url(1.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b5 {/* Location of the image */
  background-image: url(2.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b6 {/* Location of the image */
  background-image: url(3.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b7 {/* Location of the image */
  background-image: url(1.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b8 {/* Location of the image */
  background-image: url(2.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b9 {/* Location of the image */
  background-image: url(3.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b10 {/* Location of the image */
  background-image: url(1.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#full_2, #full_3, #full_4{
  position: relative;
  height: 100vh;
  width: 100%;
}

#full_1 {
  position: relative;
  height: 100vh;
  width: 100%;
}
#full_1 {
  background: black;
  opacity: 0.36;
}
#full_4 {
  background: magenta;
    opacity: 0.1;
}
#full_2 {
  background: white;
}
#full_3 {
  background: lightgray;
}
.arrow-down {
  position: absolute;
  bottom: 10px;
  width: 45px;
  height: 45px;
  left: calc(50% - 16px);
}
.arrow-down a img {
  width: 100%;
}

.main-nav ul li.menu-item{
    display: none;
}

.logo{float: left; width: 15%;height: 100%;padding-top: 25px;padding-left: 25px;}

.main-nav {float: right; width: 80%; height: 100%;}

.menu {
  background-color: #373737;
  left: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
z-index: 5;
}

#main-header a{
    text-decoration: none;
    color: #ffffff;
    font-size:1.5em;
    z-index: 10;
    opacity: 1;
}

#main-header a:hover{
    color: #FFD200;
}

#main-header {
    position: absolute;
    width:100%;
    height:70px;
    top:0;
    background-color: rgba(0,0,0,0);
    z-index: 100;
}

#main-header ul li {
    display:inline;
    padding:20px 20px;
}

#main-header ul {
    float: right;
    margin-top:0px;
    padding:0;
    padding-top: 25px;
    padding-right: 25px;
    text-align: right;
}

#container{
    width: 90%;
}

#lupa{
    float: right;
    width: 40%;
    height: 100%;
}

#lupa img{516 918
    width: 90px;
    height: 492px;
    float: right;
    padding-top: 90px;
}

#content_1{
    
    float: left;
    height: 100%;
    width: 60%;
    
}

#content_container{
    padding-top: 125px;
    height: 100%;
    width: 100%;
    padding-left: 35%;
}

#nadpis1{
    
    
    margin-bottom: 45px;
    
}

#nadpis1 img{
    width: 231px;
    height: 44px;
}

#content_1_1 a{
    color: #014FC4;
    text-decoration: none;
    font-weight: 800;
    font-size: 25px;
}

#content_1_1 h2, p{
    color: #2F2F2F;
    font-size: 25px;
    text-decoration: none;
}
#footer_left{
    height: 90%;
    float: left;
    width: 40%;
}
.footer_1, .footer_2{
    height: 100%;
    width: 50%;
}

.footer_1{
    float: left;
}

.footer_2{
    float:right;
}

.footer_3{
    
}

#full_5{
    height:50vh;
    background-color: #0F032D;
    bottom: 0;
}

.footer_bottom{
    color: white;
    height: 10%;
    width: 100%;
    text-align: center;
    clear: both;
    bottom: 0;
    padding-bottom: 10px;
    z-index: 10;
}



#full_5 ul{
    padding-right: 25px;
    padding-top: 25px;
}

#full_5 ul li{
    padding-top: 25px;
}

#full_5 ul li a{
    color: white;
    text-decoration: none;
    font-size: 16px;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
    html * {
  box-sizing: border-box;
  padding:0;
  margin:0;
}
html,
body {
  height: 100%;
    font-family: 'Roboto', sans-serif;
    color:#666666;
    line-height: 1.7em;
    
}
#b1 {/* Location of the image */
  background-image: url(1.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b2 {/* Location of the image */
  background-image: url(2.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}
#b3 {/* Location of the image */
  background-image: url(3.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;}

#full_2, #full_3, #full_4{
  position: relative;
  height: 100vh;
  width: 100%;
}

#full_1 {
  position: relative;
  height: 100vh;
  width: 100%;
}
#full_1 {
  background: black;
  opacity: 0.36;
}
#full_4 {
  background: magenta;
}
#full_2 {
  background: white;
}
#full_3 {
  background: lightgray;
}
.arrow-down {
  position: absolute;
  bottom: 10px;
  width: 45px;
  height: 45px;
  left: calc(50% - 16px);
}
.arrow-down a img {
  width: 100%;
}

#full_2 .arrow-down a img {
width: 100%;
display: none;
}

.logo{float: left; width: 30%;height: 100%;padding-top: 25px;padding-left: 25px;}

.main-nav {float: right; width: 60%; height: 100%;}

.menu {
  background-color: #373737;
  left: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
z-index: 5;
}

#main-header a{
    text-decoration: none;
    color: #ffffff;
    font-size:2.0em;
    z-index: 10;
    opacity: 1;
}

#main-header a:hover{
    color: #585858;
}

#main-header {
    position: absolute;
    width:100%;
    height:70px;
    top:0;
    background-color: rgba(0,0,0,0);
    z-index: 100;
}

#main-header ul li {
    display:inline;
    padding:20px 20px;
}

#main-header ul {
    float: right;
    margin-top:0px;
    padding:0;
    padding-top: 25px;
    padding-right: 25px;
    text-align: right;
}

#container{
    width: 95%;
    margin-right: auto;
    margin-left: auto;
}

#lupa{
    text-align: center;
    width: 100%;
    height: 100%;
    float: none;
}

#lupa img{516 918
    width: 90px;
    height: 492px;
    float: none;
    padding-top: 0px;
}

#content_1{
    
    height: 100%;
    width: 100%;
    text-align: center;
}

#content_container{
    padding-top: 100px;
    height: 100%;
    width: 100%;
    padding-left: 0px;
    margin-bottom: 20px;
}

#nadpis1{
    margin-bottom: 45px;    
}

#nadpis1 img{
    width: 231px;
    height: 44px;
}

#content_1_1 a{
    color: #014FC4;
    text-decoration: none;
    font-weight: 800;
    font-size: 25px;
}

#content_1_1 h2, p{
    color: #2F2F2F;
    font-size: 25px;
    text-decoration: none;
}
}

<!DOCTYPE html>
<html>
    <head>
        <title>Add gospel</title>
        <link href="styles.css" rel="stylesheet" type="text/css">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link
 href='http://fonts.googleapis.com/css?family=Roboto:300&subset=latin,cyrillic-ext'
 rel='stylesheet' type='text/css'>
    </head>
    <div class="menu" >
    </div>
    <div id="wrapper">
        <div id="main-header">
    <div class="logo">
     <a href="http://david.addagio.cz/gospel"><img src="logo.png"
      style="max-width: 90%; height: auto;" alt="gospel logo" /></a>
    </div>
    <!--/.logo-->
    <div class="main-nav">
     <nav class="nav">
      <ul>
       <li class="nav-item"><a href="index.php">Aktuálně</a></li>
       <li class="nav-item"><a href="#content_1">O nás</a></li>
       <li class="nav-item"><a href="#full_3">Kontakt</a>
                            <li class="nav-item"><a href="#full_4">Foto/Video</a>
                            <li class="menu-item"><a href="#full_4">MENU</a>
      </ul>
     </nav>
    </div>
        </div>
            <div id="full_1">
          <div class="arrow-down">
            <a href="#full_2"><img src="arrow_down.png" alt="arrow-down"></a>
          </div>
        </div>
        <div id="full_2">
            <div id="container">
                <div id="content_1">
                    <div id="content_container">
                    <div id="nadpis1">
                        <img src="where.png" alt="where">
                    </div>
                    
                    <div id="content_1_1">
                        <p>Už z našeho jména vyplívá, že se nacházíme
                        ve městě Přerov. Klikněte na lupu a získáte
                        přesnou navigaci.
                        
                        Jsme od Vás příliš daleko?
                            kontaktujte nás <a href="index.html">zde</a></p>
                    </div>
                    </div>
                </div>
                
                <div id="lupa">
                    <a href="https://www.google.cz/maps/place/%C4%8C.+Drahlovsk%C3%A9ho+912%2F1,+750+02+P%C5%99erov/@49.4515655,17.4449138,18.34z/data=!4m2!3m1!1s0x4713aea3e8cce151:0xac1b8237ae516d54!6m1!1e1" target="_blank"><img src="lupa.png"></a>
                </div>  
        </div>        
          <div class="arrow-down">
            <a href="#full_3"><img src="arrow_down_black.png" alt="arrow-down"></a>
          </div>
        </div>
        <div id="full_3">
          <div class="arrow-down">
            <a href="#full_4"><img src="arrow_down.png" alt="arrow-down"></a>
          </div>
        </div>
        <div id="full_4">
          <div class="arrow-down">
            <a href="#full_5"><img src="arrow_down.png" alt="arrow-down"></a>
          </div>
        </div>
        
        <div id="full_5">
        <div id="footer_left">
        <div class="footer_1">
            <ul>
            <li><a href="#full_1">Podmínky použití</a></li>   
            <li><a href="#full_1">Kontakty</a></li>
            <li><a href="#full_1">Novinky</a></li>
            <li><a href="#full_1">Fotky</a></li>
            </ul>
        </div>
            
        <div class="footer_2">
            
        </div>
        </div>    
        <div class="footer_3">
            
        </div>
            
        <div class="footer_bottom">
        
        </div>
        </div>
        
    </div>
        
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript" src="main.js">
            
            
            
        </script>
    </body>
</html>

I know, that this question was asked so many times, but no answer suits me, because it coast many other problems...

I have code:

function run(interval, frames) {
    var int = 1;

    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }

    var swap = window.setInterval(func, interval);
}

run(1000, 10); //milliseconds, frames

That code is changing the background image of the website every 1 second (it is changing it for 10 seconds, then again, and again..).

Now, i want to change background-image, when user scrolls about 100vh down, so it must stop the code, that is changing background every second....

This is what i though it may be, but it does not work:

$(document).ready(function() {

        if ($("body").scrollTop() > 500 || $("html").scrollTop() > 500) {
            $("body").css("background-image","background-image: url(1.jpg)");
        }

        else {

        }

link to the website

any ideas?

NOTE: !it is not the duplicate!

Possible duplicate of [Stop setInterval call in JavaScript](http://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript) — sodawillow, Nov 22 '15 at 12:52

Ronen Cypis · Answer 1 · 2015-12-22T10:39:28.547

3

First, you need to listen to window.scroll event, and not to document.ready, since window.scroll fires every time the window is scrolled, and document.ready fires once, when the document is... well... ready :-) More about the scroll event in the $.scroll documentation

Then, you need to assign the intervalId (swap in your code, intervalId in mine) to a variable outside the scope of your run function, so when the user scrolls down enough, and you decide that you want to stop the interval mechanism, you can just do

var intervalId;
function run(interval, frames) {
    var int = 1;

    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }

    intervalId = window.setInterval(func, interval);
}

run(1000, 10);


$(window).scroll(function(){
    //... your logic goes here...
    if(youWantToStopTheInterval){
        window.clearInterval(intervalId);
    }
});

aaand... VOILA!

edited Dec 22 '15 at 10:39

answered Nov 22 '15 at 12:51

Ronen Cypis

21,182
1
20
25

It changes the three images... but if i scroll... it still is changing the images – David Stančík Nov 22 '15 at 13:08
@PetrCihlar did you add your logic into the `scroll` section? do you get an error? did you debug it? are your sure that your logic works as expected? – Ronen Cypis Nov 22 '15 at 13:32
i changed the variable to swap, and under if i added $("body").css("background-image","background-image: url(1.jpg)"); – David Stančík Nov 22 '15 at 13:55
Try to create a JsFiddle that reproduces your issue... it will be easier to help you – Ronen Cypis Nov 22 '15 at 14:21

Change background image if scrolled

1 Answers1