Skip to content

Instantly share code, notes, and snippets.

@wangwen1220

wangwen1220/Velocity.js---Feature:-Transforms.markdown

Created January 14, 2015 14:40
Show Gist options
  • Save wangwen1220/6d2c80b6a8674f12f2e3 to your computer and use it in GitHub Desktop.
Save wangwen1220/6d2c80b6a8674f12f2e3 to your computer and use it in GitHub Desktop.
Download ZIP
Velocity.js - Feature: Transforms
Raw
index.html
<p>
Refresh this page to re-run the demo.
</p>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</div>
Raw
script.js
/* jquery.js */
/* jquery.velocity.js */
// Animate two separate transform properties: rotateZ and translateX.
$("div").velocity({
scale: 1.5,
translateX: 150
}, 2000);
Raw
style.css
body {
font-family: "Helvetica Neue", Helvetica;
width: 90%;
font-weight: 200;
letter-spacing: 1px;
margin: 25px auto 0 auto;
background: rgb(234, 235, 235);
color: rgb(25, 25, 25);
}
div, p {
margin: 0 auto;
}
p {
color: rgb(125, 125, 125);
font-size: 0.85rem;
text-align: center;
margin-bottom: 17px;
}
div {
width: 500px;
overflow: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment