donnervetter
/ scroll-percentage.js
Last active
May 12, 2021 12:38
get percentage of an element scrolled through the viewport
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| This calculates the position of an element in a viewport in percentage (usable for animations on scroll, etc) | |
| */ | |
| // el is the element we want to to calculate percentage of | |
| // 0 when whole element enters the viewport and 100 when element reaches top of the viewport | |
| let percentage = ((window.innerHeight - el.getBoundingClientRect().top - el.offsetHeight) / (window.innerHeight - el.offsetHeight)) * 100; | |
| // 0 when top of the element enters the viewport and 100 when bottom of the element leaves the viewport |
donnervetter
/ Compass px to em
Created
July 10, 2014 20:07
— forked from ijy/Compass px to em
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @function em($target, $context: $base-font-size) { | |
| @if $target == 0 { @return 0 } | |
| @return $target / $context + 0em; | |
| } | |
| $base-font-size: 15px; | |
| h1 { | |
| font-size: em(21px, 15px); // Outputs 1.4em | |
| } |