Tuna and Alice

Developer
Kevin Isom
Size
4,963 Kb
Views
30,360
  1. Tuna and Alice Previews
  2. Tuna and Alice HTML Codes
  3. Tuna and Alice CSS Codes
  4. Tuna and Alice JS Codes

How do I make an tuna and alice?

A variation on a little sequence using waypoints.js and skrollr.js to change Alice's "attitude" as you make her "fall" down the rabbit hole with scrolling and making Tuna fly up.. What is a tuna and alice? How do you make a tuna and alice? This script and codes were developed by Kevin Isom on 19 November 2022, Saturday.

Tuna and Alice Previews
IQ Test

Tuna and Alice - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tuna and Alice</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .tuna-falling { position:fixed; bottom: 0; right: 50%; transform: translateX(300px); width: 170px; z-index:1;
}
.tuna-falling img { position: absolute; top: 0; left: 0; max-width: 100%;
}
.tuna-falling .black-tuna { position: relative;
}
.tuna-falling .tuna-glow { opacity: 0;
}
.tuna-stopped .real-tuna { opacity:1;
}
#tunnel { position: relative; top: 0; left: 0; background: url(http://stash.rachelnabors.com/codepen/alice/bg-tunnel-border-left.svg?1) 0 0 repeat-y, url(http://stash.rachelnabors.com/codepen/alice/bg-tunnel-border-right.svg?1) 100% 0 repeat-y, url(http://stash.rachelnabors.com/codepen/alice/bg-tunnel-furniture-comp900.svg) top center repeat-y, url(http://stash.rachelnabors.com/codepen/alice/bg-tunnel-specks.png), #6c373f; background-size: 20px 150px, 20px 150px, 80% auto, auto auto;
}
.wrapper { width: 800px; margin: 0 auto;
}
body { background: #000;
}
.page { /* Each page has a 3/4 ratio */ padding-top: 75%; /* Hide the text */ text-indent: 100%;	white-space: nowrap;	overflow: hidden;
}
.alice-falling { background-image: url('http://stash.rachelnabors.com/codepen/alice/alice-fall-saebaba4ad9.png'); background-size: 100% auto; width: 350px; padding-top: 545px; top: -10%; left: 50%; position: fixed; transform: translate(-50%); z-index: 20;
}
.curious .alice-falling { background-position: 0 20%;
}
.bored .alice-falling { background-position: 0 80%;
}
.sleeping .alice-falling { background-position: 0 60%;
}
.waking .alice-falling { background-position: 0 100%;
}
.weird .alice-falling { background-position: 0 0;
}
.jolted .alice-falling { background-position: 0 40%;
}
@keyframes freak-out { 0% { background-position: 0 0; } 100% { background-position: 0 200%; }
}
.frightened .alice-falling { animation: freak-out 1.5s steps(2) infinite; background: url('http://stash.rachelnabors.com/codepen/alice/alice-frightened-s41f9b8ddd1.png') 0 0 no-repeat; background-size: 100% auto;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!--
Tahttp://rachelnabors.com/alice-in-videoland/book
-->
<div class="wrapper"> <div class="alice-falling" data-0="top:-10%" data-6124="top:80%"></div> <!-- Now make Tuna "fall" from the bottom. See if you can expose him as the Cheshire cat he is!--> <div class="tuna-falling" data-0="top:80%;" data-6124="top:-10%"> <img class="black-tuna" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/tuna-alice3.png" data-0="opacity:1;" data-6124="opacity:0;" /> <img class="tuna-glow" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/tuna-alice2.png" /> <img class="real-tuna" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/tuna-alice1.png" /> </div>
<div id="skrollr-body"> <div id="tunnel" class="frightened"> <div class="page page_falling falling_frightened" data-mood="frightened"> <p>Either the well was very deep or she fell very slowly, for she had plenty of time to look about her on the way down.</p> </div> <div class="page page_falling falling_curious" data-mood="curious"> <p>At first it was too dark for her to see anything, but as her eyes adjusted, she could make out what seemed to be cupboards, bookshelves, paintings, lining the walls she was rushing past. </p> </div> <div class="page page_falling falling_bored" data-mood="bored"> <p>Down, down, down she fell. Would it never come to an end? She began to wonder how many miles she’d fallen and whether she’d end up at the center of the Earth&mdash;or come out the other side!</p> </div> <div class="page page_falling falling_sleeping" data-mood="sleeping"> <p>How would she call her sister? What if she didn’t speak the language? What if they couldn’t understand her and put her in an orphanage? She’d never see her sister or her cat again!</p> </div> <div class="page page_falling falling_waking" data-mood="waking"> <p>Poor Tuna! Would they remember to clean his litter box or give him his kibble? If only Tuna were with her now. There were no mice to live on in the air, but perhaps he could catch a bat. </p> </div> <!-- Wait 3 seconds or so for the video to end. Then return to the scene --> <div class="page page_falling falling_weird" data-mood="weird"> <p>Before she could worry too much, her eyes grew heavy and she began to nod off whispering, “Do cats eat bats?” to no one in particular.</p> </div> <div class="page page_falling falling_aftermath" data-mood="jolted"> <p>She must’ve been dreaming, because for a moment she imagined he was there with her, as large as her sister.</p> </div> <div class="page page_falling falling_lookit-cat" data-mood="jolted"></div> <div class="page page_falling falling_cat-reveal" data-mood="jolted"></div> <div class="page page_falling falling_cat-out" data-mood="jolted"> <p>&ldquo;Oh yes, cats eat bats all the time. You wouldn’t happen to be a bat, now would you?&rdquo;</p> </div> </div>
</div><!--/#tunnel-->
</div><!--/.wrapper --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://stash.rachelnabors.com/codepen/alice/jquery.waypoints.min.js'></script>
<script src='http://stash.rachelnabors.com/codepen/alice/skrollr.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tuna and Alice - Script Codes CSS Codes

.tuna-falling { position:fixed; bottom: 0; right: 50%; transform: translateX(300px); width: 170px; z-index:1;
}
.tuna-falling img { position: absolute; top: 0; left: 0; max-width: 100%;
}
.tuna-falling .black-tuna { position: relative;
}
.tuna-falling .tuna-glow { opacity: 0;
}
.tuna-stopped .real-tuna { opacity:1;
}
#tunnel { position: relative; top: 0; left: 0; background: url(http://stash.rachelnabors.com/codepen/alice/bg-tunnel-border-left.svg?1) 0 0 repeat-y, url(http://stash.rachelnabors.com/codepen/alice/bg-tunnel-border-right.svg?1) 100% 0 repeat-y, url(http://stash.rachelnabors.com/codepen/alice/bg-tunnel-furniture-comp900.svg) top center repeat-y, url(http://stash.rachelnabors.com/codepen/alice/bg-tunnel-specks.png), #6c373f; background-size: 20px 150px, 20px 150px, 80% auto, auto auto;
}
.wrapper { width: 800px; margin: 0 auto;
}
body { background: #000;
}
.page { /* Each page has a 3/4 ratio */ padding-top: 75%; /* Hide the text */ text-indent: 100%;	white-space: nowrap;	overflow: hidden;
}
.alice-falling { background-image: url('http://stash.rachelnabors.com/codepen/alice/alice-fall-saebaba4ad9.png'); background-size: 100% auto; width: 350px; padding-top: 545px; top: -10%; left: 50%; position: fixed; transform: translate(-50%); z-index: 20;
}
.curious .alice-falling { background-position: 0 20%;
}
.bored .alice-falling { background-position: 0 80%;
}
.sleeping .alice-falling { background-position: 0 60%;
}
.waking .alice-falling { background-position: 0 100%;
}
.weird .alice-falling { background-position: 0 0;
}
.jolted .alice-falling { background-position: 0 40%;
}
@keyframes freak-out { 0% { background-position: 0 0; } 100% { background-position: 0 200%; }
}
.frightened .alice-falling { animation: freak-out 1.5s steps(2) infinite; background: url('http://stash.rachelnabors.com/codepen/alice/alice-frightened-s41f9b8ddd1.png') 0 0 no-repeat; background-size: 100% auto;
}

