• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

@media when div scrolls into view

Enthusiast ,
May 15, 2023 May 15, 2023

Copy link to clipboard

Copied

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

Views

367

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 15, 2023 May 15, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
May 15, 2023 May 15, 2023

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 15, 2023 May 15, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
May 15, 2023 May 15, 2023

Copy link to clipboard

Copied

Hi osgood,

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

Thank you kindly,
Bernard

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
May 15, 2023 May 15, 2023

Copy link to clipboard

Copied

Hi osgood,

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

Thank you kindly,
Bernard

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 15, 2023 May 15, 2023

Copy link to clipboard

Copied

quote
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>

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
May 15, 2023 May 15, 2023

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines