HTML, CSS and JavaScript playground

<head>
<script type="text/javascript">
// <![CDATA[
var news=Array("☰ @ciro's site . . .");
var cursor="૮ ˶ᵔ ᵕ ᵔ˶ ა"; // set cursor
var delay=10; // seconds between each news item
 
/***************************\
* News Ticker Text Effect *
*(c)2004-14 mf2fm web-design*
* http://mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var newsp, cursp, flash, item=0;
 
if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
 var oldonload=window.onload;
 if (typeof(oldonload)!='function') window.onload=funky;
 else window.onload=function() {
 if (oldonload) oldonload();
 funky();
 }
}
 
addRVLoadEvent(teleprint);
 
function teleprint () { if (document.getElementById) {
 var span=document.getElementById("news");
 while (span.childNodes.length) span.removeChild(span.childNodes[0]);
 delay*=1000;
 newsp=document.createElement("span");
 cursp=document.createElement("span");
 cursp.appendChild(document.createTextNode(String.fromCharCode(160)+cursor));
 span.appendChild(newsp);
 span.appendChild(cursp);
 ticker();
}}
 
function ticker() {
 var i;
 while (newsp.childNodes.length) newsp.removeChild(newsp.childNodes[0]);
 newsp.appendChild(document.createTextNode(news[item].substring(0,1)));
 for (i=1; i<news[item].length; i++) setTimeout('newsp.firstChild.nodeValue="'+news[item].substring(0, i+1)+'"', 100*i);
 if (news[item].indexOf("www")!=-1) setTimeout('linkit('+item+')', 100*i);
 setTimeout('flash=setInterval("http://cursp.style.visibility=(http://cursp.style.visibility==\'visible\')?\'hidden\':\'visible\'", 234)', 100*i)
 setTimeout('clearInterval(flash)', delay);
 setTimeout('http://cursp.style.visibility="visible"', delay);
 setTimeout('ticker()', delay);
 item=++item%news.length;
}
 
function linkit(q) {
 var a,p,e,l;
 p=news[q].indexOf("www");
 e=news[q].indexOf(" ", p);
 if (e==-1) e=news[q].length;
 l=news[q].substring(p, e);
 while (newsp.childNodes.length) newsp.removeChild(newsp.childNodes[0]);
 newsp.appendChild(document.createTextNode(news[q].substring(0, p)));
 a=document.createElement("a");
 a.href="http://"+l;
 a.appendChild(document.createTextNode(l));
 newsp.appendChild(a);
 newsp.appendChild(document.createTextNode(news[q].substring(e)));
}
// ]]>
</script>
<style>
h2 {
 color: #5C5C5C;
 font-family: "arial";
 font-size: 60%;
 font-weight:light;
 text-shadow: 0rem 0rem 0.500rem #00000040;
text-align: left
}
</style>
<h2><span id="news"></span>
</h2>
</head>

<STYLE>
@font-face{
font-family:easter-bunnies;
src:url(https://dl.dropbox.com/s/cgvn4dyoonpqzec/Easter%20Bunnies.ttf);
}
 
#easterbuns{
    font-family:easter-bunnies;
    font-color: #328354;
    font-size: 2em;

}
 
</STYLE>
 
<p id="easterbuns">₊ ˚ ୨ . cino (- ‸ - " )</p>

</style>
<p id="hihi8">　　 ᰋ ⸝⸝ 6t͟e͟e͟n͟ ◞"

ꪆ୧ ˛

#help:hover {
  -webkit-mask-size: 100%;
  transform:rotate(-15deg);
  transition:0.3s;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: angelic serif;
}

.header {
  overflow: hidden;
  position: center;
  background-color: #d0edbc;
  width: 500px;
  background-position: center center;
  background-color: #d0edbc!important;
  border: 2px solid #d0de9b;
  border-bottom: none;
  color: #d0de9b;
  padding: 2px 7px;
  border-radius: 10px;
  margin: 20px;
  box-shadow: 3px 3px 5px #eee6a1;
  color: black!important;
}

;
  padding: 20px 10px;
}

.header a {
  float: left;
  color: #8f987e;
  text-color:d0de9b;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}
 
.header a:hover {
  background-color: #768371:
  color: black;
}

.header a.active {
  color: #8f987e;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}
</style>
</head>
<body>

<div class="header">
  <a href="#default" class="logo">Ciro's garden</a>
  <div class="header-right">
    <a class="active" href="#home">about</a>
    <a href="#rules">rules</a>
    <a href="#loves">loves</a>
  </div>
</div>

</body>
</html>

<style>
@font-face {
font-family: porkys;
src: url(https://dl.dropbox.com/s/7m63bv7puqb6y75/PORKYS_.TTF);
}
 
@font-face {
font-family: whale;
src:url(https://dl.dropbox.com/s/p0z0j1tfrz3dipu/Oh%20Whale%20-%20TTF.ttf);
 
}
</style>
 
 
<body>
	<div id="container">
		<input hidden type="radio" name="mowmow-control" id="button_a" checked/>
		<input hidden type="radio" name="mowmow-control" id="button_b" />
		<input hidden type="radio" name="mowmow-control" id="button_c" />
		<input hidden type="radio" name="mowmow-control" id="button_d" />
		<div id="mowmow">
			<div class="p-wrapper">
				<section class="panel_a">
					<center><h1>CR SOLIELIOS ON INSTAGRAM anywhere i beg</h1><br>
					<h2 class="title">SLOT 1 <img src="https://gnome.crd.co/assets/images/clothes/0f6b12c8.gif?v=0f119cb7"></h2><br>
					<p class="text">info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info </p>
					<p class="text">info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info </p>
				</center></section>
				<section class="panel_b">
 
					<center><h2 class="title">SLOT 2 <img src="https://gnome.crd.co/assets/images/clothes/8ce060dd.gif?v=0f119cb7"></h2><br>
					<p class="text">info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info </p>
					<p class="text">info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info </p>
				</center></section>
				<section class="panel_c">
					<center><h2 class="title">SLOT 3 <img src="https://gnome.crd.co/assets/images/clothes/1e9340e5.gif?v=0f119cb7"></h2><br>
					<p class="text">info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info </p>
					<p class="text">info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info </p>
				</center>
				</section>
				<section class="panel_d">
					<center><h2 class="title">SLOT 4 <img src="https://gnome.crd.co/assets/images/crowns/7b30d5a9.jpg?v=0f119cb7"></h2><br>
					<p class="text">info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info </p>
					<p class="text">info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info </p>
				</center>
				</section>
			</div>
 
</div>
 
<div id="navigation">
			<label for="button_a" class="label_a"><span>a</span></label>
			<label for="button_b" class="label_b"><span>b</span></label>
			<label for="button_c" class="label_c"><span>c</span></label>
			<label for="button_d" class="label_d"><span>d</span></label>
		</div>
 
<a href="https://limonysal.crd.co/"><img class=lim src="https://64.media.tumblr.com/531946e16c254d0f3f0982efadd14884/tumblr_inline_mkhtbi7qce1qz4rgp.png"></a>
 
        </body>
 
<style>
 
.title {
  text-align: center;
  color: white;
  font-size: 30px;
      font-size: 35px;
    color: #fff;
    text-shadow: -1px 0 #Db94b0, 0 1px #Db94b0, 1px 0 #Db94b0, 0 -1px #Db94b0, 0 0;
    font-family: porkys;
 
}
 
 
.text {
  font-size: 1.5em;
    font-family: magica;
    font-weight: bold;
    color: #F4b4d4;
    font-family: whale;
 
}
 
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
 
body {
	font-family: sans-serif;
	font-size: 11px;
	line-height: 1.5em;
	text-align: justify;
	color: #aaa;
 
}
 
#container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
 
}
 
#mowmow,
#navigation {
	flex: initial;
	display: block;
border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/ROjUrNz.gif") 7 fill round;
background: transparent;
}
 
#mowmow {
	overflow: hidden;
	width: 600px;
	height: 220px;
	border-radius: 4px;
	background-color: #fff;
 
}
 
.p-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform .4s ease-in-out;
}
 
#button_a:checked ~ #mowmow .p-wrapper {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
 
#button_b:checked ~ #mowmow .p-wrapper {
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}
 
#button_c:checked ~ #mowmow .p-wrapper {
	-webkit-transform: translateY(-200%);
	transform: translateY(-200%);
}
 
#button_d:checked ~ #mowmow .p-wrapper {
	-webkit-transform: translateY(-300%);
	transform: translateY(-300%);
}
 
[class^="panel_"] {
	overflow: auto;
	position: relative;
	width: inherit;
	height: inherit;
	padding: 48px;
}
 
#navigation {
	margin-left: 24px;
}
 
label {
	display: block;
	cursor: pointer;
	margin: 8px 0;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	border-radius: 4px;
	color: #fcf4f4;
	background-color: #f4b4d4;
	transition: all .3s ease;
    font-family: porkys;
 
 
}
 
label:hover {
	color: #dca2bf;
	background-color: #ffeed9;
}
 
#button_a:checked ~ #navigation .label_a,
#button_b:checked ~ #navigation .label_b,
#button_c:checked ~ #navigation .label_c,
#button_d:checked ~ #navigation .label_d {
	cursor: default;
	color: #fff;
	background-color: #dca2bf;
}
 
.lim {
position: fixed;
bottom: 10px;
left: 10px;
margin-bottom: 10px;
margin-left: 10px;
width: 10px;
height: auto;
}
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #a3d7c5 #74aa8e;
  }

/* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 10px;
  }

*::-webkit-scrollbar-track {
    background: #74aa8e;
  }

*::-webkit-scrollbar-thumb {
    background-color: #a3d7c5;
    border-radius: 10px;
    border: 3px dashed #ffffff;
  }
 
</style>
<script src="https://assets.tumblr.com/assets/scripts/tumblelog_post_message_queue.js?_v=a8fadfa499d8cb7c3f8eefdf0b1adfdd"></script>

<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hi+Melody&family=Molle:ital@1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Molle:ital@1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mali&display=swap" rel="stylesheet">
</head>
 
<style>
@-webkit-keyframes fall {
0% {
opacity: 0.9;
top: 0
}
 
100% {
opacity: 0.2;
top: 100%
}
}
 
@keyframes fall {
0% {
opacity: 0.9;
top: 0
}
 
100% {
opacity: 0.2;
top: 100%
}
}
 
@-webkit-keyframes blow-soft-left {
0% {
margin-left: 0
}
 
100% {
margin-left: -50%
}
}
 
@keyframes blow-soft-left {
0% {
margin-left: 0
}
 
100% {
margin-left: -50%
}
}
 
@-webkit-keyframes blow-medium-left {
0% {
margin-left: 0
}
 
100% {
margin-left: -100%
}
}
 
@keyframes blow-medium-left {
0% {
margin-left: 0
}
 
100% {
margin-left: -100%
}
}
 
@-webkit-keyframes blow-soft-right {
0% {
margin-left: 0
}
 
100% {
margin-left: 50%
}
}
 
@keyframes blow-soft-right {
0% {
margin-left: 0
}
 
100% {
margin-left: 50%
}
}
 
@-webkit-keyframes blow-medium-right {
0% {
margin-left: 0
}
 
100% {
margin-left: 100%
}
}
 
@keyframes blow-medium-right {
0% {
margin-left: 0
}
 
100% {
margin-left: 100%
}
}
 
@-webkit-keyframes sway-0 {
0% {
-webkit-transform: rotate(-5deg)
}
 
40% {
-webkit-transform: rotate(28deg)
}
 
100% {
-webkit-transform: rotate(3deg)
}
}
 
@keyframes sway-0 {
0% {
-ms-transform: rotate(-5deg);
transform: rotate(-5deg)
}
 
40% {
-ms-transform: rotate(28deg);
transform: rotate(28deg)
}
 
100% {
-ms-transform: rotate(3deg);
transform: rotate(3deg)
}
}
 
@-webkit-keyframes sway-1 {
0% {
-webkit-transform: rotate(10deg)
}
 
40% {
-webkit-transform: rotate(43deg)
}
 
100% {
-webkit-transform: rotate(15deg)
}
}
 
@keyframes sway-1 {
0% {
-ms-transform: rotate(10deg);
transform: rotate(10deg)
}
 
40% {
-ms-transform: rotate(43deg);
transform: rotate(43deg)
}
 
100% {
-ms-transform: rotate(15deg);
transform: rotate(15deg)
}
}
 
@-webkit-keyframes sway-2 {
0% {
-webkit-transform: rotate(15deg)
}
 
40% {
-webkit-transform: rotate(56deg)
}
 
100% {
-webkit-transform: rotate(22deg)
}
}
 
@keyframes sway-2 {
0% {
-ms-transform: rotate(15deg);
transform: rotate(15deg)
}
 
40% {
-ms-transform: rotate(56deg);
transform: rotate(56deg)
}
 
100% {
-ms-transform: rotate(22deg);
transform: rotate(22deg)
}
}
 
@-webkit-keyframes sway-3 {
0% {
-webkit-transform: rotate(25deg)
}
 
40% {
-webkit-transform: rotate(74deg)
}
 
100% {
-webkit-transform: rotate(37deg)
}
}
 
@keyframes sway-3 {
0% {
-ms-transform: rotate(25deg);
transform: rotate(25deg)
}
 
40% {
-ms-transform: rotate(74deg);
transform: rotate(74deg)
}
 
100% {
-ms-transform: rotate(37deg);
transform: rotate(37deg)
}
}
 
@-webkit-keyframes sway-4 {
0% {
-webkit-transform: rotate(40deg)
}
 
40% {
-webkit-transform: rotate(68deg)
}
 
100% {
-webkit-transform: rotate(25deg)
}
}
 
@keyframes sway-4 {
0% {
-ms-transform: rotate(40deg);
transform: rotate(40deg)
}
 
40% {
-ms-transform: rotate(68deg);
transform: rotate(68deg)
}
 
100% {
-ms-transform: rotate(25deg);
transform: rotate(25deg)
}
}
 
@-webkit-keyframes sway-5 {
0% {
-webkit-transform: rotate(50deg)
}
 
40% {
-webkit-transform: rotate(78deg)
}
 
100% {
-webkit-transform: rotate(40deg)
}
}
 
@keyframes sway-5 {
0% {
-ms-transform: rotate(50deg);
transform: rotate(50deg)
}
 
40% {
-ms-transform: rotate(78deg);
transform: rotate(78deg)
}
 
100% {
-ms-transform: rotate(40deg);
transform: rotate(40deg)
}
}
 
@-webkit-keyframes sway-6 {
0% {
-webkit-transform: rotate(65deg)
}
 
40% {
-webkit-transform: rotate(92deg)
}
 
100% {
-webkit-transform: rotate(58deg)
}
}
 
@keyframes sway-6 {
0% {
-ms-transform: rotate(65deg);
transform: rotate(65deg)
}
 
40% {
-ms-transform: rotate(92deg);
transform: rotate(92deg)
}
 
100% {
-ms-transform: rotate(58deg);
transform: rotate(58deg)
}
}
 
@-webkit-keyframes sway-7 {
0% {
-webkit-transform: rotate(72deg)
}
 
40% {
-webkit-transform: rotate(118deg)
}
 
100% {
-webkit-transform: rotate(68deg)
}
}
 
@keyframes sway-7 {
0% {
-ms-transform: rotate(72deg);
transform: rotate(72deg)
}
 
40% {
-ms-transform: rotate(118deg);
transform: rotate(118deg)
}
 
100% {
-ms-transform: rotate(68deg);
transform: rotate(68deg)
}
}
 
@-webkit-keyframes sway-8 {
0% {
-webkit-transform: rotate(94deg)
}
 
40% {
-webkit-transform: rotate(136deg)
}
 
100% {
-webkit-transform: rotate(82deg)
}
}
 
@keyframes sway-8 {
0% {
-ms-transform: rotate(94deg);
transform: rotate(94deg)
}
 
40% {
-ms-transform: rotate(136deg);
transform: rotate(136deg)
}
 
100% {
-ms-transform: rotate(82deg);
transform: rotate(82deg)
}
}
 
.leaves {
background: -webkit-linear-gradient(120deg, rgba(185, 255, 208), rgba(185, 255, 208));
background: linear-gradient(120deg, rgba(185, 255, 208, 0.9), rgba(185, 255, 208, 0.9));
pointer-events: none;
position: absolute
}
 
</style>
 
<script type="text/javascript">
// Plugin code
(function($) {
/** Polyfills and prerequisites **/
 
