Skip to content

Commit

Permalink
Adding better transitions
Browse files Browse the repository at this point in the history
  • Loading branch information
@leandrowd
leandrowd committed Feb 8, 2015
1 parent 8fe3efd commit 48ebe3c
Show file tree
Hide file tree
Showing 22 changed files with 618 additions and 238 deletions.
55 changes: 55 additions & 0 deletions dev/carousel.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
.m4d-icon:before{display:inline-block;content:''}
@font-face{font-family:m4d-icons;src:url(/styles/font/m4d-icons.eot?3179539);src:url(/styles/font/m4d-icons.eot?3179539#iefix) format('embedded-opentype'),url(/styles/font/m4d-icons.woff?3179539) format('woff'),url(/styles/font/m4d-icons.ttf?3179539) format('truetype'),url(/styles/font/m4d-icons.svg?3179539#m4d-icons) format('svg');font-weight:400;font-style:normal}
[class*=" icon-"]:before,[class^=icon-]:before{font-family:m4d-icons;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em}
.icon-cancel:before{content:"\e801"}
.icon-right-open:before{content:"\e802"}
.icon-left-open:before{content:"\e803"}
.icon-search:before{content:"\e804"}
.icon-down-dir:before{content:"\e806"}
.icon-cog:before{content:"\e807"}
.icon-up-dir:before{content:"\e808"}
.icon-arrow-combo:before{content:"\e809"}
.icon-calendar:before{content:"\e600"}
.icon-parking:before{content:"\e601"}
.icon-body:before{content:"\e602"}
.icon-engine3:before{content:"\e603"}
.icon-engine4:before{content:"\e604"}
.icon-engine:before{content:"\e606"}
.icon-gearbox:before{content:"\e607"}
.icon-odometer1:before{content:"\e805"}
.icon-odometer2:before{content:"\e608"}
.icon-odometer:before{content:"\e609"}
.icon-tires:before{content:"\e60a"}
.icon-wheel:before{content:"\e60b"}
.icon-petrol2:before{content:"\e605"}
.icon-fuel:before{content:"\e800"}
button{outline:0;border:0;background:0 0}
.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:opacity .15s ease-in;-moz-transition:opacity .15s ease-in;-ms-transition:opacity .15s ease-in;-o-transition:opacity .15s ease-in;transition:opacity .15s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;font-family:m4d-icons;background:0 0;border:0;cursor:pointer}
.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}
.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit}
.carousel .control-left.control-arrow{left:0}
.carousel .control-left.control-arrow:before{content:'\e803'}
.carousel .control-right.control-arrow{right:0}
.carousel .control-right.control-arrow:before{content:'\e802'}
.carousel{position:relative;width:100%}
.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.carousel img{width:100%;display:inline-block}
.carousel .carousel{position:relative}
.carousel .control-arrow{top:50%;margin-top:-13px;font-size:18px}
.carousel .thumbs-wrapper{position:relative;margin:0 20px;overflow:hidden}
.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform-style:preserve-3d;-webkit-perspective:1000;-webkit-backface-visibility:hidden;position:relative;list-style:none;overflow:hidden;white-space:nowrap}
.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;width:80px;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}
.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333;padding:2px}
.carousel .thumb img{vertical-align:top}
.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}
@media (min-width:768px){.carousel.carousel-slider li{cursor:-webkit-zoom-in}}
.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;height:100%;padding:5px}
.carousel .slider-wrapper{overflow:hidden}
.carousel .slider{-webkit-transition:all .35s ease-in;-moz-transition:all .35s ease-in;-ms-transition:all .35s ease-in;-o-transition:all .35s ease-in;transition:all .35s ease-in;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform-style:preserve-3d;-webkit-perspective:1000;-webkit-backface-visibility:hidden;position:relative;list-style:none;overflow:hidden;white-space:nowrap}
.carousel .slide{-webkit-transition:border .25s ease-in;-moz-transition:border .25s ease-in;-ms-transition:border .25s ease-in;-o-transition:border .25s ease-in;transition:border .25s ease-in;display:inline-block;width:260px;margin:0;white-space:nowrap}
@media (min-width:768px){.carousel .slide{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in}}
.carousel .slide img{vertical-align:top}
.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;text-align:center;width:100%}
.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}
.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}
.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,.9);color:#fff}
3 changes: 1 addition & 2 deletions dev/es5-shim.min.js
View file

Large diffs are not rendered by default.

