Aufbau

Für eine Animation mit CQuence muss folgendes bereitgestellt werden:

Javascriptbibliothek: cquence.js
optional: bootstrap.css, für einfacheres Gestalten
Html-Elemente im Body
Grundlegende CSS-Eigenschaften für eine Animation
Javascript: Funktionsaufruf und Animation der gewünschten Elemente

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

Code Elemente - HTML - CSS - JS - Cquence

            
            

<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>HTML5 CSS3 JS</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- CSS *************************** -->
  <style>
	#container {position:relative;width: 300px; height: 300px; background-color: #efefef;margin:0 auto;}
	div { position: absolute; overflow: hidden; }
	/* Zeitleiste - die Frames gestalten */
	#frame1 {z-index: 500; left: 10px; top: 10px;background:#ccc;}
  </style>
  </head>
  <body>
<!-- HTML *************************** -->

<div id="container">
	<div id="frame1" class="frame">
		<h3>Der Titel der Sequenz</h3>
	</div>
</div>


  <!-- Javascript ************************ -->
  <script type="text/javascript" src="https://depot43.ch/unterlagen/themes/bootstrap/js/Cquence.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript">
  
  	render = Cq.combine(

	Cq.sequence(
		Cq.easeOut('frame1', 3000, { top: 10 }, {top: 220 })
		)
	),

	Cq.renderloop();
  
  </script>
</body>
</html>




            

Hinweise

HTML: Die Elemente und Bezeichnungen können frei gewählt werden. Es ist übersichtlich, ein Div-Element mit ID "#frameX" für die Animation zu verwenden. Das Umgebende Element "#container" ist praktisch, es entspricht der Bühne. Wenn Elemente von ausserhalb dieser Bühne auftreten, muss die Sichtbarkeit mit "overflow:hidden;" begrenzt werden.

CSS: Optional ist die Bootstrap-CSS-Datei verlinkt, sie übernimmt viele Einstellungen, die üblicherweise dem Body zugewiesen werden. Der "#container" ist als Bühne der gesamten Animation formatiert. Meist werden die Div-Elemente absolut Positioniert. Dynamische Positionswerte werden mit den CSS-Eigenschaften: "top", "left", "bottom" oder "right" verändert um eine Bewegung zu erlangen. Mit "opacity" kann ein- ausgeblendet werden. Mit "transform.rotate(90Deg)" kann ein Element rotiert werden. Usw.