// requestAnimationFrame Polyfill
var lastTime = 0;
var vendors = ['webkit', 'o', 'ms', 'moz', ''];
var vendorCount = vendors.length;
 
for (var x = 0; x < vendorCount && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
 
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
 
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
 
return id;
};
}
 
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
 
// Prefixed event check
$.fn.prefixedEvent = function(type, callback) {
for (var x = 0; x < vendorCount; ++x) {
if (!vendors[x]) {
type = type.toLowerCase();
}
 
el = (this instanceof jQuery ? this[0] : this);
el.addEventListener(vendors[x] + type, callback, false);
}
 
return this;
};
 
// Test if element is in viewport
function elementInViewport(el) {
 
if (el instanceof jQuery) {
el = el[0];
}
 
var rect = el.getBoundingClientRect();
 
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
 
// Random array element
function randomArrayElem(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
 
// Random integer
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
 
/** Actual plugin code **/
$.fn.leaves = function(event, options) {
 
// Target element
var target = this.selector == "" ? $('body') : this;
 
// Defaults for the option object, which gets extended below
var defaults = {
blowAnimations: ['blow-soft-left', 'blow-medium-left', 'blow-soft-right', 'blow-medium-right'],
className: 'leaves',
fallSpeed: 1,
maxSize: 14,
minSize: 10,
newOn: 300,
swayAnimations: ['sway-0', 'sway-1', 'sway-2', 'sway-3', 'sway-4', 'sway-5', 'sway-6', 'sway-7', 'sway-8']
};
 
var options = $.extend({}, defaults, options);
 
// Default or start event
if (typeof event === 'undefined' || event === 'start') {
 
// Set the overflow-x CSS property on the target element to prevent horizontal scrollbars
target.css({
'overflow-x': 'hidden'
});
 
// Function that inserts new petals into the document
var petalCreator = function() {
if (target.data('leaves-anim-id')) {
setTimeout(function() {
requestAnimationFrame(petalCreator);
}, options.newOn);
}
 
// Get one random animation of each type and randomize fall time of the petals
var blowAnimation = randomArrayElem(options.blowAnimations);
var swayAnimation = randomArrayElem(options.swayAnimations);
var fallTime = ((document.documentElement.clientHeight * 0.007) + Math.round(Math.random() * 5)) * options.fallSpeed;
 
// Build animation
var animations =
'fall ' + fallTime + 's linear 0s 1' + ', ' +
blowAnimation + ' ' + (((fallTime > 30 ? fallTime : 30) - 20) + randomInt(0, 20)) + 's linear 0s infinite' + ', ' +
swayAnimation + ' ' + randomInt(2, 4) + 's linear 0s infinite';
 
// Create petal and randomize size
var petal = $('<div class="' + options.className + '" />');
var height = randomInt(options.minSize, options.maxSize);
var width = height - Math.floor(randomInt(0, options.minSize) / 3);
 
// Apply Event Listener to remove petals that reach the bottom of the page
petal.prefixedEvent('AnimationEnd', function() {
if (!elementInViewport(this)) {
$(this).remove();
}
})
// Apply Event Listener to remove petals that finish their horizontal float animation
.prefixedEvent('AnimationIteration', function(ev) {
if (
(
$.inArray(ev.animationName, options.blowAnimations) != -1 ||
$.inArray(ev.animationName, options.swayAnimations) != -1
) &&
!elementInViewport(this)
) {
$(this).remove();
}
})
.css({
'-webkit-animation': animations,
animation: animations,
'border-radius': randomInt(options.maxSize, (options.maxSize + Math.floor(Math.random() * 10))) + 'px ' + randomInt(1, Math.floor(width / 4)) + 'px',
height: height + 'px',
left: (Math.random() * document.documentElement.clientWidth - 100) + 'px',
'margin-top': (-(Math.floor(Math.random() * 20) + 15)) + 'px',
width: width + 'px'
});
 
target.append(petal);
};
 
// Finally: Start adding petals
target.data('leaves-anim-id', requestAnimationFrame(petalCreator));
 
}
// Stop event, which stops the animation loop and removes all current blossoms
else if (event === 'stop') {
 
// Cancel animation
var animId = target.data('leaves-anim-id');
 
if (animId) {
cancelAnimationFrame(animId);
target.data('leaves-anim-id', null);
}
 
// Remove all current blossoms
setTimeout(function() {
$('.' + options.className).remove();
}, (options.newOn + 50));
 
}
};
}(jQuery));
 
