enzienza

Animate on scroll with wow.js

Reveal Animations When You Scroll

A Pen by Sayed Rafeeq on CodePen.

License.

enzienza

<div class="paralax">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_man.png" data-weight="10" data-direction="bottom" class="man"/>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_03.png" data-weight="10" data-direction="bottom" class="bg1"/>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_02.png" data-weight="20" data-direction="bottom" class="bg2"/>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_01.png" data-weight="100" data-direction="bottom" class="bg3"/>
  <span class="text" data-direction="top" data-weight="5">JSoftParallax</span>
  <a href="https://github.com/DSlike/UI/tree/master/JQuery%20plugins" class="gitlink"
  data-weight="-20" target="_blank">GitHub</a>
</div>

enzienza

<section>
  <div class="paralax-1">
  <div class="new-paralax">
  <h1>Simple Paralax</h1>
    </div>
    </div>
</section>
<section>
</section>
<section>

enzienza

css paralax study

based on the pen by stefan judis. studying the paralax technique and how to implement it.

A Pen by Ken Hyatt on CodePen.

License.

enzienza

fullPage.js - Base example

A Pen by Álvaro on CodePen.

License.

enzienza

.background
section
	.album-info
		.album-art
			img(src='https://target.scene7.com/is/image/Target/51223401?wid=520&hei=520&fmt=pjpeg')
			.actions
				.play Play
				.bookmark
					svg(xmlns='http://www.w3.org/2000/svg', fill='#faa800', height='24', viewbox='0 0 24 24', width='24')
						path(d='M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z')

enzienza

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">

<div class="music_player">
  <div class="artist_img">
  <img src="http://pichoster.net/images/2016/12/02/adele.jpg">
  </div>
  <div class="time_slider">
    <span class="runing_time">0:00</span>
    <input type="range" value="0">
    <span class="song_long">0:00</span>

enzienza

<div id="title" class="slide header">
  <h1>Pure CSS Parallax</h1>
</div>

<div id="slide1" class="slide">
  <div class="title">
    <h1>Slide 1</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
  </div>
</div>

enzienza

<!--
 Author: Hendry Sadrak
-->

<div class="container">
  <section>
    <div class="image" data-type="background" data-speed="2"></div>
    <div class="stuff" data-type="content"><h1>Simple Parallax scroll</h1><h2>Reoptimized</h2></div>
  </section>

enzienza

<div class = "L-tewelve"> 
  <div class = "row">
<header class = "header">
  <div class = "logo-container">
    <h1>Logo</h1>
    <span class = "toggle-btn">&#9776;</span>
  </div>
  <ul class = "display-none-mobile">
    <li><a href = "">Home</a></li>
    <li><a href = "">Services</a></li>