All geek questions in one place

Difficult web animation

I want to create CSS or JS animations for a website. But I do not know how I can encode this. The animation is hard to explain, which is why I create a small gif animation for a better understanding.

http://abload.de/img/animationxep49.gif

// Edit: My main problem is the transition from white to black, which I illustrate in the example. Does anyone know a solution for this?

And here is my code without animation:

/* 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>

// Edit Nr.2:

Now I have a solution that works on the example page. Now I have to try for this to work on my page.

 .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´sa test.<br />But it won´t work on my site.</h1> <h1 class="second">It´sa test.<br />But it won´t work on my site.</h1>

Does anyone have a good idea how can I create an animation that works?

Thanks, Jannis

+5
source share
2 answers

You should be able to achieve the effect that you use to use:

  • 3 CSS3 Transitions ; and
  • Multiple javascript lines (to control when transitions are activated)

See an example below:

 function startAnimation() { var frame = document.getElementsByClassName('frame')[0]; var image = frame.getElementsByClassName('image')[0]; var paragraph = image.getElementsByTagName('p')[0]; var newParagraph = paragraph.cloneNode(true); document.body.appendChild(newParagraph); frame.insertBefore(newParagraph,image); setTimeout(function(){ image.classList.add('animated'); paragraph.classList.add('animated'); setTimeout(function(){ newParagraph.classList.add('animated'); },2400); },1000); } window.addEventListener('load',startAnimation,false); 
 body { margin: 0; padding: 0; background-color: rgb(0,0,0); } .frame { position: relative; width: 700px; height: 100vh; margin: 0 auto; background-color: rgb(255,255,255); } .image { position: absolute; top: 0; width: 700px; height: 364px; background: url('http://i.imgur.com/hdCeKIz.gif'); overflow: hidden; transition: all 4s ease-in-out; } .frame p { position: absolute; top: 94px; width: 700px; text-align: center; font-size: 40px; color: rgb(0,0,0); transition: all 2s ease-in-out; } .image p { color: rgb(255,255,255); transition: all 4s ease-in-out; } .image.animated { transform: translate(0,-365px); } .frame p.animated { transform: translate(0,-125px); } .image p.animated { transform: translate(0,365px); } 
 <div class="frame"> <div class="image"> <p>Willkommen bei<br />den Berkelauern!</p> </div> </div>
+3
source

And an easy way to make animations in the browser is to use the javascript library. Check this out https://greensock.com/ and here are some examples https://greensock.com/examples-showcases https://greensock.com/beziertweens I use it in my projects when I need complex animations that I can’t solve using only css

Example

  // asuming your text have a top 200px TweenMax.to($('text'),2,{ top:"600px" //it will move your text to 600px in 2 seconds });
0
source

Source: https://habr.com/ru/post/1239429/

More articles:


All Articles