$(document).ready(function() {
$('body').leaves();
});
 
</script>

/*cr crditem <3 enjoy!*/
 
<style type="text/css">* {cursor: url(https://cur.cursors-4u.net/others/oth-6/oth639.cur), auto !important;}</style>
 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@800&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Mali:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet">
<head>
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link href="//fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
 
<script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
 

<script src="https://dl.dropbox.com/s/vyffmps0ly6ikf4/glenplayer06.js"></script>
<script type="text/javascript">
// <![CDATA[
var news=Array("name","name"); // name here //
var cursor=""; // set cursor
var delay=5; // seconds between each news item
 
/***************************\
* News Ticker Text Effect *
*(c)2004-14 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var newsp, cursp, flash, item=0;
 
if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}
 
addRVLoadEvent(teleprint);
 
function teleprint () { if (document.getElementById) {
var span=document.getElementById("news");
while (span.childNodes.length) span.removeChild(span.childNodes[0]);
delay*=1000;
newsp=document.createElement("span");
cursp=document.createElement("span");
cursp.appendChild(document.createTextNode(String.fromCharCode(160)+cursor));
span.appendChild(newsp);
span.appendChild(cursp);
ticker();
}}
 
function ticker() {
var i;
while (newsp.childNodes.length) newsp.removeChild(newsp.childNodes[0]);
newsp.appendChild(document.createTextNode(news[item].substring(0,1)));
for (i=1; i<news[item].length; i++) setTimeout('newsp.firstChild.nodeValue="'+news[item].substring(0, i+1)+'"', 100*i);
if (news[item].indexOf("www")!=-1) setTimeout('linkit('+item+')', 100*i);
setTimeout('flash=setInterval("cursp.style.visibility=(cursp.style.visibility==\'visible\')?\'hidden\':\'visible\'", 234)', 100*i)
setTimeout('clearInterval(flash)', delay);
setTimeout('cursp.style.visibility="visible"', delay);
setTimeout('ticker()', delay);
item=++item%news.length;
}
 
function linkit(q) {
var a,p,e,l;
p=news[q].indexOf("www");
e=news[q].indexOf(" ", p);
if (e==-1) e=news[q].length;
l=news[q].substring(p, e);
while (newsp.childNodes.length) newsp.removeChild(newsp.childNodes[0]);
newsp.appendChild(document.createTextNode(news[q].substring(0, p)));
a=document.createElement("a");
a.href="http://"+l;
a.appendChild(document.createTextNode(l));
newsp.appendChild(a);
newsp.appendChild(document.createTextNode(news[q].substring(e)));
}
// ]]>
</script>
</head>
 
<style>
 
@font-face {
font-family: cutie;
src: url(https://dl.dropbox.com/s/xo075bh6tbd4f7d/CP.ttf);
}
 
@font-face {
font-family: billo;
src: url(https://dl.dropbox.com/s/klv8tmajlqrb2xz/BILLO___.TTF);
}
 
@font-face {
font-family: day;
src: url(https://dl.dropbox.com/s/yob9nensv1rr0zq/HelloDay.otf);
}
 
@font-face {
font-family: janda;
src: url(https://dl.dropbox.com/s/yrdkxo1lp0quocw/JandaHappyDay.ttf);
}
 
@font-face {
font-family: kitten;
src: url(https://dl.dropbox.com/s/gluaq7dfui5acoa/KittenSlantTrial.ttf);
}
 
 
#news { /* css of the name */
font-family: billo;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
position: absolute;
color: white;
font-weight: bold;
font-size: 1.8em;
z-index: 2;
bottom: 80px;
left: 20px;
}
 
#abt { /* css of the info (race prns etc) */
font-family: cutie;
position: absolute;
bottom: 70px;
left: 20px;
color: white;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-size: 1.2em;
}
 
