Section Slides

Developer
Dima
Size
5,312 Kb
Views
22,264
  1. Section Slides Previews
  2. Section Slides HTML Codes
  3. Section Slides CSS Codes
  4. Section Slides JS Codes

How do I make an section slides?

Fluid typography and section scroll. What is a section slides? How do you make a section slides? This script and codes were developed by Dima on 17 September 2022, Saturday.

Section Slides Previews
IQ Test

Section Slides - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Section Slides</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav"><a href="">Welcome</a><a href="">About</a><a href="">FAQ</a></div>
<div class="section-scroll well"><img src="//zupra.github.io/test/img/sveta.png" alt=""/> <h1> Lorem ipsum dolor sit amet, consectetur</h1>
</div>
<div class="section-scroll"> <h1>fluid typography <br/>might be easier than you think</h1> <div class="s1"> <nav><a href="">lorem link</a><a href="">ipsum link</a><a href="">dolor link</a><a href="">amet link</a></nav> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eos, ipsum maxime numquam minus facere! Saepe ipsa rem totam, ea perspiciatis tenetur deserunt odit odio modi veniam laborum eaque repudiandae.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet molestias, nihil veritatis, cupiditate maxime reprehenderit aperiam, impedit aliquid itaque nobis fugit perspiciatis perferendis. Neque, accusamus quos quam vel perferendis placeat.</p> </div>
</div>
<div class="section-scroll"> <h1>section-scroll 3</h1> <div class="s2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores porro libero natus blanditiis dolor maiores incidunt nam ducimus aut ipsa sed, rerum, facere magni cum consequatur ad, esse necessitatibus, harum.</p> </div>
</div>
<footer class="section-scroll"> <h1>footer</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis a nesciunt reprehenderit tempore labore magni voluptate, ad corrupti odit tempora praesentium, eum magnam debitis porro, vero. Voluptatibus ducimus, consectetur eligendi.</p>
</footer> <script src="js/index.js"></script>
</body>
</html>

Section Slides - Script Codes CSS Codes

* { margin: 0; padding: 0; box-sizing: border-box;
}
:root { font-size: calc(1vw + 1vh + 0.5vmin);
}
body { font: 400 100%/1.5 serif; color: #5c5c5c; background: -webkit-linear-gradient(315deg, #eee 30%, #f5f5f5 30.1%, #f5f5f5 90%, #ffe2cb 90.1%) no-repeat fixed; background: linear-gradient(135deg, #eee 30%, #f5f5f5 30.1%, #f5f5f5 90%, #ffe2cb 90.1%) no-repeat fixed;
}
.well { background: #faebd7; margin-left: 3em; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative;
}
.well img { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; display: block; max-width: 90%;
}
.well h1 { position: absolute; right: 2em; top: 2em; font-size: 2.4em; line-height: 1; color: #deb887; max-width: 46%;
}
#nav { position: fixed; left: 1em; bottom: -1em; width: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}
#nav a { font: bold 1em/1 sans-serif; color: #ef3f5a; text-decoration: none;
}
#nav a:hover,
#nav a.current { text-decoration: overline;
}
.section-scroll { height: 100vh; padding: 4em;
}
.section-scroll h1 { text-align: right; margin-bottom: 1em;
}
.s1 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 1em;
}
.s1 nav,
.s1 p { padding: 1em; width: 33%;
}
.s1 nav a { white-space: nowrap; line-height: 1.8; display: block; color: inherit;
}
.s2 { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 50%;
}
footer { height: 100vh; width: 80vw; margin: auto;
}

Section Slides - Script Codes JS Codes

'use strict';
var Slides = function(options) { var defaults = { element: '.section-scroll', }; if (arguments[0] && typeof arguments[0] === 'object') { this.options = _extendDefaults(defaults, arguments[0]); } this.element = this.options.element; this.elements = document.querySelectorAll(this.element); this.elements[0].classList.add('active'); this.isMoving = false; this.compare = []; this.requestId;
};
function _extendDefaults(source, properties) { var property; for (property in properties) { if (properties.hasOwnProperty(property)) { source[property] = properties[property]; } } return source;
}
Slides.prototype = { _scroll: function(direction) { var i, thisElement, j; for (i = 0; i < this.elements.length; i++) { thisElement = this.elements[i]; if (thisElement.classList.contains('active')) { var currentItemIndex = i; thisElement.classList.remove('active'); //Down if (currentItemIndex < this.elements.length - 1 && direction === 'Down') { j = currentItemIndex + 1; this.elements[j].classList.add('active'); this.isMoving = true; this._scrollToTarget(); return false; } if (currentItemIndex === this.elements.length - 1) { j = i; this.elements[j].classList.add('active'); } //Up if (currentItemIndex === 0 && direction === 'Up') { j = 0; this.elements[j].classList.add('active'); } if (currentItemIndex > 0 && direction === 'Up') { j = currentItemIndex - 1; this.elements[j].classList.add('active'); this.isMoving = true; this._scrollToTarget(); return false; } } } }, _isMoving: function() { if (this.isMoving === true) { document.body.style.overflow = 'hidden'; } else { return false; } }, _scrollToTarget: function() { var self = this; this._isMoving(); this.documentPos = document.body.scrollTop; this.activePos = document.querySelector('.active').offsetTop; this.requestId = requestAnimationFrame(function() { self._scrollToTarget(); if (self.activePos > self.documentPos + 50) { self.documentPos = self.documentPos + 25; window.scrollTo(0, self.documentPos); self.compare = []; } if (self.activePos < self.documentPos - 50) { self.documentPos = self.documentPos - 25; window.scrollTo(0, self.documentPos); self.compare = []; } if (self.documentPos + 50 >= self.activePos && self.documentPos - 50 <= self.activePos) { self.stop(); window.scrollTo(0, self.activePos); self.compare = []; self.isMoving = false; setTimeout(function() { document.body.style.overflow = 'scroll'; }, 900); return false; } }); }, stop: function() { window.cancelAnimationFrame(this.requestId); }
};
//init
var slide = new Slides({});
window.addEventListener('scroll', function(event) { event.preventDefault(); slide.compare.push(document.body.scrollTop); if (slide.compare.length > 2) { slide.compare.shift(); (slide.compare[0] < slide.compare[1]) ? slide._scroll('Down'): slide._scroll('Up'); }
});
Section Slides - Script Codes
Section Slides - Script Codes
Home Page Home
Developer Dima
Username dimaZubkov
Uploaded September 17, 2022
Rating 3
Size 5,312 Kb
Views 22,264
Do you need developer help for Section Slides?

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!

Dima (dimaZubkov) Script Codes
Name
Price range slider
A Pen by Dima
Burger nav
Vue radio
Ken Burns effect CSS only
Star Rating
Css masonry
Audio button
Mega menu
Web Audio API
Create amazing captions 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!