Progressively-Enhanced Smooth Scroll

Developer
Cmalven
Size
3,910 Kb
Views
4,048
  1. Progressively-Enhanced Smooth Scroll Previews
  2. Progressively-Enhanced Smooth Scroll HTML Codes
  3. Progressively-Enhanced Smooth Scroll CSS Codes
  4. Progressively-Enhanced Smooth Scroll JS Codes

How do I make an progressively-enhanced smooth scroll?

Completely smooth scrolling using native browser scrollbars and with support for parallax layering. Progressively-enhanced, and falls back to standard scrolling for browsers without javascript enabled or without support for CSS transforms.. What is a progressively-enhanced smooth scroll? How do you make a progressively-enhanced smooth scroll? This script and codes were developed by Cmalven on 29 January 2023, Sunday.

Progressively-Enhanced Smooth Scroll Previews
IQ Test

Progressively-Enhanced Smooth Scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Progressively-Enhanced Smooth Scroll</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="container js-outer-container"> <div class="inner-container js-inner-container"> <div class="piece" data-depth="0"></div> <div class="piece half right empty" data-depth="10"> <span class="big-char">5</span> <p class="text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </div> <div class="piece half" data-depth="0"></div> <div class="piece" data-depth="10"></div> <div class="piece" data-depth="0"></div> <div class="piece half right" data-depth="10"></div> <div class="piece half empty" data-depth="0"> <span class="med-char">Space</span> <p class="text">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.</p> </div> <div class="piece" data-depth="10"></div> <div class="piece" data-depth="0"></div> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src='https://unpkg.com/butter-scroll/butter_scroll.js'></script> <script src="js/index.js"></script>
</body>
</html>

Progressively-Enhanced Smooth Scroll - Script Codes CSS Codes

* { box-sizing: border-box; -moz-box-sizing: border-box;
}
.inner-container { padding: 50px; overflow: hidden;
}
.piece { height: 500px; float: left; width: 100%; clear: both; background-size: cover; background-position: center center; background-repeat: no-repeat;
}
.piece + .piece { margin-top: -100px;
}
.piece.half { width: 50%;
}
.piece.right { float: right;
}
.piece.empty { background: none !important;
}
.piece:nth-child(1n) { background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/e9/PIA19948-NH-Pluto-Norgay-Hillary-Mountains-2050714.jpg");
}
.piece:nth-child(2n) { background-image: url("http://host2post.com/server13/bgs/t-/t-occrktvdugvm~.jpg");
}
.piece:nth-child(3n) { background-image: url("http://rack.2.mshcdn.com/media/ZgkyMDE1LzA0LzIzLzM2L3NwYWNlaHViYmxlLmQ4MjQyLmpwZwpwCXRodW1iCTEyMDB4OTYwMD4/032115d8/d8a/space-hubble.jpg");
}
.big-char { color: blue; display: block; font-size: 500px; padding: 30px 60px; font-family: "Helvetica Neue", san-serif; font-weight: bold; opacity: 0.8; text-align: center;
}
.med-char { color: blue; display: block; font-size: 130px; padding: 30px 60px; font-family: "Helvetica Neue", san-serif; font-weight: bold; opacity: 0.8; text-align: center; text-align: left;
}
.text { padding: 30px 60px; color: blue; font-family: "Helvetica Neue", san-serif; font-size: 16px; line-height: 1.4; font-weight: bold;
}

Progressively-Enhanced Smooth Scroll - Script Codes JS Codes

'use strict';
new ButterScroll({ $containerEl: $('.js-outer-container'), $elToScroll: $('.js-inner-container'), scrollEase: 0.1, // optional maxDepthOffset: 500 // optional
});
Progressively-Enhanced Smooth Scroll - Script Codes
Progressively-Enhanced Smooth Scroll - Script Codes
Home Page Home
Developer Cmalven
Username cmalven
Uploaded January 29, 2023
Rating 3
Size 3,910 Kb
Views 4,048
Do you need developer help for Progressively-Enhanced Smooth 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!

Cmalven (cmalven) Script Codes
Name
Chi Coast
Self-Generating Node Network
Three.js Playground
Paper Shift
Responsive Device Morph
Stacked Card Navigation
Let it Snow
Layer Tennis Header
Input with Draggable Values
Smooth Chars
Create amazing sales emails 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!