Review of front-end assessment tasks——Spirited Away Introduction Webpage (can be used as an entry-level practice project)

    Introduction

    When sorting out the files, I found a round of assessment projects when I entered the studio as a freshman. At that time, I only learned the front-end for more than a month. The code writing had many shortcomings, but I still missed it so I reviewed and improved it. This webpage is about the movie about Spirited Away. The design and writing of the webpage are all done by me, and the soundtrack is performed by myself. It can be used as homework for elective courses such as web design.

    video demo

    PS:只有使用翻墙软件才可查看视频

    Partial display of the page

    code brief

    1. This webpage mainly uses HTML+CSS, and JS is used for the carousel part, and a JS encapsulation demo for manually realizing the carousel is uploaded
    2. The principle of js to realize the carousel map is mainly encapsulated with animation functions (the position of the box is constantly moved through the timer setInterval(), the function needs to pass 2 parameters, the animation object and the distance moved, and a callback function can be passed or not) +Dynamically generate a small circle and set the index, click on a small circle, let the picture scroll (the scrolling is the ul of the picture) multiply the index number of the small circle by the distance of the picture width, note that the width of the ul is the picture width * (picture Number of sheets + 1), because the next image of the last image needs to be cloned into the first image to form a cycle
    3. The carousel image of the first version of this web page is written in css (in fact, it is not a carousel image, click the button to jump to the corresponding image). There are comments in the code how to realize two carousel images.
    4. The effect of the carousel at the top of this web page is mainly achieved by CSS3 perspective, rotation, and animation properties, and the page animation has made some compatibility
    5. The main character part is a flex layout, which has a certain page response effect
    6. The hidden easter eggs are mainly hover plus new css3 attributes

    It has been three years since this assessment, and the sense of accomplishment when I made the first page of my own is still fresh in my memory. I hope that I can continue to go further and further on this road with my love for the front end. Interested friends can go to github to download the code of this page

    download link

    Github The package file of the carousel map is also uploaded.

    Popular posts from this blog

    大学资料分享——广工计院各个科目实验报告、课设及期末复习资料!!

    Win10 远程计算机或设备将不接受连接

    JAVA Traffic Signal Light Course Design (Source Code + Report + Video Demonstration)

    Implementation of Ajax Interceptor