Scroll

Size
6,259 Kb
Views
4,048

How do I make an scroll?

What is a scroll? How do you make a scroll? This script and codes were developed by Esambino Wei Cheng Hsieh on 07 January 2023, Saturday.

Scroll Previews

Scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>scroll</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53257/jquery.superscrollorama.js"></script>	<div id="intro">	<h1 id="title">	<span id="title-line1" class="title-line">Super</span>	<span id="title-line2" class="title-line">scroll</span>	<span id="title-line3" class="title-line">orama</span>	</h1>	</div>	<div id="title-info">	<p id="desc">The jQuery plugin for supercool scroll animation</p>	<p class="credit">powered by <a href="https://www.greensock.com">Greensock</a></p>	<p class="credit">	created by <a href="https://twitter.com/johnpolacek">John Polacek</a>	</p>	<p class="credit">	with help from <a href="https://twitter.com/janpaepke">Jan Paepke</a>	</p>	</div>	<div id="showcase">	<h1>Showcase</h1>	<p>Check out these great websites to see SuperScrollorama in action</p>	<div class="gallery clearfix">	<figure>	<a href="http://www.zivotjednekuchyne.cz">	<img src="gallery/ikea.jpg" alt="Ikea, Life of One Kitchen">	</a>	<figcaption>Ikea, Life of One Kitchen<br />	<small><a href="http://www.smashingawards.com/design/life-of-one-kitchen/">Smashing Award Winner</a></small>	</figcaption>	</figure>	<figure>	<a href="http://lifeisvertical.alpina-since1883.com">	<img src="gallery/alpina.jpg" alt="Alpina - Life Is Vertical">	</a>	<figcaption>Alpina - Life Is Vertical<br />	<small><a href="http://www.cssdesignawards.com/css-web-design-award-winner.php?id=20048">CSS Design Award Winner</a></small>	</figcaption>	</figure>	<figure>	<a href="http://www.nouvelleoctavia.fr">	<img src="gallery/skoda.jpg" alt="New Škoda Octavia">	</a>	<figcaption>New Škoda Octavia<br />	<small><a href="http://cssawards.net/new-skoda-octavia/">CSS Awards Site of the Day</a></small>	</figcaption>	</figure>	<figure>	<a href="https://corporate.target.com/about/design-innovation/owned-brands/">	<img src="gallery/target.jpg" alt="Target Exclusive Brands Site">	</a>	<figcaption>Target Exclusive Brands</figcaption>	</figure>	<figure>	<a href="https://www.zippergaleria.com.br/pt/">	<img src="gallery/zipper.jpg" alt="Zipper Galleria">	</a>	<figcaption>Zipper Galleria<br />	<small><a href="http://www.awwwards.com/web-design-awards/zipper-galeria">Awwwards Site of the Day Winner</a></small>	</figcaption>	</figure>	<figure>	<a href="http://inception-explained.com">	<img src="gallery/inception.jpg" alt="Inception Explained">	</a>	<figcaption>Inception Explained<br />	<small><a href="http://designtaxi.com/news/351985/Finally-The-Complex-Plot-of-Inception-Explained/">Featured on TAXI</a></small>	</figcaption>	</figure>	<figure>	<a href="http://finnsjourney.de">	<img src="gallery/finnsjourney.jpg" alt="Finn’s Journey">	</a>	<figcaption>Finn’s Journey</figcaption>	</figure>	<figure>	<a href="http://public.orsi-and-jan.info/home">	<img src="gallery/jan.jpg" alt="Orsi and Jan">	</a>	<figcaption>Orsi &amp; Jan’s Wedding</figcaption>	</figure>	<figure>	<a href="http://innovation.kenmore.com/explore/">	<img src="gallery/kenmore.jpg" alt="Kenmore Innovations">	</a>	<figcaption>Kenmore Innovations</figcaption>	</figure>	</div>	</div>	<div id="content-wrapper">	<div id="examples-1">	<h2 id="fade-it">Fade It</h2>	<h2 id="fly-it">Fly It</h2>	<h2 id="spin-it">Spin It</h2>	<h2 id="scale-it">Scale It</h2>	<h2 id="smush-it">Smush It</h2>	</div>	<div id="examples-pin">	<div id="pin-frame-pin" class="pin-frame"><h2>Pin It</h2></div>	<div id="pin-frame-slide" class="pin-frame"><h2>Slide It</h2></div>	<div id="pin-frame-wipe" class="pin-frame"><h2>Wipe It</h2></div>	<div id="pin-frame-bounce" class="pin-frame"><h2>Bounce It</h2></div>	<div id="pin-frame-color" class="pin-frame"><h2>Color It</h2></div>	<div id="pin-frame-unpin" class="pin-frame"><h2>Unpin It</h2></div>	</div>	<div id="examples-2">	<h2 id="fling-it">Fling It</h2>	<h2 id="move-it">Move It</h2>	</div>	<div id="examples-parallax">	<h2 id="parallax-it">Parallax It</h2>	<h2 id="parallax-it-left">Parallax It</h2>	<h2 id="parallax-it-right">Parallax It</h2>	</div>	<h2 id="bring-it">Bring It</h2>	</div> <script src="js/index.js"></script>
</body>
</html>

Scroll - Script Codes CSS Codes

/*	COLORS	Dark Blue	#222438	Medium Blue	#69697A	Light Blue	#C5C3DE	Yellow	#FFB000	Red	#D92B00
*/
body {	background: #222438;	font-family: Georgia, Times New Roman, Times, serif;	font-weight: bold;	font-size: 20px;	text-align: center;	visibility: hidden;
}
.simple-demo, .mobile-demo {	visibility: visible;
}
.simple-demo #content-wrapper {	height: 1600px;	padding-top: 400px;
}
h1 {	font-size: 120px;	font-weight: normal;	margin: 0;	font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif;	text-transform: uppercase;	color: #FFB000;	text-shadow: 0 2px 1px #000;	line-height: .8;
}
h2 {	font-size: 150px;	font-weight: normal;	margin: 0;	color: #FFB000;	padding: 60px;	text-shadow: 0 2px 1px #000;	font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif;	text-transform: uppercase;
}
h3 {	font-size: 60px;	font-weight: normal;	margin: 0;	color: #FFB000;	text-shadow: 0 2px 1px #000;	font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif;	text-transform: uppercase;
}
p {	width: 80%; margin: 20px auto; text-shadow: 0 2px 1px #000; color: #C5C3DE; }
a, a:visited { color: #D92B00; font-weight: bold; font-style: italic; }
ul { list-style: none; }
figcaption { text-shadow: 0 2px 1px #000; color: #C5C3DE; }
.download { padding: 10px; }
pre { font-size: 15px; }
code { font-style: normal; }
blockquote {	text-align: left;	width: 720px;	margin: 10px auto;	background: #C5C3DE;	border: solid 2px #69697A;	padding: 0 40px;
}
#console {	display: none;	position: fixed;	top: 0;	left: 15px;	width: 500px;	margin: 0;	font-size: 14px;	font-style: italic;	background-color: #69697A;	text-shadow: none;	text-align: left;	padding: 3px 10px;	border-radius: 0 0 10px 10px;	z-index: 99;	opacity: .8;
}
#title {	overflow: hidden;	font-size: 180px;	margin: 0 auto -580px;	width: 100%;	height: 1000px;	position: relative;	padding-top: 30px;	z-index: 99;
}
.title-line { position: relative; display: block; margin: auto; width: 300%; left: -100%; }
#title-line2 { top: -60px; }
#title-line3 { top: -120px; }
.title-line span { display: inline-block; line-height: 1.1; position: relative; }
.twitter-follow-button { position: relative; top: 8px; left: 4px; }
#title-info { position: relative; z-index:99998; margin-top: 40px; opacity: 0; }
.credit {	font-size: 20px;	margin: 10px auto;	text-align: center;	font-style: italic;	color: #D92B00;	z-index:100;
}
#download {	position: relative;	margin: 50px auto;	font-size: 18px;	width: 100%;	line-height: 1.8;	z-index: 99999;
}
#hire { margin-bottom: 80px; }
#download a { color: #69697A; }
#examples-1 { overflow: hidden; }
#fly-it { position: relative; }
#scale-it { width: 500%; margin: 0px -200%; padding: 0; }
#examples-pin { position: relative; width: 100%; height: 600px; overflow: hidden; margin-bottom: -200px; }
.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.pin-frame h2 { margin-top: 120px; }
#pin-frame-slide { background: #D92B00; margin-left:-100%; }
#pin-frame-wipe { background: #FFB000; top:100%; }
#pin-frame-wipe h2 { color: #D92B00; }
#pin-frame-bounce { background: #222438; }
#pin-frame-color { background: #222438; }
#pin-frame-unpin { top:100%; }
#examples-2 { z-index: 9999; width: 100%; height: 100%; overflow: hidden; }
#fling-it, #move-it { position: relative; }
#examples-parallax {	padding-top: 200px;	height: 800px;	margin-bottom: -600px;	overflow: hidden;
}
#parallax-it {	padding: 0;	font-size: 80px;	position: relative;
}
#parallax-it-left {	position: relative;	font-size: 120px;	left: -160px;	color: #C5C3DE;	opacity: 0.5;	-moz-opacity: 0.5;	filter:alpha(opacity=5);	overflow: hidden;
}
#parallax-it-right {	position: relative;	font-size: 160px;	left: 80px;	color: #C5C3DE;	opacity: 0.25;	-moz-opacity: 0.25;	filter:alpha(opacity=2.5);	overflow: hidden;	width: 900px;
}
#showcase { padding: 60px 0; }
.gallery { width: 960px; margin: 0 auto; text-align: center; }
.gallery figure { text-align: center; float: left; margin: 10px; height: 270px; display: inline-block; }
#howtouse { padding-top: 200px; }
.divider { font-size: 14px; padding-top: 20px; }
.disclaimer {	font-size: 18px;	font-style: italic;	font-weight: normal;	margin: 0 auto;
}
#instructions { padding-top: 40px; }
#instructions p { margin: 0px auto 20px; }
#instructions-animation { padding-top: 40px; }
#instructions .documentation {	font-size: 16px;	text-align: left;	width: 720px;	margin: 10px auto 30px;	padding: 20px 40px;	text-shadow: none;	border: solid 1px #69697A;	color:#C5C3DE;
}
#instructions .param-list {	font-size: 18px;	line-height: 1.4;	padding: 0 18px;	margin: 1em 0 0;
}
#instructions .param-list-sub {	padding-left: 36px;	font-size: 15px;
}
#instructions .param-list li {	font-weight: normal;	padding-bottom: 20px;	text-shadow: 0 2px 1px #000;
}
.param {	font-style:italic;
}
.param-list small {	display: block;	font-weight: normal;	font-style: italic;
}
#credits { padding: 80px 0; }
/* mobile demo */
.mobile-demo #fade-it {	margin: 400px 0 500px 0;
}
.mobile-demo #examples-1 {	margin-bottom: 200px;
}
.mobile-demo #instructions {	width: 800px;	text-align: left;	margin: auto;
}
.mobile-demo ul {	list-style: disc;	color:#FFFFFF;	margin: 20px 80px 100px 80px;
}
.mobile-demo #content-wrapper {	margin-bottom: 100px;	width: 100%;
}
.mobile-demo h2 {	width: 90%;
}
.mobile-demo h3 {	color:#C5C3DE;
}

