Skip to content

Instantly share code, notes, and snippets.

@SindhujaD

SindhujaD/Windows-8-like-Animations-with-CSS3-and-jQuery.markdown

Created January 16, 2014 01:44
Show Gist options
  • Save SindhujaD/8448353 to your computer and use it in GitHub Desktop.
Save SindhujaD/8448353 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Sindhuja.
Raw
index.html
<div class="demo-wrapper">
<!-- classnames for the pages should include: 1) type of page 2) page name-->
<div class="s-page random-restored-page">
<div class="page-content">
<h2 class="page-title">Some minimized App</h2>
</div>
<div class="close-button s-close-button">x</div>
</div>
<div class="s-page custom-page">
<div class="page-content">
<h2 class="page-title">Thank You!</h2>
</div>
<div class="close-button s-close-button">x</div>
</div>
<div class="r-page random-r-page">
<div class="page-content">
<h2 class="page-title">App Screen</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae a nesciunt hic animi iure laborum vitae maiores blanditiis non voluptate similique vel earum cumque nostrum voluptas illo minus alias fugiat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aliquid distinctio eum neque provident doloremque nostrum totam assumenda repellat repudiandae perferendis facilis voluptatem praesentium dignissimos impedit cumque tempore id quaerat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus sint officia deleniti omnis asperiores nihil voluptatem maxime labore inventore consequatur ipsa nobis officiis laudantium cum provident quo tempore temporibus corporis.</p>
</div>
<div class="close-button r-close-button">x</div>
</div>
<!--each tile should specify what page type it opens (to determine which animation) and the corresponding page name it should open-->
<div class="dashboard clearfix">
<ul class="tiles">
<div class="col1 clearfix">
<li class="tile tile-big tile-1 slideTextUp" data-page-type="r-page" data-page-name="random-r-page">
<div><p>This tile's content slides up</p></div>
<div><p>View all tasks</p></div>
</li>
<li class="tile tile-small tile tile-2 slideTextRight" data-page-type="s-page" data-page-name ="random-restored-page">
<div><p class="icon-arrow-right"></p></div>
<div><p>Tile's content slides right. Page opens from left</p></div>
</li>
<li class="tile tile-small last tile-3" data-page-type="r-page" data-page-name="random-r-page">
<p class="icon-calendar-alt-fill"></p>
</li>
<li class="tile tile-big tile-4 fig-tile" data-page-type="r-page" data-page-name="random-r-page">
<figure>
<img src="http://sarasoueidan.com/blog/windows8-animations/demo/images/blue.jpg" />
<figcaption class="tile-caption caption-left">Slide-out Caption from left</figcaption>
</figure>
</li>
</div>
<div class="col2 clearfix">
<li class="tile tile-big tile-5" data-page-type="r-page" data-page-name="random-r-page">
<div><p><span class="icon-cloudy"></span>Weather</p></div>
</li>
<li class="tile tile-big tile-6 slideTextLeft" data-page-type="r-page" data-page-name="random-r-page">
<div><p><span class="icon-skype"></span>Skype</p></div>
<div><p>Make a Call</p></div>
</li>
<!--Tiles with a 3D effect should have the following structure:
1) a container inside the tile with class of .faces
2) 2 figure elements, one with class .front and the other with class .back-->
<li class="tile tile-small tile-7 rotate3d rotate3dX" data-page-type="r-page" data-page-name="random-r-page">
<div class="faces">
<div class="front"><span class="icon-picassa"></span></div>
<div class="back"><p>Launch Picassa</p></div>
</div>
</li>
<li class="tile tile-small last tile-8 rotate3d rotate3dY" data-page-type="r-page" data-page-name="random-r-page">
<div class="faces">
<div class="front"><span class="icon-instagram"></span></div>
<div class="back"><p>Launch Instagram</p></div>
</div>
</li>
</div>
<div class="col3 clearfix">
<li class="tile tile-2xbig tile-9 fig-tile" data-page-type="custom-page" data-page-name="random-r-page">
<figure>
<img src="http://sarasoueidan.com/blog/windows8-animations/demo/images/summer.jpg" />
<figcaption class="tile-caption caption-bottom">Fixed Caption: Some Subtitle or Tile Description Goes Here with some kinda link or anything
</figure>
</li>
<li class="tile tile-big tile-10" data-page-type="s-page" data-page-name="custom-page">
<div><p>Windows-8-like Animations with CSS3 &amp; jQuery &copy; Sara Soueidan. Licensed under MIT.</p></div>
</li>
</div>
</ul>
</div><!--end dashboard-->
</div>
Raw
script.js
/*
Licensed under MIT. Copyright Notice:
Copyright © 2013 Sara Soueidan
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
Raw
style.css
/*
DEMO FOR MY BLOG POST TUTORIAL
How to Create Windows-8-like Animations with CSS3 and jQuery
http://sarasoueidan.com/blog/windows8-animations
*/
Raw
Windows-8-like-Animations-with-CSS3-and-jQuery.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment