Is it possible to detect the scroll action only with CSS animation?

Question

Is it possible to detect the scroll action only with CSS animation?

Navigation

#1 by (2 votes)

2

Is it possible to detect the scroll action only with CSS animation, without the use of javascript? I found an example on this link link but I could not identify how it was done with CSS only. Could someone give me a brief explanation of how this is possible?

css

asked by anonymous 14.12.2018 / 18:31

1 answer

How to concatenate one vector in another elegantly in ADVPL? Uploading image with AJAX and PHP

score 2 · Accepted Answer

As I said, it is an infinitely simpler example, but what matters is the concept. And the main idea is to use multiple divs with background-attachment: fixed; With this the move div, but what is in the background does not! So when scrolling the page you are revealing some element, or hiding another ...

I left a border in the container of the Balloon just to see how it goes "cutting" ... You can go playing with these values and align everything to appear or disappear, you can use z -index if applicable etc. With time and patience you get something very interesting.

OBS: The example is not perfect, and I tried to optimize it to fit here in the Snippet of the site, not totally responsive and aligned, but to get an idea:)

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* overflow-x: hidden; */
}
.container {
    height: 200vh;
    background-image: url(https://openclipart.org/image/2400px/svg_to_png/5525/shokunin-sky-with-clouds.png);
    background-position: top center;
    background-repeat: repeat-y;
}
.aviao {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
    height: 100vh;
    background-image: url(https://images.vexels.com/media/users/3/151241/isolated/preview/920fcdacca2bbe597f6c3af8c6a17c09-striped-hot-air-balloon-icon-by-vexels.png);
    background-size: 150px 150px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid silver;
}
.bird {
    position: absolute;
    top: 150vh;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
    height: 400px;
    background-image: url(https://4.bp.blogspot.com/-UMN2vmxzE-A/V9XCDY4tLOI/AAAAAAAAANk/h-0MaXnVDfcZCSgBpZHH72-Q2w56S3t_QCLcB/s1600/bird_silhouettes_by_frank_1956-d5lkx3d.png);
    background-attachment: fixed;
    background-position: top left 200px;
    background-repeat: no-repeat;
}
.foo {
position: absolute;
top: 155vh;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
background-image: url(https://www.goodvinil.pt/6396-home_default/vinil-skyline-de-londres.jpg);
background-position: bottom -70px left;
background-repeat: repeat-x;
}

<div class="container"></div>
<div class="aviao"></div>
<div class="bird"></div>
<div class="foo"></div>