Parallaxadise - Quick n dirty scrollytelling demo

Developer
Teo Litto
Size
8,928 Kb
Views
42,504
  1. Parallaxadise - Quick n dirty scrollytelling demo Previews
  2. Parallaxadise - Quick n dirty scrollytelling demo HTML Codes
  3. Parallaxadise - Quick n dirty scrollytelling demo CSS Codes
  4. Parallaxadise - Quick n dirty scrollytelling demo JS Codes

How do I make an parallaxadise - quick n dirty scrollytelling demo?

What is a parallaxadise - quick n dirty scrollytelling demo? How do you make a parallaxadise - quick n dirty scrollytelling demo? This script and codes were developed by Teo Litto on 26 August 2022, Friday.

Parallaxadise - Quick n dirty scrollytelling demo Previews
IQ Test

Parallaxadise - Quick n dirty scrollytelling demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallaxadise - Quick n dirty scrollytelling demo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="mainWrapper"> <div class="row" id="mainTitleWrapper"> <div id="thumbImage"></div> <video id="surfVid" width="1280" height="720" autoplay loop muted> <source src="http://mrmiffles.com/host/OceanSunset_2.mp4" type="video/mp4"> </video> <div id="mainTitle"> <h1>Parallaxadise</h1> <h3>A Teo Litto Jam <span>(text excerpted from "Hinterlands" by W. Gibson)</span></h3> </div> <!-- <img id="scrollArrow" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/scrollArrow2.png" alt="" /> --> <!-- <div id="scrollHint"></div> --> </div> <div class="row chapter" id="chap1"> <div class="chapterContent"> <p class="leader"> <span class="dropCap">T</span> <span class="leadLine">he elevator</span> that waited to take me up to Heaven looked like Hollywood's best shot at a Bauhaus mummy case: a narrow, upright sarcophagus with a clear acrylic lid. Behind it, rows of identical consoles receded like a textbook illustration of vanishing perspective. The usual crowd of technicians in yellow paper clown suits were milling purposefully around. I spotted Hiro in blue denim, his pearl-buttoned cowboy shirt open over a faded UCLA sweat shirt. Engrossed in the figures cascading down the face of a monitor screen, he didn't notice me. Neither did anyone else. </p> <p> Heaven, the inner cylinder, the unlikely green heart of this place, is the ripe Disney dream of homecoming, the ravenous ear of an information-hungry global economy. A constant stream of raw data goes pulsing home to Earth, a flood of rumors, whispers, hints of transgalactic traffic. I used to lie rigid in my hammock and feel the pressure of all those data, feel them snaking through the lines I imagined behind the bulkhead, lines like sinews, strapped and bulging, ready to spasm, ready to crush me. Then Charmian moved in with me, and after I told her about the fear, she made magic against it and put up her icons of Saint Olga. And the pressure receded, fell away. </p> <p> "Patching you in with a translator, Toby. You may need German this morning." His voice was sand in my skull, a dry modulation of static. "Hillary" </p> <div class="inset-left fader in-up"> <img src="http://4.bp.blogspot.com/-h2sfCnxbgQg/UZ--LFjIlyI/AAAAAAAD6Fs/uN8VRYHhOHY/s1600/headcargosmall.jpg" alt="" /> </div> <p> "On line, Dr. Nagashima," said a BBC voice, clear as ice crystal. "You do have French, do you, Toby? Hofmannstahl has French and English." </p> <p>"You stay the hell out of my hair, Hillary. Speak when you're bloody spoken to, got it?" Her silence became another layer in the complex, continual sizzle of static. Hiro shot me a dirty look across two dozen consoles. I grinned.</p> <p> It was starting to happen: the elation, the adrenaline rush. I could feel it through the last wisps of barbiturate. A kid with a surfer's smooth, blond face was helping me into a jump suit. It smelled; it was new-old, carefully battered, soaked with synthetic sweat and customized pheromones. Both sleeves were plastered from wrist to shoulder with embroidered patches, mostly corporate logos, subsidiary backers of an imaginary Highway expedition, with the main backer's much larger trademark stitched across my shoulders the firm that was supposed to have sent HALPERT,TOBY out to his rendezvous with the stars. At least my name was real, embroidered in scarlet nylon capitals just above my heart. </p> <p> The surfer boy had the kind of standard-issue good looks I associate with junior partners in the CIA, but his name tape said NEVSKY and repeated itself in cyrillic. KGB, then. He was no tsiolnik; he didn't have that loose-jointed style conferred by twenty years in the L-5 habitat. The kid was pure Moscow, a polite clipboard ticker who probably knew eight ways to kill with a rolled newspaper. Now we began the ritual of drugs and pockets; he tucked a microsyringe; loaded with one of the new euphorohallucinogens, into the pocket on my left wrist, took a step back, then ticked it off on his clipboard. The printed outline of a jump-suited surrogate on his special pad looked like a handgun target. He took a five-gram vial of opium from the case he wore chained to his waist and found the pocket for that. Tick. Fourteen pockets. The cocaine was last. </p> <p> Hiro came over just as the Russian was finishing. "Maybe she has some hard data, Toby; she's a physical chemist, remember." It was strange to hear him acoustically, not as bone vibration from the implant. </p> <p> "Everything's hard up there, Hiro." </p> <p> "Don't I know it?" He was feeling it, too, that special buzz. We couldn't quite seem to make eye contact. Before the awkwardness could deepen, he turned and gave one of the yellow clowns the thumbs up. </p> <p> Two of them helped me into the Bauhaus coffin and stepped back as the lid hissed down like a giant's faceplate. I began my ascent to Heaven and the homecoming of a stranger named Leni Hofmannstahl. A short trip, but it seems to take forever. </p> </div> </div> <div id="chap2Intro" class="offscreen"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/coverlg.jpg" alt="" /> </div> <div id="chap2" class="row chapter"> <div class="chapterContent"> <p class="leader"> <span class="dropCap">T</span> <span class="leadLine">he bonephone static</span> was a subliminal sandstorm. The elevator slid up into its narrow shaft through the floor of Heaven. I counted blue lights at two-meter intervals. After the fifth light, darkness and cessation. </p> <p> Hidden in the hollow command console of the dummy Highway boat, I waited in the elevator like the secret behind the gimmicked bookcase in a children's mystery story. The boat was a prop, a set piece, like the Bavarian cottage glued to the plaster alp in some amusement park a nice touch, but one that wasn't quite necessary. If the returnees accept us at all, they take us for granted; our cover stories and props don't seem to make much difference. </p> <p> "All clear," Hiro said. "No customers hanging around." I reflexively massaged the scar behind my left ear, where they'd gone in to plant the bonephone. The side of the dummy console swung open and let in thegray dawn light of Heaven. The fake boat's interior was familiar and strange at the same time, like your own apartment when you haven't seen it for a week. One of those new Brazilian vines had snaked its way across the left vlewport since my last time up, but that seemed to be the only change in the whole scene. </p> <p> Big fights over those vines at the biotecture meetings, American ecologists screaming about possible nitrogen shortfalls. The Russians have been touchy about biodesign ever since they had to borrow Americans to help them with the biotic program back at Tslolkovsky 1. Nasty problem with the rot eating the hydroponic wheat; all that superfine Soviet engineering and they still couldn't establish a functional ecosystem. Doesn't help that that initial debacle paved the way for us to be out here with them now. It irritates them; so they insist on the Brazilian vines, whatever, anything that gives them a chance to argue. But I like those vines: The leaves are heart-shaped, and if you rub one between your hands, it smells like cinnamon. </p> <p> I stood at the port and watched the clearing take shape, as reflected sunlight entered Heaven. Heaven runs Ofl Greenwich Standard; big Mylar mirrors were swiveling somewhere, out in bright vacuum, on schedule of a Greenwich Standard dawn. The recorded birdsongs began back in the trees. Birds have a very hard time in the absence of true gravity. We can't have real ones, because they go crazy trying to make do with centrifugal force. </p> </div> <div class="interstitial zoom-in"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/sddefault.jpg" alt="" /> </div> <div class="chapterContent"> <p class="leader"> <span class="dropCap">T</span> <span class="leadLine">he first time</span> you see it, Heaven lives up to its name, lush and cool and bright, the long grass dappled with wildflowers. It helps if you don't know that most of the trees are artificial, or the amount of care required to maintain something like the optimal balance between blue-green algae and diatom algae in the ponds. Charmian says she expects Bambi to come gamboling out of the woods, and Hiro claims he knows exactly how many Disney engineers were sworn to secrecy under the National Security Act. </p> <p> "We're getting fragments from Hofmannstahl," Hiro said. He might almost have been talking to him self; the handler-surrogate gestalt was going into effect, and soon we'd cease to be aware of each other. The adrenaline edge was tapering off. "Nothing very coherent. `Schone Maschine,' something . . . `Beautiful machine' ...Hillary thinks she sounds pretty calm, but right out of it." </p> <p> "Don't tell me about it. No expectations, right? Let's go in loose." I opened the hatch and took a breath of Heaven's air; it was like cool white wine. "Where's Charmian?" </p> <p> He sighed, a soft gust of static. "Charmian should be in Clearing Five, taking care of a Chilean who's three days home, but she's not, because she heard you were coming. So she's waiting for you by the carp pond. Stubborn bitch," he added. </p> <p> Charmian was flicking pebbles at the Chinese bighead carp. She had a cluster of white flowers tucked behind one ear, a wilted Marlboro behind the other. Her feet were bare and muddy, and she'd hacked the legs off her jump suit at midthigh. Her black hair was drawn back in a ponytail. </p> <p> We'd met for the first time at a party out in one of the welding shops, drunken voices clanging in the hollow of the alloy sphere, homemade vodka in zero gravity. Someone had a bag of water for a chaser, squeezed out a double handful, and flipped it expertly into a rolling, floppy ball of surface tension. Old jokes about passing water. But I'm graceless in zero g. I put my hand through it when it came my way. Shook a thousand silvery little balls from my hair, batting at them, tumbling, and the woman beside me was laughing, turn ing slow somersaults, long, thin girl with black hair. She wore those baggy drawstring pants that tourists take home from Tsiolkovsky and a faded NASA T-shirt three sizes too big. A minute later she was telling me about hang-gliding with the teen tsiolniki and about how proud they'd been of the weak pot they grew in one of the corn canisters. I didn't realize she was another surrogate until Hiro clicked in to tell us the party was over. She moved in with me a week later. </p> <p> "A minute, okay?" Hiro gritted his teeth, a horrible sound. "One. Uno." Then he was gone, off the circuit entirely, maybe not even listening. </p> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Parallaxadise - Quick n dirty scrollytelling demo - Script Codes CSS Codes

