Animated River Depth measurement

Developer
John Heiner
Size
5,247 Kb
Views
24,288
  1. Animated River Depth measurement Previews
  2. Animated River Depth measurement HTML Codes
  3. Animated River Depth measurement CSS Codes
  4. Animated River Depth measurement JS Codes

How do I make an animated river depth measurement?

What is a animated river depth measurement? How do you make a animated river depth measurement? This script and codes were developed by John Heiner on 14 November 2022, Monday.

Animated River Depth measurement Previews
IQ Test

Animated River Depth measurement - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated River Depth measurement</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:100,300,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="depth-gauge">	<svg width="30px" height="100%" class="ruler"> <defs> <pattern id="ruler" x="0" y="0" width="30" height="100px" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="30" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="5" width="5" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="10" width="5" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="15" width="5" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="20" width="5" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="25" width="10" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="30" width="5" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="35" width="5" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="40" width="5" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="45" width="5" height="1" style="stroke:none; fill: #fff"></rect> <rect x="0" y="50" width="20" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="55" width="5" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="60" width="5" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="65" width="5" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="70" width="5" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="75" width="10" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="80" width="5" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="85" width="5" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="90" width="5" height="1" style="stroke:none; fill: #fff"></rect>	<rect x="0" y="95" width="5" height="1" style="stroke:none; fill: #fff"></rect> </pattern> </defs> <rect x="0" y="0" width="30px" height="100%" style="stroke: none; fill: url(#ruler);"></rect>
</svg>	<span class="label -ft-1">1ft</span>	<span class="label -ft-2">2ft</span>	<span class="label -ft-3">3ft</span>	<span class="label -ft-4">4ft</span>	<span class="label -ft-5">5ft</span>	<span class="label -ft-6">6ft</span>	<span class="label -ft-7">7ft</span>	<span class="label -ft-8">8ft</span>	<span class="label -ft-9">9ft</span>	<span class="label -ft-10">10ft</span>	<span class="label -ft-11">11ft</span>	<span class="label -ft-12">12ft</span>	<span class="label -ft-13">13ft</span>	<span class="label -ft-14">14ft</span>	<span class="label -ft-15">15ft</span>	<span class="label -ft-16">16ft</span>	<span class="label -ft-17">17ft</span>	<span class="label -ft-18">18ft</span>	<span class="label -ft-19">19ft</span>	<span class="label -ft-20">20ft</span>	<span class="label -ft-21">21ft</span>	<span class="label -ft-22">22ft</span>	<span class="label -ft-23">23ft</span>	<span class="label -ft-24">24ft</span>	<span class="label -ft-25">25ft</span>	<span class="label -ft-26">26ft</span>	<span class="label -ft-27">27ft</span>	<span class="label -ft-28">28ft</span>	<span class="label -ft-29">29ft</span>	<span class="label -ft-30">30ft</span>	<span class="record -rd-1972"><span class="-date">28.62ft - 6/23/1972</span></span>	<span class="record -rd-1969"><span class="-date">24.95ft - 8/21/1969</span></span>	<span class="record -rd-1985"><span class="-date">24.77ft - 11/07/1985</span></span>	<span class="record -rd-1936"><span class="-date">23.42ft - 3/19/1936</span></span>	<span class="record -rd-1937"><span class="-date">22.65ft - 4/27/1937</span></span>	<span class="category -major"><span class="-title">Major Flood Stage</span></span>	<span class="category -moderate"><span class="-title">Moderate Flood Stage</span></span>	<span class="category -flood"><span class="-title">Flood Stage</span></span>	<span class="category -action"><span class="-title">Action Stage</span></span>	<div class="depth"><span class="js-depth">0.00</span><small>ft</small><div class="marker"></div></div>
</div>
<div class="pad">	<div class="-loader js-loader">	<img src="http://samherbert.net/svg-loaders/svg-loaders/puff.svg">	<p>Getting the Depth...</p>	</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://sators-status-board.googlecode.com/svn-history/r2/trunk/statusboard/jquery.jgfeed-min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/ScrollToPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated River Depth measurement - Script Codes CSS Codes

body, html { margin: 0; padding: 0; height: 100%; width: 100%; font-size: 1.3rem; line-height: 1.5; font-family: 'Roboto', sans-serif; color: #fff; -webkit-font-smoothing: antialiased;
}
.depth-gauge { height: 3001px; position: relative; background: -webkit-linear-gradient(bottom, #045a5e 0%, #09b7bf 15%, #90d36b 30%, #f2d40d 40%, #fcb12b 50%, #ed1b72 73%, #754fa0 100%); background: linear-gradient(to top, #045a5e 0%, #09b7bf 15%, #90d36b 30%, #f2d40d 40%, #fcb12b 50%, #ed1b72 73%, #754fa0 100%);
}
.depth-gauge .ruler { opacity: 0.6;
}
.depth-gauge .label { color: rgba(255, 255, 255, 0.8); font-size: 0.4rem; text-transform: uppercase; font-weight: 700; position: absolute; left: 35px;
}
.depth-gauge .label.-ft-1 { bottom: calc(198px - 100px);
}
.depth-gauge .label.-ft-2 { bottom: calc(298px - 100px);
}
.depth-gauge .label.-ft-3 { bottom: calc(398px - 100px);
}
.depth-gauge .label.-ft-4 { bottom: calc(498px - 100px);
}
.depth-gauge .label.-ft-5 { bottom: calc(598px - 100px);
}
.depth-gauge .label.-ft-6 { bottom: calc(698px - 100px);
}
.depth-gauge .label.-ft-7 { bottom: calc(798px - 100px);
}
.depth-gauge .label.-ft-8 { bottom: calc(898px - 100px);
}
.depth-gauge .label.-ft-9 { bottom: calc(998px - 100px);
}
.depth-gauge .label.-ft-10 { bottom: calc(1098px - 100px);
}
.depth-gauge .label.-ft-11 { bottom: calc(1198px - 100px);
}
.depth-gauge .label.-ft-12 { bottom: calc(1298px - 100px);
}
.depth-gauge .label.-ft-13 { bottom: calc(1398px - 100px);
}
.depth-gauge .label.-ft-14 { bottom: calc(1498px - 100px);
}
.depth-gauge .label.-ft-15 { bottom: calc(1598px - 100px);
}
.depth-gauge .label.-ft-16 { bottom: calc(1698px - 100px);
}
.depth-gauge .label.-ft-17 { bottom: calc(1798px - 100px);
}
.depth-gauge .label.-ft-18 { bottom: calc(1898px - 100px);
}
.depth-gauge .label.-ft-19 { bottom: calc(1998px - 100px);
}
.depth-gauge .label.-ft-20 { bottom: calc(2098px - 100px);
}
.depth-gauge .label.-ft-21 { bottom: calc(2198px - 100px);
}
.depth-gauge .label.-ft-22 { bottom: calc(2298px - 100px);
}
.depth-gauge .label.-ft-23 { bottom: calc(2398px - 100px);
}
.depth-gauge .label.-ft-24 { bottom: calc(2498px - 100px);
}
.depth-gauge .label.-ft-25 { bottom: calc(2598px - 100px);
}
.depth-gauge .label.-ft-26 { bottom: calc(2698px - 100px);
}
.depth-gauge .label.-ft-27 { bottom: calc(2798px - 100px);
}
.depth-gauge .label.-ft-28 { bottom: calc(2898px - 100px);
}
.depth-gauge .label.-ft-29 { bottom: calc(2998px - 100px);
}
.depth-gauge .label.-ft-30 { bottom: calc(3098px - 100px);
}
.depth-gauge .record,
.depth-gauge .category { position: absolute; border-bottom: 1px dotted rgba(255, 255, 255, 0.4); width: 100%; display: block; height: 1px;
}
.depth-gauge .record .-date,
.depth-gauge .record .-title,
.depth-gauge .category .-date,
.depth-gauge .category .-title { color: rgba(255, 255, 255, 0.7); font-size: 0.5rem; position: absolute; right: 5px; top: 2px; font-weight: 300;
}
.depth-gauge .record .-title,
.depth-gauge .category .-title { font-weight: 700; color: white;
}
.depth-gauge .record.-rd-1972,
.depth-gauge .category.-rd-1972 { bottom: 2862px;
}
.depth-gauge .record.-rd-1969,
.depth-gauge .category.-rd-1969 { bottom: 2495px;
}
.depth-gauge .record.-rd-1985,
.depth-gauge .category.-rd-1985 { bottom: 2477px;
}
.depth-gauge .record.-rd-1936,
.depth-gauge .category.-rd-1936 { bottom: 2342px;
}
.depth-gauge .record.-rd-1937,
.depth-gauge .category.-rd-1937 { bottom: 2265px;
}
.depth-gauge .record.-major,
.depth-gauge .category.-major { bottom: 2200px;
}
.depth-gauge .record.-moderate,
.depth-gauge .category.-moderate { bottom: 1500px;
}
.depth-gauge .record.-flood,
.depth-gauge .category.-flood { bottom: 1200px;
}
.depth-gauge .record.-action,
.depth-gauge .category.-action { bottom: 900px;
}
.depth-gauge .category { border-bottom: 1px dashed white;
}
.depth { width: 100%; letter-spacing: -0.35rem; position: absolute; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); bottom: 0px; font-size: 4.5rem; font-weight: 100; opacity: 1; z-index: 2; line-height: 0;
}
.depth small { font-size: 3rem; letter-spacing: 0rem; margin-left: 0.3rem;
}
.marker { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid white; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%;
}
.pad { background: #045a5e; height: 50vh; display: block; position: relative;
}
.pad .-loader { position: absolute; text-align: center; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); top: 50%; left: 50%;
}
.pad .-loader p { margin: 0; font-size: 0.8rem;
}

