Make the official website of the enterprise website with scrolling parallax effect

In modern web design, the Parallax Scrolling effect has become a popular design trend, which can bring movement and attractiveness to the website. Scrolling parallax creates a sense of three-dimensionality and depth by creating differential scrolling speeds between elements at different levels, allowing users to experience a more vivid visual experience when scrolling pages. This article will teach you how to use the scrolling parallax effect to make a corporate website official website.

1. Preparations

First, we need to prepare the structure and content of the website. In this example, we'll use a set of scrolling parallax effects for the image and text sections, and a bottom footer. The entire website will be divided into multiple sections, each with a different background image and text content.

2. Create the basic structure

In the HTML file, we first create the basic page structure. Use to <!DOCTYPE html>declare the document type, and set lang="en"the property to specify the language of the page. Then, use <meta>the tag to set the charset and viewport.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>企业网站官网</title>
</head>
<body>
    <!-- 网站内容 -->
</body>
</html>

3. Add scrolling parallax effect

3.1 Setting the global style

In the CSS file, we first set the global style. marginSet and paddingto 0 for all elements , and use to box-sizing: border-boxmake the element's width and height include content and border. Additionally, we set bodythe overflow-xof hiddento prevent horizontal scrollbars from appearing on the page.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

3.2 Elements for creating scrolling parallax effects

Next, we create elements with a scrolling parallax effect. In the HTML file, use multiple <section>elements to represent different parts of the website, and set the corresponding ID and class name. For a background image that requires a scrolling parallax effect, we can use <section>an element with a different background image and add imgthe class to it.

<div class="container">
    <section id="img-one" class="img">
        <h1>TIME</h1>
    </section>
    <!-- 其他内容部分 -->
    <section id="img-two" class="img">
        <h1>THOUGHTS</h1>
    </section>
    <section id="footer">FOOTER</section>
</div>

3.3 Add styles

In order to achieve the scrolling parallax effect, we need to set the corresponding styles in the CSS file. <section>First, we set common styles for all elements, including color, font size, alignment, etc. To achieve the scrolling parallax effect, we use background-attachment: fixedto make the background image fixed, and background-size: coverto make the background image adaptively fill the entire element.

section,
#footer {
    height: 100vh;
    position: relative;
    color: rgba(255, 255, 255, .8);
    font-size: 10vh;
    font-family: 'modern_no._20regular', serif;
    text-shadow: 4px 4px rgb(46, 43, 43);
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    user-select: none;
}

Next, we set a different background image for each background image section with scrolling parallax effect.

#img-one {
    background-image: url(./img/img2.jpg);
}

#img-two {
    background-image: url(./img/img4.jpg);
}

3.4 Add text content

Finally, we add text content to each section. We use a background-colored and beveled <div>element as a container for the text, and add headings and paragraphs to it. To achieve the bevel effect, we use to transform-originset the base point of the transformation, and use to transform: skew(0, -8deg)perform the bevel in the horizontal direction.

.text-box {
    /* 其他样式 */
    background-color: rgba(0, 0, 0, .3);
    transform-origin: center bottom;
    transform: skew(0, -8deg);
}

.text-box .cnt {
    /* 其他样式 */
    transform-origin: right bottom;
    transform: skew(0, 8deg);
}

4. Add a footer

Finally, we add a bottom footer. Set its background color and font size, and display it in the center.

#footer {
    background-color: #c0b5aa;
    height: 50vh;
    color: #fff;
    font-size: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

5. Complete and present

Through the above steps, we have successfully created a corporate website official website with a scrolling parallax effect. The scrolling parallax effect makes the website more dynamic and attractive, providing users with a more vivid visual experience. You can adjust the text content, background image and style according to actual needs to create a unique corporate website official website.

Welcome everyone to star to the original author~

Source code source: GitHub - BlueSgler/myLogin