MovieScript

Developer
Hornebom
Size
8,855 Kb
Views
6,072
  1. MovieScript Previews
  2. MovieScript HTML Codes
  3. MovieScript CSS Codes
  4. MovieScript JS Codes

How do I make an moviescript?

Couldn’t get Typekit working + ios and iframes make it difficult to set the body heigth correctly. for ipad user like me, see this duplicate https://dl.dropboxusercontent.com/u/330966/test/index.html. What is a moviescript? How do you make a moviescript? This script and codes were developed by Hornebom on 31 December 2022, Saturday.

MovieScript Previews
IQ Test

MovieScript - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>MovieScript</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="header"><h1>Fantastic Mr. Fox</h1>
<h2>Written by Roald Dahl, Wes Anderson & Noah Baumbach</h2>
<time datetime="2007-03-04">March 4, 2007</time>
</header> <nav role='navigation' class="nav"> <ul class="jumplist"> <li><a href="#one">1</a></li> <li><a href="#two">2</a></li> <li><a href="#three">3</a></li> <li><a href="#four">4</a></li> <li><a href="#five">5</a></li> </ul> </nav>
<section class="content"> <!-- -------------------ONE--------------- --> <article id="one" class="chapter"> <h3>EXT. WOODS. DAY</h3> <p class="setting"> 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.<br /> 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> <p> <span class="actor">Fox</span> <q>What'd the doctor say?</q> </p> <p> <span class="actor">Mrs. Fox</span> <q>Nothing. Supposedly, it's just a twenty- four hour bug. He gave me some pills.</q> </p> <p> <span class="actor">Fox</span> <strong>(Reassuringly)</strong> <q>I told you. You probably just ate somebad gristle.</q> </p> <p class="setting">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> <p> <span class="actor">Fox</span> <q>Should we take the short cut or thescenic route?</q> </p> <p> <span class="actor">Mrs. Fox</span> <q>Let's take the short cut.</q> </p> <p> <span class="actor">Fox</span> <q>But the scenic route is so much prettier.</q> </p> <p> <span class="actor">Mrs. Fox</span> <strong>(Shrugs)</strong> <q>OK, let's take the scenic route.</q> </p> <p> <span class="actor">Fox</span> <q>Great. It's actually slightly quicker, anyway.</q> </p> <p class="setting"> 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> </article> <!-- -------------------Two--------------- --> <article id="two" class="chapter"> <h3>EXT. FARM. DAY</h3> <p class="setting"> 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> <p> <span class="actor">Mrs. Fox</span> <q>What is a squab?</q> </p> <p> <span class="actor">Fox</span> <q>You know what a squab is. It's like a pigeon, I suppose. Anyway, it's a type of bird we can eat.</q> </p> <p class="setting"> Fox motions toward the edge of the property. </p> <p> <span class="actor">Fox</span> <q>Should we go through the hole under the horse fence or climb the rail over the bridle path?</q> </p> <p> <span class="actor">Mrs. Fox</span> <q>Well, I guess the horse fence would be a little safer.</q> </p> <p> <span class="actor">Fox</span> <q>But the bridle path puts us out right next to the squab shack.</q> </p> <p class="setting"> Mrs. Fox hesitates. She fiddles with her paws. She nods nervously. She shakes slightly. Fox looks at her funny. </p> <p> <span class="actor">Fox</span> <q>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.</q> </p> <p> <span class="actor">Mrs. Fox</span> <strong>(Shrugs)</strong> <q>OK, let's take the --</q> </p> <p> <span class="actor">Fox</span> <q>No, we'll do the horse fence. You gave me the scenic route already.</q> </p> <p class="setting"> Fox flashes a smile. He says suddenly: </p> <p> <span class="actor">Fox</span> <q>By the way, you look unbelievably beautiful tonight. You're practically glowing. Maybe it's the lighting. <!-- Uh Oh --></q> </p> </article> <!-- -------------------THREE--------------- --> <article id="three" class="chapter"> <p class="setting"> Mrs. Fox is, in fact, glowing, albeit ever so slightly. She stares at Fox enigmatically. Fox touches his paw to her cheek.<br /> <em>(NOTE: an alternate version of Mrs. Fox will be used for this shot which can be literally lit from within.)</em> 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.<br /> 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.<br /> 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> <p> <span class="actor">Fox</span> <q>What's that? I think that's a fox-trap! Look at this.</q> </p> <p> <span class="actor">Mrs. Fox</span> <q>Get away from there.</q> </p> <p> <span class="actor">Fox</span> <q>Is it spring-loaded? Yeah...</q> </p> <p class="setting"> (pointing to different spots) </p> <p> <q>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 --</q> </p> <p class="setting"> (gesturing to Mrs. Fox) </p> <p> <q>Move out of the way, darling. That's right where it's going to land.</q> </p> <p class="setting"> Mrs. Fox runs back to Fox and tugs at his arm. </p> <p> <span class="actor">Mrs. Fox</span> <q>Come on! Stop it! Let's go!</q> </p> </article> <!-- -------------------FOUR--------------- --> <article id="four" class="chapter"> <p class="setting"> 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> <p> <span class="actor">Fox</span> <q>No, it just falls straight down right here, doesn't it? I guess it's not spring-loaded.</q> </p> <p class="setting"> Sounds come from around the farm: the dog barks, doors open, voices yell, lights come on. Mrs. Fox turns to Fox and says </p> <p> <span class="actor">Mrs. Fox</span> <strong>Quietly:</strong> <q>I'm pregnant.</q> </p> <p class="setting"> Fox stares at Mrs. Fox. He is confused but moved. </p> <p> <span class="actor">Fox</span> <q>Wow. We're going to have a cub. Honey, that's great news!</q> </p> <p> <span class="actor">Mrs. Fox</span> <q>If we're still alive tomorrow morning, I want you to find another line of work.</q> </p> <p class="setting"> Pause. Fox nods. </p> <span class="cut">Cut to:</span> <p class="setting"> 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> <h4 title="title">2 YEARS LATER ( 12 Fox-Years)</h4> <h3>EXT. HOLE. DAY</h3> <p class="setting"> The entrance to a tunnel under a dirt mound covered with holly bushes. </p> <h3>INT. HOLE. DAY</h3> <p class="setting"> 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> </article> <!-- -------------------FIVE--------------- --> <article id="five" class="chapter"> <p class="setting"> She is dressed in a paint-splattered, cream-colored, Victorian-style dress. </p> <p class="insert"> <span>Insert</span> A column in the newspaper with Fox's picture at the top of it. The caption reads: Fox about Town with Fantastic Mr. Fox. </p> <p> <span class="actor">Fox</span> <q>Does anybody actually read my column? Do your friends ever talk about it?</q> </p> <p> <span class="actor">Mrs. Fox</span> <strong>(Still stirring)</strong> <q>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.</q> </p> <p class="setting"> (yelling into the next room) </p> <p> <q>Ash! Let's get cracking!</q> </p> <p> <span class="actor">Fox</span> <q>Why would they? It's a rag-sheet.</q> </p> <p class="setting"> (Sighs) </p> <p> <q>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. </q> </p> <p class="setting"> 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> <p> <span class="actor">Ash</span> <q>I'm sick.</q> </p> <p> <span class="actor">Mrs. Fox</span> <q>You're not sick.</q> </p> <p> <span class="actor">Ash</span> <q>I have a temperature.</q> </p> <p class="setting"> Mrs. Fox goes quickly over to Ash and puts her paw to his forehead. </p> <p> <span class="actor">Mrs. Fox</span> <q>You don't have a temperature.</q> </p> <p class="setting"> Ash turns away and says as he goes back into his bedroom: </p> <p> <span class="actor">Ash</span> <q>I don't want to go.</q> </p> </article>
</section>
<footer class="footer"> <a href="https://codepen.io/Hornebom/">Hornebom</a> says: "That was fun. Thanks to CodePen."
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