Animated River Depth measurement - Script Codes JS Codes

// start at bottom of page
$(document).ready(function() {	scrollBottom();
});
function scrollBottom() {	// var $target = $('html, body').outerHeight();	// console.log($target);	// $('html, body').scrollTop( $target );	$('html, body').scrollTop($(".pad").offset().top);	// if($(window).scrollTop() + $(window).height() >= $(document).height()){	// window.scrollTo(0,document.body.scrollHeight);	// }
}
window.onbeforeunload = function(e) {	$('html, body').scrollTop(0);
};
var height = $(document).height();
$depthNumber = $('.js-depth');
$depth = $('.depth');
$loader = $('.js-loader');
var startDepth = {depth:0.00};
var snippet;
$.jGFeed('http://water.weather.gov/ahps2/rss/obs/rmdv2.rss',	function(feeds) {	// Check for errors	if (feeds) {	snippet = feeds.entries[0].content;	parseFeed(snippet);	} else {	// there was an error	return false;	}	}, 10);
function parseFeed(snippet) {	var start_pos = snippet.indexOf('Latest Observation:') + 20;	var end_pos = snippet.indexOf(' ',start_pos);	var depth = parseFloat(snippet.substring(start_pos,end_pos));	var decimal = snippet.substring(start_pos,end_pos);	var scrollTop = $(window).scrollTop();	var scrollPosition = scrollTop - decimal.replace(/\./g, "");	var depthPosition = decimal.replace(/\./g, "");	console.log(scrollTop);	setTimeout(function(){	animate(depth, scrollPosition, depthPosition);	}, 3000);
}
function animate(depth, scrollPosition, depthPosition) {	TweenMax.to($loader, 0.5, {	opacity: 0,	ease: Power4.easeOut	});	TweenMax.to(startDepth, 2.5, {	depth:"+="+ depth,	onUpdate:updateDepth,	ease:Power2.easeOut	});	TweenMax.to($depth, 2.5, {	bottom: depthPosition,	ease:Power2.easeOut	});	TweenMax.to(window, 2.5, {scrollTo:{y:scrollPosition, x:0, ease:Power2.easeOut}});
}
function updateDepth() {	var d = startDepth.depth;	var de = d.toFixed(2);	$depthNumber.html(de);
}
Animated River Depth measurement - Script Codes
Animated River Depth measurement - Script Codes
Home Page Home
Developer John Heiner
Username johnheiner
Uploaded November 14, 2022
Rating 4.5
Size 5,247 Kb
Views 24,288
Do you need developer help for Animated River Depth measurement?

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!

John Heiner (johnheiner) Script Codes
Name
Canvas Mask Page Intro Animation
Logo Animation
Floating Labels
SVG line hover
Page Transition with Loader
A Pen by John Heiner
Passport Flip Open with GSAP
Bouncy Box
Easy Hamburger to X Icon animation
Breaking Lists at specific points without floats.
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!