Section scroll

Developer
Dima
Size
5,271 Kb
Views
26,312
  1. Section scroll Previews
  2. Section scroll HTML Codes
  3. Section scroll CSS Codes
  4. Section scroll JS Codes

How do I make an section scroll?

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

Section scroll Previews
IQ Test

Section scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>section scroll</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,700,900&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header><b class="logo"> LOGO</b> <nav> <a href="">item_1</a><a href="">item_2</a><a href="">item_3</a> </nav>
</header>
<div class="main"> <div class="intro"> <h1>intro</h1> <h2>Lorem ipsum dolor sit amet.</h2> </div> <div class="content"> <section class="section-slides active"> <h1> Lorem ipsum dolor.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis aliquid, perferendis officiis et nesciunt facere unde quasi tempora quia molestiae quos officia sequi architecto autem consectetur provident dolorum laudantium cum!</p> </section> <section class="section-slides"> <h1> Lorem ipsum dolor.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis aliquid, perferendis officiis et nesciunt facere unde quasi tempora quia molestiae quos officia sequi architecto autem consectetur provident dolorum laudantium cum!</p> </section> <section class="section-slides"> <h1> Lorem ipsum dolor.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis aliquid, perferendis officiis et nesciunt facere unde quasi tempora quia molestiae quos officia sequi architecto autem consectetur provident dolorum laudantium cum!</p> </section> <section class="section-slides"> <h1> Lorem ipsum dolor.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis aliquid, perferendis officiis et nesciunt facere unde quasi tempora quia molestiae quos officia sequi architecto autem consectetur provident dolorum laudantium cum!</p> </section> <section class="section-slides"> <h1> Lorem ipsum dolor.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis aliquid, perferendis officiis et nesciunt facere unde quasi tempora quia molestiae quos officia sequi architecto autem consectetur provident dolorum laudantium cum!</p> </section> <section class="section-slides"> <h1> Lorem ipsum dolor.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis aliquid, perferendis officiis et nesciunt facere unde quasi tempora quia molestiae quos officia sequi architecto autem consectetur provident dolorum laudantium cum!</p> </section> <section class="section-slides"> <h1> Lorem ipsum dolor.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis aliquid, perferendis officiis et nesciunt facere unde quasi tempora quia molestiae quos officia sequi architecto autem consectetur provident dolorum laudantium cum!</p> </section> <section class="section-slides"> <h1> Lorem ipsum dolor.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis aliquid, perferendis officiis et nesciunt facere unde quasi tempora quia molestiae quos officia sequi architecto autem consectetur provident dolorum laudantium cum!</p> </section> </div>
</div>
<footer class="section-slides"><a href="">Contact Us</a> <address>+7.903.700.01.01<br/>Moscow, Red Square 1</address>
</footer> <script src="js/index.js"></script>
</body>
</html>

Section scroll - Script Codes CSS Codes

* { margin: 0; padding: 0; box-sizing: border-box;
}
:root { font-size: calc(1vw + 1vh + 0.5vmin);
}
body { margin: 0; font: 100%/1.63 'Roboto', sans-serif; color: #324155;
}
a { text-decoration: none;
}
header { text-align: center; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: #fff; box-shadow: 0 0 1em; line-height: 3em;
}
header nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; float: right; width: 70%;
}
@media (min-width: 820px) { header nav { width: 50%; }
}
header a { color: #555;
}
.main { margin-top: 3em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
@media (min-width: 820px) { .main { font-weight: 300; } .main .intro { position: fixed; top: 0; left: 0; width: 50%; height: 100vh; } .main .content { margin-left: 50%; padding-top: 0; } .main .content section { min-height: 100vh; padding: 0; } .main .content section.active { font-size: 1em; color: #324155; }
}
.content,
.intro,
footer,
section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 1em;
}
.intro,
footer { background: -webkit-linear-gradient(315deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%); background: linear-gradient(135deg, #b3cae5 12%, #dbdde4 46%, #e4e3e4 70%, #f7ddbb 94%, #efcab2 100%);
}
.intro { height: 50vh;
}
section.active { font-size: 1.2em; padding: 3.6em 0 2em; color: #40536d; -webkit-transition: color 1s; transition: color 1s; border-bottom: 1px solid #dddee4; margin-bottom: 1em;
}
section h1 { margin-bottom: 0.6em;
}
.content { counter-reset: section;
}
.content h1 { font-weight: inherit;
}
.content h1:before { counter-increment: section; content: counter(section) ". ";
}
footer { height: 100vh; position: relative; z-index: 2; color: #444;
}
footer a { padding: 0 1em; color: #fff; border: 1px solid #fff;
}
footer a:hover { background: #b3cae5;
}
address { font-style: normal; padding: 1em 0; text-align: center;
}

Section scroll - Script Codes JS Codes

'use strict';
var Slides = function(options) { var defaults = { element: '.section-slides', toTop: true, }; if (arguments[0] && typeof arguments[0] === 'object') { this.options = _extendDefaults(defaults, arguments[0]); } this.element = this.options.element; this.toTop = this.options.toTop; this.elements = document.querySelectorAll(this.element); this.isMoving = false; this.documentPos = document.body.scrollTop; this.activePos = document.querySelector('.active').offsetTop; 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 toTop if (this.toTop && currentItemIndex === this.elements.length - 1) { j = 0; this.elements[j].classList.add('active'); this._scrollToTarget(); return false; } //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 scroll - Script Codes
Section scroll - Script Codes
Home Page Home
Developer Dima
Username dimaZubkov
Uploaded September 17, 2022
Rating 3
Size 5,271 Kb
Views 26,312
Do you need developer help for Section scroll?

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
Vue cart
Scroll animating effect
Three js
Price range slider
Vue radio
Responsive typography harmony
Ken Burns Effect
Codrops HoverEffectIdeas
Css masonry
Glitch
Create amazing art & images 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!