cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi sunt repudiandae, ullam consequatur dolorum architecto dignissimos ex maxime voluptates! Non soluta omnis voluptatum velit inventore debitis voluptates aperiam corrupti aut adipisci voluptatem, magni excepturi, temporibus harum ea corporis accusantium quam totam distinctio porro, vel deleniti accusamus. Eveniet natus, cumque nulla illo corrupti culpa voluptatem pariatur nobis fugit voluptates ducimus beatae modi vitae quos dolorum tempora quaerat animi dolorem, adipisci quibusdam nostrum doloremque quia inventore quo. Ratione in illum eveniet modi laborum nulla, autem provident nam nisi dicta vitae consequatur ut esse est at aliquam deserunt sit. Ducimus natus non illo. Neque labore, cum deserunt repellat consequuntur modi. Odio sint commodi fugit soluta similique enim, debitis aspernatur eius delectus dolorum rem aliquid consequatur, consequuntur maxime quaerat totam provident earum. Eos aliquid reprehenderit distinctio assumenda facere autem similique tempore minima, rerum eaque illum voluptatem sunt in pariatur voluptatum! Cum atque adipisci eius temporibus, quo similique voluptas numquam iusto cumque iure esse est cupiditate, ab error voluptatibus. Repudiandae, et culpa dicta voluptates fuga, dolores architecto voluptatem cupiditate animi vitae, quo cum officia ad eius neque. A velit consequatur harum iure, consectetur distinctio omnis soluta facilis adipisci vero ex corporis expedita quam hic placeat aliquid. Veritatis in voluptate, quas qui, illum eaque autem distinctio officia, sit blanditiis beatae modi error! Voluptatibus recusandae consectetur, accusamus quod, facere ea harum dolore maxime at vitae suscipit veniam sit dolorem error ut? Nesciunt at culpa sed eveniet voluptas delectus eum magnam, nam laboriosam autem asperiores earum illo alias eaque quae officia eos optio, ea excepturi quod tempore consequatur est ut architecto? Optio vitae quia hic numquam ipsum, tenetur esse qui similique commodi, possimus recusandae! Expedita, natus reprehenderit in aspernatur ratione itaque numquam amet officia, iusto doloremque, non quam nostrum quaerat delectus. Explicabo earum ad vel omnis molestias inventore magni esse alias dignissimos porro. Culpa qui saepe deserunt ea magnam quo animi natus, necessitatibus similique, autem, tempore harum hic rem. Amet adipisci autem eligendi vitae sed, dicta veniam dolores earum quaerat ipsa repellat dolor delectus quo tenetur, necessitatibus modi facere deleniti eaque, explicabo distinctio ut, illum? Magnam possimus pariatur culpa sed, amet eius dolor voluptate, voluptas rem voluptatem nostrum eos assumenda dolores excepturi dolorem impedit voluptates eligendi nisi, numquam architecto quas similique vel. Repudiandae error illum facere laboriosam itaque, tempora doloremque hic dolore quo dolor. Nobis, eveniet, incidunt! Tenetur nihil odit laboriosam iure laborum. Natus mollitia eaque nihil provident voluptate eveniet sit quos culpa aspernatur. Mollitia tempore, et error vel, deleniti non numquam. Ratione deleniti dolorem debitis libero illo tempora? Eaque tempore debitis animi itaque beatae laborum modi rem magnam quod alias aliquid sequi vero magni ex minima consequatur facilis dolor voluptatem obcaecati, distinctio officia? Quasi architecto non minima ea, quas excepturi dolores deleniti vel iste, qui laudantium a ipsam eius, labore quisquam eum ducimus repudiandae id illo, voluptas nam rerum! Ducimus eligendi provident facilis officiis. Debitis quos temporibus maiores pariatur fugit nostrum ducimus facilis, sed impedit libero! Debitis, quasi consequatur iusto ratione. Laborum minima quidem soluta repellat rerum.</div>
            
          
!
            
              $(".element").velocity({
	width: "500px",
	opacity: "0.7"
}, {
	duration: 400,
	easing: "swing",
	queue: "",
	begin: undefined,
	progress: undefined,
	complete: undefined, 
	display: undefined, 
	visibility: undefined, 
	loop: false, 
	delay: false, 
	mobileHA: true
});

            
          
!
999px
Loading ..................

Console