#cont { /* dont edit this :P */
background: transparent;
position: relative;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 7px;
height: 200px;
transition: 0.8s;
-moz-transition: 0.8s;
-webkit-transition: 0.8s;
-o-transition: 0.8s;
padding: 10px;
display: flex;
 
}
 
.inside { /* css of image dont edit :P */
 
border-radius: 7px;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 100%;
object-fit: cover;
transition: 0.8s;
-moz-transition: 0.8s;
-webkit-transition: 0.8s;
-o-transition: 0.8s;
 
}
 
#cont:hover {
width: 100%;
 
}
 
#cont:hover .inside {
width: 40%;
height: 100%;
object-fit: cover;
}
 
#cont2 {
height: 200px;
width: 100%;
margin-left: 10px;
padding: 0;
}
 
#scroll1 { /* css of the scrollbox 1 */
text-align: left;
border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
padding: 7px;
height: 82px;
width: 100%;
opacity: 0;
overflow: scroll;
font-family: 'Mali', cursive;
font-size: 0.8em;
transition: 0.8s;
-moz-transition: 0.8s;
-webkit-transition: 0.8s;
-o-transition: 0.8s;
line-height: 1.3em;
}
 
#scroll2 { /* css of the scrollbox 2 */
line-height: 1.3em;
transition: 0.8s;
-moz-transition: 0.8s;
-webkit-transition: 0.8s;
-o-transition: 0.8s;
text-align: left;
border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
margin-top: 10px;
padding: 7px;
height: 82px;
width: 100%;
opacity: 0;
overflow: scroll;
font-family: 'Mali', cursive;
font-size: 0.8em;
}
 
