Horisontal scroll site

Developer
NM
Size
2,807 Kb
Views
28,336
  1. Horisontal scroll site Previews
  2. Horisontal scroll site HTML Codes
  3. Horisontal scroll site CSS Codes
  4. Horisontal scroll site JS Codes

How do I make an horisontal scroll site?

What is a horisontal scroll site? How do you make a horisontal scroll site? This script and codes were developed by NM on 22 October 2022, Saturday.

Horisontal scroll site Previews
IQ Test

Horisontal scroll site - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Horisontal scroll site</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header>header &mdash; Projects: <a href="#" class="previous">Previous</a> / <a href="#" class="next">Next</a></header>
<main class="accordion--container"> <section> <article> <h2>First</h2> <p></p> <p>The last section makes a "flash" because it is pushed down and out of the flow (float: left). This occurs when the main section width-duration is 1000ms: at some point the total width of the 4 sections is larger that the main width.</p> </article> </section> <section> <article> <h2>Second</h2> <p>A suspendisse dolor eros vestibulum parturient massa a a condimentum a aptent a ultrices a a commodo est.Congue enim turpis dictumst pulvinar lacinia quis vestibulum magnis scelerisque sem nullam vestibulum vestibulum aliquam ullamcorper tempus.Eu diam parturient a commodo quis lobortis orci phasellus a aenean vestibulum ac scelerisque taciti nibh ut tortor conubia a blandit semper a adipiscing elementum ac a vestibulum tincidunt.Ante cubilia himenaeos a et eget a viverra a habitasse.</p> <p>A suspendisse dolor eros vestibulum parturient massa a a condimentum a aptent a ultrices a a commodo est.Congue enim turpis dictumst pulvinar lacinia quis vestibulum magnis scelerisque sem nullam vestibulum vestibulum aliquam ullamcorper tempus.Eu diam parturient a commodo quis lobortis orci phasellus a aenean vestibulum ac scelerisque taciti nibh ut tortor conubia a blandit semper a adipiscing elementum ac a vestibulum tincidunt.Ante cubilia himenaeos a et eget a viverra a habitasse.</p> <p>A suspendisse dolor eros vestibulum parturient massa a a condimentum a aptent a ultrices a a commodo est.Congue enim turpis dictumst pulvinar lacinia quis vestibulum magnis scelerisque sem nullam vestibulum vestibulum aliquam ullamcorper tempus.Eu diam parturient a commodo quis lobortis orci phasellus a aenean vestibulum ac scelerisque taciti nibh ut tortor conubia a blandit semper a adipiscing elementum ac a vestibulum tincidunt.Ante cubilia himenaeos a et eget a viverra a habitasse.</p> <p>A suspendisse dolor eros vestibulum parturient massa a a condimentum a aptent a ultrices a a commodo est.Congue enim turpis dictumst pulvinar lacinia quis vestibulum magnis scelerisque sem nullam vestibulum vestibulum aliquam ullamcorper tempus.Eu diam parturient a commodo quis lobortis orci phasellus a aenean vestibulum ac scelerisque taciti nibh ut tortor conubia a blandit semper a adipiscing elementum ac a vestibulum tincidunt.Ante cubilia himenaeos a et eget a viverra a habitasse.</p> <p>A suspendisse dolor eros vestibulum parturient massa a a condimentum a aptent a ultrices a a commodo est.Congue enim turpis dictumst pulvinar lacinia quis vestibulum magnis scelerisque sem nullam vestibulum vestibulum aliquam ullamcorper tempus.Eu diam parturient a commodo quis lobortis orci phasellus a aenean vestibulum ac scelerisque taciti nibh ut tortor conubia a blandit semper a adipiscing elementum ac a vestibulum tincidunt.Ante cubilia himenaeos a et eget a viverra a habitasse.</p> <p>A suspendisse dolor eros vestibulum parturient massa a a condimentum a aptent a ultrices a a commodo est.Congue enim turpis dictumst pulvinar lacinia quis vestibulum magnis scelerisque sem nullam vestibulum vestibulum aliquam ullamcorper tempus.Eu diam parturient a commodo quis lobortis orci phasellus a aenean vestibulum ac scelerisque taciti nibh ut tortor conubia a blandit semper a adipiscing elementum ac a vestibulum tincidunt.Ante cubilia himenaeos a et eget a viverra a habitasse.</p> <p>A suspendisse dolor eros vestibulum parturient massa a a condimentum a aptent a ultrices a a commodo est.Congue enim turpis dictumst pulvinar lacinia quis vestibulum magnis scelerisque sem nullam vestibulum vestibulum aliquam ullamcorper tempus.Eu diam parturient a commodo quis lobortis orci phasellus a aenean vestibulum ac scelerisque taciti nibh ut tortor conubia a blandit semper a adipiscing elementum ac a vestibulum tincidunt.Ante cubilia himenaeos a et eget a viverra a habitasse.</p> <p>A suspendisse dolor eros vestibulum parturient massa a a condimentum a aptent a ultrices a a commodo est.Congue enim turpis dictumst pulvinar lacinia quis vestibulum magnis scelerisque sem nullam vestibulum vestibulum aliquam ullamcorper tempus.Eu diam parturient a commodo quis lobortis orci phasellus a aenean vestibulum ac scelerisque taciti nibh ut tortor conubia a blandit semper a adipiscing elementum ac a vestibulum tincidunt.Ante cubilia himenaeos a et eget a viverra a habitasse.</p> </article> </section> <section> <article> <h2>Third</h2> <p>A suspendisse dolor eros vestibulum parturient massa a a condimentum a aptent a ultrices a a commodo est.Congue enim turpis dictumst pulvinar lacinia quis vestibulum magnis scelerisque sem nullam vestibulum vestibulum aliquam ullamcorper tempus.Eu diam parturient a commodo quis lobortis orci phasellus a aenean vestibulum ac scelerisque taciti nibh ut tortor conubia a blandit semper a adipiscing elementum ac a vestibulum tincidunt.Ante cubilia himenaeos a et eget a viverra a habitasse.</p> </article> </section> <section> <article> <h2>Fourth</h2> <p>A suspendisse dolor eros vestibulum parturient massa a a condimentum a aptent a ultrices a a commodo est.Congue enim turpis dictumst pulvinar lacinia quis vestibulum magnis scelerisque sem nullam vestibulum vestibulum aliquam ullamcorper tempus.Eu diam parturient a commodo quis lobortis orci phasellus a aenean vestibulum ac scelerisque taciti nibh ut tortor conubia a blandit semper a adipiscing elementum ac a vestibulum tincidunt.Ante cubilia himenaeos a et eget a viverra a habitasse.</p> </article> </section>
</main>
<footer>Footer</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Horisontal scroll site - Script Codes CSS Codes

