We Keep Coding

How can I zoom in on a div element on scroll using javascript?

What I'm trying to achieve here is that when I scroll on a particular div here .ball, it should scale up to 1.5.
but when I'm not scrolling on that ball div it should shrink down to it's original height and width.
Here I'm using window method to do this trick and as soon as I scroll ball scale up which isn't what I'm trying to do. What can I use instead of window method and is there any other approach to do achieve this?
const ball = document.querySelector('.ball');
window.addEventListener('scroll', ()=> {
if (scroll) {
ball.classList.add('active');
} else {
ball.classList.remove('active');
}
});
.ball {
height: 200px;
width: 200px;
border-radius: 100%;
background-color: orange;
}
.ball.active {
transform: scale(1.5);
position: fixed;
}
body {
height: 150vh;
}
<div class="ball"></div>

I would use a setTimeout function to remove the class after a short period after the scroll. Do not forget to clear the timeout otherwise it will lead to weird behaviour. (as suggested by Lakshya when I was answering to the question).
To make the ball smoothly transition, I would add a css transition as shown bellow.
const ball = document.querySelector('.ball');
const container = document.querySelector('.container')
let scrollTimeout;
container.addEventListener('scroll', ()=> {
ball.classList.add('active');
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(()=> ball.classList.remove('active'), 100);
});
.ball {
height: 200px;
width: 200px;
border-radius: 100%;
background-color: orange;
transition: transform 0.3s ease;
position: fixed;
top: 50px;
left: 50px;
}
.ball.active {
transform: scale(1.5);
}
.container{
width: 100%;
background: red;
overflow: scroll;
height: 500px;
}
.inside_container{
position: relative;
width: 100%;
height: 2000px;
}
<div class="container">
<div class="inside_container">
<div class="ball"></div>
</div>
</div>

One of the approaches could be delaying the removal of .active class on ball by 200ms such that each time you try to scroll again, the timer is cleared and a new one starts to do the same. A debounce approach in a nutshell.
const ball = document.querySelector('.ball');
let scrollTimeout;
window.addEventListener('scroll', ()=> {
ball.classList.add('active');
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(()=> ball.classList.remove('active'),200);
});
.ball {
height: 200px;
width: 200px;
border-radius: 100%;
background-color: orange;
}
.ball.active {
transform: scale(1.5);
position: fixed;
}
body {
height: 150vh;
}
<div class="ball"></div>

CSS background-image transition makes video tag buffer

I have a video tag that I want to play continuously while a user can simultaneously do stuff on the site. However I have found that if the background transitions between background images that the video starts buffering. I have a runnable example in the snippet below.
Note: The buffering does not seem to occur if the snippet is run normally, but does occur if you put the snippet in 'full page'.
function changeBackground() {
const randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
const element = document.getElementById('background');
const currentOpacity = element.style.opacity;
const currentBackground = element.style.backgroundImage;
switch (currentBackground) {
case 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")': {
element.style.backgroundImage = 'url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")';
break;
}
case 'url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")': {
element.style.backgroundImage = 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")';
break;
}
default: {
break;
}
}
}
const element = document.getElementById('background');
element.style.backgroundImage = 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")'
#background {
display: flex;
position: absolute;
width: 100%;
height: 100%;
z-index: -10;
background-size: contain;
transition: background-image 3s ease-in-out;
}
#button {
display: flex;
width: 200px;
height: 100px;
background-color: orange;
text-align: center;
}
#video {
display: flex;
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 350px;
}
<div id='root' style='width: 100%; height: 500px'>
<div id='background'></div>
<div id='button' onClick="changeBackground()">Click me to change the background!</div>
<video
id='video'
autoplay
muted
loop
controls
src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"/>
</div>
What could be the cause and is there a way to prevent the video from buffering while still having a background image transition?
Edit: May be important to add that I'm on Chrome on MacOS.
Edit 2: From the responses I have gathered not everyone can reproduce the problem, so I went to an old-timey windows PC and tried it there. Found out that the background-transition was being really slow and laggy but the video kept playing without problem. It also works on safari on MacOS so this appears to be a Chrome MacOS-only problem.

I have to admit I'm not entirely sure of what happens here... Given it's not a 100% repro case, it's also hard to be sure any workaround actually works...
But here are some comments and ideas.
It seems this happens only with .mp4 files. I could reproduce with other .mp4 videos but never with any .webm file.
So one thing you may want to try is to reencode your video in webm, it could be that Chrome's mp4 decoder has some issues.
It seems that CSS animations do not cause this issue. So you could rewrite your transition code into a CSS animation, with the major problem that you won't be able to stop it in the middle (but it seems background-transitions are bad at this anyway).
function changeBackground() {
const element = document.getElementById('background');
if(element.classList.contains('apple')) {
element.classList.remove('apple');
element.classList.add('so');
}
else {
element.classList.add('apple');
element.classList.remove('so');
}
}
#background {
display: flex;
position: absolute;
width: 100%;
height: 100%;
z-index: -10;
background-size: contain;
background-image: url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png");
}
#background.apple {
animation: apple-to-SO 3s ease-in-out forwards;
}
#background.so {
animation: SO-to-apple 3s ease-in-out forwards;
}
#keyframes apple-to-SO {
from {
background-image: url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")
}
to {
background-image: url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png");
}
}
#keyframes SO-to-apple {
from {
background-image: url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png");
}
to {
background-image: url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")
}
}
#button {
display: flex;
width: 200px;
height: 100px;
background-color: orange;
text-align: center;
}
#video {
display: flex;
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 350px;
}
<div id='root' style='width: 100%; height: 500px'>
<div id='background'></div>
<div id='button' onClick="changeBackground()">Click me to change the background!</div>
<video
id='video'
autoplay
muted
loop
controls
src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"/>
</div>
Now if you prefer js control, it seems that Web-Animations aren't affected either.
let current = 1;
const urls = [
"https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png",
"https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg"
];
function changeBackground() {
const element = document.getElementById('background');
element.animate({
backgroundImage: ['url(' + urls[current] + ')', 'url(' + urls[+(!current)] + ')']
}
, {
duration: 3000,
iterations: 1,
fill: 'both'
}
);
current = (current + 1) % 2;
}
#background {
display: flex;
position: absolute;
width: 100%;
height: 100%;
z-index: -10;
background-size: contain;
background-image: url(https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png);
}
#button {
display: flex;
width: 200px;
height: 100px;
background-color: orange;
text-align: center;
}
#video {
display: flex;
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 350px;
}
<div id='root' style='width: 100%; height: 500px'>
<div id='background'></div>
<div id='button' onClick="changeBackground()">Click me to change the background!</div>
<video
id='video'
autoplay
muted
loop
controls
src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"/>
</div>

Try to enable / disable hardware-acceleration on Chrome.

I can't reproduce the problem so it might be an issue with your ISP and latency (I don't have that problem at 145 Mbps). Looking at your code it isn't very efficient with that switch. The demo below uses an array (added another image as well). BTW add flex to elements that contain children elements otherwise it's pointless.
document.getElementById('button').onclick = changeBackground;
let i = 0;
function changeBackground(e) {
const images = ["https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png", "https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg", "https://media.istockphoto.com/vectors/circuit-board-seamless-pattern-vector-background-microchip-technology-vector-id1018272944"];
const background = document.getElementById('background');
i++;
if (i >= images.length) {
i = 0;
}
background.style.backgroundImage = `url(${images[i]})`;
return false;
}
#background {
position: absolute;
width: 100%;
height: 100%;
z-index: -10;
background-size: contain;
background-image: url(https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png);
transition: background-image 3s ease-in-out;
background-repeat: repeat-x;
}
#button {
width: 200px;
height: 100px;
background-color: orange;
text-align: center;
}
#video {
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 350px;
}
<div id='root' style='width: 100%; height: 500px'>
<div id='background'></div>
<div id='button'>Click me to change the background!</div>
<video id='video' autoplay muted loop controls src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"></video>
</div>

This question is interesting.
I think the buffer may be due to
This line Math.floor(Math.random()*16777215).toString(16);
also about the video resolution and to what extent it has been resized
also may be due to some unnecessary codes if any.

Changing between 2 background colours on mouse Y + adapting <p> to that new colour

I found a piece of code that almost does what I want except I want it to be horizontal / based on mouse Y instead of X. Now I understand that in the js X will be changed to Y, but I struggle with rotating the divs.
Also, if I want to put some text over it, how would I do so that the background change affects the text colour (so if the text is black and half of the background is black, to make sure once when the black background overlays the text, text colour changes to another or gets inverted for example?
Also also, I tried to figure out in js which part dictates the responsiveness of the mouse movement, i.e., how would you do so that the colour shifting is not lagging after the mouse but I couldn't figure out?
https://codepen.io/erutuf/pen/NJLwqV
haml
#banner-wrapper.banner-wrapper
.banner.design
.banner-content
.banner.dev
.banner-content
scss
body {
margin: 0;
padding: 0;
.banner-wrapper {
position: relative;
width: 100%;
height: 400px;
overflow: hidden; background:red;
}
.banner {
position: absolute;
overflow: hidden;
&.dev {
margin-left: -500px;
width: calc(50vw + 500px);
.banner-content {
margin-left: 500px; background:black;
}
}
.banner-content {
height: 400px;
}
img {
width: 100vw;
}
}
}
js
document.addEventListener('DOMContentLoaded', function(){
let banner = document.getElementById('banner-wrapper');
let devLayer = banner.querySelector('.dev');
let delta = 0;
banner.addEventListener('mousemove', function(e){
delta = (e.clientX - window.innerWidth / 2) * 0.5;
devLayer.style.width = e.clientX + 500 + delta + 'px';
});
})

you can play with JS + CSS. The following code can be your starting point :).
btw i'm adapting code from your link https://codepen.io/erutuf/pen/NJLwqV
document.addEventListener("DOMContentLoaded", function(){
let banner = document.getElementById("banner-wrapper");
let devLayer = banner.querySelector(".dev");
let delta = 0;
// play with div's height
banner.addEventListener("mousemove", function(e){
delta = (e.clientY - window.innerHeight / 2) * 0.5;
devLayer.style.height = e.clientY + delta + "px";
});
})
<div class="banner-wrapper" id="banner-wrapper">
<div class="banner design">
<div class="banner-content">BANNER TEXT</div>
</div>
<div class="banner dev">
<div class="banner-content"></div>
</div>
</div>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
body .banner-wrapper {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
background: red;
}
body .banner {
position: absolute;
overflow: hidden;
}
body .banner.dev {
width: 100%;
/* play with responsiveness here. note that 0.1 is more responsive than 0.5. more info : https://www.w3schools.com/css/css3_transitions.asp */
-webkit-transition: height 0.2s linear;
transition: height 0.2s ease;
}
body .banner.dev .banner-content {
background: black;
}
body .banner .banner-content {
height: 400px;
}
body .banner img {
width: 100%;
}
.banner.design {
margin-top: -25px;
height: 50px;
top: 50%;
font-size: 50px;
/* set color & mix-blend-mode for text color vs background color effect. more info : https://css-tricks.com/methods-contrasting-text-backgrounds/ */
mix-blend-mode: difference;
color: #fff;
z-index: 1;
margin-left: -175px;
left: 50%;
width: 350px;
}
</style>

Is there a way to apply CSS-transform to an element which is inside an element that is being CSS-transformed on mousemove?

Basically I have a parallax scene using parallax.js library.
Inside the scene I have a couple of divs with unique parallax settings data tags.
And inside one of these divs I have an element which I want apply tilt effect to(when its getting mouseover'ed). But it doesnt work, the transformations from tilt lib arent being applied if an element is inside the scene however it works if I move it out of the parallax scene.
I think the problem lies somewhere around the management of OnMouseMove events or maybe it cannot work that way(when transform is being applied to an already transformed element's child).
Chrome EventListeners tab shows that both parallax and tilt mousemove listeners exist.
I would appreciate any help. If you need any code snippets I can provide it, since right now I actually don't know what particular parts to show and dont want to copy paste the whole libs.
UPD.
here's a snippet of what im trying to do:
$(document).ready(function() {
var scene = $('.prlx-scene').get(0);
var parallaxInstance = new Parallax(scene, {
relativeInput: true,
invertX: false,
invertY: false
});
});
.fulld,
.prlx-scene {
position: relative;
height: 100%
}
.prlx-scene {
width: 80%;
margin-right: auto;
margin-left: auto
}
.fulld {
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 12;
display: block;
width: 100%;
background-color: #000fff;
background-position: 50% 50%;
background-size: cover
}
.platonic-left-front-img {
position: absolute;
display: block;
}
.platonic-left-front {
z-index: 40;
}
.platonic-left-front-img {
left: 20%;
max-width: 100%;
max-height: 100%;
width: 50%;
top: 40%
}
.pc-text1 {
top: 50%;
left: 10%;
display: block;
position: fixed;
width: 15%;
height: 15%;
background-color: #00ffff;
}
.pc-text {
top: 50%;
left: 30%;
display: block;
position: fixed;
width: 15%;
height: 15%;
background-color: #00ffff;
}
img {
max-width: 100%;
vertical-align: middle
}
.scene-block {
width: 100%;
top: 0;
left: 0;
right: 0;
height: 100%;
bottom: 0;
margin-top: 0
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
</head>
<body style="height:100%;position:absolute;width:100%;">
<div class="pc-text1" data-tilt data-tilt-max="40" data-tilt-speed="200" data-tilt-perspective="500" data-tilt-reverse="true" style="z-index:9999;transform-style: preserve-3d;">
<p style="transform: translateZ(50px);">TEXT</p>
</div>
<div class="fulld">
<div class="prlx-scene">
<div class="scene-block" data-depth="0.8"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="platonic-left-front-img"></div>
<div class="scene-block" data-depth="0.85">
<div class="pc-text" data-tilt data-tilt-max="90" data-tilt-speed="400" data-tilt-perspective="500" data-tilt-reverse="true" style="transform-style: preserve-3d;">
<p style="transform: translateZ(50px);">TEXT</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vanilla-tilt#1.6.1/lib/vanilla-tilt.min.js"></script>
</body>

Found out that parallax scene disables pointer events.
So in order for that to work I needed to add style="pointer-events: all;" to an element that is being tilted.

What's causing the paint event in this CSS animation?

I'm building an animated menu based off of Smooth as Butter: Achieving 60 FPS Animations with CSS3.
The canonical demo which I'm comparing my code against is: http://codepen.io/Onyros/pen/jAJxkW
This is my demo code:
var navLayer = document.querySelector('.nav-layer'),
open = document.querySelector('.open'),
close = document.querySelector('.close');
function toggleNav() {
navLayer.classList.add('nav-layer__animating');
if (navLayer.classList.contains('nav-layer__visible')) {
navLayer.classList.remove('nav-layer__visible');
} else {
navLayer.classList.add('nav-layer__visible');
}
}
open.addEventListener('click', toggleNav, false);
close.addEventListener('click', toggleNav, false);
navLayer.addEventListener('transitionend', function() {
navLayer.classList.remove('nav-layer__animating');
}, false);
.nav-layer {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
z-index: 2;
pointer-events: none;
}
.nav-layer__visible {
pointer-events: auto;
}
.header {
position: fixed;
top: 0;
left: 0;
background-color: beige;
height: 10vh;
width: 100vw;
z-index: 1;
}
.nav {
position: relative;
height: 100vh;
width: 90vw;
background-color: aquamarine;
z-index: 3;
transform: translateX(-91vw);
will-change: transform;
}
.nav-layer__animating .nav {
transition: all 300ms ease-in;
}
.nav-layer__visible.nav-layer__animating .nav {
transition: all 300ms ease-out;
}
.nav-layer__visible .nav {
transform: none;
}
<div class="nav-layer">
<nav class="nav">
<button class="close">Close</button>
</nav>
</div>
<header class="header"><button class="open">Menu</button></header>
<article>
<p>O hai</p>
</article>
When I run the canonical demo with paint flashing enabled in Chrome DevTools, I don't see any paint events.
When I run my demo, I see a flash of paint when I close the menu.
The event log in DevTools shows that there was a paint on #document and another on nav.nav.
The answer I'm looking for here is: find the CSS property in the canonical demo which is preventing this flash of paint. Or, maybe the difference is in how I've structured my HTML. I think the JS is equivalent, so it's unlikely to be there.
Please provide your methodology, too!