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

Asked

Viewed 51 times

2

Is it possible to detect scroll action only with CSS animation, without using javascript? I found an example in this link https://codepen.io/Tont/pen/eDJpb but I couldn’t identify how it was done only with CSS. Could someone give me a brief explanation of how this is possible?

css
  • 1

    I think I figured it out, I’ll make a much simpler example for you to understand the trick of cat jumping

  • 1

    I made an edit and put the last element at the end of the scroll, but as I commented I did in the rush, but the concept you can apply more refined ai

1 answer

2


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

I left an edge on container of the Balloon just so you can see how it goes "cutting"... You can play around with these values and align everything to appear or disappear, you can use z-index if it is the case etc. With time and patience you get something very interesting.

OBS: The example is not perfect, and I tried to optimize to fit here in the site Snippet, is not fully responsive and aligned, but to have 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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.