Live Web – an example of live web & self portrait

An example of live web – Your world of text

One of my favorite. It’s endless, chaotic, collaborative, random, useless and hollow like web itself. Your World of Text is an infinite grid of text editable by anyone. The changes made by other people appear on your screen as they happen. You can infinitely scroll through the world to see people’s scribbles. It’s a live gigantic empty sketchbook for everyone or just you. You can create your own URL to go to a new world starting off blank like http://yourworldoftext.com/liveweb. Strictly, it might not fall into category of live web, but one of the features forces me to place it in. Being raw without any kind of censorship prior to be disclosed is dangerous but meaningful thing about being live.

 

Self portrait – Something I like

With using html5 video tag and simple click interaction, I made a single page web of gifs collection from what I like. When clicking one of gifs, it will be highlighted with playing video while other are paused and faded out. Here is the link of demo.

self1

self2

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:900" rel="stylesheet">
<style>
body {
margin: 10px;
}

.wrapper {
width: 810px;
display: grid;
grid-gap: 3px;
grid-template-columns: 200px 200px 200px 200px;
background-color: #fff;
}

.snippet {
font-family: 'Raleway', sans-serif;
color: #fff;
font-size: 20px;
width: 150px;
height: auto;
padding-top: 10px;
padding-left: 10px;
position: fixed;
z-index: -1;
}

.box {
background-color: #fff;
border-radius: 0px;
margin: 0;
width: 200px;
height: 130px;
overflow: hidden;
}

.video {
margin: 0;
width: 135%;
transform: translateX(-10%) translateY(-10%);
height: auto;
}
</style>
<title>Self Portrait of Younho</title>
</head>

<body>
<div class="wrapper">
<div class="box">
<div class="snippet">Yeah I was a mad man</div>
<video class="video" src="https://media.giphy.com/media/39TWBQZ296G40/giphy.mp4" autoplay="" loop=""></video>
</div>
<div class="box">
<h1 class="snippet">Love Knicks as much as I hate it</h1>
<video class="video" src="https://media.giphy.com/media/ym3yVHEIgWEG4/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">I'm a part time nanny..or fulltime</h1>
<video class="video" src="https://media.giphy.com/media/13AXYJh2jDt2IE/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">You should try it!!!</h1>
<video class="video" src="https://media.giphy.com/media/3ofSB1BswqflLVt4ic/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">Yes I watched the whole season again</h1>
<video class="video" src="https://media.giphy.com/media/UHLtCLwRsbDFK/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">Black. Iced. Need it now</h1>
<video class="video" src="https://media.giphy.com/media/l41lRi0VWdnH90yJy/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">Kind of blue : all time favorite</h1>
<video class="video" src="https://media.giphy.com/media/u0SaOREpBwSTC/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">Time to go home...</h1>
<video class="video" src="https://media.giphy.com/media/3oriffVYPYhQbDRe3C/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">I had a dream...</h1>
<video class="video" src="https://media.giphy.com/media/3oz8xFHHldmilI2Was/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">Who doesn't???</h1>
<video class="video" src="https://media.giphy.com/media/CdqNOCOc8Lcw8/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">Shouldn't have started it...</h1>
<video class="video" src="https://media.giphy.com/media/vyPLDShqm3j5S/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">...of course I'm joking</h1>
<video class="video" src="https://media.giphy.com/media/26tn33aiTi1jkl6H6/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">No.1 destination</h1>
<video class="video" src="https://media.giphy.com/media/3o85xJWqnjH1Xu5rmE/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">lol</h1>
<video class="video" src="https://media.giphy.com/media/1mtKnWJVTpUKQ/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">It's not pink...</h1>
<video class="video" src="https://media.giphy.com/media/k0H9IeP5g4O52/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">Don't overcook please...</h1>
<video class="video" src="https://media.giphy.com/media/xUA7aU4305QHkswlji/giphy.mp4" autoplay="" loop="">
</div>
</div>
<script type="text/javascript">
$('.video').each(function(e) {
$(this).on("click", pause);
$(this).on("mouseout", play);
});

var r, g, b;

function pause(e) {
randomNumber();
this.parentNode.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
this.style.opacity = 0.4;
$('.video').not(this).each(function() { $(this).get(0).pause(); });
$('.video').not(this).each(function() { $(this).get(0).style.opacity = 0.15; });
$('.video').not(this).each(function() { $(this).get(0).parentNode.style.backgroundColor = 'white'; });
this.parentNode.children[0].style.zIndex = 2;
}

function play(e) {
this.play();
this.parentNode.style.backgroundColor = '#fff';
this.style.opacity = 1;
$('.video').each(function() { $(this).get(0).play();});
$('.video').not(this).each(function() { $(this).get(0).style.opacity = 1; });
$('.video').not(this).each(function() { $(this).get(0).parentNode.style.backgroundColor = '#fff';});
this.parentNode.children[0].style.zIndex = -1;
}

function randomNumber() {
r = Math.floor(Math.random() * 255);
g = Math.floor(Math.random() * 255);
b = Math.floor(Math.random() * 255);
}
</script>
</body>

</html>

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *