CSS animation and Jquery2

2020-05-06 17:32发布

站内问答 / JavaScript
1335 2 4

I need help making an interactive website, similar to briandelaney.com . I especially want to incorporate the slide effect between links that the designer used. I read his code but I am not fluent in Javascript, but am familiar with Jquery.

I want to slide my menu when a link is clicked. How do I animate the CSS transforms with Javascript after this input? The section of code I want animated is on JSFiddle. Here's the code for the animation http://jsfiddle.net/1pc4f081/3/.

<section>
<div class='homecard' style="height:815px;">/* Initially, the menu is a card in the center of the page. I want this to slide to the top of the page when a link is clicked */
    <div class="menu home appear" id="mainmenu">
        <ul>
            <li class="hover-effect1">  <a href="/about" class="main-menu about-link">
                        <span class="effect" data-hover="About">
                            <span class="what">
                                <span> About</span>
                            </span>
                        </span>
                    </a>

                <div class="border right">
                    <div></div>
                </div>
            </li>
            <li class="hover-effect">   <a href="/services" class="main-menu service-link">
                            <span class="effect" data-hover="Services">
                                <span class="what">
                                    <span> Services</span>
                                    </span>
                                    </span>
                                    </a>

                <div class="border right">
                    <div></div>
                </div>
            </li>
            <li class="hover-effect 3"> <a href="contact" class="main-menu contact-link">
                            <span class="effect" data-hover="Contact">
                                <span class="what">
                                    <span> Contact</span>
                                    </span>
                                    </span>
                                    </a>

            </li>
        </ul>
    </div>
</div>

css:

.homecard {
-webkit-animation-name: pushHeaderUp;
-moz-animation-name:pushHeaderUp;
animation-name:pushHeaderUp;
-moz-animation-duration:3s;
-moz-animation-iteration-count:1;
-moz-animation-timing-function:ease;
-moz-animation-fill-mode:forwards;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function:ease;
-webkit-animation-fill-mode: forwards;
animation-duration:3s;
animation-timing-function:ease;
animation-fill-mode: forwards;

}

@keyframes pushHeaderUp {
0% {
    -webkit-transform:translateY(0px);
    transform:translateY(0px);
    -moz-transform:transloateY(0px)
}
60% {
    -webkit-transform:translateY(-180px);
    transform:translateY(180px);
    -moz-transform:translateY:(-180px)
}
100% {
    -webkit-transform:translateY(-240px);
    transform:translateY(-240px);
    -moz-transform:translateY(-240px)
}

}

JS

$(document).ready(function () {
$('.main-menu').click(function () {
    $('.homecard').addClass('.pushHeaderUp');
});

2条回答
乱世女痞
2楼-- · 2020-05-06 17:48

Well that is a whole tutorial my friend.

step - 1 Full HTML structural elements

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title></title>
        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="" />
        <link rel="shortcut icon" href="favicon.ico">
        <!--<link rel="stylesheet" type="text/css" href="" />-->
        <style></style>
      </head>

      <body>

        <header class="container text-center">
          <!-- header content goes in here -->
          <div class="row text-center" >
            <!-- row -->
            <figure class="pull-left text-left">
              <!-- Logo goes here -->
              <img scr= />
              <figcaption>abc</figcaption>
            </figure>
            <nav>
              <!-- navigation menu goes in here -->
               <a data-hash=about>about</a>
               <a data-hash=work>work</a>
               <a data-hash=process>process</a>
               <a data-hash=contact>contact</a>
            </nav>
            <div class=pull-right>
              <!-- social menu goes in here -->
              <menu class=pull-left>
                <li>1</li>
                <li>2</li>
                <li>3</li>
              </menu>
            </div>
          </div>
        </header>

        <main class=container-fluid>
          <!-- Page layers content goes in here -->
          <section  class=container data-content=about>
            <article class=row></article>
          </section>
          <section  class=container data-content=work>
            <article class=row></article>
          </section>
          <section  class=container data-content=process>
            <article class=row></article>
          </section>
          <section  class=container data-content=contact>
            <article class=row></article>
          </section>
        </main>

      </body>
    </html>

step - 2 The css structure

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

      :root{width: 100vw; height: 100wh}
      .container{width: 100%}
      .row{width: 960px; margin: 0 auto}

      .text-left{text-align: left}
      .text-center{text-align: center}
      .text-right{text-align: right}

      .pull-left{float: left}
      .pull-right{float: right}

      nav a, menu li{display: inline}

      main{
           position: fixed; 
           top: 50px; 
           left: 0; 
           right: 0; 
           bottom: 0;
           overflow: hidden
      }
      main section.container{
           position: absolute;
           top: 100vh;
           left:0;
           width: 100%;
           height: 100%;
           backface-visibility: hidden;
           will-change: opacity, top;
           transform: translate3d(0,0,0);
           z-index:-1;
           opacity: 0;
           overflow-y: auto;
           transition: opacity 0.3s ease, top 0.3s .1s ease;
      }
      main section.container.visible{
           opacity: 1;
           z-index:1;
           top: 0;
      } 
      main section[data-content=about]{background-color: green}
      main section[data-content=work]{background-color:red}
      main section[data-content=process]{background-color:yellow}
      main section[data-content=contact]{background-color:purple}

step -3 The approach

step - 3.1 the css approach

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title></title>
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <link rel="shortcut icon" href="favicon.ico">
    <!--<link rel="stylesheet" type="text/css" href="" />-->
    <style>
      *{box-sizing: border-box; padding: 0; margin: 0}

      :root{width: 100vw; height: 100wh}
      .container{width: 100%}
      .row{width: 960px; margin: 0 auto}

      .text-left{text-align: left}
      .text-center{text-align: center}
      .text-right{text-align: right}

      .pull-left{float: left}
      .pull-right{float: right}

      nav a, menu li, nav label{display: inline; margin: 4px}
      nav a.active{color:red}
      main{
           position: fixed; 
           top: 50px; 
           left: 0; 
           right: 0; 
           bottom: 0;
           overflow: hidden
      }
      main section.container{
           position: absolute;
           top: 100vh;
           left:0;
           width: 100%;
           height: 100%;
           backface-visibility: hidden;
           will-change: opacity, top;
           transform: translate3d(0,0,0);
           z-index:-1;
           opacity: 0;
           overflow-y: auto;
           transition: opacity 0.3s ease, top 0.3s .1s ease;
      }
      #aboutInput:checked ~ header nav label[for=aboutInput] a,
      #workInput:checked ~ header nav label[for=workInput] a,
      #processInput:checked ~ header nav label[for=processInput] a,
      #contactInput:checked ~ header nav label[for=contactInput] a,
      main section.container.visible{
           color: red
      }
      #aboutInput:checked ~ main section[data-content=about],
      #workInput:checked ~ main section[data-content=work],
      #processInput:checked ~ main section[data-content=process],
      #contactInput:checked ~ main section[data-content=contact],
      main section.container.visible{
           opacity: 1;
           z-index:1;
           top: 0;
      } 
      main section[data-content=about]{background-color: green}
      main section[data-content=work]{background-color:red}
      main section[data-content=process]{background-color:yellow}
      main section[data-content=contact]{background-color:purple}
    </style>
  </head>

  <body>
    <input type=radio name=radio id=aboutInput checked hidden/>
    <input type=radio name=radio id=workInput hidden/>
    <input type=radio name=radio id=processInput hidden/>
    <input type=radio name=radio id=contactInput hidden/>

    <header class="container text-center">
      <!-- header content goes in here -->
      <div class="row text-center" >
        <!-- row -->
        <figure class="pull-left text-left">
          <!-- Logo goes here -->
          <img scr= />
          <figcaption>abc</figcaption>
        </figure>
        <nav>
          <!-- navigation menu goes in here -->
           <label for=aboutInput><a data-hash=about>about</a></label>
           <label for=workInput><a data-hash=work>work</a></label>
           <label for=processInput><a data-hash=process>process</a></label>
           <label for=contactInput><a data-hash=contact>contact</a></label>
        </nav>
        <div class=pull-right>
          <!-- social menu goes in here -->
          <menu class=pull-left>
            <li>1</li>
            <li>2</li>
            <li>3</li>
          </menu>
        </div>
      </div>
    </header>

    <main class=container-fluid>
      <!-- Page layers content goes in here -->
      <section  class=container data-content=about>
        <article class=row></article>
      </section>
      <section  class=container data-content=work>
        <article class=row></article>
      </section>
      <section  class=container data-content=process>
        <article class=row></article>
      </section>
      <section  class=container data-content=contact>
        <article class=row></article>
      </section>
    </main>

  </body>
</html>

step - 3.2 Javascript approach

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title></title>
        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="" />
        <link rel="shortcut icon" href="favicon.ico">
        <!--<link rel="stylesheet" type="text/css" href="" />-->
    <style>
      *{box-sizing: border-box; padding: 0; margin: 0}

      :root{width: 100vw; height: 100wh}
      .container{width: 100%}
      .row{width: 960px; margin: 0 auto}

      .text-left{text-align: left}
      .text-center{text-align: center}
      .text-right{text-align: right}

      .pull-left{float: left}
      .pull-right{float: right}

      nav a, menu li, nav label{display: inline; margin: 4px}
      nav a.active{color: red}
      main{
           position: fixed; 
           top: 50px; 
           left: 0; 
           right: 0; 
           bottom: 0;
           overflow: hidden
      }
      main section.container{
           position: absolute;
           top: 100vh;
           left:0;
           width: 100%;
           height: 100%;
           backface-visibility: hidden;
           will-change: opacity, top;
           transform: translate3d(0,0,0);
           z-index:-1;
           opacity: 0;
           overflow-y: auto;
           transition: opacity 0.3s ease, top 0.3s .1s cubic-bezier(0.385, -0.600, 0.610, 1.555);
      }
      main section.container.visible{
           opacity: 1;
           z-index:1;
           top: 0;
      } 
      main section[data-content=about]{background-color: green}
      main section[data-content=work]{background-color:red}
      main section[data-content=process]{background-color:yellow}
      main section[data-content=contact]{background-color:purple}
    </style>
    </head>
    
    <body>
    
      <header class=container>
             <!-- header content goes in here -->
             <div class="row text-center" >
                  <!-- row -->
                  <figure class=pull-left>
                          <!-- Logo goes here -->
                         <img scr= />
                         <figcaption>abc</figcaption>
                  </figure>
                  <nav>
                      <!-- navigation menu goes in here -->
                      <a data-hash=about class=active>about</a>
                      <a data-hash=work>work</a>
                      <a data-hash=process>process</a>
                      <a data-hash=contact>contact</a>
                  </nav>
                  <div class=pull-right>
                      <!-- social menu goes in here -->
                      <menu class=pull-left>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                      </menu>
                  </div>
             </div>
      </header>
    
      <main class=container-fluid>
             <!-- Page layers content goes in here -->
             <section  class="container visible" data-content=about>
                      <article class=row></article>
             </section>
             <section  class=container data-content=work>
                      <article class=row></article>
             </section>
             <section  class=container data-content=process>
                      <article class=row></article>
             </section>
             <section  class=container data-content=contact>
                      <article class=row></article>
             </section>
      </main>
    
     <script>
            //You need this to run the code once the window has fully loaded 
            window.addEventListener('load', function(event) {
              function returnDataHash () {
                   var navAnchors = document.querySelectorAll("nav a"),
                       dataHash = this.getAttribute("data-hash"),
                       hashSection = "data-content=" + dataHash,
                       sectionContainer = document.querySelector("["+ hashSection +"]"),
                       sectionContainers = document.querySelectorAll("main section.container");
                   
                   for ( var j = 0; j < sectionContainers.length; j++) {
                       sectionContainers[j].classList.remove("visible");
                   }
                   for ( var y = 0; y < navAnchors.length; y++) {
                       navAnchors[y].classList.remove("active");
                   }
                   sectionContainer.classList.add("visible");
                   this.classList.add("active");
              }
              //main section.container.visible
              var navElements = document.querySelectorAll("nav a");
              
              for (var i = 0; i < navElements.length; i++) {
                   navElements[i].addEventListener("click", returnDataHash ,false)
              }
            }, false)
     </script>
    </body>
    </html>

step - 3.3 Jquery approach

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title></title>
        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimal-ui" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="" />
        <link rel="shortcut icon" href="favicon.ico">
        <!--<link rel="stylesheet" type="text/css" href="" />-->
    <style>
      *{box-sizing: border-box; padding: 0; margin: 0}

      :root{width: 100vw; height: 100wh}
      .container{width: 100%}
      .row{width: 960px; margin: 0 auto}

      .text-left{text-align: left}
      .text-center{text-align: center}
      .text-right{text-align: right}

      .pull-left{float: left}
      .pull-right{float: right}

      nav a, menu li, nav label{display: inline; margin: 4px}
      nav a.active{color: red}
      main{
           position: fixed; 
           top: 50px; 
           left: 0; 
           right: 0; 
           bottom: 0;
           overflow: hidden
      }
      main section.container{
           position: absolute;
           top: 100vh;
           left:0;
           width: 100%;
           height: 100%;
           backface-visibility: hidden;
           will-change: opacity, top;
           transform: translate3d(0,0,0);
           z-index:-1;
           opacity: 0;
           overflow-y: auto;
           transition: opacity 0.3s ease, top 0.3s .1s ease;
      }
      main section.container.visible{
           opacity: 1;
           z-index:1;
           top: 0;
      } 
      main section[data-content=about]{background-color: green}
      main section[data-content=work]{background-color:red}
      main section[data-content=process]{background-color:yellow}
      main section[data-content=contact]{background-color:purple}
    </style>
    </head>
    
    <body>
    
      <header class=container>
             <!-- header content goes in here -->
             <div class="row text-center" >
                  <!-- row -->
                  <figure class=pull-left>
                          <!-- Logo goes here -->
                         <img scr= />
                         <figcaption>abc</figcaption>
                  </figure>
                  <nav>
                      <!-- navigation menu goes in here -->
                      <a data-hash=about class=active>about</a>
                      <a data-hash=work>work</a>
                      <a data-hash=process>process</a>
                      <a data-hash=contact>contact</a>
                  </nav>
                  <div class=pull-right>
                      <!-- social menu goes in here -->
                      <menu class=pull-left>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                      </menu>
                  </div>
             </div>
      </header>
    
      <main class=container-fluid>
             <!-- Page layers content goes in here -->
             <section  class="container visible" data-content=about>
                      <article class=row></article>
             </section>
             <section  class=container data-content=work>
                      <article class=row></article>
             </section>
             <section  class=container data-content=process>
                      <article class=row></article>
             </section>
             <section  class=container data-content=contact>
                      <article class=row></article>
             </section>
      </main>
      <script src=https://code.jquery.com/jquery-2.1.3.min.js ></script>
      <script>
        // You need this to run the code once the window has fully loaded 
        $( document ).ready(function() {
            $("nav a").click( function () {
                var dataHash = $(this).attr("data-hash");
              
                $(this).addClass("active").siblings().removeClass("active");
                $("main section[data-content=" + dataHash + "]").addClass("visible").siblings().removeClass("visible");
              
            })
        });
     </script>
    </body>
    </html>

Now you can change the ease function in transition: opacity 0.3s ease, top 0.3s .1s ease; as you like to make it elastic. Have a look at Ceaser - CSS Easing Animation Tool or Easing Functions Cheat Sheet

查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
3楼-- · 2020-05-06 17:58

You can fix my code later to use key frames or whatever you want, but a hope that this can help you at least a little bit:

First of all - fix your js:

$(document).ready(function(){
    $('.main-menu').click(function(event){
        event.preventDefault();
        $('.homecard').addClass('pushHeaderUp');
    });
});

And css:

.pushHeaderUp{
    -webkit-transform: translateY(240px);
    -webkit-transition: -webkit-transform 3s ease;
}

http://jsfiddle.net/1pc4f081/5/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)