Full Page Slide, Vertical Progress Bar

Developer
Calvin
Size
3,016 Kb
Views
56,672
  1. Full Page Slide, Vertical Progress Bar Previews
  2. Full Page Slide, Vertical Progress Bar HTML Codes
  3. Full Page Slide, Vertical Progress Bar CSS Codes
  4. Full Page Slide, Vertical Progress Bar JS Codes

How do I make an full page slide, vertical progress bar?

Vertical Progress Bar, responsive slides.. What is a full page slide, vertical progress bar? How do you make a full page slide, vertical progress bar? This script and codes were developed by Calvin on 11 August 2022, Thursday.

Full Page Slide, Vertical Progress Bar Previews
IQ Test

Full Page Slide, Vertical Progress Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full Page Slide, Vertical Progress Bar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <progress value="0"></progress>
<div class="wrapper tabled"> <div class="stage" id="page1"> <div class="middled"> <h1><span class="thin">full</span><span class="thick split ">page</span></h1> <span class="thin">This is page one.<br />(scroll down for second page)</span> <brlogo>try to resize the window</brlogo> </div> </div>
</div>
<div class="wrapper tabled"> <div class="stage" id="page2"> <div class="middled"> <h1><span class="thin">image </span><span class="thickcolor">SCROLLS</span><span class="thin"> with the page</h1></span> <span class="high"> background: #f1f1f1 url(); <br />repeat top right fixed</span> </div> </div>
</div>
</body>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic,900,900italic,300,300italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600italic,700,600,400italic,300,300italic,700italic,900,900italic' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/index.js"></script>
</body>
</html>

Full Page Slide, Vertical Progress Bar - Script Codes CSS Codes

html, body { height: 100%; margin: 0; font-family: 'Source Sans Pro', sans-serif; color:#1F2425; }
#page1 { background: rgb(241, 241, 241) url(https://images.unsplash.com/reserve/ijl3tATFRpCjKWXwUoBz_DSCF7168.jpg?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925) repeat bottom left fixed; -webkit-filter: grayscale(1); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: gray; filter: grayscale(100%);}
#page2 { background: #f1f1f1; background: url(https://images.unsplash.com/reserve/D9xlw7UxTBqQw5sLf8cJ_reef%20insp-72.jpg?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925) repeat top center fixed;
color:white; z-index:9999;}
.wrapper { display: table; height: 100%; width: 100%;
}
.stage { display: table-cell; vertical-align: middle;
}
.tabled, .middled { text-align: center; margin: 0 auto;
}
h1 { color:#1F2425; text-transform: uppercase; }
h1 ~ span, p {font-family: 'Source Sans Pro'; color:#1D1A1A;}
.thin { font-weight: 300; }
.thick { font-weight: 900; }
.thickcolor { font-weight: 900;color: #E7CD4C; }
.split { font-weight: 900; margin-left:50%;}
.high{ font-size:25px; letter-spacing:.15em; color: #E7CD4C; background: #000; font-weight: 700; padding: 3px;
}
brlogo { position: absolute; bottom: .5em; text-align: right; right: 1em; font-size: 80%;
}
progress {transition: all .34s ease; margin-left:-48.8%; /* Positioning */ position: fixed; transform:rotate(90deg); left: 0; top: 11%; z-index:999; /* Dimensions */ width: 100%; height: 34px; /* Reset the appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Get rid of the default border in Firefox/Opera. */ border: none; /* Progress bar container for Firefox/IE10+ */transition: all .34s ease; background-color: transparent; /* Progress bar value for IE10+ */ color: #E7CD4C; transition: all .34s ease;
}progress::-webkit-progress-bar {transition: all .34s ease; background-color: transparent;
}
progress::-webkit-progress-value { background-color: #E7CD4C;transition: all .34s ease;
}
progress::-moz-progress-bar {transition: all .34s ease; background-color: #E7CD4C;
}

Full Page Slide, Vertical Progress Bar - Script Codes JS Codes

$(document).on('ready', function() { var winHeight = $(window).height(), docHeight = $(document).height(), progressBar = $('progress'), max, value; /* Set the max scrollable area */ max = docHeight - winHeight; progressBar.attr('max', max); $(document).on('scroll', function(){ value = $(window).scrollTop(); progressBar.attr('value', value); });
});
Full Page Slide, Vertical Progress Bar - Script Codes
Full Page Slide, Vertical Progress Bar - Script Codes
Home Page Home
Developer Calvin
Username CalvinMorett
Uploaded August 11, 2022
Rating 3
Size 3,016 Kb
Views 56,672
Do you need developer help for Full Page Slide, Vertical Progress Bar?

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!

Calvin (CalvinMorett) Script Codes
Name
Particle Web
Staff Page Mockup
Portfolio Idea
Portfolio Base
PORTFOLIO - CEMENT
POE Rank Mockup
A Pen by Calvin
Port
The word good is bad.
CLG Web Design Concept
Create amazing love letters 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!