Scroll - Script Codes JS Codes

$('body').css('visibility','visible');
// hide content until after title animation
$('#content-wrapper').css('display','none');
/*
// lettering.js to split up letters for animation
$('#title-line1').lettering();
$('#title-line2').lettering();
$('#title-line3').lettering();
// TimelineLite for title animation, then start up superscrollorama when complete
(new TimelineLite({onComplete:initScrollAnimations}))
.from( $('#title-line1 span'), .4, {delay: 1, css:{right:'1000px'}, ease:Back.easeOut})
.from( $('#title-line2'), .4, {css:{top:'1000px',opacity:'0'}, ease:Expo.easeOut})
.append([ TweenMax.from( $('#title-line3 .char1'), .25+Math.random(), {css:{top: '-200px', right:'1000px'}, ease:Elastic.easeOut}), TweenMax.from( $('#title-line3 .char2'), .25+Math.random(), {css:{top: '300px', right:'1000px'}, ease:Elastic.easeOut}), TweenMax.from( $('#title-line3 .char3'), .25+Math.random(), {css:{top: '-400px', right:'1000px'}, ease:Elastic.easeOut}), TweenMax.from( $('#title-line3 .char4'), .25+Math.random(), {css:{top: '-200px', left:'1000px'}, ease:Elastic.easeOut}), TweenMax.from( $('#title-line3 .char5'), .25+Math.random(), {css:{top: '200px', left:'1000px'}, ease:Elastic.easeOut})
])
.to( $('#title-info'), .5, {css:{opacity:.99, 'margin-top':0}, delay:-1, ease:Quad.easeOut});
*/
initScrollAnimations();
function initScrollAnimations() { $('#content-wrapper').css('display','block'); var controller = $.superscrollorama(); // title tweens /* $('.title-line span').each(function() { controller.addTween(10, TweenMax.to(this, .5, {css:{top: Math.random()*-200-600, left: (Math.random()*1000)-500, rotation:Math.random()*720-360, 'font-size': Math.random()*300+150}, ease:Quad.easeOut}),200); }); controller.addTween(10, TweenMax.to($('#title-line1'), .75, {css:{top: 600}, ease:Quad.easeOut}),200); controller.addTween(10, TweenMax.to($('#title-line2'), .75, {css:{top: 200}, ease:Quad.easeOut}),200); controller.addTween(10, TweenMax.to($('#title-line3'), .75, {css:{top: -100}, ease:Quad.easeOut},200)); */ // showcase tweens controller.addTween('#showcase h1', TweenMax.from( $('#showcase h1'), .75, {css:{letterSpacing:20,opacity:0}, ease:Quad.easeOut})); controller.addTween('#showcase p', TweenMax.from( $('#showcase p'), 1, {css:{opacity:0}, ease:Quad.easeOut})); $('#showcase .gallery figure').css('position','relative').each(function() { controller.addTween('#showcase .gallery', TweenMax.from( $(this), 1, {delay:Math.random()*.2,css:{left:Math.random()*200-100,top:Math.random()*200-100,opacity:0}, ease:Back.easeOut})); }); // hire tweens $('#hire h3').lettering().find('span').css('position','relative').each(function() { controller.addTween('#hire h3', TweenMax.from( $(this), .25, {delay:Math.random()*.2,css:{left:Math.random()*1200-600,top:Math.random()*600-300,opacity:0}, ease:Expo.easeOut}),200); }); controller.addTween('#hire p', TweenMax.from( $('#hire p'), .5, {css:{opacity:0}})); // individual element tween examples controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}})); controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut})); controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut})); controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut})); controller.addTween('#smush-it', TweenMax.fromTo( $('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), 0, 100); // 100 px offset for better timing // set duration, in pixels scrolled, for pinned element var pinDur = 4000; // create animation timeline for pinned element var pinAnimations = new TimelineLite(); pinAnimations .append(TweenMax.from($('#pin-frame-pin h2'), .5, {css:{marginTop:0}, ease: Quad.easeInOut})) .append([ TweenMax.to($('#pin-frame-slide'), 1, {css:{marginLeft:0}}), TweenMax.to($('#pin-frame-pin'), 1, {css:{marginLeft:'100%'}}) ], .5) .append([ TweenMax.to($('#pin-frame-wipe'), .5, {css:{top:0}}), TweenMax.from($('#pin-frame-wipe h2'), .5, {css:{marginTop:'-600px'}}) ], .5) .append(TweenMax.from($('#pin-frame-bounce'), 5, {css:{marginTop:'-100%'}, ease:Bounce.easeOut}), .5) .append(TweenMax.from($('#pin-frame-color'), .25, {css:{opacity:0}}), .5) .append([ TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'blue'}}), TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'orange'}}) ]) .append([ TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'green'}}), TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'red'}}) ]) .append([ TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'yellow'}}), TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'purple'}}) ]) .append([ TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'orange'}}), TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'blue'}}) ]) .append([ TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'red'}}), TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'green'}}) ]) .append([ TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'#222438'}}), TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'#FFB000'}}) ]) .append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}})); // pin element, use onPin and onUnpin to adjust the height of the element controller.pin($('#examples-pin'), pinDur, { anim:pinAnimations, onPin: function() { $('#examples-pin').css('height','100%'); }, onUnpin: function() { $('#examples-pin').css('height','600px'); } }); controller.pin($('#examples-2'), 3000, { anim: (new TimelineLite()) .append( TweenMax.fromTo($('#fling-it'), 2, {css:{left:-1000, top: 500, rotation: -360}, immediateRender:true}, {css:{left:2000, top: -600, rotation: 360}}) ) .append( TweenMax.fromTo($('#move-it'), .75, {css:{left: -200, top: 800}, immediateRender:true}, {css:{top: -200}}), -1.5 // offset for better timing ) .append( TweenMax.to($('#move-it'), .5, {css:{left: 200}}) ) .append( TweenMax.to($('#move-it'), .5, {css:{top: 0}}) ) .append( TweenMax.to($('#move-it'), .5, {css:{left: 0}}) ) }) // parallax example, setting duration ties animation to scroll position // you can target a scroll position instead of an element (whose position can change) controller.addTween( '#examples-parallax', (new TimelineLite()) .append([ TweenMax.fromTo($('#parallax-it-left'), 1, {css:{top: 200}, immediateRender:true}, {css:{top: -600}}), TweenMax.fromTo($('#parallax-it-right'), 1, {css:{top: 500}, immediateRender:true}, {css:{top: -1250}}) ]), 1000 // scroll duration of tween ); $('#bring-it').lettering(); controller.addTween( '#bring-it', (new TimelineLite()) .append([ TweenMax.from($('#bring-it .char1'), 1, {css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}), TweenMax.from($('#bring-it .char2'), .6, {css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}), TweenMax.from($('#bring-it .char3'), 1.1, {css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}), TweenMax.from($('#bring-it .char4'), .7, {css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}), TweenMax.from($('#bring-it .char5'), .9, {css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}), TweenMax.from($('#bring-it .char6'), 1.2, {css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}), TweenMax.from($('#bring-it .char7'), .6, {css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}), TweenMax.from($('#bring-it .char8'), .8, {css:{fontSize: 0}, immediateRender:true, ease:Elastic.easeOut}) ]) , 1200, -100 // offset for better timing );
}
Scroll - Script Codes
Scroll - Script Codes
Home Page Home
Developer Esambino Wei Cheng Hsieh
Username Esambino
Uploaded January 07, 2023
Rating 3.5
Size 6,259 Kb
Views 4,048
Do you need developer help for Scroll?

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!

Esambino Wei Cheng Hsieh (Esambino) Script Codes
Create amazing video scripts 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!