Skip to content

Instantly share code, notes, and snippets.

@dusk0r

dusk0r/gist:3d5b46b3ed43aae88b2d

Last active September 3, 2020 16:55
Show Gist options
  • Save dusk0r/3d5b46b3ed43aae88b2d to your computer and use it in GitHub Desktop.
Save dusk0r/3d5b46b3ed43aae88b2d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dusk0r revised this gist Apr 22, 2015. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -55,11 +55,9 @@

    <body>

    <!-- BACKGROUND IMAGE FADER BY DUSK0R -->
    <div class="bgimage" id="bgimage1">
    </div>
    <div class="bgimage" id="bgimage2">
    </div>
    <!-- /BACKGROUND IMAGE FADER BY DUSK0R -->
    </body>
    </html>
  2. dusk0r revised this gist Apr 22, 2015. 1 changed file with 50 additions and 48 deletions.
    98 changes: 50 additions & 48 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,63 +1,65 @@
    <html>
    <head>
    <style type="text/css">
    .bgimage {
    position: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: black;
    width: 100%;
    height: 100%;
    }
    #bgimage1 {
    /* Initiales Bild */
    background-image: url(bg.1.jpg);
    }
    #bgimage2 {
    display: none;
    }
    </style>
    <script type="text/javascript">
    function fadeImages() {
    var bgImages = ["bg.1.jpg", "bg.2.jpg", "bg.3.jpg", "bg.4.jpg"];
    var layer1 = $("#bgimage1");
    var layer2 = $("#bgimage2");
    var counter = 0;
    var fadeDuration = 2000;
    var keepImageDuration = 5000;
    <style type="text/css">
    .bgimage {
    position: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: black;
    width: 100%;
    height: 100%;
    }

    function crossFade() {
    if (counter % 2 === 0) {
    layer2.css("background-image", "url(" + bgImages[(counter + 1) % bgImages.length] + ")");
    layer2.fadeIn(fadeDuration, function () {
    setTimeout(crossFade, keepImageDuration);
    });
    } else {
    layer1.css("background-image", "url(" + bgImages[(counter + 1) % bgImages.length] + ")");
    layer2.fadeOut(fadeDuration, function () {
    setTimeout(crossFade, keepImageDuration);
    });
    #bgimage1 {
    /* Initiales Bild */
    background-image: url(bg.1.jpg);
    }

    #bgimage2 {
    display: none;
    }
    </style>
    <script type="text/javascript">
    function fadeImages() {
    var bgImages = ["bg.1.jpg", "bg.2.jpg", "bg.3.jpg", "bg.4.jpg"];
    var layer1 = $("#bgimage1");
    var layer2 = $("#bgimage2");
    var counter = 0;
    var fadeDuration = 2000;
    var keepImageDuration = 5000;

    counter++;
    };
    function crossFade() {
    if (counter % 2 === 0) {
    layer2.css("background-image", "url(" + bgImages[(counter + 1) % bgImages.length] + ")");
    layer2.fadeIn(fadeDuration, function () {
    setTimeout(crossFade, keepImageDuration);
    });
    } else {
    layer1.css("background-image", "url(" + bgImages[(counter + 1) % bgImages.length] + ")");
    layer2.fadeOut(fadeDuration, function () {
    setTimeout(crossFade, keepImageDuration);
    });
    }

    setTimeout(crossFade, keepImageDuration);
    }
    $().ready(function () {
    fadeImages();
    });
    </script>
    counter++;
    };

    setTimeout(crossFade, keepImageDuration);
    }
    $().ready(function () {
    fadeImages();
    });
    </script>
    </head>

    <body>
    <!-- BACKGROUND IMAGE FADER BY DUSK0R -->

    <!-- BACKGROUND IMAGE FADER BY DUSK0R -->
    <div class="bgimage" id="bgimage1">
    </div>
    <div class="bgimage" id="bgimage2">
    </div>
    <!-- /BACKGROUND IMAGE FADER BY DUSK0R -->
    <!-- /BACKGROUND IMAGE FADER BY DUSK0R -->
    </body>
    </html>
  3. dusk0r created this gist Apr 22, 2015.
    63 changes: 63 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,63 @@
    <html>
    <head>
    <style type="text/css">
    .bgimage {
    position: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: black;
    width: 100%;
    height: 100%;
    }
    #bgimage1 {
    /* Initiales Bild */
    background-image: url(bg.1.jpg);
    }
    #bgimage2 {
    display: none;
    }
    </style>
    <script type="text/javascript">
    function fadeImages() {
    var bgImages = ["bg.1.jpg", "bg.2.jpg", "bg.3.jpg", "bg.4.jpg"];
    var layer1 = $("#bgimage1");
    var layer2 = $("#bgimage2");
    var counter = 0;
    var fadeDuration = 2000;
    var keepImageDuration = 5000;

    function crossFade() {
    if (counter % 2 === 0) {
    layer2.css("background-image", "url(" + bgImages[(counter + 1) % bgImages.length] + ")");
    layer2.fadeIn(fadeDuration, function () {
    setTimeout(crossFade, keepImageDuration);
    });
    } else {
    layer1.css("background-image", "url(" + bgImages[(counter + 1) % bgImages.length] + ")");
    layer2.fadeOut(fadeDuration, function () {
    setTimeout(crossFade, keepImageDuration);
    });
    }

    counter++;
    };

    setTimeout(crossFade, keepImageDuration);
    }
    $().ready(function () {
    fadeImages();
    });
    </script>
    </head>

    <body>

    <!-- BACKGROUND IMAGE FADER BY DUSK0R -->
    <div class="bgimage" id="bgimage1">
    </div>
    <div class="bgimage" id="bgimage2">
    </div>
    <!-- /BACKGROUND IMAGE FADER BY DUSK0R -->
    </body>
    </html>