Tuna and Alice - Script Codes JS Codes

$(window).load(function() { //Start up the skrollr object	skrollr.init({ //keeps the bottom from being long	forceHeight: false	}); // The rest of this controls switching Alice's moods using jQuery Waypoints // How to guess which frame is "being read". var beingRead = function() { // It would be approximately centered, of equal distance from top as from bottom. var $screenHeight = $.waypoints('viewportHeight'); var $pageHeight = $(".page").height(); var offset = ($pageHeight - $screenHeight) / 2 * -1; return offset; } $(".page").waypoint(function(direction) { var mood = $(this).data("mood"); $("body").removeClass().addClass(mood); if (direction === "up") { // if scrolling up $(this).addClass("in-view").removeClass("scrolled-past") .waypoint('next').removeClass("in-view"); } else { // else, assuming we're not scrolling at all or are scrolling down $(this).addClass("in-view").removeClass("scrolled-past") .waypoint('prev').removeClass("in-view").addClass("scrolled-past"); } }, { offset: beingRead() });
});
Tuna and Alice - Script Codes
Tuna and Alice - Script Codes
Home Page Home
Developer Kevin Isom
Username Kevnz
Uploaded November 19, 2022
Rating 3
Size 4,963 Kb
Views 30,360
Do you need developer help for Tuna and Alice?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Isom (Kevnz) Script Codes
Name
Pay
IFrame sandbox
A Pen by Kevin Isom
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!