html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit;
}
html,
body { height: 100%; overflow: hidden;
}
header { position: fixed; top: 0; right: 0; left: 0; height: 60px; line-height: 20px; padding: 20px; background-color: rgba(255, 255, 255, 1); z-index: 2;
}
.accordion--container { position: absolute; top: 60px; right: 0; bottom: 60px; left: 0; background-color: rgba(0, 0, 0, 0.2); z-index: 1;
}
.accordion--container section { position: absolute; width: 100%; height: 100%; padding: 20px; overflow-y: auto;
}
.accordion--container section article { max-width: 720px;
}
footer { position: fixed; right: 0; bottom: 0; left: 0; height: 60px; line-height: 20px; padding: 20px; background-color: rgba(255, 255, 255, 1); z-index: 3;
}

Horisontal scroll site - Script Codes JS Codes

$( window ).load(function() { $( ".accordion--container section" ).each(function( index ) { $( this ).css('left', index * 100 + "%") }); var currentProject = 1; var totalProjects = $( ".accordion--container section" ).length; var sectionWidth = $( ".accordion--container section" ).outerWidth(); $( ".next" ).click(function(event) { event.preventDefault(); if ( currentProject < totalProjects ) { $( "html,body" ).scrollLeft( currentProject * sectionWidth ); currentProject++; } else if ( currentProject == totalProjects ) { $( "html,body" ).scrollLeft( 0 ); currentProject = 1; } $('footer').text(currentProject); }); $( ".previous" ).click(function(event) { event.preventDefault(); if ( currentProject == 1 ) { currentProject = totalProjects; $( "html,body" ).scrollLeft( currentProject * sectionWidth ); } else if ( currentProject > 1 ) { currentProject--; $( "html,body" ).scrollLeft( (currentProject-1) * sectionWidth ); } $('footer').text(currentProject); });
});
Horisontal scroll site - Script Codes
Horisontal scroll site - Script Codes
Home Page Home
Developer NM
Username tokant
Uploaded October 22, 2022
Rating 3
Size 2,807 Kb
Views 28,336
Do you need developer help for Horisontal scroll site?

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!

NM (tokant) Script Codes
Name
Google Chart API - Multi Series Bar Chart
Google Maps Javascript API - Geolocation
Google Chart API - Data from Google Spreadsheet
T - Template
Google Charts API - Dual Y-axis Line Chart
A Pen by NM
HTML5 video playbackRate
Google Charts API - Dual Y-axis Line Chart v2
Google Chart API - Basic Bar Chart
Template 2
Create amazing marketing copy 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!