CSS动画和Jquery2 [英] CSS animation and Jquery2
本文介绍了CSS动画和Jquery2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要帮助制作互动网站，类似于 briandelaney.com 。
我特别想要合并设计器使用的链接之间的幻灯片效果。我读他的代码，但我不熟悉Javascript，但熟悉Jquery。
点击链接时，我想滑动我的菜单。如何在这个输入后使用Javascript对CSS变换进行动画处理？我想要动画的代码部分是在JSFiddle。以下是动画的代码 http://jsfiddle.net/1pc4f081/3/ 。
< section>
< div class ='homecard'style =height：815px;> / *最初，菜单是页面中心的一张卡片。我想让这个滑动到页面的顶部当一个链接被点击* /
< div class =menu home appearid =mainmenu>
< ul>
< li class =hover-effect1> < a href =/ aboutclass =main-menu about-link>
< span class =effectdata-hover =关于>
< span class =what>
< span>关于< / span>
< / span>
< / span>
< / a>
< div class =border right>
< div>< / div>
< / div>
< / li>
< li class =hover-effect> < a href =/ servicesclass =main-menu service-link>
< span class =effectdata-hover =服务>
< span class =what>
< span>服务< / span>
< / span>
< / span>
< / a>
< div class =border right>
< div>< / div>
< / div>
< / li>
< li class =hover-effect 3> < a href =contactclass =main-menu contact-link>
< span class =effectdata-hover =Contact>
< span class =what>
< span>联系人< / 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：forward;
-wibkit-animation-duration：3s;
-webkit-animation-iteration-count：1;
-webkit-animation-timing-function：ease;
-webkit-animation-fill-mode：forward;
animation-duration：3s;
animation-timing-function：ease;
animation-fill-mode：forward;
}
@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'）;
}）;
解决方案
这是我的朋友的整个教程。
step - 1个完整的HTML结构元素
！DOCTYPE html>
< html>
< head>
< meta charset =UTF-8/>
< meta http-equiv =X -UA-Compatiblecontent =IE = edge，chrome = 1>
< title>< / title>
< meta name =viewportcontent = width name =descriptioncontent =/>
< meta name =width，height = device-height，initial-scale = 1.0，minimal-ui/> keywordscontent =/>
< meta name =authorcontent =/>
< link rel =shortcut iconhref =favicon.ico>
<！ - < link rel =stylesheettype =text / csshref =/> - >
< style>< / style>
< / head>
< body>
< header class =container text-center>
<！ - header content in here - >
< div class =row text-center>
<！ - row - >
< figure class =pull-left text-left>
<！ - Logo goes here - >
< img scr = />
< figcaption> abc< / figcaption>
< / figure>
< nav>
<！ - 导航菜单在这里 - >
< a data-hash = about> about< / a>
< a data-hash = work> work< / a>
< a data-hash = process>过程< / a>
< a data-hash = contact> contact< / a>
< / nav>
< div class = pull-right>
<！ - 社交菜单在这里 - >
< menu class = pull-left>
< li> 1< / li>
< li> 2< / li>
< li> 3< / li>
< / menu>
< / div>
< / div>
< / header>
< main class = container-fluid>
<！ - 页面内容在这里 - >
< 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 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}
step -3方法
step - 3.1 css方法
<！DOCTYPE html>< html> < head> < meta charset =UTF-8/> < meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1> < title>< / title> < meta name =viewportcontent =width = device-width，height = device-height，initial-scale = 1.0，minimal-ui/> < meta name =descriptioncontent =/> < meta name =keywordscontent =/> < meta name =authorcontent =/> < link rel =shortcut iconhref =favicon.ico> <！ - < link rel =stylesheettype =text / csshref =/> < 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- 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％;高度：100％; backface-visibility：hidden; will-change：opacity，top; transform：translate3d（0,0,0）; z-index：-1;不透明度：0; overflow-y：auto;过渡：不透明度0.3s轻松，前0.3s .1s轻松; } #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} 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 here here - > < div class =row text-center> <！ - row - > < figure class =pull-left text-left> <！ - Logo goes here - > < img scr = /> < figcaption> abc< / figcaption> < / figure> < nav> <！ - 导航菜单在这里 - > < 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>过程< / a>< / label> < label for = contactInput>< a data-hash = contact> contact< / a>< / label> < / nav> < div class = pull-right> <！ - 社交菜单在这里 - > < menu class = pull-left> < li> 1< / li> < li> 2< / li> < li> 3< / li> < / menu& < / div> < / div> < / header> < main class = container-fluid> <！ - 页面内容在这里 - > < 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方法
< snippet-code>
<！DOCTYPE html& < html> < head> < meta charset =UTF-8/> < meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1> < title>< / title> < meta name =viewportcontent =width = device-width，height = device-height，initial-scale = 1.0，minimal-ui/> < meta name =descriptioncontent =/> < meta name =keywordscontent =/> < meta name =authorcontent =/> < link rel =shortcut iconhref =favicon.ico> <！ - < link rel =stylesheettype =text / csshref =/> < 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- 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％;高度：100％; backface-visibility：hidden; will-change：opacity，top; transform：translate3d（0,0,0）; z-index：-1;不透明度：0; overflow-y：auto;过渡：不透明度0.3s，顶部0.3s .1s立方贝塞尔（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} section [data-content = contact] {background-color：purple}< / style> < / head> < body> < header class = container> <！ - header content goes here here - > < div class =row text-center> <！ - row - > < figure class = pull-left> <！ - Logo goes here - > < img scr = /> < figcaption> abc< / figcaption> < / figure> < nav> <！ - 导航菜单在这里 - > < a data-hash = about class = active> about< / a> < a data-hash = work> work< / a> < a data-hash = process>过程< / a> < a data-hash = contact> contact< / a> < / nav> < div class = pull-right> <！ - 社交菜单在这里 - > < menu class = pull-left> < li> 1< / li> < li> 2< / li> < li> 3< / li> < / menu> < / div> < / div> < / header> < main class = container-fluid> <！ - 页面内容在这里 - > < section class =container visibledata-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> //你需要这个来运行代码一旦窗口完全加载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
step - 3.3 Jquery
<！DOCTYPE html> < html> < head> < meta charset =UTF-8/> < meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1> < title>< / title> < meta name =viewportcontent =width = device-width，height = device-height，initial-scale = 1.0，minimal-ui/> < meta name =descriptioncontent =/> < meta name =keywordscontent =/> < meta name =authorcontent =/> < link rel =shortcut iconhref =favicon.ico> <！ - < link rel =stylesheettype =text / csshref =/> < 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- 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％;高度：100％; backface-visibility：hidden; will-change：opacity，top; transform：translate3d（0,0,0）; z-index：-1;不透明度：0; overflow-y：auto;过渡：不透明度0.3s轻松，前0.3s .1s轻松; } 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} section [data-content = contact] {background-color：purple}< / style> < / head> < body> < header class = container> <！ - header content goes here here - > < div class =row text-center> <！ - row - > < figure class = pull-left> <！ - Logo goes here - > < img scr = /> < figcaption> abc< / figcaption> < / figure> < nav> <！ - 导航菜单在这里 - > < a data-hash = about class = active> about< / a> < a data-hash = work> work< / a> < a data-hash = process>过程< / a> < a data-hash = contact> contact< / a> < / nav> < div class = pull-right> <！ - 社交菜单在这里 - > < menu class = pull-left> < li> 1< / li> < li> 2< / li> < li> 3< / li> < / menu> < / div> < / div> < / header> < main class = container-fluid> <！ - 页面内容在这里 - > < section class =container visibledata-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> //你需要这个来运行代码一旦窗口完全加载$（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>
$ c> ease function in transition：opacity 0.3s ease，top 0.3s .1s ease; c> elastic 。请查看 Ceaser - CSS缓动动画工具或缓冲函数备忘单
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');
});
解决方案
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
这篇关于CSS动画和Jquery2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
