Activate on Scroll

Developer
Alex Bergin
Size
3,358 Kb
Views
66,792
  1. Activate on Scroll Previews
  2. Activate on Scroll HTML Codes
  3. Activate on Scroll CSS Codes
  4. Activate on Scroll JS Codes

How do I make an activate on scroll?

Small Coffeescript class I use to activate/disable elements as they enter and leave the viewport. Transitions and transforms are determined by css.. What is a activate on scroll? How do you make a activate on scroll? This script and codes were developed by Alex Bergin on 13 June 2022, Monday.

Activate on Scroll Previews
IQ Test

Activate on Scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Activate on 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> <div class="vis-el"></div>
<div class="vis-el"></div>
<div class="vis-el"></div>
<div class="vis-el"></div>
<div class="vis-el"></div>
<div class="vis-el"></div>
<div class="vis-el"></div>
<div class="vis-el"></div>
<div class="vis-el"></div>
<div class="vis-el"></div>
<div class="vis-el"></div>
<div class="vis-el"></div>
<div class="vis-el"></div>
<div class="vis-el"></div>
<div class="vis-el"></div> <script src="js/index.js"></script>
</body>
</html>

Activate on Scroll - Script Codes CSS Codes

.vis-el { -webkit-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; position: relative; display: block; background-color: #ff7669; height: 33vh;
}
.vis-el:before, .vis-el:after { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; font-family: sans-serif; font-weight: 100; font-size: 3vh; color: white; position: absolute; left: 50%; top: 50%;
}
.vis-el:before { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: "not visible"; opacity: 1;
}
.vis-el:after { -webkit-transform: translate(-50%, 100%); transform: translate(-50%, 100%); content: "visible"; opacity: 0;
}
.vis-el.is-visible { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; background-color: #69d2ff;
}
.vis-el.is-visible:before, .vis-el.is-visible:after { -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
.vis-el.is-visible:before { -webkit-transform: translate(-50%, -150%); transform: translate(-50%, -150%); opacity: 0;
}
.vis-el.is-visible:after { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1;
}

Activate on Scroll - Script Codes JS Codes

(function() { var App, VisibilityController; VisibilityController = (function() { function VisibilityController() {} VisibilityController.prototype.init = function() { this.getElements(); return this.render(); }; VisibilityController.prototype.getElements = function() { return this.elements = document.getElementsByClassName("vis-el"); }; VisibilityController.prototype.render = function() { return setInterval((function(_this) { return function() { return _this.checkPos(); }; })(this), 100); }; VisibilityController.prototype.checkPos = function() { var el, h, hv, i, len, pos, ref, results, vv, w; w = window.innerWidth; h = window.innerHeight; ref = this.elements; results = []; for (i = 0, len = ref.length; i < len; i++) { el = ref[i]; hv = false; vv = false; pos = el.getBoundingClientRect(); if (pos.left <= w && pos.left >= 0) { hv = true; } if (pos.right <= w && pos.right >= 0) { hv = true; } if (pos.top <= h && pos.top >= 0) { vv = true; } if (pos.bottom <= h && pos.bottom >= 0) { vv = true; } if (hv === true && vv === true) { results.push(el.classList.add("is-visible")); } else { results.push(el.classList.remove("is-visible")); } } return results; }; return VisibilityController; })(); App = new VisibilityController; App.init();
}).call(this);
Activate on Scroll - Script Codes
Activate on Scroll - Script Codes
Home Page Home
Developer Alex Bergin
Username abergin
Uploaded June 13, 2022
Rating 4.5
Size 3,358 Kb
Views 66,792
Do you need developer help for Activate 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!

Alex Bergin (abergin) Script Codes
Name
P - Polaroid
Baymax
Ghost
Show Nav On Scroll
G - Golf
Sibling Selector Style Change on Hover
E - Espresso
B - Bicycle
Motion blur loader
SASS Placeholder Style Mixin
Create amazing web 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!