This is the 12th day of my participation in the August Text Challenge.More challenges in August

Author: battleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if need to be reproduced can contact the author authorized

background

Rotary navigation animation: refers to the beginning to hide the navigation bar, click on the icon at the upper left, article 30 degrees rotation to the right, then the navigation bar into a triangular revealed an animation effect, the effect is very small, basic not adopted by the corporate world, but in some aspects such as blog, BBS, and personal page or as something different. advantages

  1. Save space
  2. Animation is novel

disadvantages

  1. Hidden user bar, so that users use less convenient
  2. It’s too flashy to focus on the content of the article

The final result

Import the font awesome icon library

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
Copy the code

Add HTML files

<div class="container">
    <div class="circle-container">
        <div class="circle">
            <button id="close">
                <i class="fas fa-times"></i>
            </button>
            <button id="open">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </div>

    <div class="content">
        <h1>Amazing Article</h1>
        <small>Wikipedia</small>
        <p>The giant panda,also known as the panda, is a bear native to South Central China.The giant panda lives in
            a few mountain ranges in central China, mainly in Sichuan, but also in neighbouring Shaanxi and Gansu.
            It is characterised by its bold black-and-white coat and rotund body. The name "giant panda" is
            sometimes used to distinguish it from the red panda, a neighboring musteloid. Though it belongs to the
            order Carnivora, the giant panda is a folivore, with bamboo shoots and leaves making up more than 99% of
            its diet. Giant pandas in the wild will occasionally eat other grasses, wild tubers, or even meat in the
            form of birds, rodents, or carrion. In captivity, they may receive honey, eggs, fish, yams, shrub
            leaves, oranges, or bananas.</p>

        <h3>Giant panda</h3>
        <img src="https://cdn.pixabay.com/photo/2019/09/08/19/54/panda-4461766_960_720.jpg" alt="panda" />
        <p>While the dragon has often served as China's national symbol, internationally the giant panda has often
            filled this role. As such, it is becoming widely used within China in international contexts, for
            example, appearing since 1982 on gold panda bullion coins and as one of the five Fuwa mascots of the
            Beijing Olympics.In July 2021, Chinese authorities also reclassified the giant panda as vulnerable
            rather than endangered.</p>
    </div>
</div>

<nav>
    <ul>
        <li><i class="fas fa-home"></i> Home</li>
        <li><i class="fas fa-user"></i> About</li>
        <li><i class="fas fa-envelope"></i> Contact</li>
    </ul>
</nav>
Copy the code

Add the CSS file

Initialize the page first

  1. Set up the* 为 box-sizing: border-box
  2. Set up thebodyKeep the whole project centered
* {
    box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif;
    background-color: # 333;
    color: # 222;
    overflow-x: hidden;
    margin: 0;
}
Copy the code

The main CSS code

  1. The core codeIs to set up aCircular wheel buttonforswitchRotation operation
  2. throughtransform: rotate();To achieve the rotation operation
.container {
    background-color: #fafafa;
    transform-origin: top left;
    transition: transform 0.5 s linear;
    width: 100vw;
    min-height: 100vh;
    padding: 50px;
}

.container.show-nav {
    transform: rotate(-20deg);
}

.circle-container {
    position: fixed;
    top: -100px;
    left: -100px;
}

.circle {
    background-color: #ff7979;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    position: relative;
    transition: transform 0.5 s linear;
}

.container.show-nav .circle {
    transform: rotate(-70deg);
}

.circle button {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    background: transparent;
    border: 0;
    font-size: 26px;
    color: #fff;
}

.circle button:focus {
    outline: none;
}

.circle button#open {
    left: 60%;
}

.circle button#close {
    top: 60%;
    transform: rotate(90deg);
    transform-origin: top left;
}

.container.show-nav+nav li {
    transform: translateX(0);
    transition-delay: 0.3 s;
}

nav {
    position: fixed;
    bottom: 40px;
    left: 0;
    z-index: 100;
}

nav ul {
    list-style-type: none;
    padding-left: 30px;
}

nav ul li {
    text-transform: uppercase;
    color: #fff;
    margin: 40px 0;
    transform: translateX(-100%);
    transition: transform 0.4 s ease-in;
}

nav ul li i {
    font-size: 20px;
    margin-right: 10px;
}

nav ul li+li {
    margin-left: 15px;
    transform: translateX(-150%);
}

nav ul li+li+li {
    margin-left: 30px;
    transform: translateX(-200%);
}

.content img {
    max-width: 100%;
}

.content {
    max-width: 1000px;
    margin: 50px auto;
}

.content h1 {
    margin: 0;
}

.content small {
    color: # 555;
    font-style: italic;
}

.content p {
    color: # 333;
    line-height: 1.5;
}
Copy the code

4. Add JS files

The main logic

  1. throughdocument.getElementById('open')To obtainID name 为 openThe nodes of the
  2. throughdocument.getElementById('close')To obtainID name 为 closeThe nodes of the
  3. throughdocument.querySelector('.container')To obtainThe name of the class 为 containerThe nodes of the
  4. throughopen.addEventListener('click', () => container.classList.add('show-nav'))To helpopenIs bound to a nodeClick on the event, and thenID name 为 openAdd a node to theshow-navThe name of the class
  5. throughclose.addEventListener('click', () => container.classList.remove('show-nav'))To helpcloseIs bound to a nodeClick on the event, and thenID name 为 openRemoves a node from theshow-navThe name of the class
const open = document.getElementById('open')
const close = document.getElementById('close')
const container = document.querySelector('.container')

open.addEventListener('click'.() = > container.classList.add('show-nav'))

close.addEventListener('click'.() = > container.classList.remove('show-nav'))
Copy the code

❤️ thank you

If this article is helpful to you, please support it by clicking a “like”. Your “like” is my motivation for writing.

If you like this article, you can “like” + “favorites” + “forward” to more friends.