├── readme.md
├── script.js
├── index.html
├── style.css
└── jquery.js
/readme.md:
--------------------------------------------------------------------------------
1 | # CSS3 Scale Translate3d
2 |
3 | ## Post
4 |
5 | - [https://f90.co.uk/labs/css3-scale-translate3d/](https://f90.co.uk/labs/css3-scale-translate3d/)
6 |
7 | ## Example
8 |
9 | - [http://orangespaceman.github.io/css3-scale-translate3d](http://orangespaceman.github.io/css3-scale-translate3d)
10 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function(){
2 |
3 | var $links = $('a'),
4 | current = null;
5 |
6 | $links.bind('click', function(e){
7 | e.preventDefault();
8 | this.blur();
9 |
10 | var href = this.href.split('#')[1];
11 |
12 | // condition : treat home links differently
13 | if (href == "home") {
14 | $('#container').attr('class', '').addClass(current+'-to-home');
15 | current = null;
16 | } else {
17 | current = href;
18 | $('#container').attr('class', '').addClass('home-to-'+href);
19 | }
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
Home
12 |
17 |
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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
18 |
19 |
20 |
21 |
About
22 |
25 |
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
26 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
27 |
28 |
29 |
30 |
Lorem
31 |
34 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
35 |
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
36 |
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
37 |
38 |
39 |
40 |
Ipsum
41 |
44 |
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
45 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
46 |
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* some quick page defaults */
2 | * { margin:0; padding:0; }
3 |
4 | body {
5 | font-family:Helvetica, Arial, sans-serif;
6 | background:#fff;
7 | }
8 |
9 | html,
10 | body,
11 | #container {
12 | height:100%;
13 | width:100%;
14 | overflow:hidden;
15 | }
16 |
17 | /* container default styles */
18 | #container {
19 | position:absolute;
20 | left:0;
21 | top:0;
22 | overflow:visible;
23 | -webkit-animation-duration: 3s;
24 | -webkit-animation-timing-function: ease-in-out;
25 | -webkit-animation-iteration-count: 1;
26 |
27 | -moz-animation-duration: 3s;
28 | -moz-animation-timing-function: ease-in-out;
29 | -moz-animation-iteration-count: 1;
30 |
31 | animation-duration: 3s;
32 | animation-timing-function: ease-in-out;
33 | animation-iteration-count: 1;
34 | }
35 |
36 | /* block positions */
37 | #block-home { left:10%; top:10%; }
38 | #block-about { left:-75%; top:-75%; }
39 | #block-lorem { left:-75%; top:95%; }
40 | #block-ipsum { left:95%; top:95%; }
41 |
42 | /* block styles */
43 | .block {
44 | position:absolute;
45 | padding:0;
46 | width:80%;
47 | height:80%;
48 | overflow:hidden;
49 | }
50 |
51 | /* a bit of extra styling to make it look a bit nicer */
52 | .block {
53 | background-color: #ff9900;
54 | background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9900), to(#ff3300)); /* Saf4+, Chrome */
55 | background-image: -webkit-linear-gradient(top, #ff9900, #ff3300); /* Chrome 10+, Saf5.1+, iOS 5+ */
56 | background-image: -moz-linear-gradient(top, #ff9900, #ff3300); /* FF3.6 */
57 | background-image: -ms-linear-gradient(top, #ff9900, #ff3300); /* IE10 */
58 | background-image: -o-linear-gradient(top, #ff9900, #ff3300); /* Opera 11.10+ */
59 | background-image: linear-gradient(top, #ff9900, #ff3300);
60 | filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff9900', EndColorStr='#ff3300'); /* IE6–IE9 */
61 | text-shadow: 2px 2px 2px #f90;
62 | border-radius:25px;
63 | }
64 |
65 | .block h2,
66 | .block p,
67 | .block ul {
68 | margin:30px;
69 | }
70 |
71 | .block ul {
72 | padding-left:30px;
73 | }
74 |
75 | .block a {
76 | color:#fff;
77 | text-decoration:none;
78 | }
79 |
80 | /* animations */
81 | #container.about-to-home {
82 | -webkit-animation-name: about-to-home; -webkit-transform: translate3d(0,0,0);
83 | -moz-animation-name: about-to-home; -moz-transform: translate(0,0);
84 | animation-name: about-to-home; transform: translate3d(0,0,0);
85 | }
86 | #container.lorem-to-home {
87 | -webkit-animation-name: lorem-to-home; -webkit-transform: translate3d(0,0,0);
88 | -moz-animation-name: lorem-to-home; -moz-transform: translate(0,0);
89 | animation-name: lorem-to-home; transform: translate3d(0,0,0);
90 | }
91 | #container.ipsum-to-home {
92 | -webkit-animation-name: ipsum-to-home; -webkit-transform: translate3d(0,0,0);
93 | -moz-animation-name: ipsum-to-home; -moz-transform: translate(0,0);
94 | animation-name: ipsum-to-home; transform: translate3d(0,0,0);
95 | }
96 | #container.home-to-about {
97 | -webkit-animation-name: home-to-about; -webkit-transform: translate3d(85%, 85%, 0);
98 | -moz-animation-name: home-to-about; -moz-transform: translate(85%, 85%);
99 | animation-name: home-to-about; transform: translate3d(85%, 85%, 0);
100 | }
101 | #container.home-to-lorem {
102 | -webkit-animation-name: home-to-lorem; -webkit-transform: translate3d(85%, -85%, 0);
103 | -moz-animation-name: home-to-lorem; -moz-transform: translate(85%, -85%);
104 | animation-name: home-to-lorem; transform: translate3d(85%, -85%, 0);
105 | }
106 | #container.home-to-ipsum {
107 | -webkit-animation-name: home-to-ipsum; -webkit-transform: translate3d(-85%, -85%, 0);
108 | -moz-animation-name: home-to-ipsum; -moz-transform: translate(-85%, -85%);
109 | animation-name: home-to-ipsum; transform: translate3d(-85%, -85%, 0);
110 | }
111 |
112 |
113 | /* animation keyframes */
114 | /* webkit */
115 | @-webkit-keyframes about-to-home {
116 | 0% { -webkit-transform: scale(1) translate3d(85%, 85%, 0); }
117 | 45% { -webkit-transform: scale(0.25); }
118 | 55% { -webkit-transform: scale(0.25) translate3d(0, 0, 0); }
119 | 100% { -webkit-transform: scale(1); }
120 | }
121 |
122 | @-webkit-keyframes lorem-to-home {
123 | 0% { -webkit-transform: scale(1) translate3d(85%, -85%, 0); }
124 | 45% { -webkit-transform: scale(0.25); }
125 | 55% { -webkit-transform: scale(0.25) translate3d(0, 0, 0); }
126 | 100% { -webkit-transform: scale(1); }
127 | }
128 |
129 | @-webkit-keyframes ipsum-to-home {
130 | 0% { -webkit-transform: scale(1) translate3d(-85%, -85%, 0); }
131 | 45% { -webkit-transform: scale(0.25); }
132 | 55% { -webkit-transform: scale(0.25) translate3d(0, 0, 0); }
133 | 100% { -webkit-transform: scale(1); }
134 | }
135 |
136 | @-webkit-keyframes home-to-about {
137 | 0% { -webkit-transform: scale(1) translate3d(0,0,0); }
138 | 45% { -webkit-transform: scale(0.25); }
139 | 55% { -webkit-transform: scale(0.25) translate3d(0,0,0); }
140 | 100% { -webkit-transform: scale(1) translate3d(85%, 85%, 0); }
141 | }
142 |
143 | @-webkit-keyframes home-to-lorem {
144 | 0% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
145 | 45% { -webkit-transform: scale(0.25); }
146 | 55% { -webkit-transform: scale(0.25) translate3d(0, 0, 0); }
147 | 100% { -webkit-transform: scale(1) translate3d(85%, -85%, 0); }
148 | }
149 |
150 | @-webkit-keyframes home-to-ipsum {
151 | 0% { -webkit-transform: scale(1) translate3d(0, 0, 0); }
152 | 45% { -webkit-transform: scale(0.25); }
153 | 55% { -webkit-transform: scale(0.25) translate3d(0, 0, 0); }
154 | 100% { -webkit-transform: scale(1) translate3d(-85%, -85%, 0); }
155 | }
156 |
157 | /* moz */
158 | @-moz-keyframes about-to-home {
159 | 0% { -moz-transform: scale(1) translate(85%, 85%); }
160 | 45% { -moz-transform: scale(0.25); }
161 | 55% { -moz-transform: scale(0.25) translate(0, 0); }
162 | 100% { -moz-transform: scale(1); }
163 | }
164 |
165 | @-moz-keyframes lorem-to-home {
166 | 0% { -moz-transform: scale(1) translate(85%, -85%); }
167 | 45% { -moz-transform: scale(0.25); }
168 | 55% { -moz-transform: scale(0.25) translate(0, 0); }
169 | 100% { -moz-transform: scale(1); }
170 | }
171 |
172 | @-moz-keyframes ipsum-to-home {
173 | 0% { -moz-transform: scale(1) translate(-85%, -85%); }
174 | 45% { -moz-transform: scale(0.25); }
175 | 55% { -moz-transform: scale(0.25) translate3d(0, 0); }
176 | 100% { -moz-transform: scale(1); }
177 | }
178 |
179 | @-moz-keyframes home-to-about {
180 | 0% { -moz-transform: scale(1) translate(0,0); }
181 | 45% { -moz-transform: scale(0.25); }
182 | 55% { -moz-transform: scale(0.25) translate(0,0); }
183 | 100% { -moz-transform: scale(1) translate(85%, 85%); }
184 | }
185 |
186 | @-moz-keyframes home-to-lorem {
187 | 0% { -moz-transform: scale(1) translate(0, 0); }
188 | 45% { -moz-transform: scale(0.25); }
189 | 55% { -moz-transform: scale(0.25) translate(0, 0); }
190 | 100% { -moz-transform: scale(1) translate(85%, -85%); }
191 | }
192 |
193 | @-moz-keyframes home-to-ipsum {
194 | 0% { -moz-transform: scale(1) translate(0, 0); }
195 | 45% { -moz-transform: scale(0.25); }
196 | 55% { -moz-transform: scale(0.25) translate(0, 0); }
197 | 100% { -moz-transform: scale(1) translate(-85%, -85%); }
198 | }
199 |
200 | /* css proper */
201 | @keyframes about-to-home {
202 | 0% { transform: scale(1) translate3d(85%, 85%, 0); }
203 | 45% { transform: scale(0.25); }
204 | 55% { transform: scale(0.25) translate3d(0, 0, 0); }
205 | 100% { transform: scale(1); }
206 | }
207 |
208 | @keyframes lorem-to-home {
209 | 0% { transform: scale(1) translate3d(85%, -85%, 0); }
210 | 45% { transform: scale(0.25); }
211 | 55% { transform: scale(0.25) translate3d(0, 0, 0); }
212 | 100% { transform: scale(1); }
213 | }
214 |
215 | @keyframes ipsum-to-home {
216 | 0% { transform: scale(1) translate3d(-85%, -85%, 0); }
217 | 45% { transform: scale(0.25); }
218 | 55% { transform: scale(0.25) translate3d(0, 0, 0); }
219 | 100% { transform: scale(1); }
220 | }
221 |
222 | @keyframes home-to-about {
223 | 0% { transform: scale(1) translate3d(0,0,0); }
224 | 45% { transform: scale(0.25); }
225 | 55% { transform: scale(0.25) translate3d(0,0,0); }
226 | 100% { transform: scale(1) translate3d(85%, 85%, 0); }
227 | }
228 |
229 | @keyframes home-to-lorem {
230 | 0% { transform: scale(1) translate3d(0, 0, 0); }
231 | 45% { transform: scale(0.25); }
232 | 55% { transform: scale(0.25) translate3d(0, 0, 0); }
233 | 100% { transform: scale(1) translate3d(85%, -85%, 0); }
234 | }
235 |
236 | @keyframes home-to-ipsum {
237 | 0% { transform: scale(1) translate3d(0, 0, 0); }
238 | 45% { transform: scale(0.25); }
239 | 55% { transform: scale(0.25) translate3d(0, 0, 0); }
240 | 100% { transform: scale(1) translate3d(-85%, -85%, 0); }
241 | }
242 |
--------------------------------------------------------------------------------
/jquery.js:
--------------------------------------------------------------------------------
1 | /*! jQuery v1.8.3 jquery.com | jquery.org/license */
2 | (function(e,t){function _(e){var t=M[e]={};return v.each(e.split(y),function(e,n){t[n]=!0}),t}function H(e,n,r){if(r===t&&e.nodeType===1){var i="data-"+n.replace(P,"-$1").toLowerCase();r=e.getAttribute(i);if(typeof r=="string"){try{r=r==="true"?!0:r==="false"?!1:r==="null"?null:+r+""===r?+r:D.test(r)?v.parseJSON(r):r}catch(s){}v.data(e,n,r)}else r=t}return r}function B(e){var t;for(t in e){if(t==="data"&&v.isEmptyObject(e[t]))continue;if(t!=="toJSON")return!1}return!0}function et(){return!1}function tt(){return!0}function ut(e){return!e||!e.parentNode||e.parentNode.nodeType===11}function at(e,t){do e=e[t];while(e&&e.nodeType!==1);return e}function ft(e,t,n){t=t||0;if(v.isFunction(t))return v.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return v.grep(e,function(e,r){return e===t===n});if(typeof t=="string"){var r=v.grep(e,function(e){return e.nodeType===1});if(it.test(t))return v.filter(t,r,!n);t=v.filter(t,r)}return v.grep(e,function(e,r){return v.inArray(e,t)>=0===n})}function lt(e){var t=ct.split("|"),n=e.createDocumentFragment();if(n.createElement)while(t.length)n.createElement(t.pop());return n}function Lt(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function At(e,t){if(t.nodeType!==1||!v.hasData(e))return;var n,r,i,s=v._data(e),o=v._data(t,s),u=s.events;if(u){delete o.handle,o.events={};for(n in u)for(r=0,i=u[n].length;r