/** FONT IMPORTS **/
@import url(https://fonts.googleapis.com/css?family=Audiowide);
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);
* { margin: 0; padding: 0; outline: 0; border: 0;
}
body { background: #000; font-size: 15px; font-family: lato, helvetica, arial, sans-serif;
}
p { line-height: 1.6em; margin-bottom: 1.2em; letter-spacing: .008em
}
img { max-width: 100%;
}
/** broad rules **/
.row { display: block; width: 100%; overflow: hidden;
}
.chapter { padding-top: 6em;
}
.chapterContent { width: 70%; max-width: 860px; margin: 0 auto;
}
p.leader { font-size: 1.2em; margin-bottom: 1.2em;
}
p.aside { margin-top: 5em; color: #333;
}
.dropCap { font-family: AudioWide; font-weight: 400; font-size: 4em; margin: 0; margin-right: 0.1em; position: relative; top: .01em
}
.leadLine { font-family: Lato, helvetica, arial, sans-serif; font-weight: 400; font-size: 1.6em; margin-right: .2em
}
.inset-left { float: left; width: 18em; margin: 1em 2em 1em -3em;
}
.inset-right { float: right; width: 18em; margin: 1em -3em 1em 1em;
}
.interstitial { width: 100vw; height: auto; position: relative; left: 0; margin-bottom: 6vh;
}
.interstitial img { width: 100%; height: auto;
}
.fader { opacity: 0; -webkit-transition: all 1.3s; transition: all 1.3s;
}
.fader.visible { opacity: 1;
}
.in-up { -webkit-transform: translate3d(0,10em,0); transform: translate3d(0,10em,0);
}
.in-up.visible { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;
}
.in-left { -webkit-transform: translate3d(10em,0,0); transform: translate3d(10em,0,0);
}
.in-left.visible { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;
}
.interstitial.zoom-in { overflow: hidden;
}
.interstitial.zoom-in img{ -webkit-transition: all 8s; transition: all 8s; -webkit-transform: scale(1.3); transform: scale(1.3);
}
.interstitial.zoom-in.visible img{ -webkit-transform: scale(1); transform: scale(1);
}
/**specifics**/
#mainWrapper { display: block; width: 100%; min-width: 960px; margin: 0 auto; background: #eee; position: relative;
}
#mainTitleWrapper { width: 100%; position: relative; display: block; text-align: center; height: 300vh; background: #fff; z-index: 98;
}
#mainTitle{ color: #fff; font-family: audiowide; text-align: left; display: inline-block; z-index: 2; position:fixed; top: 40%; left: 23%;
}
#mainTitle h1{ font-size: 8vw; margin-bottom: 0; padding-bottom: 0; opacity: 0;
}
#mainTitle h3 { font-family: lato; font-weight: 100; font-size: 3vw; margin-top: -0.5em; padding-top: 0; margin-left: 1em; opacity: 0;
}
#scrollArrow { position: fixed; left: 50%; transform: translateX(-50%); bottom: 50px; z-index: 5; opacity: 0.6;
}
#scrollHint { width: 100%; height: 20px; position: fixed; bottom: 0; left: 0; z-index: 5; background: #fff;
}
#mainTitle h3 span { font-size: .6em; margin-left: 0.5em; opacity: 0.7;
}
#surfVid { width: 100vw; height: auto; min-height: 100vh; background: #000; position: fixed; top: 0; left: 0; z-index: 1;
}
#thumbImage { width: 100vw; height: auto; min-height: 100vh; background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/SeaBG.jpg'); z-index: 0;
}
.portrait #surfVid { width: auto; height: 100vh;
}
#mainTitleWrapper.done #surfVid, #mainTitleWrapper.done #mainTitle { position: absolute;
}
#chap1 { z-index: 99; position: relative; background: #fff; padding-bottom: 3vh;
}
#chap2Intro { display: block; height: 200vh; background: #000; position: relative; overflow: hidden;
}
#chap2Intro img { max-width: none; min-width: 130%; width: 300vh; height: auto; position: fixed; top: 0; left: 0;
}
#chap2Intro.offscreen img { position: absolute;
}
#chap2 { height: 300vh; background: #fff; z-index: 999; position:relative;
}

