Skip to content

Instantly share code, notes, and snippets.

@fallengiants

fallengiants/index.html

Created January 19, 2016 19:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fallengiants/1c7c3c631a2bcfd7c1c3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fallengiants/1c7c3c631a2bcfd7c1c3 to your computer and use it in GitHub Desktop.
Download ZIP
vExpVP
Raw
index.html
<html>
<body>
<div class="title">
<h2>I AM AN ANIMU</h2>
</div>
<div class="collector">
<div class="porn">
</div>
<div class="wordstuff">
there were dirty thoughts in her head because somebody put paper in it.
her smell was like a meat vice.
everything was stink like karate and then ham
so much ham
there was even ham in the president's butt
who could even begin to love a werewolf with a minivan
nobody could ever do such a thing
on a night that was full of even more ham
also dynamite, and the raw poop of flowers
why
why won't anybody put their hand in the box
even salmon swim home to mate
to mate with bees
on a stinky halloween when scarecrows eat naked chickens plucked
full of incense
their bodies redolent of electric lightbulbs five for one dollar
who even heard of such a deal
of such amazing savings
she had forgotten her bag in her volvo
perhaps it was even a volkswagen
she did not remember
nobody could ever remember such a thing
</div>
</div>
</body>
</html>
Raw
script.js
$(document).ready ->
$t = $('.porn')
offset_x = -300
direction = 1
speed = 2
swivels = ->
offset_x += speed * direction
$t.css('background-position', "#{offset_x}px -90px")
if offset_x > -200 or offset_x < -360
direction *= -1
setInterval swivels, 30
$w = $('.wordstuff')
my_texts = $w.text()
wlen = 0
$w.text('')
imagepoints = [
[300, 'http://img2.wikia.nocookie.net/__cb20131222000556/transcending-zenith-role-play/images/thumb/6/6a/Anime-Girl-Brown-Hair-Green-Eyes-HD-Wallpaper.jpg/960px-Anime-Girl-Brown-Hair-Green-Eyes-HD-Wallpaper.jpg']]
typeOut = ->
return true if wlen >= my_texts.length
checkForParties(wlen)
$w.text my_texts.slice(0,wlen)
wlen += 1
$w.scrollTop($w[0].scrollHeight)
checkForParties = (pt) ->
imagepoints.forEach ([p, url]) ->
if pt is p
$t.fadeOut()
if pt is p + 30
$t.css('background-image', "url(\"#{url}\")")
$t.fadeIn()
setInterval typeOut, 30
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
Raw
style.css
body
min-height: 800px
background-color: #335
color: white
h2
text-shadow: 1px 3px 10px #aaa
font-family: "Helvetica Neue"
font-weight: 300
font-size: 30px
margin: 0 auto
display: block
text-align: center
.collector
width: 1024px
margin: 0 auto
.porn
float: left
width: 300px
height: 400px
border: 1px solid black
background-image: url('http://images5.fanpop.com/image/photos/30800000/Anime-Girl-sakura_shaoran-30856030-960-690.jpg')
background-position: -300px -90px
.wordstuff
width: 600px
float: right
margin-right: 70px
height: 373px
border: 5px solid pink
background-color: #606
opacity: 0.5
padding: 10px
font: 16px "Helvetica Neue"
white-space: pre
overflow-x: scroll
Raw
styles
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment