【发布时间】：2016-04-03 10:05:28
【问题描述】：
我想为网站创建 CSS 或 JS 动画。但我不知道如何编码。动画很难解释，这就是为什么我创建了一个小 gif 动画以便更好地理解。
http://abload.de/img/animationxep49.gif
//编辑：我的主要问题是我在示例中说明的从白色到黑色的过渡。有人知道这个的解决方案吗？
这是我没有动画的代码：
/* Responsive Navigation */
$(document).ready(function(){
$('#toggle').on('click', function(e){
e.preventDefault();
$('nav ul').slideToggle();
});
});
$(window).on('resize', function () {
if (window.matchMedia('(min-width: 860px)').matches) {
$('nav ul').show();
}
else {
$('nav ul').hide();
}
});
/* Allgemeines */
html, body {
margin: 0px;
padding: 0px;
color: #0a0a0a;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
height: 100%;
}
h1, h2, h3, h4, h5, h6{
font-family: 'Playfair Display', serif;
font-weight: 400;
}
h1 {
font-size: 100px;
font-size: 7.14rem;
text-align: center;
line-height: 1.2;
}
a {
transition: 0.3s;
}
a:hover {
color: #717171;
}
a:active {
font-weight: 700;
}
/* Spezifisch */
.logo {
float: left;
padding-top: 6px;
padding-left: 15px;
}
.logo a{
text-decoration: none;
color: #0a0a0a;
font-size: 22px;
font-size: 1,57rem;
font-family: 'Playfair Display', serif;
}
.logo a:hover {
color: #717171;
}
#toggle {
display: none;
}
nav ul {
float: right;
margin-top: 11px;
padding-right: 20px;
}
nav ul li {
float: left;
display: inline;
padding-right: 20px;
}
nav ul li a{
color: #0a0a0a;
text-decoration: none;
}
header {
clear: both;
width: 100%;
height: 90%;
position: relative;
}
header h1 {
color: white;
text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
position: relative;
top: 40%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.darken {
width: 100%;
height: 100%;
position: absolute;
background: rgba(10, 10, 10, 0.1);
}
/* Breakpoints */
@media screen and (max-width: 860px){
.logo {
width: 100%;
padding: 6px 0 7px 0px;
}
.logotext {
margin-left: 15px;
}
#toggle {
display: inline;
float: right;
padding-right: 15px;
}
nav ul{
width: 100%;
padding: 0;
display: none;
}
nav ul li {
width: 100%;
text-align: center;
padding: 0;
}
nav ul li a {
display: block;
padding: 20px 0 20px 0;
}
}
@media screen and (max-width: 1100px){
h1 {
font-size: 84px;
font-size: 6rem;
}
}
@media screen and (max-width: 830px){
h1 {
font-size: 70px;
font-size: 5rem;
}
}
@media screen and (max-width: 650px){
h1 {
font-size: 56px;
font-size: 4rem;
}
}
@media screen and (max-width: 550px){
h1 {
font-size: 42px;
font-size: 3rem;
}
}
@media screen and (max-width: 400px){
h1 {
font-size: 28px;
font-size: 2rem;
}
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Von der Berkelaue</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic|Playfair+Display' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="logo">
<a href="#" class="logotext"> Von der Berkelaue</a>
<a href="#" id="toggle"> Menü</a>
</div>
<nav>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Aktuelles</a></li>
<li><a href="#">Über Uns</a></li>
<li><a href="#">Würfe</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Gästebuch</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<header style="background: url(img/header.jpg) no-repeat 25% 30%;-moz-background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-size: cover; ">
<div class="darken">
<h1>Willkommen bei <br /> den Berkelauern!</h1>
</div>
</header>
<content>
<h1>Willkommen bei <br /> den Berkelauern!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae repellat soluta veritatis architecto, cum quod adipisci excepturi at aperiam iste!</p>
</content>
<script src="js/functions.js" type="application/javascript"></script>
</body>
</html>
//编辑Nr.2：
现在我有一个适用于示例页面的解决方案。现在我必须尝试在我的页面上使用它。
.first, .second {
position: absolute;
left: 25%;
top: 40%;
text-align: center;
display: block;
overflow: hidden;
color: red;
}
.second {
color:black;
max-height:60px;
}<h1 class="first">It´s a test.<br />But it won´t work on my site.</h1>
<h1 class="second">It´s a test.<br />But it won´t work on my site.</h1>有没有人知道如何创建一个有效的动画？
谢谢，詹尼斯
【问题讨论】：
-
是点击时发生的，还是由任何事件触发的，还是应该在您向下滑动时发生？
-
向下滚动时它应该会动画。这是一个很好的例子：scrollmagic.io 但我的主要问题是我不知道如何将颜色从白色更改为黑色，就像我在示例中展示的那样。
-
这会有点困难。一种可能的方法是让 2 个带有文本的 div 向下滚动。一个在图像后面，另一个在图像 div 内部。当它滚动到可见的父级（图像）时，里面的一个会消失（比如 display: none），而另一个会简单地出现，因为它就在图像的后面。
-
谢谢特德，这是个好主意！我编辑了我的第一篇文章并尝试了这个解决方案。它适用于无响应的网站。现在我必须看看如何让它在响应式网站中运行。
标签： javascript jquery html css animation