wallpaper_generator

index.html

<div class="background"></div>
<div class="widget">
	<div class="center">    
	<h1>漢字</h1>
   <img id="object">
	</div>
</div>
<div class="info">
  <p>Source: 
    <a href="https://danbooru.donmai.us/posts/2735908"  target="_blank">
      https://danbooru.donmai.us/posts/2735908
    </a>
     <br>
    Translation: Kanji
  </p>
</div>

script.js

var info;
$(".widget").click(function() {
  $.getJSON("https://codepen.io/ZerataX/pen/BLRJAo.js",
    function(result) {
      if (Math.floor(Math.random() * 2) === 0) {
        var wallpaper = result.wallpapers[Math.floor(Math.random() * result.wallpapers.length)];
        var anime = result.animegurls[Math.floor(Math.random() * result.animegurls.length)];
        change_wallpaper(wallpaper, anime, false);
      } else {
        var wallpaper = result.wallpapers[Math.floor(Math.random() * result.wallpapers.length)];
        var text = result.words[Math.floor(Math.random() * result.words.length)];
        change_wallpaper(wallpaper, text, true);
      }
    });
});

function change_wallpaper(wallpaper, object, text) {
  $("#object").removeClass("moving");
  $("h1").removeClass("moving");
  $("#object").attr("src", "");
  $("h1").html("");
  $(".background").css("background-image", "url(" + wallpaper.url + ")");
  $("<style>.widget:before { background-image: url(" + wallpaper.url + ") }</style>").appendTo("head");
 setTimeout(
  function() 
  {
  if (text === false) {
    $("#object").attr("src", object.url);
    $("#object").addClass("moving");
    $("h1").html("");
    $(".info p").html("Wallpaper Source: <a href=" + wallpaper.source + " target='_blank'>" + wallpaper.source + "</a><br> Anime Source: <a href=" + object.source + " target='_blank'>" + object.source + "</a>");
  } else {
    $("#object").attr("src", "");
    $("h1").html(object.japanese);
    $("h1").addClass("moving");
    $(".info p").html("Wallpaper Source: <a href=" + wallpaper.source + " target='_blank'>" + wallpaper.source + "</a><br> Translation: " + object.english);
  }
    }, 200);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-color: black;
  overflow: hidden;
}

h1 {
  font-size: 10em;
  color: white;
  transition: all 0.5s ease;
  transform: translate(0%, 0%);
}
@keyframes img-move-up {
    0%   {transform: translate(0%, 100%); opacity: 0;}
    100% {transform: translate(0%, -22%); opacity: 1;}
}
@keyframes text-move-up {
    0%   {transform: translate(0%, 100%); opacity: 0;}
    100% {transform: translate(0%, 0%); opacity: 1;}
}
img {
  height: 40em;
  transition: all 0.5s ease;
  transform: translate(0%, -22%);
}
img.moving {
  animation-name: img-move-up;
  animation-duration: 1s;
}
h1.moving {
  animation-name: text-move-up;
  animation-duration: 1s;
}
.options {
  position: absolute;
  bottom: 1vh;
  left: 1vw;
}
.info {
  position: absolute;
  bottom: 1vh;
  right: 1vw;
  text-align: left;
  color: grey;
  font-size: 0.8em;
  opacity: 0.1;
  transition: opacity 0.5s ease;
}

.info:hover {
  opacity: 1;
}

.info a {
  color: cyan;
}

.background {
  height: 100vh;
  background-image: url("https://danbooru.donmai.us/data/__ezo_red_fox_and_silver_fox_kemono_friends_drawn_by_hettsuaa__6d49415867003e44318a632e2c231df8.jpg");
  background-attachment: fixed;
  filter: blur(10px);
  background-size: cover;
  z-index: 1;
  transition: background-image 0.5s ease;
}

.widget {
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -15em;
  margin-top: -15em;
  border: 10px solid;
  border-color: white;
  border-radius: 0%;
  width: 30em;
  height: 30em;
  overflow: hidden;
  z-index: 1;
}

.widget::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url("https://danbooru.donmai.us/data/__ezo_red_fox_and_silver_fox_kemono_friends_drawn_by_hettsuaa__6d49415867003e44318a632e2c231df8.jpg");
  background-attachment: fixed;
  background-size: cover;
  content: "";
  transition: background-image 0.5s ease;
}

.center {
  text-align: center;
  margin-top: 9em;
}

wallpaper_generator.markdown

wallpaper_generator

Randomly creates wallpapers based on this currently very popular style. Click the widget in the middle to generate a random wallpaper. Uses this json: https://codepen.io/ZerataX/pen/BLRJAo

A Pen by ZerataX on CodePen.

License.