@media when div scrolls into view

Forum|Forum|2 years ago
May 15, 2023
1 reply
877 views

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).

This topic has been closed for replies.

BenPleysier

Community Expert

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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

_bernard_Author

Inspiring

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.

_bernard_Author

Inspiring

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>

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded