Make Full-Page SASS/SCSS Sections and Sliders With fullpage.scss

No JS Required

Easy to use, adaptable SCSS

Generates animation keyframes automatically for as many slides as you need

Capable of using background images

Fluid width for responsive sites

Setting up your SCSS/SASS


// To get going, you need to either uncomment and use the first two variables in fullpage.scss or (if you prefer not to edit plugin files) define two variables in your stylesheet.

$number: #;
// Set # as your number of slides
$animation_delay: #; // Set # to adjust your delay. It takes the number of slides and multiplies it by this variable in order to get full duration of the animation.

Setting up your HTML


<!-- For full screen sections -->
<section>
  <div class="content">
  </div>
</section>

<!-- For full screen sliders -->
<section>
  <div class="slider">
    <div class="slides">
      <section><!-- This level is a slide -->
        <div class="content">
        </div>
      </section>
    </div>
  </div>
</section>
				

Git it on Github

Please keep in mind this is mostly for conceptual purposes, and as a personal challenge. It will likely only work on modern browsers, although I have checked that it works in Chrome, Safari, and Firefox's latest versions. I've yet to do any serious browser testing, so if you find any issues, let me know on the repo. If you use this, please let me know via email or Twitter