Skip to content

Instantly share code, notes, and snippets.

@zeratax
Last active September 6, 2017 16:21
Show Gist options
  • Save zeratax/2d1cd17b5efc26fac217134d06ee2cf4 to your computer and use it in GitHub Desktop.
Save zeratax/2d1cd17b5efc26fac217134d06ee2cf4 to your computer and use it in GitHub Desktop.
wallpaper_generator
<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>
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);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment