We Keep Coding

Is there any way to change a div size on scroll using intersectionObserver?

I'm trying to change the size (or scale) of a div while scrolling.
This div has a .8 scale attached to it css. I'd like to reach a scale of 1 progressively while scrolling.
IntersectionObserver seems to be a good choice to work with instead of scroll event but i don't know if i can change the state of an element using it.

You can change the scale of a div using.
document.getElementById("scaledDiv").style.transform = "scale(1)";
The scroll event should do what you want it to do. You can continue to add more if statements and check how many pixels they are scrolling to change it gradually to 1 or even back to 0.8 when they scroll back up. The 50 below represents 50 pixels from the top of the page.
window.onscroll = function() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
// They are scrolling past a certain position
document.getElementById("scaledDiv").style.transform = "scale(1)";
} else {
// They are scrolling back
}
};

I hope this will help you:
const container = document.querySelector('.container');
const containerHeight = container.scrollHeight;
const iWillExpand = document.querySelector('.iWillExpand');
container.onscroll = function(e) {
iWillExpand.style.transform = `scale(${0.8 + 0.2 * container.scrollTop / (containerHeight - 300)})`;
};
.container {
height: 300px;
width: 100%;
overflow-y: scroll;
}
.scrollMe {
height: 1500px;
width: 100%;
}
.iWillExpand {
position: fixed;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: aqua;
transform: scale(0.8);
}
<div class='container'>
<div class='scrollMe' />
<div class='iWillExpand' />
</div>

Mouse move in a container with overflow JavaScript

I have a container of 200px that have a container itself with 400px height, I have a tracking mouse object that moves with it on mousemove event
when I'm moving the mouse in the not overflowed part, everything is fine, but when I move the scroll down the object do not track the mouse anymore
$(document).mousemove(function(e) {
$("#image").css({
left: e.pageX,
top: e.pageY
});
});
#image {
position: absolute;
}
.container {
height: 200px;
overflow: auto;
}
.image-container {
position: relative;
height: 400px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image-container">
<img id="image" src="http://images.pictureshunt.com/pics/m/mouse-8557.JPG" />
</div>
</div>
There is JSFiddle link here too.

Because you're not taking account of the scrollTop property of .container when positioning the cursor element. Try this:
let container = $('.container'); //<-- get container
$(document).mousemove(e => {
$("#image").css({
left: e.pageX,
top: e.pageY + container[0].scrollTop //<-- add scroll top too
});
});
In the interests of efficiency, it would also be good to cache the reference to #image once rather than grab it afresh every time the event fires.
let
container = $('.container'),
image = $('#image')
;
$(document).mousemove(e => {
image.css({ ...

bluring background when mousewheel scrolling

I was referring to the following link to blur background on mouse scroll.
http://codepen.io/sotayamashita/pen/pqLcv
The code is shown as below:
HTML:
<div id="blurred-image-container">
<div class="img-src" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/0*I7mXgSon9oco-rim.jpeg')"></div>
<div class="img-src blurred-img" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/0*I7mXgSon9oco-rim.jpeg')"></div>
</div>
<div class="article">
<h1>Medium</h1>
</div>
CSS:
.img-src {
position: fixed;
background-position: center;
-webkit-background-size: cover;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.blurred-img { opacity: 0; }
.article {
width:500px;
height: 2000px;
}
h1 {
color: #fff;
position: fixed;
z-index: 9999;
font-size: 50px;
top: 50%;
margin-top: -25px;
left: 50%;
margin-left: -103px;
}
jQuery
$(window).scroll(function() {
// Get scroll position
var s = $(window).scrollTop(),
// scroll value and opacity
opacityVal = (s / 150.0);
// opacity value 0% to 100%
$('.blurred-img').css('opacity', opacityVal);
});
Then, the background picture that needs to be blurred is not at the very top of the page. My webpage is quite long and the background needs to be blurred is at the very bottom of the page.
I think the following code is trying to set the point where bluring starts to occur at the top of the page. I think there are more than 2000px to scroll down before reaching to the section I want to blur the background.
var s = $(window).scrollTop(), opacityVal = (s / 150.0);
Lets say my html document looks like this:
<div id="firstdiv">
<p>long text goes here....</p>
</div>
<div id="seconddiv">
<p>long text goes here....</p>
</div>
<div id="thirddiv">
<p>long text goes here....</p>
</div>
<div id="blurred-image-container">
<div class="img-src" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/0*I7mXgSon9oco-rim.jpeg')"></div>
<div class="img-src blurred-img" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/0*I7mXgSon9oco-rim.jpeg')"></div>
</div>
<div class="article">
<h1>Medium</h1>
</div>
I want the background page to blur when the page is scroll down to #blurred-image-container section.
How can I modify the jQuery to work that?

<div class="out">
</div>
<div class="in">
</div>
out {
width: 100%;
height: 800px;
background: url('background') no-repeat;
}
.in {
width: 100%;
height: 200px;
background-color:olive;
}
$(window).on('scroll', function () {
var pixs = $(document).scrollTop()
pixs = pixs / 100;
var scroll;
$(window).scroll(function (event) {
scroll = $(window).scrollTop();
console.log(scroll);
*if(scroll>606)
{
$(".out").css({"-webkit-filter": "blur("+pixs+"px)","filter": "blur("+pixs+"px)" })
}*
});
});

This solution will require a separate element for the background but uses SVG filter to allow emulating motion blur in vertical direction.
It calculates the difference between last and current scroll position and uses that for a blur value. It debounces as well via using requestAnimationFrame(). It's easy to adopt to support a separate value for horizontal blurring as well.
You may want to tweak scale and max values for the blur, below some initial values only.
var blur = document.getElementById("fltBlur");
var prevY = 0;
var reqId;
window.onscroll = function() {
cancelAnimationFrame(reqId);
reqId = requestAnimationFrame(motionBlur)
};
function motionBlur() {
var y = window.scrollY;
var n = Math.min(32, Math.abs(y - prevY));
blur.setAttribute("stdDeviation" ,"0 " + n);
prevY = y;
}
html, body {width:100%; height:300%}
#cont {
width:100%;
height:300%;
background:url(//i.imgur.com/47zcWet.jpg);
-webkit-filter: url(#svgBlur);
filter: url("#svgBlur");
}
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
<filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
<feGaussianBlur id="fltBlur" in="SourceGraphic" stdDeviation="0 0" />
</filter>
</svg>
<div id=cont></div>

DOM Coordinates are wrong when using CSS Transformations

I'm trying to solve how to get the correct coordinates and movement of the element but find that the CSS Transformation doesn't align with the elements DOM coordinates.
I've tried to also change the properties of the element's CSS Transformation via the JS code itself.
The problem you can see in the demo is that the element doesn't reach all four corners of the #wrap div.
Is it also better to incorporate a skew or perspective property rather than rotations? I've just read Top & Left position with Transform Rotate (posted as a duplicated question), but this doesn't explain how to rotation of this example's prespective would work?
HTML
<div id="wrap">
<div id="thing"></div>
</div>
JS
$(function() {
$("#wrap").click(function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
document.getElementById("thing").style.left = relativeX + "px";
document.getElementById("thing").style.top = relativeY + "px";
document.getElementById("thing").innerHTML = relativeX + "<br />" + relativeY;
});
});
CSS
#wrap {
height: 300px;
width: 500px;
background: green;
position: relative;
overflow: hidden;
transform: rotateX(60deg) rotateZ(-30deg);
}
#thing {
background: blue;
width: 50px;
height: 50px;
position: absolute;
transition: 1s;
left: 0;
top: 0;
}
Live: https://jsfiddle.net/h9ad4k63/

keep the background image fixed position and centered

In my project, I need to show a small image in center of the visible part of the container, with respect to the window i.e .loader. Even when the user scrolls the page, the image should be visible in center of .loader.
I successfully implemented this but now I am facing a edgecase which is when user scrolls the page "up to the header" or "down to the footer", the small image is hiding. demo.
This is actually normal behaviour but in these edgecases, I want the image to stick to top/bottom end of the .loader container.
What I want:
Keep the small image always at center of .loader container. (I already implemented this)
when scrolled to any end of .loader container, the image should stick to that end instead of hiding behind the container.
Fiddle
A solution using just css is preferred. I am looking for browser support in IE9+, chrome and firefox.
.header {
height: 600px;
width: 650px;
background-color: grey;
}
.left-side {
height: 300px;
width: 150px;
float: left;
background-color: red;
}
.loader {
background-image: url('http://i.imgur.com/U2njI.jpg');
margin-left: 150px;
height: 1500px;
width: 500px;
background-position: 345px center;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: cornflowerblue;
}
.footer {
height: 600px;
width: 650px;
background-color: silver;
}
<div class="header"></div>
<div class="left-side"></div>
<div class="loader"></div>
<div class="footer"></div>

Here is a working solution with javascript, I hope its behaviour is how you expect it to be. I'm unfortunately not able to test it on IE9 right now but it should work (DEMO):
document.addEventListener('DOMContentLoaded',function() {
var loader = document.querySelector('.loader'),
loaderRect = loader.getBoundingClientRect(),
loaderTop = loaderRect.top + document.body.scrollTop,
loaderBottom = loaderTop + loader.offsetHeight,
initialBgPos = loader.style.backgroundPosition,
imageHeight = 141;
function onScroll() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(loaderTop >= (scrollTop + (window.innerHeight - imageHeight)/2)) {
loader.style.backgroundPosition='345px ' + (loaderTop - scrollTop) + 'px';
} else if(loaderBottom <= (scrollTop + (window.innerHeight + imageHeight)/2)) {
loader.style.backgroundPosition='345px ' + (loaderBottom - scrollTop - imageHeight) + 'px';
} else {
loader.style.backgroundPosition = initialBgPos;
}
}
window.addEventListener('scroll', onScroll);
onScroll();
});

To achieve what I think you want. We have to set the position of the .loader div to fixed, then it'll always stay where it's placed, regardless of whether the user scrolls the page, the div will scroll too. In here's how to set the position of loader to fixed in CSS (you may also have to get the position of your fixed div):
.loader{
position: fixed;
left: 100px;
top: 300px;
}
Here's your upadted JSFiddle: http://jsfiddle.net/Ezhb4/4/