The Fantastic Mr Fox

Developer
Malith Hettiarachchi
Size
10,435 Kb
Views
8,096
  1. The Fantastic Mr Fox Previews
  2. The Fantastic Mr Fox HTML Codes
  3. The Fantastic Mr Fox CSS Codes
  4. The Fantastic Mr Fox JS Codes

How do I make an the fantastic mr fox?

Thanks for the challenge - this is one of my favorite movies!All illustrations are made by me & the top photo is from unsplash.com.. What is a the fantastic mr fox? How do you make a the fantastic mr fox? This script and codes were developed by Malith Hettiarachchi on 03 January 2023, Tuesday.

The Fantastic Mr Fox Previews
IQ Test

The Fantastic Mr Fox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Fantastic Mr Fox</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,400italic,600italic' rel='stylesheet' type='text/css'>
<div class="header"> <div class="wrapper"> <div class="title"> <h1>FANTASTIC MR. FOX</h1> </div> <div class="description" data-scroll-reveal> <p>Written by</p> <div class="authors"><p>Roald Dahl, Wes Anderson &amp; Noah Baumbach</p></div> <p class="date">March 4, 2007 </p> </div> <div class="characters" data-scroll-reveal> <p>Characters</p> <ul> <li class="modal-link" id="fox"><p>Fox</p></li> <li class="modal-link" id="mrs"><p>Mrs. Fox</p></li> <li class="modal-link" id="ash"><p>Ash</p></li> </ul> </div> </div>
</div>
<div class="progress"></div>
<div class="scroll" id="scroll-links"> <ul> <li class="link-1"><p>Scene 1</p></li> <li class="link-2"><p>Scene 2</p></li> <li class="link-3"><p>Scene 3</p></li> <li class="link-4"><p>Scene 4</p></li> <li class="link-5"><p>Scene 5</p></li> </ul>
</div>
<div class="script">
<div class="scene">
<div class="description"> <h3 id="scene-1" class="scene-holder">1</h3> <h1>EXT. WOODS. DAY</h1> <p>An apple tree stands alone at the top of a hill. A handsome fox dressed in an Edwardian-style navy velvet suit leans against it with his arms folded and his legs crossed, chewing on a reed of wild grass. He holds an apple core in his paw. He spits out a seed. He looks off across a meadow that descends into the valley below. A female fox strides briskly up the hill. Her coat is a paler, especially beautiful shade of fox-red, and she wears men's trousers and a dark tunic. Fox says as she approaches:</p>
</div>
<div class="speaking">
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>What'd the doctor say?</p>
</div>
<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s"> <h2>MRS. FOX</h2> <p>Nothing. Supposedly, it's just a twenty-four hour bug. He gave me some pills.</p>
</div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <div class="how"><p>REASSURINGLY</p></div> <p>I told you. You probably just ate some bad gristle.</p> </div> <div class="acting"><p>Fox brushes the fur on Mrs. Fox's ears with his paws. They walk together along the crest of the hill to a fork in the path. Fox points:</p>
</div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>Should we take the short cut or the scenic route?</p>
</div>
<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s"> <h2>MRS. FOX</h2> <p>Let's take the short cut.</p>
</div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>But the scenic route is so much prettier.</p>
</div>
<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s"> <h2>MRS. FOX</h2> <div class="how"><p>SHRUGS</p></div> <p>OK, let's take the scenic route.</p>
</div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>Great. It's actually slightly quicker, anyway.</p>
</div>
<div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>Fox throws his apple core away over his shoulder and dances a quick circle around Mrs. Fox, wrapping his arm around her waist extravagantly and making her laugh as they start off down the scenic route.</p>
</div>
</div>
<div class="scene">
<div class="description"> <h3 id="scene-2" class="scene-holder">2</h3> <h1>EXT. FARM. DAY</h1> <p>A rustic cottage surrounded by a small barn, a tin silo, and a rickity windmill. There is a sheep in a little pasture. A sign on a rail says Berkus Squab. Fox and Mrs. Fox watch from the bushes outside a fence.</p>
</div>
<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s"> <h2>MRS. FOX</h2> <p>What is a squab?</p>
</div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>You know what a squab is. It's like a pigeon, I suppose. Anyway, it's a type of bird we can eat.</p>
</div>
<div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>Fox motions toward the edge of the property.</p>
</div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>Should we go through the hole under the horse fence or climb the rail over the bridle path?</p>
</div>
<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s"> <h2>MRS. FOX</h2> <p>Well, I guess the horse fence would be a little safer.</p>
</div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>But the bridle path puts us out right next to the squab shack</p>
</div>
<div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>Mrs. Fox hesitates. She fiddles with her paws. She nods nervously. She shakes slightly. Fox looks at her funny.</p>
</div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>What's wrong? I've never seen you like this. You're acting all skittish. Don't worry. I've been stealing birds for a living since before I could trot.</p>
</div>
<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s"> <h2>MRS. FOX</h2> <div class="how"><p>SHRUGS</p></div> <p>OK, let's take the --</p>
</div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>No, we'll do the horse fence. You gave me the scenic route already.</p>
</div>
<div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>Fox flashes a smile. He says suddenly:</p>
</div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>By the way, you look unbelievably beautiful tonight. You're practically glowing. Maybe it's the lighting.</p>
</div>
</div>
<div class="scene"> <div class="description"> <h3 id="scene-3" class="scene-holder">3</h3> </div> <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>Mrs. Fox is, in fact, glowing, albeit ever so slightly. She stares at Fox enigmatically. Fox touches his paw to her cheek.</p> </div> <div class="note"> <p>NOTE: an alternate version of Mrs. Fox will be used for this shot which can be literally lit from within.</p> </div> <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>With the speed, grace, and precision of athletes, Fox and Mrs. Fox dart through a hole under a painted fence; race along a thin trail next to a garage; crawl beneath a window where a blonde woman serves an early dinner, dealing hamburgers like playing cards to three little, blond children; creep past a doghouse where a golden retriever sleeps with an airline sleeping mask over his eyes; and shimmy over a doorway outside a workshop where a blond, bearded farmer hacks into a stump with a hatchet, completely pulverizing it into sawdust. They arrive in front of a wooden shed. Fox whistles sharply with a half-chirp and performs a rapid reverse-flip with a flourish. Fox lifts a loose board. He looks to Mrs. Fox and puts his finger to his lips for her to be quiet. She shrugs impatiently. They duck inside. They come back out. Each holds a dead, bloody pigeon in his/her teeth. They start to run away. Fox looks up above them. He stops. He frowns. He takes the pigeon out of his mouth and says curiously, pointing toward the sky:</p> </div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>What's that? I think that's a fox-trap! Look at this.</p>
</div>
<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s"> <h2>MRS. FOX</h2> <p>Get away from there.</p>
</div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>Is it spring-loaded? Yeah...</p> <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>pointing to different spots</p> </div> <p>I guess if you come from over there, and you're standing at the door to the squab shack, this little gadget probably triggers the --</p> <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>gesturing to Mrs. Fox</p> </div> <p>Move out of the way, darling. That's right where it's going to land.</p> </div> <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>Mrs. Fox runs back to Fox and tugs at his arm.</p> </div>
<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s"> <h2>MRS. FOX</h2> <p>Come on! Stop it! Let's go!</p> </div>
</div>
<div class="scene"> <div class="description"> <h3 id="scene-4" class="scene-holder">4</h3> </div> <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>Fox pulls on a little, hanging wire. A chain unrolls rapidly from a pulley, and a steel cage falls slap down on top of them. A small tag on the base of it says Badoit et Fils. Fox and Mrs. Fox stand motionless, side by side, in disbelief.</p> </div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>No, it just falls straight down right here, doesn't it? I guess it's not spring-loaded. </div> <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>Sounds come from around the farm: the dog barks, doors open, voices yell, lights come on. Mrs. Fox turns to Fox and says</p> </div>
<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s"> <h2>MRS. FOX</h2> <div class="how"><p>QUIETLY</p></div> <p>I'm pregnant.</p> </div> <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>Fox stares at Mrs. Fox. He is confused but moved.</p> </div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>Wow. We're going to have a cub. Honey, that's great news!</p>
</div>
<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s"> <h2>MRS. FOX</h2> <p>If we're still alive tomorrow morning, I want you to find another line of work.</p>
</div> <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>Pause. Fox nods.</p> </div>
</div>
<div class="scene"> <div class="description valley"> <h1>CUT TO:</h1> <p>A wide shot of the entire valley. There are thick woods, green and yellow fields, two ponds, a small village, and a river running through the middle.</p>
</div>
<div class="title"> <h1>2 YEARS LATER ( 12 Fox-Years)</h1>
</div>
<div class="scene"> <div class="description"> <h1>EXT. HOLE. DAY</h1> <p>The entrance to a tunnel under a dirt mound covered with holly bushes.</p> </div>
</div>
<div class="scene"> <div class="description"> <h1>INT. HOLE. DAY</h1> <p>A small, comfortable kitchen off a living room with two bedrooms behind it. Fox sits at the kitchen table reading a newspaper called the Gazette. His fur has gone grey at the temples, and he now wears a dark, double-breasted, pin- striped suit with a conservative necktie. Mrs. Fox stands at the counter-top stirring something in a bowl with a whisk.</p> </div> </div>
<div class="scene"> <div class="description"> <h3 id="scene-5" class="scene-holder">5</h3> <p>She is dressed in a paint-splattered, cream-colored, Victorian-style dress.</p> <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>INSERT:</p> <p>A column in the newspaper with Fox's picture at the top of it. The caption reads: <i>Fox about Town with Fantastic Mr. Fox</i>.</p> </div>
</div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>Does anybody actually read my column? Do your friends ever talk about it?</p>
</div>
<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s"> <h2>MRS. FOX</h2> <div class="how"><p>STILL STIRRING</p></div> <p>Of course. In fact, Rabbit's ex- girlfriend just said to me last week, "I should read Foxy's column," but they don't get the Gazette.</p> <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>yelling into the next room</p> </div> <p>Ash! Let's get cracking!</p>
</div>
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>FOX</h2> <p>Why would they? It's a rag-sheet.</p> <div class="how"><p>SIGHS</p></div> <p>I want to say I hate my job, but that would make it seem more important to me than I want people to think it is.</p>
</div>
<div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>Mrs. Fox puts down her bowl and starts slicing a loaf of bread. A small, narrow fox cub comes out of one of the bedrooms wearing white pants and no shirt. His hair is smashed all onto one side sticking up wrong. He is Ash.</p>
</div>
<div class="who ash modal-link" id="ash" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>ASH</h2> <p>I'm sick.</p>
</div>
<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s"> <h2>MRS. FOX</h2> <p>You're not sick.</p>
</div>
<div class="who ash modal-link" id="ash" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>ASH</h2> <p>I have a temperature.</p>
</div>
<div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>Mrs. Fox goes quickly over to Ash and puts her paw to his forehead.</p>
</div>
<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s"> <h2>MRS. FOX</h2> <p>You don't have a temperature.</p>
</div>
<div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s"> <p>Ash turns away and says as he goes back into his bedroom:</p>
</div>
<div class="who ash modal-link" id="ash" data-scroll-reveal="enter left and move 100px over 0.3s"> <h2>ASH</h2> <p>I don't want to go.</p>
</div>
</div>
<div class="footer"></div>
<div class="modal"> <div class="overlay"></div> <div class="wrapper"> <div class="close"><p>x</p></div> <div class="img"> <div class="who-fox hide"> </div> <div class="who-mrs hide"> </div> <div class="who-ash hide"> </div> </div> <div class="text"> <div class="who-fox hide"> <h1>Mr. Fox</h1> <p>A handsome fox dressed in an Edwardian-style navy velvet suit.</p> </div> <div class="who-mrs hide"> <h1>Mrs. Fox</h1> <p>A female fox whose coat is a paler, especially beautiful shade of fox-red.</p> </div> <div class="who-ash hide"> <h1>Ash</h1> <p>A small, narrow fox cub.</p> </div> </div> </div>
</div> <script type="text/javascript" src="//use.typekit.net/luh3pgk.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://scrollrevealjs.org/js/scrollReveal.min.js?ver=0.1.1'></script> <script src="js/index.js"></script>
</body>
</html>

