Horizontal Scrolling Theme

Developer
Calvin
Size
11,410 Kb
Views
26,312
  1. Horizontal Scrolling Theme Previews
  2. Horizontal Scrolling Theme HTML Codes
  3. Horizontal Scrolling Theme CSS Codes
  4. Horizontal Scrolling Theme JS Codes

How do I make an horizontal scrolling theme?

WPShower has a really great selection of Wordpress templates, except one feature I think they should implement is a horizontal scroller using the mousewheel functions on horizontal galleries. Here is an example of one of their themes with mouse wheel as a horizontal scroller.. What is a horizontal scrolling theme? How do you make a horizontal scrolling theme? This script and codes were developed by Calvin on 25 October 2022, Tuesday.

Horizontal Scrolling Theme Previews
IQ Test

Horizontal Scrolling Theme - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Horizontal Scrolling Theme</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body class="home blog">
<div id="page" class="hfeed site" style="opacity: 1;">	<header id="masthead" class="site-header" role="banner" style="top: 0px;">	<h1 class="site-title"><a href="http://portra.wpshower.com/" rel="home">Portra</a></h1>	<h1 class="menu-toggle">m</h1>	<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">	<a class="screen-reader-text skip-link" href="#content">Skip to content</a>	<span id="navigation-close">✕</span>	<div id="top-main-menu" class="menu-1-container"><ul id="menu-1" class="nav-menu"><li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-83" style="opacity: 1;"><a href="/portraits/">Portraits</a></li>
<li id="menu-item-86" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-86" style="opacity: 1;"><a href="/fashion/">Fashion</a></li>
<li id="menu-item-167" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-167" style="opacity: 1;"><a href="/sports/">Sports</a></li>
<li id="menu-item-85" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-85" style="opacity: 1;"><a href="/graphic-design/">Design</a></li>
<li id="menu-item-135" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-135" style="opacity: 1;"><a href="http://portra.wpshower.com/category/projects/">Projects</a>
<ul class="sub-menu">	<li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-136"><a href="/piraha/">Pirahã</a></li>	<li id="menu-item-87" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-87"><a href="/still-life/">Still Life</a></li>
</ul>
</li>
</ul></div>	<div id="top-right-menu" class="menu-2-container"><ul id="menu-2" class="nav-menu"><li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92" style="opacity: 1;"><a href="http://portra.wpshower.com/about/">About</a></li>
<li id="menu-item-89" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-89 submenu-active" style="opacity: 1;"><a href="https://facebook.com/wpshower">Fb.</a></li>
<li id="menu-item-88" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-88" style="opacity: 1;"><a href="https://twitter.com/wpshower">Tw.</a></li>
</ul></div>	</nav>	</header><!-- #masthead -->	<div id="main" class="site-main">
<div id="main-content" class="main-content">	<!--	--><div id="post-68" class="post-68 post type-post status-publish format-standard has-post-thumbnail hentry category-portraits" style="width: 447px;">	<a class="image_link" href="http://portra.wpshower.com/portraits/">	<img src="https://placehold.it/893x1100" width="893" height="1100">	</a>	<div>	<a href="http://portra.wpshower.com/portraits/">Portraits</a>	</div>	</div><!--	--><!--	--><div id="post-52" class="post-52 post type-post status-publish format-standard has-post-thumbnail hentry category-graphic-design" style="width: 441px;">	<a class="image_link" href="http://portra.wpshower.com/graphic-design/">	<img src="https://placehold.it/960x1200" width="960" height="1200">	</a>	<div>	<a href="http://portra.wpshower.com/graphic-design/">Graphic Design</a>	</div>	</div><!--	--><!--	--><div id="post-37" class="post-37 post type-post status-publish format-standard has-post-thumbnail hentry category-fashion">	<a class="image_link" href="http://portra.wpshower.com/fashion/">	<img src="https://placehold.it/600x900" width="600" height="900">	</a>	<div>	<a href="http://portra.wpshower.com/fashion/">Fashion</a>	</div>	</div><!--	--><!--	--><div id="post-146" class="post-146 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">	<a class="image_link" href="http://portra.wpshower.com/sports/">	<img src="https://placehold.it/1090x1280" width="1090" height="1280">	</a>	<div>	<a href="http://portra.wpshower.com/sports/">Sports</a>	</div>	</div><!--	--><!--	--><div id="post-8" class="post-8 post type-post status-publish format-standard has-post-thumbnail hentry category-projects">	<a class="image_link" href="http://portra.wpshower.com/still-life/">	<img src="https://placehold.it/675x900" width="675" height="900">	</a>	<div>	<a href="http://portra.wpshower.com/still-life/">Still Life</a>	</div>	</div><!--	--><!--	--><div id="post-108" class="post-108 post type-post status-publish format-standard has-post-thumbnail hentry category-projects">	<a class="image_link" href="http://portra.wpshower.com/piraha/">	<img src="https://placehold.it/1920x1280" width="1920" height="1280">	</a>	<div>	<a href="http://portra.wpshower.com/piraha/">Pirahã</a>	</div>	</div><!--	--></div><!-- #main-content -->	</div><!-- #main -->	<footer id="colophon" class="site-footer" role="contentinfo" style="bottom: 0.56px;">	<div class="copyright">© 2014</div>	<div class="site-info">	<a href="http://wpshower.com/themes/portra">Portra</a> by <a href="http://wpshower.com/">Wpshower</a>	</div><!-- .site-info -->	</footer><!-- #colophon -->	</div><!-- #page -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script >
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 40);
e.preventDefault();
});
});
</script>
<!-- super cache --></body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Horizontal Scrolling Theme - Script Codes CSS Codes

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html{ font-size:72.5%; border:5px solid #eee; height:100%; width:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
}
html, body, button, input, select, textarea { font-family: Arial, sans-serif;
}
/*
Theme Name: Portra
Theme URI: http://wpshower.com/themes/portra
Author: Wpshower
Author URI: http://wpshower.com/
Description: In an era of wide screens it's logical to forgot the traditional vertical type of scrolling to make the use of screen space more efficient. The horizontal layout of the Portra theme is perfect for displaying visual materials like photography or art works, while its clean design allows the graphic content to stand out and make a powerful impression.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, light, responsive, horizontal, photography, design
Text Domain: portra
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/** * Table of Contents: * * 1.0 - Reset * 2.0 - Repeatable Patterns * 3.0 - Basic Structure * 4.0 - Header * 5.0 - Navigation * 6.0 - Content * 6.1 - Post Thumbnail * 6.2 - Entry Header * 6.3 - Entry Meta * 6.4 - Entry Content * 6.5 - Galleries * 6.6 - Post Formats * 6.7 - Post/Image/Paging Navigation * 6.8 - Attachments * 6.9 - Archives * 6.10 - Contributor Page * 6.11 - 404 Page * 6.12 - Full-width * 6.13 - Singular * 6.14 - Comments * 7.0 - Sidebar * 7.1 - Widgets * 7.2 - Content Sidebar Widgets * 8.0 - Footer * 9.0 - Featured Content * 10.0 - Multisite * 11.0 - Media Queries * 12.0 - Print * ----------------------------------------------------------------------------- */
/** * 1.0 Reset * * Resetting and rebuilding styles have been helped along thanks to the fine * work of Eric Meyer https://meyerweb.com/eric/tools/css/reset/index.html * along with Nicolas Gallagher and Jonathan Neal * https://necolas.github.com/normalize.css/ and Blueprint * http://www.blueprintcss.org/ * * ----------------------------------------------------------------------------- */
* {	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	box-sizing: border-box;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {	border: 0;	font-family: inherit;	font-size: 100%;	font-style: inherit;	font-weight: inherit;	margin: 0;	outline: 0;	padding: 0;	vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {	display: block;
}
audio,
canvas,
video {	display: inline-block;	max-width: 100%;
}
html {	font-size: 62%;	-webkit-text-size-adjust: 100%;	-ms-text-size-adjust: 100%;	text-rendering: optimizeLegibility;
}
body,
button,
input,
select,
textarea {	color: #2d2926;	font-family: Muli, sans-serif;	font-size: 18px;	font-size: 1.8rem;	font-weight: 400;	line-height: 28px;	line-height: 2.8rem;
}
body {	height: 100%;	background: #fff;
}
a {	color: #afb0ae;	text-decoration: none;
}
a:focus,
a:hover,
a:active {	outline: 0;
}
a:active {	color: #2d2926;
}
a:hover {	color: #28fe2c;
}
h1,
h2,
h3,
h4,
h5,
h6 {	clear: both;	font-weight: 400;	margin: 28px 0 14px;	margin: 2.8rem 0 1.4rem;
}
h1 {	font-size: 28px;	font-size: 2.8rem;	line-height: 38px;	line-height: 3.8rem;
}
h2 {	font-size: 26px;	font-size: 2.6rem;	line-height: 36px;	line-height: 3.6rem;
}
h3 {	font-size: 24px;	font-size: 2.4rem;	line-height: 34px;	line-height: 3.4rem;
}
h4 {	font-size: 22px;	font-size: 2.2rem;	line-height: 32px;	line-height: 3.2rem;
}
h5 {	font-size: 20px;	font-size: 2rem;	line-height: 30px;	line-height: 3rem;
}
h6 {	font-size: 18px;	font-size: 1.8rem;	line-height: 28px;	line-height: 2.8rem;
}
address {	font-style: italic;	margin-bottom: 28px;	margin-bottom: 2.8rem;
}
abbr[title] {	border-bottom: 1px dotted #afb0ae;	cursor: help;
}
b,
strong {	font-weight: 400;
}
cite,
dfn,
em,
i {	font-style: italic;
}
mark,
ins {	text-decoration: none;
}
p {	margin-bottom: 28px;	margin-bottom: 2.8rem;
}
code,
kbd,
tt,
var,
samp,
pre {	font-family: monospace, serif;	font-size: 16px;	font-size: 1.6rem;	-webkit-hyphens: none;	-moz-hyphens: none;	-ms-hyphens: none;	hyphens: none;	line-height: 26px;	line-height: 2.6rem;
}
pre {	border: 1px solid rgba(0, 0, 0, 0.1);	margin-bottom: 28px;	margin-bottom: 2.8rem;	max-width: 100%;	overflow: auto;	padding: 12px;	padding: 1.2rem;	white-space: pre;	white-space: pre-wrap;	word-wrap: break-word;
}
blockquote,
q {	-webkit-hyphens: none;	-moz-hyphens: none;	-ms-hyphens: none;	hyphens: none;	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {	content: "";	content: none;
}
blockquote {	font-size: 20px;	font-size: 2rem;	font-style: italic;	font-weight: 400;	line-height: 30px;	line-height: 3rem;	margin-bottom: 28px;	margin-bottom: 2.8rem;
}
blockquote cite,
blockquote small {	font-size: 16px;	font-size: 1.6rem;	font-weight: 400;	line-height: 26px;	line-height: 2.6rem;
}
blockquote em,
blockquote i,
blockquote cite {	font-style: normal;
}
blockquote strong,
blockquote b {	font-weight: 400;
}
small {	font-size: smaller;
}
big {	font-size: 125%;
}
sup,
sub {	font-size: 75%;	height: 0;	line-height: 0;	position: relative;	vertical-align: baseline;
}
sup {	bottom: 1ex;
}
sub {	top: .5ex;
}
dl {	margin-bottom: 28px;	margin-bottom: 2.8rem;
}
dt {	font-weight: bold;
}
dd {	margin-bottom: 28px;	margin-bottom: 2.8rem;
}
ul,
ol {	list-style: none;	margin: 0 0 28px 20px;	margin: 0 0 2.8rem 2rem;
}
ul {	list-style: disc;
}
ol {	list-style: decimal;
}
li > ul,
li > ol {	margin: 0 0 0 20px;	margin: 0 0 0 2rem;
}
img {	-ms-interpolation-mode: bicubic;	border: 0;	vertical-align: top;
}
figure {	margin: 0;
}
fieldset {	border: 1px solid rgba(0, 0, 0, 0.1);	margin: 0 0 28px;	margin: 0 0 2.8rem;	padding: 12px 12px 0;	padding: 1.2rem 1.2rem 0;
}
legend {	white-space: normal;
}
button,
input,
select,
textarea {	font-size: 100%;	margin: 0;	max-width: 100%;	vertical-align: baseline;
}
button,
input {	line-height: normal;
}
input,
textarea {	/* Removing the inner shadow, rounded corners on iOS inputs */	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {	-webkit-appearance: button;	cursor: pointer;
}
button[disabled],
input[disabled] {	cursor: default;
}
input[type="checkbox"],
input[type="radio"] {	padding: 0;
}
input[type="search"] {	-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration {	-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {	border: 0;	padding: 0;
}
textarea {	overflow: auto;	vertical-align: top;
}
table,
th,
td {	border: 1px solid rgba(0, 0, 0, 0.1);
}
table {	border-collapse: separate;	border-spacing: 0;	border-width: 1px 0 0 1px;	margin-bottom: 28px;	margin-bottom: 2.8rem;	width: 100%;
}
caption,
th,
td {	font-weight: normal;	text-align: left;
}
th {	border-width: 0 1px 1px 0;	font-weight: bold;
}
td {	border-width: 0 1px 1px 0;
}
del {	color: #afb0ae;
}
hr {	background-color: rgba(0, 0, 0, 0.1);	border: 0;	height: 1px;	margin-bottom: 28px;	margin-bottom: 2.8rem;
}
/* Support a widely-adopted but non-standard selector for text selection styles * to achieve a better experience. See http://core.trac.wordpress.org/ticket/25898. */
::selection {	background: #28fe2c;	color: #000;	text-shadow: none;
}
::-moz-selection {	background: #28fe2c;	color: #000;	text-shadow: none;
}
/** * 2.0 Repeatable Patterns * ----------------------------------------------------------------------------- */
@font-face {	font-family: portra;	src: url("fonts/portra.eot?") format("eot"), url("fonts/portra.woff") format("woff"), url("fonts/portra.ttf") format("truetype");	font-weight: normal;	font-style: normal;
}
/* Input fields */
input,
textarea {	border: 1px solid #afb0ae;	border-radius: 2px;	color: #afb0ae;	padding: 4px 10px;	padding: 0.4rem 1rem;	margin-bottom: 3px;	margin-bottom: 0.3rem;
}
input:focus,
textarea:focus {	border: 1px solid #2d2926;	outline: 0;
}
/* Buttons */
button,
.contributor-posts-link,
input[type="button"],
input[type="reset"],
input[type="submit"] {	background-color: #afb0ae;	border: 0;	border-radius: 2px;	color: #2d2926;	padding: 5px 20px;	padding: 0.5rem 2rem;	margin-bottom: 3px;	margin-bottom: 0.3rem;	vertical-align: bottom;
}
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {	background-color: #2d2926;	color: #fff;
}
button:active,
.contributor-posts-link:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {	background-color: #2d2926;	color: #fff;
}
/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder {	color: #afb0ae;
}
:-moz-placeholder {	color: #afb0ae;
}
::-moz-placeholder {	color: #afb0ae;	/* Since FF19 lowers the opacity of the placeholder by default */	opacity: 1;
}
:-ms-input-placeholder {	color: #afb0ae;
}
/* Responsive images. Fluid images for posts, comments, and widgets */
.entry-content img,
.entry-summary img,
.wp-caption {	max-width: 100%;
}
/** * Make sure images with WordPress-added height and width attributes are * scaled correctly. */
.entry-content img,
.entry-summary img,
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {	height: auto;
}
img.size-full,
img.size-large,
.wp-post-image,
.post-thumbnail img {	height: auto;	max-width: 100%;
}
body.home .wp-post-image {	max-width: none;
}
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object,
video {	margin-bottom: 28px;	margin-bottom: 2.8rem;	max-width: 100%;
}
p > embed,
p > iframe,
p > object,
span > embed,
span > iframe,
span > object {	margin-bottom: 0;
}
/* Alignment */
.alignleft {	float: left;
}
.alignright {	float: right;
}
.aligncenter {	display: block;	margin-left: auto;	margin-right: auto;
}
blockquote.alignleft,
img.alignleft {	margin: 7px 28px 7px 0;	margin: 0.7rem 2.8rem 0.7rem 0;
}
.wp-caption.alignleft {	margin: 7px 14px 7px 0;	margin: 0.7rem 1.4rem 0.7rem 0;
}
blockquote.alignright,
img.alignright {	margin: 7px 0 7px 28px;	margin: 0.7rem 0 0.7rem 2.8rem;
}
.wp-caption.alignright {	margin: 7px 0 7px 14px;	margin: 0.7rem 0 0.7rem 1.4rem;
}
blockquote.aligncenter,
img.aligncenter,
.wp-caption.aligncenter {	margin-top: 7px;	margin-top: 0.7rem;	margin-bottom: 7px;	margin-bottom: 0.7rem;
}
.site-content blockquote.alignleft,
.site-content blockquote.alignright {	padding-top: 14px;	padding-top: 1.4rem;
}
.site-content blockquote.alignleft p,
.site-content blockquote.alignright p {	margin-bottom: 14px;	margin-bottom: 1.4rem;
}
.wp-caption {	margin-bottom: 28px;	margin-bottom: 2.8rem;
}
.wp-caption img[class*="wp-image-"] {	display: block;	margin: 0;
}
.wp-caption {	color: #afb0ae;
}
.wp-caption a {	color: #2d2926;
}
.wp-caption-text {	font-size: 13px;	font-size: 1.3rem;	line-height: 15px;	line-height: 1.5rem;	margin: 9px 0;	margin: 0.9rem 0;
}
.wp-smiley {	border: 0;	margin-bottom: 0;	margin-top: 0;	padding: 0;
}
/* Assistive text */
.screen-reader-text {	clip: rect(1px, 1px, 1px, 1px);	position: absolute;
}
/* Clearing floats */
.site-header:after,
.site-footer:after {	content: '';	display: block;	clear: both;
}
/** * 3.0 Basic Structure * ----------------------------------------------------------------------------- */
.site {	opacity: 0;	position: relative;	min-width: 320px;	height: 100%;	-webkit-transition: opacity 0.3s;	-moz-transition: opacity 0.3s;	-o-transition: opacity 0.3s;	transition: opacity 0.3s;
}
.main-content,
.content-area {	height: 100%;	white-space: nowrap;
}
/* Infinite load */
@-webkit-keyframes buffer1 {	0% {	-webkit-transform: scale(0);	}	50% {	-webkit-transform: scale(1);	}
}
@-moz-keyframes buffer1 {	0% {	-moz-transform: scale(0);	}	50% {	-moz-transform: scale(1);	}
}
@-o-keyframes buffer1 {	0% {	-o-transform: scale(0);	}	50% {	-o-transform: scale(1);	}
}
@-ms-keyframes buffer1 {	0% {	-ms-transform: scale(0);	}	50% {	-ms-transform: scale(1);	}
}
@keyframes buffer1 {	0% {	transform: scale(0);	}	50% {	transform: scale(1);	}
}
@-webkit-keyframes buffer2 {	0% {	-webkit-transform: scale(0);	}	50% {	-webkit-transform: scale(0);	}	100% {	-webkit-transform: scale(1);	}
}
@-moz-keyframes buffer2 {	0% {	-moz-transform: scale(0);	}	50% {	-moz-transform: scale(0);	}	100% {	-moz-transform: scale(1);	}
}
@-o-keyframes buffer2 {	0% {	-o-transform: scale(0);	}	50% {	-o-transform: scale(0);	}	100% {	-o-transform: scale(1);	}
}
@-ms-keyframes buffer2 {	0% {	-ms-transform: scale(0);	}	50% {	-ms-transform: scale(0);	}	100% {	-ms-transform: scale(1);	}
}
@keyframes buffer2 {	0% {	transform: scale(0);	}	50% {	transform: scale(0);	}	100% {	transform: scale(1);	}
}
#infinite-loader {	display: none;	position: fixed;	top: 50%;	left: 50%;	width: 20px;	height: 20px;
}
#infinite-loader.active {	display: block;
}
#infinite-loader > * {	display: block;	position: absolute;	top: -50%;	left: -50%;	width: 100%;	height: 100%;	background: #28fe2c;	border-radius: 50%;
}
#infinite-loader > *:nth-child(1) {	background: transparent;
}
#infinite-loader > *:nth-child(2) {	-webkit-animation: buffer1 0.5s infinite;	-moz-animation: buffer1 0.5s infinite;	-o-animation: buffer1 0.5s infinite;	-ms-animation: buffer1 0.5s infinite;	animation: buffer1 0.5s infinite;
}
#infinite-loader > *:nth-child(3) {	background: transparent;	-webkit-animation: buffer2 0.2s infinite;	-moz-animation: buffer2 0.2s infinite;	-o-animation: buffer2 0.2s infinite;	-ms-animation: buffer2 0.2s infinite;	animation: buffer2 0.2s infinite;
}
/** * 4.0 Header * ----------------------------------------------------------------------------- */
/* Ensure that there is no gap between the header and the admin bar for WordPress versions before 3.8. */
#wpadminbar {	min-height: 32px;
}
.site-header {	top: 0;	left: 0;	width: 100%;	background: #fff;
}
body.admin-bar .site-header {	top: 32px;
}
.site-title {	float: left;	width: 18.965517241%;	margin: 0;	font-size: 18px;	font-size: 1.8rem;	font-weight: 400;	line-height: 28px;	line-height: 2.8rem;
}
/** * 5.0 Navigation * ----------------------------------------------------------------------------- */
.site-navigation ul {	list-style: none;	margin: 0;
}
.site-navigation li {	display: inline-block;	position: relative;	font-size: 18px;	font-size: 1.8rem;	line-height: 28px;	line-height: 2.8rem;
}
.site-navigation li li {	display: block;
}
.site-navigation ul ul ul {	padding-left: 20px;	padding-left: 2rem;
}
.menu-toggle {	display: none;	clear: none;	float: right;	margin: 0;	color: #afb0ae;	font-family: portra;	font-size: 30px;	font-size: 3rem;	line-height: 30px;	line-height: 3rem;	cursor: pointer;
}
.menu-toggle:hover {	color: #2d2926;
}
#navigation-close {	display: none;	position: absolute;	z-index: 10000;	top: 10px;	top: 1rem;	right: 20px;	right: 2rem;	font-size: 30px;	font-size: 3rem;	line-height: 30px;	line-height: 3rem;	color: #fff;	cursor: pointer;
}
/** * 6.0 Content * ----------------------------------------------------------------------------- */
.content-area {	white-space: nowrap;
}
.hentry,
.page-content {	display: inline-block;	vertical-align: top;	white-space: normal;	word-wrap: break-word;
}
body.single .hentry {	width: 67.391304348%;	padding-right: 20px;	padding-right: 2rem;
}
body.page .hentry,
.page-content {	width: 67.391304348%;	padding-right: 20px;	padding-right: 2rem;
}
/** * 6.1 Post Thumbnail * ----------------------------------------------------------------------------- */
.post-thumbnail {	display: inline-block;	vertical-align: top;
}
body.home .post-thumbnail {	height: 100%;
}
/** * 6.2 Entry Header * ----------------------------------------------------------------------------- */
body.single .entry-header,
body.page .entry-header,
.page-header {	display: inline-block;	width: 20.689655172%;	padding-right: 20px;	padding-right: 2rem;	vertical-align: top;
}
.entry-title,
.page-title {	margin: -2px 0 0;	font-size: 24px;	font-size: 2.4rem;	font-weight: 400;	line-height: 34px;	line-height: 3.4rem;	word-wrap: break-word;	white-space: pre-wrap;
}
/** * 6.3 Entry Meta * ----------------------------------------------------------------------------- */
/** * 6.4 Entry Content * ----------------------------------------------------------------------------- */
.entry-content > p:last-child {	margin-bottom: 0;
}
/** * 6.5 Gallery * ----------------------------------------------------------------------------- */
.gallery {	display: inline-block;	width: auto;	height: 100%;	margin: 0;	list-style-type: none;
}
.gallery-item {	display: inline-block;	width: auto;	height: 100%;	padding-right: 20px;	padding-right: 2rem;	vertical-align: top;	white-space: normal;
}
.gallery-item img {	display: block;	width: auto;	height: 100%;	height: -moz-calc(100% - 28px);	height: -webkit-calc(100% - 28px);	height: calc(100% - 28px);
}
/** * 6.6 Post Formats * ----------------------------------------------------------------------------- */
/** * 6.7 Post/Image/Paging Navigation * ----------------------------------------------------------------------------- */
.paging-navigation {	display: none;
}
#image-navigation {	text-align: right;
}
#image-navigation a:first-of-type {	float: left;
}
/** * 6.8 Attachments * ----------------------------------------------------------------------------- */
.entry-attachment .attachment {	margin-bottom: 28px;	margin-bottom: 2.8rem;
}
/** * 6.9 Archives * ----------------------------------------------------------------------------- */
/** * 6.10 Contributor Page * ----------------------------------------------------------------------------- */
/** * 6.11 404 Page * ----------------------------------------------------------------------------- */
.error404 .page-content {	/*padding-top: 0;*/
}
.error404 .page-content .search-form {	/*margin-bottom: 24px;*/
}
/** * 6.12 Full-width * ----------------------------------------------------------------------------- */
/** * 6.13 Singular * ----------------------------------------------------------------------------- */
/** * 6.14 Comments * ----------------------------------------------------------------------------- */
/** * 7.0 Sidebars * ----------------------------------------------------------------------------- */
/** * 7.1 Widgets * ----------------------------------------------------------------------------- */
/** * 7.2 Content Sidebar Widgets * ----------------------------------------------------------------------------- */
/** * 8.0 Footer * ----------------------------------------------------------------------------- */
.site-footer {	bottom: 0;	left: 0;	width: 100%;	padding: 0 20px 10px;	padding: 0 2rem 1rem;	color: #afb0ae;
}
.site-footer .copyright {	float: left;	width: 49.137931034%;
}
.site-info {	float: right;	width: 49.137931034%;	text-align: right;
}
/** * 9.0 Featured Content * ----------------------------------------------------------------------------- */
/** * 10.0 Multisite * ----------------------------------------------------------------------------- */
/** * 11.0 Media Queries * ----------------------------------------------------------------------------- */
/* Does the same thing as , * but in the future W3C standard way. -ms- prefix is required for IE10+ to * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor * the meta tag. See http://core.trac.wordpress.org/ticket/25888. */
@-ms-viewport {	width: device-width;
}
@viewport {	width: device-width;
}
@media (min-width: 951px) {	.site {	padding: 90px 20px;	padding: 9rem 2rem;	}	.site-header {	position: fixed;	height: 90px;	height: 9rem;	padding: 10px 20px 0;	padding: 1rem 2rem 0;	}	.primary-navigation {	float: right;	width: 79.310344828%;	}	#top-main-menu {	float: left;	width: 65.217391304%;	}	#top-right-menu {	float: right;	width: 32.608695652%;	text-align: right;	}	.nav-menu > li {	opacity: 0;	}	#top-right-menu li {	text-align: left;	}	.site-navigation li {	margin-right: 22px;	margin-right: 2.2rem;	white-space: nowrap;	}	.site-navigation li:last-of-type {	margin-right: 0;	}	.site-navigation > div > ul > li > ul {	display: none;	position: absolute;	z-index: 9999;	top: 100%;	left: -20px;	left: -2rem;	padding: 0 20px 20px;	padding: 0 2rem 2rem;	background: #fff;	}	.site-navigation > div > ul > li > ul.submenu-visible {	display: block;	}	.current-menu-item > a {	color: #2d2926;	}	#main {	height: 100%;	}	body.home .hentry {	height: 100%;	padding-right: 20px;	padding-right: 2rem;	}	body.home .hentry > a {	display: inline-block;	height: 100%;	height: -moz-calc(100% - 28px);	height: -webkit-calc(100% - 28px);	height: calc(100% - 28px);	}	body.home .hentry img {	height: 100%;	width: auto;	}	body.single .hentry {	padding-bottom: 90px;	padding-bottom: 9rem;	max-width: 620px;	}	body.page .hentry,	.page-content {	padding-bottom: 90px;	padding-bottom: 9rem;	max-width: 640px;	}	.gallery-animated img {	cursor: pointer;	}	.site-footer {	position: fixed;	}
}
@media (max-width: 950px) {	.site-header {	padding: 10px 0 30px;	padding: 1rem 0 3rem;	}	.site-title {	width: 50%;	padding-left: 20px;	padding-left: 2rem;	}	.menu-toggle {	display: block;	margin-right: 20px;	margin-right: 2rem;	}	.menu-toggle.hidden {	display: none;	}	.primary-navigation {	display: none;	position: absolute;	z-index: 9999;	top: 0;	left: 0;	width: 100%;	height: 100%;	background-color: #111;	padding: 10px 20px;	padding: 1rem 2rem;	overflow-y: auto;	}	.toggled-on .primary-navigation {	display: block;	}	.primary-navigation a {	font-size: 30px;	font-size: 3rem;	line-height: 40px;	line-height: 4rem;	color: #fff;	}	.primary-navigation a:hover {	color: #28fe2c;	}	.site-navigation li {	display: block;	}	.toggled-on #navigation-close {	display: block;	}	.toggled-on #main {	display: none;	}	body.single .entry-header,	body.page .entry-header,	.page-header {	display: block;	width: 100%;	padding-right: 0;	margin-bottom: 28px;	margin-bottom: 2.8rem;	}	#main {	padding: 0 20px;	padding: 0 2rem;	}	body.single #primary,	body.page #main-content {	padding-left: 20.689655172%;	}	body.home .hentry,	body.home .post-thumbnail,	body.home .hentry img {	height: auto;	width: 100% !important;	}	body.home .hentry {	display: block;	padding-bottom: 20px;	padding-bottom: 2rem;	}	body.home .hentry:last-of-type {	padding-bottom: 0;	}	body.single #primary,	body.page #main-content {	padding-left: 0;	}	body.single .hentry,	body.page .hentry,	.page-content {	width: 100%;	padding-right: 0;	}	.post-thumbnail {	display: block;	}	.gallery {	display: block;	margin-top: 28px;	margin-top: 2.8rem;	}	.gallery-item {	display: block;	width: 100% !important;	height: auto;	padding: 0 0 20px;	padding: 0 0 2rem;	}	.gallery-item:last-child {	padding-bottom: 0;	}	.gallery-item img {	width: 100% !important;	height: auto;	}	.site-footer {	padding-top: 30px;	padding-top: 3rem;	}
}
@media (max-width: 782px) {	body.admin-bar .site-header {	top: 46px;	}
}
/** * 12.0 Print * ----------------------------------------------------------------------------- */
@media print {	body {	/* Brute force since user agents all print differently. */	background: none !important;	}
}

Horizontal Scrolling Theme - Script Codes JS Codes

/** * Theme functions file * * Contains handlers for navigation, accessibility, header sizing * footer widgets and Featured Content slider * */
var _tablet_width = 950;
var _window = jQuery(window);
var _document = jQuery(document);
var _body = jQuery('body');
function fullHeight(el) {	return el.height() + parseInt(el.css('padding-top')) + parseInt(el.css('padding-bottom'))	+ parseInt(el.css('border-top-width')) + parseInt(el.css('border-bottom-width'));
}
(function($) {	// Footer & header hacks for single pages	var fixed = {	header: false,	footer: false,	page: false,	container: false,	init: function() {	this.header = $('#masthead');	this.footer = $('#colophon');	if (this.header.length == 1 && this.footer.length == 1) {	this.page = $('#page');	this.container = $('.hentry');	_window.on('ready load resize', fixed.process);	}	},	process: function() {	if (_window.width() > _tablet_width) {	fixed.updateScroll();	_window.on('scroll.fixed', fixed.updateScroll);	}	else {	_window.off('scroll.fixed');	}	},	updateScroll: function() {	var admin_bar = 0;	if ($('#wpadminbar').length == 1) {	admin_bar = $('#wpadminbar').height();	}	var top = _window.scrollTop();	var header_height = fullHeight(fixed.header);	if (top <= header_height + admin_bar) {	fixed.header.css({	top: admin_bar - top	});	}	else {	fixed.header.css({	top: -1 * header_height - admin_bar	});	}	var from_top = top + _window.height() - admin_bar;	var page_height = fullHeight(fixed.page);	if (fixed.container.length == 1) {	var container_height = fullHeight(fixed.container) + header_height;	if (page_height < container_height) {	page_height = container_height;	}	}	var footer_height = fullHeight(fixed.footer);	if (page_height - from_top < footer_height) {	fixed.footer.css({	bottom: -1 * (page_height - from_top)	});	}	else {	fixed.footer.css({	bottom: -1 * footer_height	});	}	}	};	fixed.init();	// index gallery	var index = {	el: false,	images: [],	count: 0,	first_image: false,	init: function() {	this.el = $('body.home .main-content');	if (this.el.length == 1) {	this.update();	if (this.count != 0) {	this.first_image = $(this.images[0]);	_window.on('ready load resize', index.process);	}	}	},	update: function() {	index.images = index.el.find('img');	index.count = index.images.length;	},	process: function() {	var height = index.first_image.height();	var padding = parseInt(index.first_image.parents('.post').css('padding-right'));	index.images.each(function() {	var image = $(this);	if (_window.width() > _tablet_width) {	var ratio = image.attr('width') / image.attr('height');	var width = Math.round(height * ratio);	image.css('width', width + 'px');	image.parents('.post').css('width', width + padding + 'px');	}	});	}	};	index.init();	// single page gallery	var gallery = {	duration: 300,	el: false,	images: [],	count: 0,	first_image: false,	init: function() {	this.el = $('.gallery-animated');	if (this.el.length == 1) {	this.update();	if (this.count != 0) {	this.first_image = $(this.images[0]);	_window.on('ready load resize', gallery.process);	}	}	},	update: function() {	gallery.images = gallery.el.find('img');	gallery.count = gallery.images.length;	},	process: function() {	var height = gallery.first_image.height();	var padding = parseInt(gallery.first_image.parent().css('padding-right'));	gallery.images.each(function() {	var image = $(this);	image.off('click');	if (_window.width() > _tablet_width) {	var ratio = image.attr('width') / image.attr('height');	var width = Math.round(height * ratio);	image.css('width', width + 'px');	image.parent().css('width', width + padding + 'px');	image.on('click', function(event) {	event.preventDefault();	gallery.move(image);	});	}	});	},	move: function(image) {	var scroll = _window.scrollLeft();	var window_width = _window.width();	var offset = gallery.offset(image, window_width);	var index = image.parent().index();	if (offset == scroll) { // current image clicked	if (index != gallery.count - 1) { // not last image clicked	offset = gallery.offset($(gallery.images[index + 1]), window_width);	} else {	offset = gallery.offset(gallery.first_image, window_width);	}	}	if (offset != scroll) {	$('html, body').stop().animate({ scrollLeft: offset }, gallery.duration);	}	},	offset: function(image, window_width) {	var offset = image.offset().left;	var width = image.width();	if (width < window_width) {	offset -= Math.round((window_width - width) / 2);	}	return offset;	}	};	gallery.init();	// Infinite loading for index page	var loading = {	start_from: 500,	el: false,	nav: false,	loader: false,	enabled: true,	ajax: false,	init: function() {	this.el = $('.paging-navigation a');	if (this.el.length == 1) {	this.nav = this.el.parent();	this.loader = $('#infinite-loader');	_window.on('ready load resize scroll.loading', loading.process);	}	},	process: function() {	if (loading.enabled && !loading.ajax) {	var ajax = false;	if (_window.width() > _tablet_width) {	if (_window.scrollLeft() > _document.width() - _window.width() - loading.start_from) {	ajax = true;	}	}	else {	if (_window.scrollTop() > _document.height() - _window.height() - loading.start_from) {	ajax = true;	}	}	if (ajax) {	loading.loader.addClass('active');	loading.ajax = true;	$.ajax({	type: 'GET',	url: loading.el.attr('href'),	dataType: 'html',	success: function(response) {	var html = $(response);	var next_link = html.find('.paging-navigation a');	var items = html.find('#main-content .hentry');	items.each(function() {	$(this).insertBefore(loading.nav);	});	index.update();	index.process();	if (next_link.length == 1) {	loading.el.attr('href', next_link.attr('href'));	loading.ajax = false;	}	else {	_window.off('scroll.loading');	}	loading.loader.removeClass('active');	}	});	}	}	}	};	loading.init();	// load animations	var load_effect = {	duration: 300,	els: [],	loader: $('#infinite-loader'),	init: function() {	var els = $('.nav-menu > li');	if (els.length != 0) {	els.each(function() {	load_effect.els.push($(this));	});	}	$('a').on('click', function(e) {	e.preventDefault();	load_effect.loader.show();	var href = $(this).attr('href');	$('.site').css('opacity', 0);	setTimeout(function() {	window.location = href;	}, load_effect.duration);	});	_window.on('ready pageshow', function() {	load_effect.loader.show();	$('.site').css('opacity', 1);	setTimeout(function() {	load_effect.loader.hide();	if (load_effect.els.length != 0) {	load_effect.process();	}	}, load_effect.duration);	});	},	process: function() {	$(load_effect.els[0]).animate(	{ opacity: 1 },	load_effect.duration,	function() {	load_effect.els.shift();	if (load_effect.els.length != 0) {	load_effect.process();	}	}	);	}	};	load_effect.init();	/** * Menus for desktop view */	function updateMenuItem(li) {	var ul = li.find('> ul');	if (!ul.hasClass('submenu-visible')) {	var parent = li.parent();	parent.find('li').removeClass('submenu-active');	li.addClass('submenu-active');	parent.find('ul').removeClass('submenu-visible');	ul.addClass('submenu-visible');	}	else {	li.removeClass('submenu-active');	ul.removeClass('submenu-visible');	ul.find('ul').removeClass('submenu-visible');	}	}	$('.site-navigation > div > ul > li').on('hover', function() {	var li = $(this);	updateMenuItem(li);	});	$('.site-navigation > div > ul > li > a').on('touchstart', function(e) {	if (_window.width() > _tablet_width) {	e.preventDefault();	var li = $(this).parent();	updateMenuItem(li);	}	});	// removes visible submenus on safari for bfcache (when back button is clicked)	_window.bind('pageshow', function(e) {	if (e.originalEvent.persisted) {	$('.submenu-visible').removeClass('submenu-visible');	$('.submenu-active').removeClass('submenu-active');	}	});	// Enable menu toggle for small screens.	(function() {	var nav = $('#primary-navigation');	if (!nav) {	return;	}	var button = $('.menu-toggle');	if (!button) {	return;	}	// Hide button if menu is missing or empty.	var menu = nav.find('.nav-menu');	if (!menu || !menu.children().length) {	button.addClass('hidden');	return;	}	$('.menu-toggle').on('click', function() {	loading.enabled = false;	_body.addClass('toggled-on');	});	$('#navigation-close').on('click', function() {	_body.removeClass('toggled-on');	loading.enabled = true;	});	})();
})(jQuery);
Horizontal Scrolling Theme - Script Codes
Horizontal Scrolling Theme - Script Codes
Home Page Home
Developer Calvin
Username CalvinMorett
Uploaded October 25, 2022
Rating 3
Size 11,410 Kb
Views 26,312
Do you need developer help for Horizontal Scrolling Theme?

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
Sectioned-bootstrap-portfolio
Sidebar Nav
Staff Page Mockup
Image Stack Test SCSS
DILLA - PORT
Social Button Transition
Portfolio Base
Full Page Slide, Vertical Progress Bar
Port
CoNTENT
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!