MovieScript - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:400,900|Merriweather:400,400italic);
*, *:before, *:after { margin:0; padding:0; box-sizing:border-box;
}
body { font-family:'Merriweather', serif;
}
h1,
h2,
h3,
h4,
time,
strong,
.actor,
.cut,
.insert,
.chapter:before,
.jumplist li,
.footer { font-family:'Lato', sans-serif;
}
html, body {width:100%;height:100%;color:#333;background:white;}
body { position:relative; font-size:135%; line-height:1.6em; counter-reset: countchapters;
}
.header { width:100%; padding:6em 1em 2em 1em; text-align:center; background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE1LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluICAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIiBbCgk8IUVOVElUWSBuc19mbG93cyAiaHR0cDovL25zLmFkb2JlLmNvbS9GbG93cy8xLjAvIj4KXT4KPHN2ZyB2ZXJzaW9uPSIxLjEiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6YT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZVNWR1ZpZXdlckV4dGVuc2lvbnMvMy4wLyIKCSB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjIzcHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iLTAuMTA0IC0wLjA4OCAyMyAzMiIKCSBvdmVyZmxvdz0idmlzaWJsZSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMC4xMDQgLTAuMDg4IDIzIDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGRlZnM+CjwvZGVmcz4KPHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgc3Ryb2tlPSIjMUExNzFCIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iNi4yMDgsMC41IDAuNSw2LjIwOCAwLjUsMzEuNjYxIDIyLjI1LDMxLjY2MSAyMi4yNSwwLjUgCgkiLz4KPHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFBMTcxQiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjAuNSw2LjE4OSA2LjI5Nyw2LjE4OSA2LjI5NywwLjUgIi8+CjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFBMTcxQiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMy45ODgiIHkxPSI5LjkwNSIgeDI9IjE5LjExMyIgeTI9IjkuOTA1Ii8+CjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFBMTcxQiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMy45ODgiIHkxPSIxNy43NDkiIHgyPSIxOS4xMTMiIHkyPSIxNy43NDkiLz4KPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMUExNzFCIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIzLjk4OCIgeTE9IjEzLjgyNyIgeDI9IjE5LjExMyIgeTI9IjEzLjgyNyIvPgo8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiMxQTE3MUIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjMuOTg4IiB5MT0iMjEuNjcxIiB4Mj0iMTkuMTEzIiB5Mj0iMjEuNjcxIi8+CjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFBMTcxQiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMy45ODgiIHkxPSIyNS41OTMiIHgyPSIxOS4xMTMiIHkyPSIyNS41OTMiLz4KPC9zdmc+Cg=="); background-repeat:no-repeat; background-position:50% 3em;
}
.footer { padding:1em 1em 3em 1em; font-size:0.8em; text-align:center; color:#C6C7C8;
}
.footer a { text-decoration:none; color:#C6C7C8; border-bottom:1px solid #C6C7C8; -webkit-transition:all 0.15s; transition:all 0.15s;
}
.footer a:hover { color:#333; border-bottom:1px solid #333;
}
h1 { display:inline-block; margin-bottom:0.4em; border-bottom:2px solid #C6C7C8; padding:0.25em 0; line-height: 1em; font-weight:900; font-size:3em; text-transform:uppercase;
}
h2 { padding-bottom:0.5em; font-weight:400; font-size:1em;
}
h3 { padding:1em 0; font-size:1em; font-weight:700;
}
h4 { position:relative; padding:1em 0; font-size:1.2em; font-weight:700;
}
h4:before { content:attr(title); position:absolute; top:0; left:0; color:#707173; font-size:0.7em; font-weight:400; letter-spacing:0.2em; text-transform:uppercase;
}
time { font-size:1em;
}
.nav { position:fixed; top:0; right:1em; height:100%; display:table; text-align:center;
}
.jumplist { display:table-cell; height:100%; vertical-align:middle; list-style-type:none; width:1.5em;
}
.jumplist li { display:block; width:1.6em; height:1.6em; margin:0.4em 0;
}
.jumplist li a { display:block; width:1.6em; height:1.6em; line-height:1.6em; font-size:0.8em; text-decoration:none; color:#333; border-radius:50%; box-shadow:inset 0 0 0 1px #E2E2E2; -webkit-transition:all 0.15s; transition:all 0.15s;
}
.jumplist li a:hover { color:#333;background:#E2E2E2
}
.active {background:#E2E2E2;}
.content { width:100%; max-width:50rem; margin:4em auto 0 auto; padding:5em 3em 3em 1em;
}
.chapter { position:relative; margin-bottom:5em; padding:1em 1em 0 1em; border-left:1px solid #C6C7C8; counter-increment: countchapters; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
}
.chapter:before { content: counter(countchapters); position:absolute; top:-1.6em; left:-0.8em; width:1.6em; height:1.6em; line-height:1.7em; background:#C6C7C8; text-align:center; font-size:1em;
}
q { display:block; font-size:1.2em; line-height:1.7em; font-style:italic; font-weight:400; text-indent:-0.3em;
}
p { position:relative; padding:1em 0; line-height:1.6em; -webkit-transition:all .15s; transition:all .15s;
}
p:hover { -webkit-transform:translateX(1em); transform:translateX(1em);
}
.setting { padding:1em 0 2em 0;
}
.setting:before,
.setting:after { content:''; position:absolute; left:-1em; height:1px; width:4em; background:#C6C7C8; -webkit-transition:all .15s; transition:all .15s;
}
.setting:before {top:0;}
.setting:after {bottom:1em;}
.setting:hover:before,
.setting:hover:after { -webkit-transform:translateX(-1em); transform:translateX(-1em);
}
em { border-bottom:1px solid #C6C7C8; font-weight:600;
}
strong { display:block; padding:0.3em 0; font-weight:400; font-size:1em;
}
.actor { display:inline-block; margin:0 0 1em -1em; padding:0.2em 1em; background:#C6C7C8; -webkit-transition:all .15s; transition:all .15s;
}
p:hover .actor { -webkit-transform:translateX(-1em); transform:translateX(-1em);
}
.cut { display:block; width:65%; margin:0 0 1em -2em; padding:0.2em 1em 0.1em 1em; color:white; font-size:1em; background:#333; border-top:5px solid white; border-bottom:5px solid white;
}
.insert { position:relative; display:block; width:100%; max-width:20em; margin-bottom:2em; padding:0.5em; background:#333; color:white;
}
.insert:before { content:''; position:absolute; top:50%; left:-1em; margin-top:-1em; border-top:1em solid transparent; border-right:1em solid #333; border-bottom:1em solid transparent;
}
.insert span { display:block; margin-bottom:0.5em; padding-bottom:0.5em; border-bottom:1px solid white;
}
@media screen and (min-width: 20.000em) { /*320px*/	body {font-size: 100%;line-height:1.3em;}
}
@media screen and (min-width: 50.000em) { /*800px*/	body {font-size: 125%;}
}
@media screen and (min-width: 64.375em){ /*1030px*/	body {font-size: 137.5%;}
}

MovieScript - Script Codes JS Codes

$(document).ready(function() { // // jQuery SmoothScroll | Version 18-04-2013 // $('a[href*=#]').click(function() { // skip SmoothScroll on links inside sliders or scroll boxes also using anchors or if there is a javascript call if($(this).parent().hasClass('scrollable_navigation') || $(this).attr('href').indexOf('javascript')>-1) return; // duration in ms var duration=1000; // easing values: swing | linear var easing='swing'; // get / set parameters var newHash=this.hash; var oldLocation=window.location.href.replace(window.location.hash, ''); var newLocation=this; // make sure it's the same location if(oldLocation+newHash==newLocation) { // get target var target=$(this.hash+', a[name='+this.hash.slice(1)+']').offset().top -60; //change this number to create the additional off set var customoffset = 60; // adjust target for anchors near the bottom of the page if(target > $(document).height()-$(window).height()) target=$(document).height()-$(window).height(); // animate to target and set the hash to the window.location after the animation $('html, body').animate({scrollTop: target}, duration, easing, customoffset, function() { // add new hash to the browser location window.location.href=newLocation; }); // cancel default click action return false; } }); });
$('.chapter') .waypoint(function(direction) { $('a[href="#' + this.id + '"]').toggleClass('active', direction === 'down'); }, { // context: '#wrapper', // Removed this, see next post! offset: '100%' }) .waypoint(function(direction) { $('a[href="#' + this.id + '"]').toggleClass('active', direction === 'up'); }, { // context: '#wrapper', // Removed this, see next post! offset: function() { return -$(this).height(); } });
MovieScript - Script Codes
MovieScript - Script Codes
Home Page Home
Developer Hornebom
Username Hornebom
Uploaded December 31, 2022
Rating 4.5
Size 8,855 Kb
Views 6,072
Do you need developer help for MovieScript?

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!

Hornebom (Hornebom) Script Codes
Name
Animated Ghost Button
Custom Properties based Parallax
Perspective Scrolling in CSS
Curved Cut
Pew
Typhysics
Bouncing Btn
Lamp
Rocker Switch
PPDC Button
Create amazing sales emails 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!