The Fantastic Mr Fox - Script Codes CSS Codes

svg path { -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}
.progress { position: fixed; z-index: 300; top: 0; left: 0; width: 3px; height: 20vh; background: #f26c22; z-index: 400;
}
body { background: #eff1f4; font-size: 16px; line-height: 1.618em; font-family: 'Josefin Sans', sans-serif; overflow-x: hidden;
}
h1 { font-size: 2.58em; color: #f26c22; line-height: 1.618em; font-family: 'Josefin Sans', sans-serif; font-weight: 800;
}
h2 { font-size: 1.618em; line-height: 1.6em;
}
.header { position: relative; padding: 4em 0; margin-bottom: -3em; background: rgba(190, 203, 226, 0.3); color: #f26c22; background-image: url(https://24.media.tumblr.com/7187613f05d6d015c2e06ea126a1fb0c/tumblr_mvyxwqmRrn1st5lhmo1_1280.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; text-align: center; z-index: 1;
}
.header > * { position: relative; z-index: 2;
}
.header .wrapper { margin: auto;
}
.header p { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; color: #afb0b2; text-transform: uppercase; letter-spacing: 1.6px; font-size: 0.6em;
}
.header h3 { margin: 0; padding: 0.6em 0; line-height: 1.618em; color: #fff;
}
.header h1 { color: #fff; font-size: 5em; line-height: 1.2em; margin: 0; padding: 0; opacity: 0.7;
}
.header:after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.4);
}
.header .description { position: absolute; width: 200px; right: 1em; top: 12em; background: #dedfe0; padding: 1em 1em;
}
.header .description .authors p { color: #fff; font-size: 1em; text-transform: none;
}
.header .characters { position: absolute; width: 200px; right: 1em; top: 23em; padding: 1em; background: #dedfe0;
}
.header .characters p { margin-bottom: 0.9em;
}
.header .characters li.modal-link { cursor: pointer;
}
.header .characters li.modal-link p { padding: 0; margin: 0; color: #fff; font-size: 1em; text-transform: none;
}
.header .characters li.modal-link:hover p { color: #afb0b2;
}
.scene { margin-top: 6em;
}
.description { text-align: center;
}
.description h3 { color: #afb0b2;
}
.script { max-width: 600px; color: #4a463d; margin: auto;
}
.how { position: relative; font-style: italic; color: #afb0b2; letter-spacing: 0.02em;
}
.how p { position: relative; z-index: 20; color: #afb0b2 !important;
}
.acting { position: relative; padding: 0.618em 0; margin: 0.618em 0;
}
.acting p { position: relative; color: #4a463d !important; z-index: 2;
}
.acting:before { content: ""; position: absolute; top: 0; left: -100vw; height: 100%; width: 200vw; background: rgba(190, 203, 226, 0.3); z-index: 0;
}
.who { position: relative; padding: 0.8em 1em; margin: 1em 0; background: #fff; cursor: pointer; -webkit-border-radius: 1em; -webkit-background-clip: padding-box; -moz-border-radius: 1em; -moz-background-clip: padding; border-radius: 1em; background-clip: padding-box;
}
.who:before { content: ""; position: absolute; height: 4em; width: 4em; top: -0.1em; left: -5em; cursor: pointer; background-size: contain; background-position: center center; background-repeat: no-repeat; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}
.who:after { content: ""; position: absolute; left: -1.6em; top: 1em; border: 0.9em solid transparent; border-top-width: 0.6em; border-bottom-width: 0.6em; border-right-color: #fff;
}
.who.fox p { color: #f26c22;
}
.who.fox:before { background-image: url(http://www.wattenberger.com/img/doodles/mrfox-small.png);
}
.who.mrs h2 { left: auto; right: -6.2em;
}
.who.mrs p { color: #f4a41f;
}
.who.mrs:before { top: -0.4em; left: auto; right: -5em; background-image: url(http://www.wattenberger.com/img/doodles/msfox-small.png);
}
.who.mrs:after { left: auto; right: -1.6em; border-right-color: transparent; border-left-color: #fff;
}
.who.ash p { color: #afb0b2;
}
.who.ash:before { top: -0.4em; background-image: url(http://www.wattenberger.com/img/doodles/ash.png);
}
.who h2 { position: absolute; top: 3.4em; left: -4.7em; text-align: center; font-size: 0.8em; z-index: 20;
}
.who:hover { background: #fafafa;
}
.who:hover:after { border-right-color: #fafafa;
}
.who:hover:before { -webkit-transform: scale(1.2); transform: scale(1.2);
}
.who.mrs:hover:after { border-right-color: transparent; border-left-color: #fafafa;
}
.scroll { position: absolute; z-index: 300; -webkit-transition: background 0.4s ease-out; transition: background 0.4s ease-out;
}
.scroll.fixed-to-left { position: fixed; top: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, 0.2);
}
.scroll.fixed-to-left:hover { background: #fff;
}
.scroll ul { margin-top: 20vh; padding: 0;
}
.scroll li { color: #afb0b2; cursor: pointer; margin-top: 3vh; padding: 0 1.6em; -webkit-transition: color 0.2s ease-out; transition: color 0.2s ease-out;
}
.scroll li:hover { color: #4a463d;
}
.scroll li.passed { color: #4a463d;
}
.scroll li.passed:hover { color: #4a463d;
}
.footer { height: 60px; width: 100vw; background-image: url(); background-size: cover; background-position: center center; background-repeat: no-repeat; text-align: center; overflow: hidden; position: absolute; left: 0;
}
.modal { display: none; position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 400; opacity: 0; -webkit-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out;
}
.modal .overlay { display: none; position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 300; background: rgba(0, 0, 0, 0.6); overflow: hidden; opacity: 0; cursor: pointer; -webkit-transition: opacity 1s ease-out; transition: opacity 1s ease-out;
}
.modal.show,
.modal.show .overlay { display: block; opacity: 1;
}
.modal .wrapper { position: absolute; top: 10vh; left: 10vw; height: 80vh; width: 80vw; background: #fafafa; z-index: 400;
}
.modal .wrapper .close { position: absolute; top: -0.4em; right: -0.4em; background: #4a463d; text-align: center; color: #fff; font-weight: 800; height: 2em; width: 2em; line-height: 2em; cursor: pointer; -webkit-border-radius: 2em; -webkit-background-clip: padding-box; -moz-border-radius: 2em; -moz-background-clip: padding; border-radius: 2em; background-clip: padding-box; -webkit-transition: background 0.2s ease-out; transition: background 0.2s ease-out;
}
.modal .wrapper .close:hover { background: #666;
}
.modal .wrapper .img { position: relative; display: inline-block; vertical-align: middle; height: 70vh; width: 30vw; margin-top: 5vh;
}
.modal .wrapper .img .hide { height: 70vh; width: 30vw; background-size: contain; background-position: center center; background-repeat: no-repeat;
}
.modal .wrapper .img .who-fox { background-image: url(http://www.wattenberger.com/img/doodles/mrfox-large.png);
}
.modal .wrapper .img .who-mrs { background-image: url(http://www.wattenberger.com/img/doodles/msfox-large.png);
}
.modal .wrapper .img .who-ash { background-image: url(http://www.wattenberger.com/img/doodles/ash-large.png);
}
.modal .wrapper .text { display: inline-block; vertical-align: middle; height: 70vh; width: 30vw; margin-top: 5vh; margin-left: 5vw;
}
@media all and (max-width: 1100px) { .header .description, .header .characters { margin: 40px auto 0 auto; top: auto; right: auto; display: inline-block; position: relative; height: 126px; vertical-align: top; background: rgba(0, 0, 0, 0.4); }
}
@media all and (max-width: 1000px) { .scroll { display: none; }
}

The Fantastic Mr Fox - Script Codes JS Codes

var config = { reset: true, init: true };
window.scrollReveal = new scrollReveal(config);
$(".scroll li").click(function() { var elem = $(this), class_name = elem.attr("class"), scene_num = class_name.substr(5,1), target = $("#scene-" + scene_num); $('html, body').animate({ scrollTop: (target.offset().top - 22) }, 'fast');
});
var fix_offset = $("#scroll-links").offset().top;
var fix_to_left = function() { var y = $(window).scrollTop(); if ($("#scroll-links").length > 0) { if( y > fix_offset ){ $("#scroll-links").addClass("fixed-to-left"); } else { $("#scroll-links").removeClass("fixed-to-left"); } } };
var which_scene = function() { var y = $(window).scrollTop(); for (var i = 1, len = $(".scene-holder").length; i <= len; i++) { var offset = $("#scene-"+ i).offset().top - ($(window).height() / 2); if( y > offset){ $("#scroll-links li:nth-of-type("+ i +")").addClass("passed"); } else { $("#scroll-links li:nth-of-type("+ i +")").removeClass("passed"); } }; $(".progress").css("height",((y + $(window).height()) / $("body").height() * 100) + "vh") }; $(window).scroll(function(){ fix_to_left(); which_scene(); });
$(".modal-link").click(function() { var elem = $(this), who = elem.attr("id"); $(".modal").addClass("show"); $(".hide").hide(); $(".who-"+ who).show(); $(".close, .overlay").click(function() { $(".modal").removeClass("show"); });
});
The Fantastic Mr Fox - Script Codes
The Fantastic Mr Fox - Script Codes
Home Page Home
Developer Malith Hettiarachchi
Username malZiiirA
Uploaded January 03, 2023
Rating 3
Size 10,435 Kb
Views 8,096
Do you need developer help for The Fantastic Mr Fox?

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!

Malith Hettiarachchi (malZiiirA) Script Codes
Name
A Pen by Malith Hettiarachchi
Create amazing Facebook ads 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!