Preloader for the site?

  • 0
    Good time.
    You need to make a preloader.
    1 light background
    2 against this background swing door
    3 upper text text logo.
    4 lower text Discover perfection
    5 without delay, the text approaches the user and dissolves
    6 doors open at this time
    7 with the effect that the user allegedly flies inside
    3D is probably what it's called.
    8 and during all these actions all elements dissolve.
    Question. I'm not good at js and can't do 5 and 7 points. I searched the internet but can't find it. If there are examples where a similar application is used or an article you can tell I can not find. Thank you very much for your reply.
    JavaScript Emma Bautista, Apr 28, 2020

  • 2 Answers
  • 0
    I'm pretty sure you can do without js here. CSS needs to handle lightweight. Try @ keyframes and play around with the scale and opacity of the door and logo at certain points. It seems to me that this will help achieve the goal of "getting closer to the user".

    The opening door is also in the same way, but with the help of translate somehow

  • 0
    You need to find / draw a picture with the animation of the door opening, and do something like that

    In the example, the animation starts on mouse hover, in the preloader it is better to add a rule that applies the style at the end of the preloader body - the style block before & lt; / body & gt; ... Or javascript timeout.

    Yes, scale will be smarter than setting the size if the picture at high magnification does not look clumsy. If the picture is drawn, it may be more correct to specify the size in pixels.

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!