Parallaxadise - Quick n dirty scrollytelling demo - Script Codes JS Codes

resizeDebounced = true;
resizeDebounceTime = 100;
resizeDebounce = null;
$(function(){ resize(); //set initial dimensions, portrait/landscape so video covers full screen window.onscroll = function(){ var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //main title if(window.pageYOffset > h * 3) { $('#mainTitleWrapper').addClass('done'); $('#surfVid')[0].pause(); } else { $('#surfVid')[0].play(); $('#mainTitleWrapper').removeClass('done'); $('#mainTitle h1').css({ opacity: Math.min( Math.linearConvert( (h*3) * 0.05, (h*3) * 0.5, 0, 1, pageYOffset ), 1) }); $('#mainTitle h3').css({ opacity: Math.min( Math.linearConvert( (h*3) * 0.35, (h*3) * 0.5, 0, 1, pageYOffset ), 1) }) $('#scrollArrow').css({ opacity: Math.min( Math.linearConvert( (h*3) * 0.15, (h*3) * 0, 0, 0.6, pageYOffset ), 1) }); } //chap 2 intro var chap2IntroTop = $('#chap2Intro').offset().top; var chap2IntroBottom = chap2IntroTop + $('#chap2Intro').height(); var chap2IntroWidth = $('#chap2Intro').outerWidth(); if(pageYOffset >= chap2IntroBottom || pageYOffset + h < chap2IntroTop) { $('#chap2Intro').addClass('offscreen'); } else { $('#chap2Intro').removeClass('offscreen'); var imgpos = /*(chap2IntroWidth / 2) + */(Math.linearConvert(chap2IntroTop-h,chap2IntroBottom,-(w*0.01),-(w * 0.3), pageYOffset )); $('#chap2Intro img').css({ 'transform': 'translate3d('+ imgpos +'px,0,0)' }) } //faders $('.fader, .interstitial').each(function(idx){ if($(this).onScreen()){ $(this).addClass('visible'); } else { $(this).removeClass('visible'); } }) } //end onscroll handler
}) //end docready
window.onresize = function(){ if (resizeDebounced) { resize(); }
}
function resize() { //console.log('resize') resizeDebounced = false; try { clearTimeout(resizeDebounce); } catch(e){} //console.log('resize. ratio =',$(window).width() / $(window).height()) if ($(window).width() / $(window).height() < 1.777777777) { $('#mainWrapper').removeClass('landscape').addClass('portrait') } else { $('#mainWrapper').removeClass('portrait').addClass('landscape') } resizeDebounce = setTimeout(function(){resizeDebounced = true},resizeDebounceTime)
}
Math.linearConvert = function(oldMin,oldMax,newMin,newMax,oldValue) { return(((oldValue - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin
}
$.fn.onScreen = function(){ var et = $(this).offset().top; var pb = window.pageYOffset + $(window).height(); return ( pb > et + 50 );
}
Parallaxadise - Quick n dirty scrollytelling demo - Script Codes
Parallaxadise - Quick n dirty scrollytelling demo - Script Codes
Home Page Home
Developer Teo Litto
Username teolitto
Uploaded August 26, 2022
Rating 3
Size 8,928 Kb
Views 42,504
Do you need developer help for Parallaxadise - Quick n dirty scrollytelling demo?

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!

Teo Litto (teolitto) Script Codes
Name
Color morphing
Dreamforce.com 2017
Powers Sniffer
WebGL Smoke
Kitten Sniffer
Konami Code Easter Egg
Lock Picking in the DOM
Liquid Loader
Networked Paint with Patrick
Starfall
Create amazing web content 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!