Weekly Skill Tree Lighting: CSS + JS Lighting Halloween pumpkin (additional: CSS positioning mechanism sorting)

When writing a project in electron frame, I needed to use the element-UI component library, so I opened the official interface of Element-UI. I wanted to browse the available components, but I was attracted by the new screen sliding effect on the first page of the Element-UI manual. The effect of the picture turning from blue to red with the page scrolling made me feel very interesting, so I wrote this blog to analyze the principle behind and my idea of manual implementation

Keywords: rolling trigger, element height dynamic control, CSS positioning mechanism sorting

Preview of official website effect

To analyze

🤔 As we scroll, the image changes from blue to red as we scroll:

1. The height of the red image is proportional to the distance visible to the naked eye from the top of the page to the top of the window

2. At the same time, the color changes of the pictures are perfectly connected, so the positions of the two pictures should be completely coincident, but the blue picture is covered by the hidden red picture with scrolling

Combined with the above analysis, we can summarize the corresponding requirements and corresponding knowledge and skill points behind the completion of such an eye-catching dynamic effect:

1. HTML level: we can use a big box to cover the blue picture + red picture box (red box inside the structure of the red picture) to control the overlap of the two pictures

2. CSS level: In order to achieve overlap, we set the position attribute of the big box as relative and the position attribute of the red picture box as absolute. Since the absolute element is removed from the normal document flow, the surrounding elements ignore it and the red image box overlaps with the blue image of the same level. At the same time, both top and left attributes are assigned 0 to achieve perfect overlap of the two images.

3. Js level: Use the ONScroll event in THE HTML DOM event to trigger the assignment function when the window element (i.e. window) is rolling, so that the height of the red box is equal to the height between the root node of the document and the top of the window, so as to achieve the gradient effect

Light up the pumpkin effect display

Here I use the small pumpkin gray and small pumpkin color instead of the above blue and red pictures to achieve effect reproduction. The color picture box corresponds to the red picture box above.

My code implementation

HTML part

<div class="container">

    <h3 class="title">Implementation effect</h3>

    <div id="jumbotron">

        <img src="./grey.png" alt="Gray" id="grey-img">

        <div id="jumbotron-colorful" style="height:0px">

            <img src="./colorful.png" alt="Color" id="colorful-img">

        </div>

    </div>

</div>
Copy the code

The CSS part

body {

    height: 1500px;
    background: # 000;
}

.container {

    margin: 100px auto;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.title {

    color: #fff;

}
/* The position attribute is relative */
#jumbotron {

    width: 300px;

    position: relative;

}
/* Make both images fill their parent containers */
#jumbotron img.#jumbotron-colorful img {

    width: 100%;

}

/* The color box position attribute is absolute, and the left and top attributes are 0 to achieve the color box overflow: property value is hidden to achieve overflow hidden */
#jumbotron-colorful {

    transition: height 0.1 s;

    background: # 000;

    position: absolute;

    left: 0;

    top: 0;

    overflow: hidden;

}
Copy the code

Js part

// Get the color box by id and encapsulate it into a variable for subsequent operation
const colorfulBox = document.getElementById("jumbotron-colorful");

let imgHeight = 0;

// We need to use the onScroll event in the HTML DOM event to execute subsequent js while the window element is scrolling
window.onscroll = function () {
    let scrolltop = null;
    // We need to use the HTML DOM documentElement property (the document root) and get the scrollTop property (the distance between the root and the top of the window).
    scrolltop = document.documentElement.scrollTop;
   // Make the height of the box equal to scrollTop to achieve the desired effect
    colorfulBox.style.height = scrolltop + 'px';
}
Copy the code

CSS positioning mechanism tidy up (knock on your own blackboard)

CSS Location Mechanism

Before we sort through the positioning properties, let’s take a look at what CSS positioning is. According to w3c:

The CSS provides three basic positioning mechanisms: normal flow, float, and Position: Absolute /fixed.

Unless specified, all boxes are positioned in normal flow. That is, the position of an element in a normal stream is determined by its position in (X)HTML.

According to my understanding and query, the ordinary flow mentioned here is the normal document flow. Document flow refers to the arrangement rule of all elements in the document flow automatically from left to right (non-block-level elements) and from top to bottom (block-level elements) during the calculation and layout of HTML elements.

[note: Div, H1, or P elements are often referred to as block-level elements, which means they are displayed as a piece of content, called a “block box” (that is, one block at a time from top to bottom). In contrast, elements such as SPAN and strong are called inline elements because their content is displayed in lines, called inline boxes (arranged one by one from left to right).

Block-level boxes are arranged one after another from top to bottom, and the vertical distance between the boxes is calculated by the vertical margins of the boxes.

Inline boxes are arranged horizontally in a row. You can adjust their spacing using horizontal inner margins, borders, and margins. However, vertical inner margins, borders, and margins do not affect the height of inline frames. A horizontal Box formed by a row is called a Line Box, and a Line Box is always tall enough to hold all the inline boxes it contains. However, setting the line height can increase the height of the box. 】

Relative positioning

Boxes set to relative orientation are offset by a certain distance. The element remains the shape it was before it was positioned, and the space it originally occupied remains. If an element is positioned relative to it, it will appear at its location. The element can then be moved “relative” to its starting point by setting its vertical or horizontal position.

If you set top to 20px, the box will be 20 pixels below the top of the original position. If left is set to 30 pixels, a space of 30 pixels is created to the left of the element, which moves the element to the right.

floating

Because float uses less, reason arranges no longer two times, need can refer to the following article

W3c positioning floating friend chain details

Absolute positioning

Absolute positioning makes the position of an element independent of the document flow and therefore does not take up space. This is different from relative positioning, which is actually considered part of the normal flow positioning model because the element’s position is relative to its position in the normal flow. The rest of the elements in a normal flow are laid out as if absolutely positioned elements did not exist:

All CSS positioning properties

! Note: Internet Explorer, Edge 15, and earlier versions do not support sticky targeting. Safari requires the -webkit- prefix (see example below). You must also specify at least one of top, right, bottom, or left for sticky positioning. Play a role.

W3c location attribute details friend chain

I feel good about the relevant analysis of other bloggers

Blogger seven, month: document flow and text flow in HTML

Read this article and the comments section, and try it yourself: give detailed examples of different situations (such as when the parent element has different box-sizing or position attributes)

Xiaobing_hope: Position: Absolute Details

Next time the skill tree will be spotted

٩ (๑ > ◡ < ๑) ۶ finally! Lighting up the skill tree this time: CSS positioning arrangement, while analyzing the effect of personal feel a flash in the eye. Flex layout + CSS animation login effects ~! See you next time, hopefully not too far away 👋🏻