CSS動畫和Jquery2
[英]CSS animation and Jquery2
問題描述
我需要建立一個類似於briandelaney.com的交互式網站的幫助。 我特別想在設計者使用的鏈接之間合並滑動效果。 我讀了他的代碼，但是我不太熟練使用Javascript，但是對Jquery很熟悉。
單擊鏈接后，我想滑動菜單。 輸入此后，如何用JavaScript為CSS轉換設置動畫？ 我要動畫化的代碼部分在JSFiddle上。 這是動畫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 個解決方案
解決方案1
2 2015-02-04 08:52:40
好吧，這是我朋友的整個教程。
步驟-1完整的HTML結構元素
<!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>
步驟-2 CSS結構
*{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}
步驟-3的方法
步驟-3.1 CSS方法
<!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>
步驟-3.2 JavaScript方法
<!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>
步驟-3.3 jQuery方法
<!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>
現在您可以更改transition: opacity 0.3s ease, top 0.3s .1s ease;的ease function transition: opacity 0.3s ease, top 0.3s .1s ease; 如您希望使它具有elastic 。 看看Ceaser-CSS輕松動畫工具或輕松 功能 備忘 單
解決方案2
1 2015-02-04 02:04:47
您可以稍后修改我的代碼以使用關鍵幀或任何您想要的東西，但是希望這可以至少對您有所幫助：
首先-修復您的js：
$(document).ready(function(){
$('.main-menu').click(function(event){
event.preventDefault();
$('.homecard').addClass('pushHeaderUp');
});
});
和CSS：
.pushHeaderUp{
-webkit-transform: translateY(240px);
-webkit-transition: -webkit-transform 3s ease;
}
通過在元素后附加html來導致jQuery2錯誤
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.