In recent years, interactive expressions on websites have gained attention, and layouts incorporating “vertical slides” have become popular as a method that leaves a strong impression on users.
Especially in single-page landing pages or portfolio sites, smoothly switching sections with vertical scrolling helps organize information and improve visibility.
In this article, we’ll explain in detail how to build a simple vertical slide page using fsvs.js, a lightweight and easy-to-use jQuery plugin, with accompanying CSS, HTML, and JavaScript code.
Even if you’re using fsvs.js for the first time, you can follow along with copy-paste code and set it up smoothly, so feel free to give it a try!
CSS Description for Implementing a Simple Vertical Slide Page
* Load the style.css file. The background colors of the four slide areas are specified with .b1 to .b4. Modify them as needed.
<link href="style.css" media="all" rel="stylesheet" type="text/css">
<style type="text/css">
body{
text-align: center;
font-size: 30px;
color: #ffffff;
line-height: 3em;
}
h1{
text-align: center;
font-size: 32px;
padding-top: 30px;
line-height: 1.4em;
color: #ffffff;
}
.bg1{
background-color: #333333;
}
.bg2{
background-color: #7396FF;
}
.bg3{
background-color: #FFA64D;
}
.bg4{
background-color: #B200B2;
}
</style>
JavaScript Description for Implementing a Simple Vertical Slide Page Using fsvs.js
* Load jquery-1.11.0.min.js, jquery-migrate-1.2.1.min.js, and fsvs.js. Specify class=”fsvs” in the html tag, and class=”slide” for each vertical slide area. In $.fn.fsvs({options}), set autoplay, slide speed, slide area class, etc. Adjust as needed.
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery-migrate-1.2.1.min.js"></script>
<script src="fsvs.js"></script>
<script>
jQuery(document).ready(function($){
var slider = $.fn.fsvs({
autoPlay : false,
speed : 1000,
bodyID : 'fsvs-body',
selector : '> .slide',
mouseSwipeDisance : 40,
afterSlide : function(){},
beforeSlide : function(){},
endSlide : function(){},
mouseWheelEvents : true,
mouseWheelDelay : false,
mouseDragEvents : true,
touchEvents : true,
arrowKeyEvents : true,
pagination : true,
nthClasses : 2,
detectHash : true
});
});
</script>
HTML Description for Implementing a Simple Vertical Slide Page
* Specify class=”fsvs” in the html tag.
<html class="fsvs" lang="ja">
* Specify class=”slide” for each vertical slide area. Modify as needed.
<div id="fsvs-body">
<div class="slide bg1">
<h1 class="text-center pt-5">This is a simple vertical slide page using fsvs.js.<br>Try scrolling down.</h1>
</div>
<div class="slide bg2">Slide Area 2</div>
<div class="slide bg3">Slide Area 3</div>
<div class="slide bg4">Slide Area 4</div>
</div>
Simple Vertical Slide Demo Page Using fsvs.js
Simple Vertical Slide Demo Page Using fsvs.js
Source: Full Screen Vertical Scroller
Here is the original source:
Summary
In this article, we explained how to implement a simple vertical slide page using fsvs.js.
- Set background and text styles per slide using CSS
- Define the slide structure and assign classes in HTML
- Initialize fsvs.js and configure options in JavaScript
By combining these steps, you can easily create a visually appealing and smoothly animated vertical slide page.
Since fsvs.js is compact and includes only essential features, it has a low learning curve and is a convenient library for both beginners and intermediate developers.
Try incorporating it into your website or project page to achieve an engaging and dynamic UI!
* Use at your own risk when reusing. Do not reuse the Google Analytics tag within the head tag of the demo page.