33 changes: 33 additions & 0 deletions dev/imageGallery.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.m4d-icon:before{display:inline-block;content:''}
@font-face{font-family:m4d-icons;src:url(/styles/font/m4d-icons.eot?3179539);src:url(/styles/font/m4d-icons.eot?3179539#iefix) format('embedded-opentype'),url(/styles/font/m4d-icons.woff?3179539) format('woff'),url(/styles/font/m4d-icons.ttf?3179539) format('truetype'),url(/styles/font/m4d-icons.svg?3179539#m4d-icons) format('svg');font-weight:400;font-style:normal}
[class*=" icon-"]:before,[class^=icon-]:before{font-family:m4d-icons;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em}
.icon-cancel:before{content:"\e801"}
.icon-right-open:before{content:"\e802"}
.icon-left-open:before{content:"\e803"}
.icon-search:before{content:"\e804"}
.icon-down-dir:before{content:"\e806"}
.icon-cog:before{content:"\e807"}
.icon-up-dir:before{content:"\e808"}
.icon-arrow-combo:before{content:"\e809"}
.icon-calendar:before{content:"\e600"}
.icon-parking:before{content:"\e601"}
.icon-body:before{content:"\e602"}
.icon-engine3:before{content:"\e603"}
.icon-engine4:before{content:"\e604"}
.icon-engine:before{content:"\e606"}
.icon-gearbox:before{content:"\e607"}
.icon-odometer1:before{content:"\e805"}
.icon-odometer2:before{content:"\e608"}
.icon-odometer:before{content:"\e609"}
.icon-tires:before{content:"\e60a"}
.icon-wheel:before{content:"\e60b"}
.icon-petrol2:before{content:"\e605"}
.icon-fuel:before{content:"\e800"}
.image-gallery{overflow:hidden;width:100%;position:relative}
.image-gallery *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.image-gallery img{width:100%;display:inline-block}
.image-gallery .zoom{width:85%;margin:0 auto}
@media (min-width:768px){.image-gallery .zoom{width:100%;margin:0}}
.image-gallery .zoom img{width:100%}
.image-gallery .carousel~.carousel{margin-top:25px;display:inline-block}
.image-gallery .carousel .thumb{width:120px}
44 changes: 37 additions & 7 deletions dev/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css"/>
<link rel="stylesheet" href="imageGallery.css"/>
<link rel="stylesheet" href="carousel.css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto:100,700,400' rel='stylesheet' type='text/css'>
</head>
<body>
Expand All @@ -20,7 +22,8 @@ <h2>Summary</h2>
<li><a href="#carousel">Carousel</a></li>
</ul>
</li>
<li><a href="#todo">Todo</a></li>
<li><a href="#browser-support">Browser Support</a></li>
<li><a href="#todo">Todos</a></li>
<li><a href="#contribute">Contributing</a></li>
</ul>

Expand All @@ -34,7 +37,7 @@ <h2 id="demos">Demos</h2>
<article class="demo">
<h3 id="image-gallery">Image Gallery</h3>
<div class="demo-gallery"></div>
<h4>Code:</h4>
<h4>Javascript / Jsx:</h4>
<pre>
<code>
/** @jsx React.DOM */
Expand All @@ -54,6 +57,14 @@ <h4>Code:</h4>
React.render(&lt;DemoGallery /&gt;, document.querySelector('.demo-gallery'));
</code>
</pre>

<h4>Css:</h4>
<pre>
<code>
&lt;link rel="stylesheet" href="imageGallery.css"/&gt;
&lt;link rel="stylesheet" href="carousel.css"/&gt;
</code>
</pre>

<h4>Props:</h4>
<ul class="list-items">
Expand All @@ -63,7 +74,7 @@ <h4>Props:</h4>
<article class="demo">
<h3 id="slider">Slider with controls</h3>
<div class="demo-slider-controls"></div>
<h4>Code:</h4>
<h4>Javascript / Jsx:</h4>
<pre>
<code>
/** @jsx React.DOM */
Expand All @@ -88,6 +99,13 @@ <h4>Code:</h4>
</code>
</pre>

<h4>Css:</h4>
<pre>
<code>
&lt;link rel="stylesheet" href="carousel.css"/&gt;
</code>
</pre>

<h4>Props:</h4>
<ul class="list-items">
<li>(Array) items</li>
Expand All @@ -108,7 +126,8 @@ <h4>Props:</h4>
<article class="demo">
<h3 id="carousel">Carousel</h3>
<div class="demo-carousel"></div>
<h4>Code:</h4>

<h4>Javascript / Jsx:</h4>
<pre>
<code>
/** @jsx React.DOM */
Expand All @@ -128,6 +147,14 @@ <h4>Code:</h4>
React.render(&lt;DemoCarousel /&gt;, document.querySelector('.demo-carousel'));
</code>
</pre>

<h4>Css:</h4>
<pre>
<code>
&lt;link rel="stylesheet" href="carousel.css"/&gt;
</code>
</pre>

<h4>Props:</h4>
<ul class="list-items">
<li>(Array) items</li>
Expand All @@ -147,7 +174,10 @@ <h4>Props:</h4>
</article>
</section>

<h3 id="todo">TODO:</h3>
<h2 id="browser-support">Browser Support</h2>
<p>Although I have implemented css transformations for all the browsers and fallback to left when 3d isn't supported, I haven't had time to test in browsers other than chrome yet. I reckon than it should just work but minor issues can be found.</p>

<h2 id="todo">TODO:</h2>
<ul class="list-items">
<li>Implement slides of content</li>
<li>Improve documentation</li>
Expand All @@ -157,8 +187,8 @@ <h3 id="todo">TODO:</h3>
<li>...?</li>
</ul>

<h3 id="contributing">Contributing</h3>
<p>Feel free to contribute. Normal workflow -> Fork -> change -> pull request!</p>
<h2 id="contributing">Contributing</h2>
<p>Feel free to contribute. Just Fork -> Change -> Pull request!</p>

</div>
<script src="es5-shim.min.js"></script>
Expand Down
50 changes: 9 additions & 41 deletions dev/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
*{margin:0;padding:0;list-style:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body{font-weight:400;font-size:16px;color:#333;font-family:Roboto,sans-serif}
h1,h2,h3,h4{font-weight:400;margin:20px 0}
h1{font-weight:700}
h2{border-top:1px solid #999;padding-top:40px;margin-top:40px}
h4{margin-bottom:10px}
code{border-radius:20px;background:#f5f5f5;padding:20px;text-indent:0;color:#666;display:block;margin:auto}
body{font-family:Roboto,sans-serif;font-size:16px;font-weight:400;color:#333}
h1,h2,h3,h4{font-weight:700;margin:20px 0}
h1{font-weight:700;font-size:2.5em}
h2{border-top:1px solid #999;padding-top:40px;margin-top:40px;font-size:2em}
h3{font-size:1.4em}
h4{font-size:1.1em;margin-bottom:10px}
code{border-radius:20px;background:#f5f5f5;padding:20px;text-indent:0;color:#333;display:block;margin:auto}
.wrapper{padding:30px}
.wrapper .demo-carousel,.wrapper .demo-gallery,.wrapper .demo-slider{margin:30px -30px}
.wrapper .demo{display:block;margin:30px 0;padding-bottom:30px;border-bottom:1px solid #999}
.wrapper .demo{display:block;margin:30px 0;padding-bottom:30px;border-bottom:1px solid #333}
.wrapper .demo:last-child{border-bottom:0}
.list-items,.summary{margin-left:50px}
.list-items li,.summary li{line-height:2;list-style-type:circle}
.list-items li ul,.summary li ul{margin-left:30px}
Expand Down Expand Up @@ -37,40 +39,6 @@ code{border-radius:20px;background:#f5f5f5;padding:20px;text-indent:0;color:#666
.icon-petrol2:before{content:"\e605"}
.icon-fuel:before{content:"\e800"}
button{outline:0;border:0;background:0 0}
.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:opacity .15s ease-in;-moz-transition:opacity .15s ease-in;-ms-transition:opacity .15s ease-in;-o-transition:opacity .15s ease-in;transition:opacity .15s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;font-family:m4d-icons;background:0 0;border:0;cursor:pointer}
.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}
.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit}
.carousel .control-left.control-arrow{left:0}
.carousel .control-left.control-arrow:before{content:'\e803'}
.carousel .control-right.control-arrow{right:0}
.carousel .control-right.control-arrow:before{content:'\e802'}
.image-gallery{overflow:hidden;width:100%;position:relative}
.image-gallery img{width:100%;display:inline-block}
.image-gallery .zoom{width:85%;margin:0 auto}
@media (min-width:768px){.image-gallery .zoom{width:100%;margin:0}}
.image-gallery .zoom img{width:100%}
.image-gallery .carousel~.carousel{margin-top:25px;display:inline-block}
.carousel{position:relative;width:100%}
.carousel img{width:100%;display:inline-block}
.carousel .carousel{position:relative}
.carousel .control-arrow{top:50%;margin-top:-13px;font-size:18px}
.carousel .thumbs-wrapper{position:relative;margin:0 20px;overflow:hidden}
.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform-style:preserve-3d;-webkit-perspective:1000;-webkit-backface-visibility:hidden;position:relative;list-style:none;overflow:hidden;white-space:nowrap}
.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;width:65px;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff}
.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #ed6d19}
.carousel .thumb img{vertical-align:top}
.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}
@media (min-width:768px){.carousel.carousel-slider li{cursor:-webkit-zoom-in}}
.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;height:100%;padding:5px}
.carousel .slider-wrapper{overflow:hidden}
.carousel .slider{-webkit-transition:all .35s ease-in;-moz-transition:all .35s ease-in;-ms-transition:all .35s ease-in;-o-transition:all .35s ease-in;transition:all .35s ease-in;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform-style:preserve-3d;-webkit-perspective:1000;-webkit-backface-visibility:hidden;position:relative;list-style:none;overflow:hidden;white-space:nowrap}
.carousel .slide{-webkit-transition:border .25s ease-in;-moz-transition:border .25s ease-in;-ms-transition:border .25s ease-in;-o-transition:border .25s ease-in;transition:border .25s ease-in;display:inline-block;width:260px;margin:0;white-space:nowrap}
@media (min-width:768px){.carousel .slide{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in}}
.carousel .slide img{vertical-align:top}
.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;text-align:center;width:100%}
.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}
.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}
.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,.9);color:#fff}
.demo-carousel,.demo-gallery,.demo-slider{margin:50px auto}
.demo-gallery .thumb{width:200px}
.demo-carousel{width:100%;margin:30px auto!important}
Expand Down
Loading

0 comments on commit 48ebe3c

Please sign in to comment.