@media when div scrolls into view

Report · May 15, 2023

Can I used a media query to set a property when a defined div scrolls into view?

Example: image scrolls into view, then rotates a few degrees when centered in the view area.

Or: image scrolls slowly until into view, then accellerates when it scrolls out of view (like we had in Muse).

Report · May 15, 2023

Have a look at this Dreamweaver extension: https://www.dmxzone.com/go/32826/app-connect-animate-css/. Or better still, use Wappler which includes this widget.

Wappler, the only real Dreamweaver alternative.

Report · May 15, 2023

Thanks for the links Ben. My aim is to expand my knowledge of CSS (and eventually JS) to fully comprehend every aspect of a web build. Parallax is not entirely suited to the build on my desk, thuse would like to explore other means of achieving interesting CSS-based (or JS of that's required) means of drawing the eye to (small) images as they appear on screen.

Report · May 15, 2023

Css can't detect if something is in the browser viewport when you scroll, you would have to use javascript, the javascript intersection observer api is the most economical way to do that. Once the element comes into view in the browsers viewport you can apply the css styles to it and make it do loop the loop etc.

If that's something that would be of interest to you l can provide you with an example.

Report · May 15, 2023

Hi osgood,

I feared as much re media queries. Any examples you may have are very welcome!

Thank you kindly,
Bernard

Report · May 15, 2023

Hi osgood,

I feared as much re media queries. Any examples you may have are very welcome!

Thank you kindly,
Bernard

Report · May 15, 2023

Hi osgood,I feared as much re media queries. Any examples you may have are very welcome!Thank you kindly,Bernard
By @_bernard_

Example code below:

I've just used a 'spacer div' so the image/s is/are below the browsers footer, out of sight when the page loads. Once it/they enter into the browsers viewport when scrolling it/they will rotate a few degrees. You can apply it to as many components as you wish on the page, as long as they are inside a container with the class name of 'rotate'. Of course you can use what class name you like but you would then have to make sure that class name is used by the javascript code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intersection Observer</title>
<style>
.content {
text-align: center;
}
.rotate {
transition: all 1s ease;
}
.rotate.in-view {
transform: rotate(10deg);
}
</style>
</head>
<body>
<div class="content">

<div class="spacer">
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
<p>Spacer text. Spacer text</p>
</div>
<!-- end spacer div -->


<div class="rotate">
<img src="https://placeholder.pics/svg/600" alt="">
</div>

<div class="rotate">
<img src="https://placeholder.pics/svg/600" alt="">
</div>


</div>
<!-- end content div -->


<script>
const observerOptions = {
root: null,
threshold: 0,
rootMargin: '0px 0px -300px 0px'
};

const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('in-view');
}
else {
entry.target.classList.remove('in-view');
}
});
}, observerOptions);

// Assign ALL containers with the class name of 'rotate' to a variable
const rotate = document.querySelectorAll('.rotate');
rotate.forEach(function(rotate) {
observer.observe(rotate);
});

</script>

</body>
</html>

Report · May 15, 2023

Many thanks! I will explore this tomorrow, but at a glance it looks great. Thank you for your input.