CSS Snap Scroll Points - Full Screen Scroller

Developer
Simon Codrington
Size
7,515 Kb
Views
16,192
  1. CSS Snap Scroll Points - Full Screen Scroller Previews
  2. CSS Snap Scroll Points - Full Screen Scroller HTML Codes
  3. CSS Snap Scroll Points - Full Screen Scroller CSS Codes
  4. CSS Snap Scroll Points - Full Screen Scroller JS Codes

How do I make an css snap scroll points - full screen scroller?

This example uses the CSS Snap Scroll Points to create a full screen scroller where the user scrolls between different inner sections of various height. . What is a css snap scroll points - full screen scroller? How do you make a css snap scroll points - full screen scroller? This script and codes were developed by Simon Codrington on 01 October 2022, Saturday.

CSS Snap Scroll Points - Full Screen Scroller Previews
IQ Test

CSS Snap Scroll Points - Full Screen Scroller - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Snap Scroll Points - Full Screen Scroller</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article class="page"> <article class="main"> <div class="scroll-container"> <div class="scroll-intro" id="intro"> <div class="inner"> <h1>CSS Snap Points Example</h1> <p>CSS Scroll snap points lets you create easy to scroll regions in which scrolling is snapped to a series of points. Currently supported in <b>FireFox</b>, <b>Safari</b> (prefixed) and <b>Opera</b> (prefixed). <a href="http://caniuse.com/#feat=css-snappoints" target="_blank"> Check the current support on caniuse. </a></p> <div class="supports" id="supports"></div> <h2>Full width container + differnt height elements</h2> <p>Here we have defined a scroll container that is the full height and width of the viewport. Each Snap Point element has it's own different height and the mandatory snap will hook onto the top of each container</p> <h3>Find out more</h3> <p>You can find out more about scroll snap points from my latest SitePoint article</p> </div> </div> <div class="scroll-nav cf"> <ul class="nav cf"> <li><a href="#intro">Intro</a></li> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> <li><a href="#section4">Section 4</a></li> <li><a href="#section5">Section 5</a></li> <li><a href="#section6">Section 6</a></li> </ul> </div> <div class="scroll-section medium" id="section1"> <div class="inner"> <h1>Quacumque enim ingredimur, in aliqua historia vestigium ponimus.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Verum hoc idem saepe faciamus.</b> <b>Sed ea mala virtuti magnitudine obruebantur.</b> Dulce amarum, leve asperum, prope longe, stare movere, quadratum rotundum. Duo Reges: constructio interrete. Quae quo sunt excelsiores, eo dant clariora indicia naturae. </p> <p>Qui est in parvis malis. Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? <i>Tu quidem reddes;</i> Huius, Lyco, oratione locuples, rebus ipsis ielunior. <i>Ita multa dicunt, quae vix intellegam.</i> Sine ea igitur iucunde negat posse se vivere? </p> <ul> <li>Haec et tu ita posuisti, et verba vestra sunt.</li> <li>Quod dicit Epicurus etiam de voluptate, quae minime sint voluptates, eas obscurari saepe et obrui.</li> <li>Quam si explicavisset, non tam haesitaret.</li> <li>Quae quidem vel cum periculo est quaerenda vobis;</li> <li>Si verbum sequimur, primum longius verbum praepositum quam bonum.</li> <li>Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere?</li> </ul> <h3>Periculo est quaerenda</h3> <p>Nos paucis ad haec additis finem faciamus aliquando; <b>Et quod est munus, quod opus sapientiae?</b> Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Oratio me istius philosophi non offendit; Nihilo magis. </p> </div> <div class="bg bg-1"></div> </div> <div class="scroll-section small" id="section2"> <div class="inner"> <h1>Ut non sine causa ex iis memoriae ducta sit disciplina.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eam stabilem appellas. Quare attende, quaeso. <i>Erit enim mecum, si tecum erit.</i> Sed haec in pueris; <i>Duo Reges: constructio interrete.</i> Si quae forte-possumus. </p> <p>Et ille ridens: Video, inquit, quid agas; Quonam, inquit, modo? Quid de Pythagora? Addidisti ad extremum etiam indoctum fuisse. <i>Nihilo beatiorem esse Metellum quam Regulum.</i> </p> <h3>: Video, inquit, quid agas; </h3> <p>An eiusdem modi? Itaque ab his ordiamur. Honesta oratio, Socratica, Platonis etiam. Certe, nisi voluptatem tanti aestimaretis. </p> </div> <div class="bg bg-2"></div> </div> <div class="scroll-section large" id="section3"> <div class="inner"> <h1>Putabam equidem satis, inquit, me dixisse.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Nihil opus est exemplis hoc facere longius. Nondum autem explanatum satis, erat, quid maxime natura vellet. <b>Nunc agendum est subtilius.</b> </p> <ul> <li>Torquatus, is qui consul cum Cn.</li> <li>Cur fortior sit, si illud, quod tute concedis, asperum et vix ferendum putabit?</li> <li>Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret?</li> </ul> <p>Mihi enim erit isdem istis fortasse iam utendum. Nam aliquando posse recte fieri dicunt nulla expectata nec quaesita voluptate. Hoc ne statuam quidem dicturam pater aiebat, si loqui posset. <i>Si id dicis, vicimus.</i> Quamquam te quidem video minime esse deterritum. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Sine ea igitur iucunde negat posse se vivere? Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. <a href='http://loripsum.net/' target='_blank'>Illud non continuo, ut aeque incontentae.</a> </p> <h2>Neutrum vero, inquit ille.</h2> <p>Duo Reges: constructio interrete. At cum de plurimis eadem dicit, tum certe de maximis. Ad eas enim res ab Epicuro praecepta dantur. Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. </p> </div> <div class="bg bg-3"></div> </div> <div class="scroll-section medium" id="section4"> <div class="inner"> <h1>Servari enim iustitia nisi a forti viro, nisi a sapiente non potest.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Callipho ad virtutem nihil adiunxit nisi voluptatem, Diodorus vacuitatem doloris. Dempta enim aeternitate nihilo beatior Iuppiter quam Epicurus; Quasi ego id curem, quid ille aiat aut neget. Nihil enim hoc differt. Duo Reges: constructio interrete. Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim. Nam bonum ex quo appellatum sit, nescio, praepositum ex eo credo, quod praeponatur aliis. Quorum sine causa fieri nihil putandum est. Hic ego: Pomponius quidem, inquam, noster iocari videtur, et fortasse suo iure. Multoque hoc melius nos veriusque quam Stoici. </p> <h2>Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri.</h2> <p>Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Esse enim quam vellet iniquus iustus poterat inpune. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Quare attende, quaeso. <i>Hic ambiguo ludimur.</i> Dic in quovis conventu te omnia facere, ne doleas. Sin aliud quid voles, postea. Quae cum magnifice primo dici viderentur, considerata minus probabantur. </p> <p>Quod autem principium officii quaerunt, melius quam Pyrrho; At certe gravius. <b>Bonum incolumis acies: misera caecitas.</b> Quid enim de amicitia statueris utilitatis causa expetenda vides. Sed quae tandem ista ratio est? Quid censes in Latino fore? Rhetorice igitur, inquam, nos mavis quam dialectice disputare? Minime vero, inquit ille, consentit. <i>Respondeat totidem verbis.</i> Haec et tu ita posuisti, et verba vestra sunt. Nam Pyrrho, Aristo, Erillus iam diu abiecti. </p> </div> <div class="bg bg-4"></div> </div> <div class="scroll-section small" id="section5"> <div class="inner"> <h1>Iam doloris medicamenta illa Epicurea tamquam de narthecio proment: Si gravis, brevis;</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non laboro, inquit, de nomine. Polycratem Samium felicem appellabant. Duo Reges: constructio interrete. <b>Ita nemo beato beatior.</b> Ut id aliis narrare gestiant? Inde igitur, inquit, ordiendum est. Quod quidem iam fit etiam in Academia. Ostendit pedes et pectus. </p> <p>Quo igitur, inquit, modo? Falli igitur possumus. Tibi hoc incredibile, quod beatissimum. Quare attende, quaeso. Aliter enim nosmet ipsos nosse non possumus. </p> <h2>Neque solum ea communia, verum etiam paria esse dixerunt.</h2> <p>Nemo igitur esse beatus potest. Quid adiuvas? Itaque ab his ordiamur. Quonam, inquit, modo? Id Sextilius factum negabat. Praeclare hoc quidem. </p> </div> <div class="bg bg-5"></div> </div> <div class="scroll-section large" id="section6"> <div class="inner"> <h1>Ut proverbia non nulla veriora sint quam vestra dogmata.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt. <i>Explanetur igitur.</i> Nunc omni virtuti vitium contrario nomine opponitur. Consequens enim est et post oritur, ut dixi. Duo Reges: constructio interrete. Non est igitur voluptas bonum. </p> <ul> <li>Nec vero hoc oratione solum, sed multo magis vita et factis et moribus comprobavit.</li> <li>Unum est sine dolore esse, alterum cum voluptate.</li> <li>Aliud est enim poëtarum more verba fundere, aliud ea, quae dicas, ratione et arte distinguere.</li> <li>Quicquid enim a sapientia proficiscitur, id continuo debet expletum esse omnibus suis partibus;</li> <li>Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas.</li> </ul> <h3>Nam quibus rebus efficiuntur voluptates, eae non sunt in potestate sapientis.</h3> <p>Age sane, inquam. Istam voluptatem, inquit, Epicurus ignorat? Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit; Quae contraria sunt his, malane? <a href='http://loripsum.net/' target='_blank'>Haec igitur Epicuri non probo, inquam.</a> Haec bene dicuntur, nec ego repugno, sed inter sese ipsa pugnant. Sed nimis multa. </p> <h2>Illud dico, ea, quae dicat, praeclare inter se cohaerere.</h2> <p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quod iam a me expectare noli. <b>Quonam, inquit, modo?</b> Nihil illinc huc pervenit. <b>Eademne, quae restincta siti?</b> Estne, quaeso, inquam, sitienti in bibendo voluptas? Cupiditates non Epicuri divisione finiebat, sed sua satietate. Idem iste, inquam, de voluptate quid sentit? </p> </div> <div class="bg bg-6"></div> </div> </div> </article>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Snap Scroll Points - Full Screen Scroller - Script Codes CSS Codes