#cont:hover #scroll1 {
opacity: 1;
}
 
#cont:hover #scroll2 {
opacity: 1;
}
 
mark { /* round stuff like highlight */
background: #DF4AA7;
border-radius:7px;
border: 1px solid black;
padding-left: 5px;
padding-right: 5px;
color: #fff;
}
 
:root {
--Music-Player-Vinyl:#fff;
--Vinyl-Icon-Size:17px;
--Vinyl-Spin-Speed:3.5s;
--Music-Controls:#fff;
--Music-Controls-Size:12px;
--Music-Title-Font-Size:11px;
--Music-Title-Color:#000;
}
.glenjams-06 {
display:none;
position: absolute;
bottom: 20px;
left: 20px;
z-index:99;
}
 
.pasta {
display:flex;
align-items:center;
}
 
.vinyl-spin {
animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
-webkit-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
-moz-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
-o-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite;
}
 
.vinyl-pause {
animation-play-state:paused;
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
}
 
@-webkit-keyframes recordspin {
from {
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
to {
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
}
 
@keyframes recordspin {
from {
-ms-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
to {
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
}
 
.vinyl, .vinyl svg {
width:var(--Vinyl-Icon-Size);
height:var(--Vinyl-Icon-Size);
}
 
.music-controls {
margin-left:10px;
width:var(--Music-Controls-Size);
overflow:hidden;
cursor:pointer;
}
 
.music-controls svg {
width:var(--Music-Controls-Size);
height:var(--Music-Controls-Size);
color:var(--Music-Controls);
stroke-width:1.5px;
}
 
.pausee {display:none;}
 
.beff {display:none;}
.aff {display:block;}
 
.music-title {
margin-left:8px;
font-family:work sans;
font-size:var(--Music-Title-Font-Size);
color:var(--Music-Title-Color);
}
 
.ins { /* dont edit this :P */
position: fixed;
bottom: 10px;
left: 10px;
margin-bottom: 10px;
margin-left: 10px;
width: 10px;
height: auto;
}
 
</style>
 
<div id="cont">
 
<div id="news"></div> 
 
<div id="abt"> info  </div> 
 
<div class="glenjams-06">
<div class="pasta">
<div class="vinyl"></div>
<div class="music-controls">
<div class="playy"><i data-feather="play"></i></div>
<div class="pausee"><i data-feather="pause"></i></div>
</div>
<div class="music-title"></div>
 
<audio id="audio" src="https://dl.dropbox.com/s/42mjna9sxsleb5j/Luis%20Miguel%20-%20Delirio.mp3" type="audio"></audio> 
</div>
</div>
 
<img class=inside src="https://i.imgur.com/YMxEmoH.jpg"> 
 
<div id="cont2">
<div id="scroll1">
<span style="font-family: cutie; font-size:1.2em;"><mark>about & interests</mark></span> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info 
 
</div> 
 
<div id="scroll2"> <span style="font-family: cutie; font-size:1.2em;"><mark>rules</mark></span>
info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info 
</div> 
</div>

</div>
 
<script>feather.replace()</script>
<a href="https://twitter.com/crditem"><img class=ins src="https://64.media.tumblr.com/tumblr_lkl6u2Pii71qfamg6.gif"></a>

Check out our Python playground!