We Keep Coding

Reveal html text letter by letter smoothly on page scroll?

I need help trying to complete a JavaScript effect. I'm looking to accomplish the effect on this site https://www.lucidmotors.com/ - in the third section down on the home page you can see the text scroll/reveal is smooth over the other text.
I found this option on codepen https://codepen.io/Bes7weB/pen/zYKoexK similar to the effect I need, but its a little to choppy I need it to be smoother.
JS
var textWrapper = document.querySelector(".ml3");
textWrapper.innerHTML = textWrapper.textContent.replace(
/\S/g,
"<span class='letter'>$&</span>"
);
var letter = document.querySelectorAll(".letter");
var i = 0;
var currentID = 0;
var slideCount = letter.length;
document.addEventListener("scroll", (e) => {
let scrolled =
document.documentElement.scrollTop /
(document.documentElement.scrollHeight -
document.documentElement.clientHeight);
// var nextID = currentID + 1;
// if (nextID < slideCount) {
// letter[nextID].style.setProperty(
// "--percentage",
// `${scrolled / 1}` * nextID
// );
// }
// currentID = nextID;
letter.forEach(function (l, i) {
// console.log("====",i / letter.length, i, letter.length)
if (i / letter.length < scrolled) {
l.style.setProperty("--percentage", 1);
} else {
l.style.setProperty("--percentage", 0);
}
});
});
CSS
:root {
--percentage: 0;
}
body {
background-color: #000;
margin: 0;
height: 600vh;
}
.ml3 {
position: sticky;
top: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
span {
font-family: Helvetica;
margin: 0;
padding: 0;
font-size: 48px;
color: #fff;
letter-spacing: -0.3px;
}
.ml3 span {
opacity: var(--percentage);
}
HTML
<div class="ml3">
<h1>THIS IS MY TEXT THAT IT'S GOING TO SHOW IN SCROLL</h1>
</div>
Any assistance would be great

This is probably what you're looking for, find it quite interesting and I think my answer can be improved, if you're interested only in the vertical scroll you should check the window.scrollY variable as well.
var textWrapper = document.querySelector(".ml3");
textWrapper.innerHTML = textWrapper.textContent.replace(
/\S/g,
"<span class='letter'>$&</span>"
);
var letter = document.querySelectorAll(".letter");
document.addEventListener("scroll", (e) => {
let scrolled =
document.documentElement.scrollTop /
(document.documentElement.scrollHeight -
document.documentElement.clientHeight) *
letter.length;
letter.forEach(function(l, i) {
if ((scrolled - i) > 1)
l.style.setProperty("--percentage", 1);
else if ((scrolled - i) < 0.2)
l.style.setProperty("--percentage", 0.2);
else
l.style.setProperty("--percentage", (scrolled - i));
});
});
:root {
--percentage: 0.2;
}
body {
background-color: #000;
margin: 0;
height: 600vh;
}
.ml3 {
position: sticky;
top: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
span {
font-family: Helvetica;
margin: 0;
padding: 0;
font-size: 48px;
color: #fff;
letter-spacing: -0.3px;
}
.ml3 span {
opacity: var(--percentage);
}
<div class="ml3">
<h1>THIS IS MY TEXT THAT IT'S GOING TO SHOW IN SCROLL</h1>
</div>

How to center slide-images with javascript?

I want to write my own jQuery slider, which shows a small part of the next and previous image (for example 20px).
To achieve this, I have created a simple image slider, using float: left; to arrange all the images in one row inside a overflow: hidden div.
All my images got a fixed width of 200px. Because of this I calculate the margins of each image with the following sass:
img {
float: left;
display: block;
margin: 0 calc((100vw - 200px) / 4 - 20px);
&:first-child {
margin-left: calc((100vw - 200px) / 2);
}
&:last-child {
margin-right: calc((100vw - 200px) / 2);
}
}
This works great and positions every image as it should be.
While trying to animate the slider using transform: translateX(); I am totally lost calculating the amount of pixels (in vw/%/px) I need to translateX the $('#slider').
How can I calculate the translateX value to slide to each image centered?
$(document).ready(function(){
document.getElementById('slider').ondragstart = function() { return false; };
var slider = $('#slider'),
images = slider.find('img'),
imageCount = images.length,
currentIndex = 0;
slider.width( imageCount * 100 + "vw");
var slideLeft = function () {
if ( currentIndex >= imageCount - 1 ) {
console.log("Last image reached");
return;
}
currentIndex += 1;
console.log("Slide left");
slider.css("transform", "translateX(" + currentIndex * -10 + "vw)");
}
var slideRight = function () {
if ( currentIndex === 0 ) {
console.log("First image reached");
return;
}
currentIndex -= 1;
console.log("Slide right");
slider.css("transform", "translateX(" + currentIndex * -10 + "vw)");
}
$('#right').on('click', function(){
slideLeft();
});
$('#left').on('click', function(){
slideRight();
});
});
html, body {
margin: 0;
padding: 0;
}
#slider-container {
overflow: hidden;
height: 300px;
background: rgba(0, 0, 0, 0.05);
margin: 5vw 0;
width: 100vw;
}
#slider {
height: 300px;
transition: transform .3s ease-in-out;
transform: translateX(0);
}
#slider img {
float: left;
display: block;
margin: 0 calc((100vw - 200px) / 4 - 20px);
}
#slider img:first-child {
margin-left: calc((100vw - 200px) / 2);
}
#slider img:last-child {
margin-right: calc((100vw - 200px) / 2);
}
#controls {
position: relative;
width: 100vw;
display: block;
height: calc(10vw + 100px);
}
#controls .arrow {
display: block;
width: 100px;
top: 5vw;
background: lightgray;
height: 100px;
left: 5vw;
position: absolute;
font-size: 100px;
line-height: 80px;
font-weight: bold;
text-align: center;
cursor: pointer;
}
#controls .arrow:hover {
background: lightblue;
}
#controls #right {
left: auto;
right: 5vw;
}
p {
margin: 0 5vw 5vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider-container">
<div id="slider">
<img src="https://unsplash.it/200/300?image=1077" alt="img-1">
<img src="https://unsplash.it/200/300?image=1076" alt="img-2">
<img src="https://unsplash.it/200/300?image=1072" alt="img-3">
<img src="https://unsplash.it/200/300?image=1063" alt="img-4">
<img src="https://unsplash.it/200/300?image=1061" alt="img-5">
</div>
</div>
<div id="controls">
<div id="left" class="arrow">‹</div>
<div id="right" class="arrow">›</div>
</div>
<p>Currently every scroll click scrolls a random amount to the left or right. This needs to be fixed, so that every image is centered after the slide.</p>

I had made few updates in your script.
try with this script
$(document).ready(function(){
document.getElementById('slider').ondragstart = function() { return false; };
var slider = $('#slider'),
images = slider.find('img'),
imageCount = images.length,
currentIndex = 0;
slider.width( imageCount * 100 + "vw");
var $this = $("#slider-container");
var offset = $this.offset();
var width = $this.width();
var centerX = (offset.left + width / 2 ) + (images.width() / 2) - 40;
var slideLeft = function () {
if ( currentIndex >= imageCount - 1 ) {
console.log("Last image reached");
return;
}
currentIndex += 1;
console.log("Slide left");
slider.css("transform", "translateX(-" + (currentIndex * centerX) + "px)");
}
var slideRight = function () {
if ( currentIndex === 0 ) {
console.log("First image reached");
return;
}
currentIndex -= 1;
console.log("Slide right");
slider.css("transform", "translateX(-" + (currentIndex * centerX) + "px)");
}
$('#right').on('click', function(){
slideLeft();
});
$('#left').on('click', function(){
slideRight();
});
});
check this fiddle : jsFiddle

Inline-block position not as expected (CSS)

for a bit of fun I decided to make a sliding shelf today. I got it looking and working how I wanted and then decided to put some content in the cards.
I added text to the first card and it moved down almost on to a new line. I can't explain why this happened (though I'm sure there's a simple explanation). Can one of you tell me what I'm missing, please?
Thank you 🙂
function hideTrigger() {
leftTrig.removeAttribute("hidden");
rightTrig.removeAttribute("hidden");
switch (pos) {
case 0:
leftTrig.setAttribute("hidden", "");
break;
case posMax:
rightTrig.setAttribute("hidden", "")
}
}
function moveHelper() {
boxesCont.style.transform = slideHelper(), hideTrigger(), setTimeout(function() {
end = boxCont[posMax].getBoundingClientRect().left <= window.innerWidth ? 1 : 0
}, 300)
}
function slideHelper() {
return "translate(-" + boxSize * pos + "px)"
}
function moveRight() {
pos < posMax && (end ? endHelper() : (pos++, moveHelper()))
}
function moveLeft() {
pos > 0 && (pos--, moveHelper())
}
function moveTo(e) {
e >= 0 && e <= posMax && (pos = e, moveHelper())
}
function endHelper() {
pos++;
let edgeDif = boxSize - boxMargin - (window.innerWidth - boxCont[posMax].getBoundingClientRect().left);
rightTrig.setAttribute("hidden", ""), boxesCont.style.transform = "translate(-" + (boxSize * (pos - 1) + edgeDif) + "px)"
}
var leftTrig = document.querySelector(".directional.left");
var rightTrig = document.querySelector(".directional.right");
var boxesCont = document.querySelector(".shelf .boxes");
var boxCont = boxesCont.querySelectorAll(".box");
var boxStyle = boxCont[0].currentStyle || window.getComputedStyle(boxCont[0]);
var boxMargin = parseFloat(boxStyle.marginLeft);
var boxSize = boxCont[0].offsetWidth + 2 * boxMargin;
var end = 0;
var pos = 0;
var posMax = boxCont.length - 1;
leftTrig.addEventListener("click", function() {
moveLeft()
});
rightTrig.addEventListener("click", function() {
moveRight()
});
moveHelper();
body {
margin: 0;
font-family: Roboto;
text-align: justify;
}
.shelf {
position: relative;
overflow-x: hidden;
font-size: 0;
}
.shelf button.directional {
position: absolute;
transition: opacity 0.3s cubic-bezier(.25, .8, .25, 1);
height: 100%;
width: 30px;
top: 0;
opacity: 0;
border: 0;
border-radius: 0;
background: rgba(55, 71, 79, 0.4);
color: #F5F5F5;
cursor: pointer;
z-index: 9999;
}
.shelf button.directional.left {
left: 0;
}
.shelf button.directional.right {
right: 0;
}
.boxes {
white-space: nowrap;
transition: transform 0.3s cubic-bezier(.25, .8, .25, 1);
}
.box {
display: inline-block;
border-radius: 2px;
height: 200px;
width: 350px;
margin: 0 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
font-size: 16px;
}
.box:nth-child(even) {
background: #f44336;
}
.box:nth-child(odd) {
background: #2196F3;
}
.shelf:hover button.directional {
opacity: 1;
}
.shelf:hover button.directional:hover {
background: rgba(55, 71, 79, 0.8);
}
*[hidden] {
display: none;
}
<div class="shelf">
<button class="directional left">‹</button>
<div class="boxes">
<div class="box">test</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<button class="directional right">›</button>
</div>
Link to JSFiddle

Add vertical-align: top; to your .box.
This will get your inline block elements to align themselves vertically across their top points.

Problem with inline-block elementsis, most browsers including IE will add 1px around inline and inline-block elements.
https://davidwalsh.name/remove-whitespace-inline-block
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
https://matthewlein.com/articles/inline-block-no-space-font/
https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/
This happens if you stack your inline-block elements. Meaning, in order to keep your code more readible if you put line breaks in html before inline-block elements, you will get this gap and it will cause unwanted UI.
So basically you need to set font-size:0 to wrapper element then set your font-size back to normal in inline-block elements if you have to keep them in separate lines like
<li>Some content<li>
<li>Some content<li>
<li>Some content<li>
or you need to merge them in single line
<li>Some content<li><li>Some content<li><li>Some content<li>

Show menus in upper half circle using javascript

I am using following link to show menus
http://codepen.io/anon/pen/dWdJbV
But I want to show them only in upper half circle. Even menu count changes it should use only upper half circle.
Js code
var items = document.querySelectorAll('.circle a');
for(var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(2/l)*i*Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(5/l)*i*Math.PI)).toFixed(4) + "%";
}
document.querySelector('.menu-button').onclick = function(e) {
e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}
I tried by changing values sin sin and cos but not getting required output

Here is the quick demo :
var isOn = false;
$('#menu-button').click(function() {
if(isOn) {
reset();
} else {
setPosition();
}
});
function setPosition() {
isOn = true;
var links = $('#menu-button a');
var radius = (links.length * links.width()) / 2;
var degree = Math.PI / links.length, angle = degree / 2;
links.each(function() {
var x = Math.round(radius * Math.cos(angle));
var y = Math.round(radius * Math.sin(angle));
$(this).css({
left: x + 'px',
top: -y + 'px'
});
angle += degree;
});
}
function reset() {
$('#menu-button a').css({
left: 0 + 'px',
top: 0 + 'px'
});
isOn = false;
}
body {
margin: 0;
background: #39D;
}
#menu-button:before {
position: absolute;
top: 0; left: 0;
width: 50px;
height: 50px;
background: #dde;
cursor: pointer;
text-align: center;
line-height: 50px;
color: #444;
border-radius:50%;
content:"\f0c9"; font: normal normal normal 14px/1 FontAwesome;
font-size:26px;
}
#menu-button {
position: absolute;
margin: auto;
top: 150px; left: 0; right: 0;
width: 50px;
height: 50px;
cursor: pointer;
text-align: center;
}
#menu-button > a {
position: absolute;
display: block;
width: 50px;
height: 50px;
-webkit-transition: top .5s, left .5s;
-moz-transition: top .5s, left .5s;
text-align: center;
text-decoration: none;
line-height: 50px;
color: #EBEAE8;
z-index: -1;
border-radius:50%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Demo by http://creative-punch.net -->
<div id="menu-button" class="entypo-menu">
</div>

I made this changes in you example for displaying items only in top part of circle:
var items = document.querySelectorAll('.circle a');
var angle = 0;
var step = (Math.PI) / items.length;
for(var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35*Math.cos(angle).toFixed(4)) + "%";
items[i].style.top = (50 + 35* (-Math.abs(Math.sin(angle)))).toFixed(4) + "%";
angle += step;
}
So you need only angles from 0 to 180 degrees. That's why i use (-Math.abs(Math.sin(angle)))

Sticky sidebar overlaps to the footer?

I have Created custom sticky sidebar for ADS, it works but there is an issue. when I scroll it to the bottom, it overlaps on the footer. pls check. - http://screencast.com/t/oEjcrbocB05C
var stickySidebar = $('.sticky');
if (stickySidebar.length > 0) {
var stickyHeight = stickySidebar.height(),
sidebarTop = stickySidebar.offset().top;
}
// on scroll move the sidebar
$(window).scroll(function () {
if (stickySidebar.length > 0) {
var scrollTop = $(window).scrollTop();
if (sidebarTop < scrollTop) {
stickySidebar.css('top', scrollTop - sidebarTop);
// stop the sticky sidebar at the footer to avoid overlapping
var sidebarBottom = stickySidebar.offset().top + stickyHeight,
stickyStop = $('.main-content').offset().top + $('.main-content').height();
if (stickyStop < sidebarBottom) {
var stopPosition = $('.main-content').height() - stickyHeight;
stickySidebar.css('top', stopPosition);
}
}
else {
stickySidebar.css('top', '0');
}
}
});
$(window).resize(function () {
if (stickySidebar.length > 0) {
stickyHeight = stickySidebar.height();
}
});
.sticky {
position: relative;
top: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Check for site url is - http://www.test2.guru99.com/java-tutorial.html
Please Help Me !

Modify your following CSS
#rt-footer-surround {
background-color: #3f3f3f;
color: #f8f8f8;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
To this, Add position:relative and z-index:1
#rt-footer-surround {
background-color: #3f3f3f;
color: #f8f8f8;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1;
}