/*UNIVERSAL STYLES*/
html { font-size: 62.5%;
}
body { font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: normal; font-size: 1.5rem; line-height: 1.5rem; color: #333;
}
h1,
h2,
h3,
h4,
h5,
h6 { font-weight: 600; line-height: 150%; margin: 1.5rem 0rem;
}
h1 { font-size: 3.8rem; margin: 2.85rem 0rem;
}
h2 { font-size: 2.8rem; margin: 2.1rem 0rem;
}
h3 { font-size: 2.1rem; margin: 1.57rem 0rem;
}
h4 { font-size: 1.8rem;
}
h5 { font-size: 1.3rem;
}
h6 { font-size: 1.0rem;
}
p { margin: 0rem 0rem 2.4rem 0rem; line-height: 170%;
}
ul{ padding: 0px 25px; line-height: 150%;
}
ul li{ margin-bottom: 5px;
}
/*clearfixes*/
.cf:before,
.cf:after { content: " "; display: table;
}
.cf:after { clear: both;
}
*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
div { margin: 1.5rem 0rem;
}
div { margin: 0rem;
}
.page { margin: 0px; padding: 0px;
}
.main { margin: 0px; padding: 0px; max-width: none;
}
.inner { max-width: 1000px; margin: auto; padding-left: 15px; padding-right: 15px;
}
.failure{ color:red;
}
.success{ color: green;
}
/*SCROLL SNAP STYLES*/
.scroll-container { height: 100vh; width: 100vw; overflow-x: hidden; overflow-y: auto; -webkit-scroll-snap-type: mandatory; -ms-scroll-snap-type: mandatory; scroll-snap-type: mandatory; scroll-behavior: smooth; scroll-snap-destination: 0% 0%;
}
.scroll-container .scroll-intro { scroll-snap-coordinate: 0% 0%; overflow: hidden; padding: 25px 0px;
}
.scroll-container .scroll-section { position: relative; background: #F0F0F0; overflow: hidden; width: 100%; padding-top: 25px; padding-bottom: 25px; height: auto; -webkit-scroll-snap-coordinate: 0% 0%; -ms-scroll-snap-coordinate: 0% 0%; scroll-snap-coordinate: 0% 0%; border-bottom: solid 1px #ccc;
}
.scroll-container .scroll-section .inner { position: relative; z-index: 2; background: rgba(255, 255, 255, 0.7); padding: 25px 15px;
}
/* last child must be 100% Y as it has issues scrolling to last element in FF*/
.scroll-container .scroll-section:last-child { -webkit-scroll-snap-coordinate: 0% 100%; -ms-scroll-snap-coordinate: 0% 100%; scroll-snap-coordinate: 0% 100%;
}
.scroll-container .scroll-section.small { padding-top: 25px; padding-bottom: 25px; background-color: #F0F0F0;
}
.scroll-container .scroll-section.medium { padding-top: 60px; padding-bottom: 60px; background-color: #E0E0E0;
}
.scroll-container .scroll-section.large { padding-top: 125px; padding-bottom: 125px; background-color: #F8F8F8;
}
/*background images*/
.scroll-container .scroll-section .bg { background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.25; z-index: 1;
}
.scroll-container .scroll-section .bg-1 { background-image: url('https://goo.gl/nSe8rW');
}
.scroll-container .scroll-section .bg-2 { background-image: url('https://goo.gl/3DcbJx');
}
.scroll-container .scroll-section .bg-3 { background-image: url('https://goo.gl/o969nQ');
}
.scroll-container .scroll-section .bg-4 { background-image: url('https://goo.gl/xs9KJq');
}
.scroll-container .scroll-section .bg-5 { background-image: url('https://goo.gl/B24utx');
}
.scroll-container .scroll-section .bg-6 { background-image: url('https://goo.gl/5rsE4h');
}
.scroll-container .scroll-section:last-child { margin-bottom: 0px;
}
.scroll-container .scroll-nav { position: absolute; top: 25%; left: 0px; background: #eee; z-index: 5;
}
.scroll-container .scroll-nav ul { margin: 0px; padding: 0px;
}
.scroll-container .scroll-nav li { display: block; margin: 0px;
}
.scroll-container .scroll-nav li a { display: block; background: #efefef; border: solid 1px #ccc; border-top: 0px; padding: 15px 30px; height: auto; color: #333; text-decoration: none;
}
.scroll-container .scroll-nav li:first-child a { border-top: solid 1px #ccc;
}
.scroll-container .scroll-nav li a:active,
.scroll-container .scroll-nav li a:hover { background: #CCC;
}
/*media queries*/
@media screen and (max-width: 678px) { /*hide the menu at the bottom of the screen in a scrolling list*/ .scroll-container .scroll-nav { position: absolute; bottom: 0px; left: 0px; top: auto; width: 100%; height: 60px; overflow-y: scroll; border-top: solid 1px #666; } .scroll-container .scroll-nav li a { padding: 25px 15px; font-size: 110%; height: 60px; }
}

CSS Snap Scroll Points - Full Screen Scroller - Script Codes JS Codes

jQuery(document).ready(function($){ //detect if we support scroll snap or not (not the best but should work) var scrollSnap = false; if('webkitScrollSnapType' in document.documentElement.style){ scrollSnap = true; }else if('msScrollSnapType' in document.documentElement.style){ scrollSnap = true; }else if('scrollSnapType' in document.documentElement.style){ scrollSnap = true; } if(scrollSnap === true){ $('#supports').append('<h3 class="success">It looks like your browser does support scroll snap! (Its support may vary)</h3>'); }else{ $('#supports').append('<h3 class="failure">It looks like your browser might not support scroll snap properties</h3>'); }
});
CSS Snap Scroll Points - Full Screen Scroller - Script Codes
CSS Snap Scroll Points - Full Screen Scroller - Script Codes
Home Page Home
Developer Simon Codrington
Username simoncodrington
Uploaded October 01, 2022
Rating 3
Size 7,515 Kb
Views 16,192
Do you need developer help for CSS Snap Scroll Points - Full Screen Scroller?

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!

Simon Codrington (simoncodrington) Script Codes
Name
Test iFrame
Foundation 6 Interchange
CSS animations on scroll - Multi step move
Animated border lines on hover
CSS Pulsating Sonar
CSS animations on scroll - Slide in from left
Animating single characters in a string
CSS animations on scroll - Fade from bottom up
Foundation 6 - Flex Grid
Stripe Header Grid
Create amazing SEO content 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!