Depot43-Unterlagen - Javascript

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>
  body { padding: 0; margin: 0; font-family: "Lucida Console", Monaco, monospace; }
  div { position: absolute; overflow: hidden; }
  #container { border: 1px solid black; width: 298px; height: 248px; background-color: black;}
  .frame { width: 300px; height: 250px;  }
  img { position: relative }
  #frame1 { z-index: 500; left: -1000px; } /* Monk */
  #frame2 { z-index: 700; left: 0px; top: -40px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0); } /* Media Monks*/
  #frame3 { z-index: 300; width: 750px; left: -1000px; } /* Smoke */
  #frame4 { z-index: 400; left: -1000px; } /* */
  #frame5 { z-index: 600; left: 0px; } /* shader */
  
  #frame6 { z-index: 600; left: 20px; top: 120px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0);}
  #frame6 p { color: white; font-size: 20px; }
  /* peeps call me */
  #frame7 { z-index: 600; top: 150px; left: 20px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0);} 
  #frame7 p { color: white; font-size: 25px; }
  /* Ramon */
  
  #frame8 { z-index: 600; top: 130px; left: 20px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0);} 
  #frame8 p { color: white; font-size: 35px; } 
  /* rocking it */
  #frame9 { z-index: 600; top: 160px; left: -300px; opacity: 0; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0);} 
  #frame9 p { color: white; font-size: 17px; } 
  #frame9 p strong { color: white; font-size: 20px; } 
  /* Call to action */
  
  #frame10 { z-index: 750; bottom: -260px; left: 0px; opacity: 1; background-image: url('http://i.imgur.com/OCHWcon.png'); background-repeat: no-repeat; background-size: 100%; background-position: center; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100);} 
  #frame10 #cta { color: #ddd; font-weight: 900; font-size: 20px; width: 100%; background-color: #333; display: inline-block; height: 40px;  transition: background-color 0.4s ease;} 
  #frame10 #cta:hover { background-color: #fff; transition: background-color 0.4s ease; } 
  
  #frame10 #cta #button { width: 100%; height: 26px; top: 6px; left: 5px; border-radius: 4px; z-index: 751; cursor: pointer; text-align: center
  
  ; }
   #frame10 #cta p { position: absolute; left: 60px; top: -11px; z-index: 750; }
  </style>
  </head>
  <body>
<!-- HTML *************************** -->

<div id="container">
    <div id="frame1" class="frame">
       <span class="glyphicon glyphicon-envelope"></span></div>
    <div id="frame2" class="frame">
        <span class="glyphicon glyphicon-star" style="left: -300px; top: 40px;"></span></div>
    <div id="frame3" class="frame">
        <span class="glyphicon glyphicon-film" style="left: -602px"></span></div>
    <div id="frame4" class="frame">
        <span class="glyphicon glyphicon-time" style="left: -600px;"></span></div>
    <div id="frame5" class="frame">
        <span class="glyphicon glyphicon-download" style="left: -1350px;"></span></div>
    <div id="frame6" class="frame">
        <p>Hey there,</p>
    </div>
    <div id="frame7" class="frame">
        <p>People call me</p>
    </div>
    <div id="frame8" class="frame">
        <p>RamonGebben</p>
    </div>
    <div id="frame9" class="frame">
        <p>And this is an awesome lib </p>
    </div>
    <div id="frame10" class="frame">
        <div id="cta">
            <div id="button">Download</div>
        </div>
    </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.sleep( 100 ),
	   Cq.linear('frame3', 10000, { left: -900 }, {left: 300 })
	),
	Cq.sequence(
	  Cq.easeOut('frame1', 2000, { left: -1000 }, { left: 120 }),
	  Cq.easeIn('frame6', 1000, { opacity: 0 }, { opacity: 1}),
	  Cq.easeIn('frame7', 1000, { opacity: 0 }, { opacity: 1}),
	  Cq.combine(
	      Cq.easeIn('frame6', 1500, { opacity: 1 }, { opacity: 0}),
	      Cq.easeIn('frame7', 1500, { opacity: 1 }, { opacity: 0}),
	      Cq.easeIn('frame8', 1500, { opacity: 0 }, { opacity: 1})
	  ),
	  Cq.sleep(1000),
	  Cq.easeIn('frame8', 1000, { opacity: 1 }, { opacity: 0}),
	  Cq.easeIn('frame9', 1000, { opacity: 0, left: -300 }, { opacity: 1, left: 10}),
	  Cq.sleep(1500),
	  Cq.sequence(
	    Cq.combine(
	        Cq.easeIn('frame1', 1500, { left: 120 }, { left: -620 }),
	        Cq.easeOut('frame9', 2000, { opacity: 1, left: 10 }, { opacity: 0, left: -300 })
	    ),
	    Cq.easeIn('frame2', 1000, { opacity: 0 },{ opacity: 0 }),
	    Cq.easeOut('frame10', 1000, { bottom: -260 }, { bottom: 0 })
	  )
	)
);

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




            
Die Datei "cquence.js" ist ein GitHub-Projekt von Ramon Gebben:
https://github.com/RamonGebben/Cquence
Die Javascript-Datei kann editiert werden:
Die Länge der Animationsequenzen
CSS-Eigenschaften ergänzen