CSS animation and 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');
});
好吧，
这是一个完整的教程，我的朋友。
步骤 - 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，使其elastic。看看 停止者 - CSS 缓动动画工具或缓动函数备忘单
您可以稍后修复我的代码以使用关键帧或任何您想要的内容，但希望这至少可以帮助您：
首先 - 修复你的 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;
}
http://jsfiddle.net/1pc4f081/5/
相关文章：
- Selenium WebDriver and JavaScript change
- PHP and Javascript functions
- Javascript Return and if/else
- SetTimeout and clearTimeout in Javascript
- lightbox in html 5 and javascript
- TimelineJS and AngularJS
- timeago.js with datatable and PHP
- javascript button ajax and php
- Ajax and Json with Rails
- Combine onload, onresize and onclick
- php布尔值's小写AND大写和数字布尔值'可以接受
- setTimeout and V8
- Jquery post and onclick
- Moment js and IOS
- Rails 3.2 and Paloma gem
- Backbone, TypeScript, and super
- iframe and JavaScript on different pages
- JSON and jQuery Search
- Flash and External Javascript
- CSS animation and Jquery2
