Square animation on scroll

Developer
Kev Rousseau
Size
4,823 Kb
Views
22,264
  1. Square animation on scroll Previews
  2. Square animation on scroll HTML Codes
  3. Square animation on scroll CSS Codes
  4. Square animation on scroll JS Codes

How do I make an square animation on scroll?

What is a square animation on scroll? How do you make a square animation on scroll? This script and codes were developed by Kev Rousseau on 12 August 2022, Friday.

Square animation on scroll Previews
IQ Test

Square animation on scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Square animation on scroll</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header><h1>Banner</h1></header>
<div class="main"> <div class="container"> <nav class="chapter toc sticky" aria-label="Document" id="chapter-toc chapter--toc"> <h1 id="table-of-contents">Table of Contents</h1> <ul id="markdown-toc"> <li><a href="#subject1">Subject 1</a></li> <li><a href="#subject2">Subject 2</a></li> <li><a href="#subject3">Subject 3</a></li> <li><a href="#subject4">Subject 4</a></li> <li><a href="#subject5">Subject 5</a></li> </ul> </nav> <section id="subject1"> <h2>Subject 1</h2> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.</p> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.</p> </section> <section id="subject2"> <h2>Subject 2</h2> <p>The material environment draws inspiration from real-world forces, such as gravity and friction.</p> </section> <section id="subject3"> <h2>Subject 3</h2> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.</p> </section> <section id="subject4"> <h2>Subject 4</h2> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.</p> <p>Forces are reflected in the way user input affects elements on screen and how elements react to each other. The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other.</p> </section> <section id="subject5"> <h2>Subject 5</h2> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text.</p> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text.</p> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text.</p> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text.</p> <p>The material environment draws inspiration from real-world forces, such as gravity and friction. These forces are reflected in the way user input affects elements on screen and how elements react to each other. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text. Some pretty long text just to see how it would scroll with a super long text.</p> </section> </div>
</div>
<footer><h2>Footer</h2></footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Square animation on scroll - Script Codes CSS Codes

@import "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic";
* { box-sizing: border-box;
}
body { font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif; font-size: 16px; margin: 0; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; color: #212121; background-color: #f5f5f5;
}
header, footer { background-color: gray; width: 100%; height: 150px; text-align: center; display: table; box-shadow: 0px 5px 10px #ccc; z-index: 100; position: relative;
}
header h1, header h2, footer h1, footer h2 { font-size: 3em; display: table-cell; vertical-align: middle;
}
footer { box-shadow: 0px -5px 10px #ccc;
}
.toc { bottom: 0; color: #444; font-size: 0.8em; left: 0; overflow-x: hidden; overflow-y: auto; position: absolute; top: 150px; width: 25%; z-index: 10; padding-left: 20px;
}
.toc #table-of-contents { display: none;
}
.toc.sticky ul { padding: 0; position: fixed; top: 40%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%);
}
.toc.sticky ul li { list-style: none; margin-top: 20px; position: relative;
}
.toc.sticky ul li a { transition: all 0.5s ease; font-size: 1.2em; text-decoration: none; color: #222; padding: 4px; padding-left: 10px;
}
.toc.sticky ul li a:hover { color: #007d96;
}
.toc.sticky ul li a:hover:before { border-color: #11accd;
}
.toc.sticky ul li a.active { transition: all 0.5s ease; color: #007d96;
}
.toc.sticky ul li a.active:before { transition: all 0.5s ease; content: ""; top: -3px; position: absolute; z-index: 100; margin-left: -15px; width: 3px; height: calc(100% + 1 * 7px); background-color: #11accd;
}
.main { padding: 20px; padding-left: 30%;
}
section { border: 1px solid #ccc; box-shadow: 0px 2px 10px #ccc; position: relative; margin-bottom: 30px; padding: 5px 20px;
}
section:before { content: ""; top: 0px; position: absolute; z-index: 100; margin-left: -60px; width: 20px; height: 20px; background-color: #ccc; border: 2px solid #999;
}
section:after { content: ""; background: #cdcdcd; width: 2px; position: absolute; top: 0; height: calc(100% + 35px); left: -28px; z-index: 0;
}
section.active:before { content: ""; background-color: #11accd; border: 2px solid #11accd;
}
section:last-of-type { margin-bottom: 100px;
}
section:last-of-type:after { display: none;
}

Square animation on scroll - Script Codes JS Codes

function demo() { return { init: function() { this.nav = $("nav"); this.names = $("section"); }, highlight: function() { this.currentArticle = this.findCurrentArticleInVP(); // we've got the content to highlight, let's add classes and expand menu-entries var $nav = this.nav; $nav.find("a").removeClass("active"); $nav.find('a[href="#' + this.currentArticle + '"]').addClass("active"); this.names.removeClass("active"); $('section[id="' + this.currentArticle + '"]').addClass("active"); }, findCurrentArticleInVP: function() { // get the scroll height from the var viewport = $(".main")[0]; //grab the last one in case nothing is found var articleID = this.names[this.names.length - 1].id; // while our item are above the viewport, we enumerate for (var i = 0, l = this.names.length; i < l; i++) { var articleTop = this.names[i].getBoundingClientRect().top; if (isElementInViewport(viewport, this.names[i])) { //since the current element is farther, take the prev one if (i === 0) { articleID = this.names[i].id; } else { articleID = this.names[i - 1].id; } break; } } return articleID; } };
}
function isElementInViewport(viewport, el) { //special bonus for those using jQuery if (typeof jQuery === "function" && el instanceof jQuery) { el = el[0]; } var rect = el.getBoundingClientRect(); var viewportHeight = viewport.innerHeight; //100 is a subjective number. Acts like an offset to base the reaction of the highlight on. return rect.top >= 100;
}
function scrollToAnchor(aid) { var aTag = $("[id='" + aid + "']"); $("html,body").animate({ scrollTop: aTag.offset().top }, "slow");
}
var demo = new demo();
demo.init();
demo.highlight();
$(window).on("scroll", function() { demo.highlight();
});
$("nav a").on("click", function(e) { e.preventDefault(); scrollToAnchor(this.hash.substr(1)); return false;
});
Square animation on scroll - Script Codes
Square animation on scroll - Script Codes
Home Page Home
Developer Kev Rousseau
Username kevrousso
Uploaded August 12, 2022
Rating 3
Size 4,823 Kb
Views 22,264
Do you need developer help for Square animation on 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!

Kev Rousseau (kevrousso) Script Codes
Name
CSS Collapse boxes
Find needle in haystack by looping through each item one by one
1-Discover-Backpacker
Faster Custom Fuzzy Search
Notifications
A Pen by Kev Rousseau
Square animation on scroll with instant follow
Fing needle in haystack by splicing array in half
Menu example 2
Tutorial-Module
Create amazing Facebook ads 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!