Falling Down the Rabbit Hole

Developer
Rachel Nabors
Size
4,578 Kb
Views
36,432
  1. Falling Down the Rabbit Hole Previews
  2. Falling Down the Rabbit Hole HTML Codes
  3. Falling Down the Rabbit Hole CSS Codes
  4. Falling Down the Rabbit Hole JS Codes

How do I make an falling down the rabbit hole?

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.. What is a falling down the rabbit hole? How do you make a falling down the rabbit hole? This script and codes were developed by Rachel Nabors on 14 June 2022, Tuesday.

Falling Down the Rabbit Hole Previews
IQ Test

Falling Down the Rabbit Hole - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Falling Down the Rabbit Hole</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! */ #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;
}
.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: 31.25%; padding-top: 48.73047%; top: -10%; left: 50%; margin-left: -15.625%; position: fixed; 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> <!--
I did all the art. You can read the full version here: http://rachelnabors.com/alice-in-videoland/book
At the very end are links to the github repo + 2 tutorial articles I wrote about how I did it :D
--> <div class="alice-falling"></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--> <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>

Falling Down the Rabbit Hole - Script Codes CSS Codes

#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;
}
.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: 31.25%; padding-top: 48.73047%; top: -10%; left: 50%; margin-left: -15.625%; position: fixed; 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;
}

Falling Down the Rabbit Hole - Script Codes JS Codes

$(window).load(function() {
// 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;
}
// calculate the height of the tunnels	var tunnelTop = Math.round($("#tunnel").offset().top);	var tunnelTopData = "data-" + tunnelTop;	var tunnelBottomData = "data-" + (tunnelTop + Math.round($("#tunnel").height()));	// Give Falling Alice her skrollr measurements as data attributes	$(".alice-falling").attr(tunnelTopData, "top:-10%").attr(tunnelBottomData, "top:80%");	//Start up the skrollr object	skrollr.init({	forceHeight: false	});
$(".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()
});
});
Falling Down the Rabbit Hole - Script Codes
Falling Down the Rabbit Hole - Script Codes
Home Page Home
Developer Rachel Nabors
Username rachelnabors
Uploaded June 14, 2022
Rating 4.5
Size 4,578 Kb
Views 36,432
Do you need developer help for Falling Down the Rabbit Hole?

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!

Rachel Nabors (rachelnabors) Script Codes
Name
Yarn Loader
Rolling a Ball with CSS Transitions
Crisp lines at smaller sizes
From walk to run
Spinner
Geek Badge
Loading Tuna in the Window
Pure CSS Badge Logo
Tuna in the Window
Walkcycle with music loop
Create amazing blog posts 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!