Skip to content

Commit fe6e30c

Browse files
author
Sepand Parhami
authored
Object position (#13)
Support object-position - Change from always assuming centered to supporting the `object-position` CSS property - Change scaling to use top/left corner as the transform origin - Add a separate animation for the position of the rendered image matching `object-position` - Add two demos using `object-position`
1 parent 6475017 commit fe6e30c

24 files changed

+1046
-96
lines changed

‎docs/demo/expand/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
A demo of an inline expansion of an image using `prepareImageAnimation`. This
2+
demo uses various value for `object-position` to show how you can position the
3+
rendered images and how they look when animated.
4+
5+
Note: The demo's collapse animation has a a few problems if done while the
6+
bottom of the body is visible in the viewport. The animation may be janky in
7+
Chrome. On other browsers, the page scroll position will jump at the end of the
8+
animation. You should ideally leave enough space below the last image such that
9+
you do not encounter this behavior.

‎docs/demo/expand/boats.jpg

194 KB
Loading

‎docs/demo/expand/index.css

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/**
2+
* Copyright 2018 The AMP HTML Authors. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS-IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
html {
18+
overflow-x: hidden;
19+
}
20+
21+
.page {
22+
overflow-anchor: none;
23+
height: 100%;
24+
max-width: 30em;
25+
margin: auto;
26+
padding: 12px;
27+
}
28+
29+
.img-container {
30+
position: relative;
31+
height: 96px;
32+
margin: 16px 0;
33+
}
34+
35+
.large,
36+
.small,
37+
.text {
38+
position: absolute;
39+
}
40+
41+
.small {
42+
object-fit: cover;
43+
width: 96px;
44+
height: 96px;
45+
}
46+
47+
.large {
48+
max-width: 100%;
49+
object-fit: cover;
50+
}
51+
52+
.text {
53+
top: 0;
54+
left: 104px;
55+
max-height: 96px;
56+
overflow: hidden;
57+
}
58+
59+
.align-left {
60+
object-position: top left;
61+
}
62+
63+
.align-off-left {
64+
object-position: top 0px left -16px;
65+
}
66+
67+
.align-right {
68+
object-position: top right;
69+
}
70+
71+
.align-center {
72+
object-position: center;
73+
}
74+

‎docs/demo/expand/index.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!--
2+
Copyright 2018 The AMP HTML Authors. All Rights Reserved.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS-IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
16+
17+
<html>
18+
<head>
19+
<meta name="viewport" content="width=device-width, initial-scale=1">
20+
<link rel="stylesheet" href="index.css">
21+
<script type="module" crossorigin src="index.js" defer></script>
22+
</head>
23+
<body>
24+
<div class="page">
25+
<p>
26+
Click on any of the images to toggle expand/collapse. Note that the initial state is positioned differently for each.
27+
</p>
28+
29+
<figure class="img-container" onclick="toggle(event)">
30+
<img class="small align-left" aria-hidden="true" src="boats.jpg">
31+
<img class="large" aria-hidden="true" src="boats.jpg" style="visibility: hidden">
32+
<figcaption class="text">
33+
Aligned along the left edge of the image. This expands the crop right, while scaling up the height. The initial state uses <code>object-position: top left</code>.
34+
</figcaption>
35+
</figure>
36+
37+
<p>
38+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
39+
</p>
40+
41+
<figure class="img-container" onclick="toggle(event)">
42+
<img class="small align-off-left" aria-hidden="true" src="boats.jpg">
43+
<img class="large" aria-hidden="true" src="boats.jpg" style="visibility: hidden">
44+
<figcaption class="text">
45+
Aligned along the left edge of the image, offset by 8px. The initial state uses <code>object-position: top left -8px;</code>.
46+
</figcaption>
47+
</figure>
48+
49+
<p>
50+
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
51+
</p>
52+
53+
<figure class="img-container" onclick="toggle(event)">
54+
<img class="small align-center" aria-hidden="true" src="boats.jpg">
55+
<img class="large" aria-hidden="true" src="boats.jpg" style="visibility: hidden">
56+
<figcaption class="text">
57+
Aligned on the center of the image. This is the default behavior for <code>object-position</code>.
58+
</figcaption>
59+
</figure>
60+
61+
<p>
62+
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
63+
</p>
64+
65+
<figure class="img-container" onclick="toggle(event)">
66+
<img class="small align-right" aria-hidden="true" src="boats.jpg">
67+
<img class="large" aria-hidden="true" src="boats.jpg" style="visibility: hidden">
68+
<figcaption class="text">
69+
Aligned on the right edge of the image. This expands the crop left, while moving the image to the right to align with the end state.
70+
</figcaption>
71+
</figure>
72+
73+
<p>
74+
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
75+
</p>
76+
</div>
77+
</body>
78+
</html>

‎docs/demo/expand/index.js

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
/**
2+
* Copyright 2018 The AMP HTML Authors. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS-IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import {prepareImageAnimation} from '../../../dist/index.js';
18+
19+
const duration = 600;
20+
const curve = {x1: 0.42, y1: 0, x2: 0.58, y2: 1};
21+
const styles = {
22+
animationDuration: `${duration}ms`,
23+
};
24+
25+
window.toggle = function(event) {
26+
const container = event.currentTarget;
27+
const expanded = container._expanded;
28+
29+
const smallImg = container.querySelector('.small');
30+
const largeImg = container.querySelector('.large');
31+
const text = container.querySelector('.text');
32+
const srcImg = expanded ? largeImg : smallImg;
33+
const targetImg = expanded ? smallImg : largeImg;
34+
const {
35+
height: startHeight,
36+
width: startWidth,
37+
} = srcImg.getBoundingClientRect();
38+
const {
39+
height: endHeight,
40+
width: endWidth,
41+
} = targetImg.getBoundingClientRect();
42+
const deltaHeight = endHeight - startHeight;
43+
const deltaWidth = endWidth - startWidth;
44+
45+
// Move everything after the img container using a translate. This is to make
46+
// sure the movement performs well (comapred to translating height of the
47+
// container).
48+
Array.from(container.parentNode.children)
49+
.filter(c => {
50+
return container.compareDocumentPosition(c) === Node.DOCUMENT_POSITION_FOLLOWING;
51+
}).forEach(c => {
52+
// Add to any current offset when multiple are expanded.
53+
const deltaY = (c._deltaY || 0) + deltaHeight;
54+
c._deltaY = deltaY;
55+
56+
Object.assign(c.style, {
57+
'transitionProperty': 'transform',
58+
'transitionDuration': `${duration}ms`,
59+
'transitionTimingFunction': 'cubic-bezier(0.42, 0, 0.58, 1)',
60+
'transform': `translateY(${deltaY}px)`,
61+
});
62+
});
63+
64+
Object.assign(text.style, {
65+
'transitionProperty': 'transform opacity',
66+
'transitionDuration': `${duration}ms`,
67+
'transitionTimingFunction': 'cubic-bezier(0.42, 0, 0.58, 1)',
68+
'opacity': expanded ? '1' : '0',
69+
'transform': expanded ? '' : `translateX(${deltaWidth}px)`,
70+
});
71+
72+
const {
73+
applyAnimation,
74+
cleanupAnimation,
75+
} = prepareImageAnimation({
76+
srcImg,
77+
targetImg,
78+
styles,
79+
curve,
80+
});
81+
82+
container._expanded = !expanded;
83+
srcImg.style.visibility = 'hidden';
84+
applyAnimation();
85+
86+
// Note: In order to allow resizing / orientation change to work correctly,
87+
// more work is needed to undo the transations and size things correctly when
88+
// no more animations are in progress. That is, changing the large image to
89+
// `position: static` (and the small one to absolute) in the expanded state,
90+
// then removing the `translateY`s applied.
91+
setTimeout(() => {
92+
targetImg.style.visibility = 'visible';
93+
cleanupAnimation();
94+
}, duration + 100);
95+
}

‎docs/demo/pan/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
A simple back and forth in place panning animation using `prepareImageAnimation`. This uses `object-position` to declare what position the animation should start/end at. This demo simply sets up an animation with infinite iterations that alternates directions. Since the demo continually plays the animation, it never calls `cleanupAnimation`.

‎docs/demo/pan/boats.jpg

25.8 KB
Loading

‎docs/demo/pan/index.css

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/**
2+
* Copyright 2018 The AMP HTML Authors. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS-IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
body {
18+
/* Make it so we can vertically scroll the demo */
19+
min-height: 140vh;
20+
}
21+
22+
figure {
23+
max-width: 400px;
24+
margin: auto;
25+
}
26+
27+
.panorama {
28+
position: relative;
29+
height: 100px;
30+
max-width: 400px;
31+
}
32+
33+
.panorama-start,
34+
.panorama-end {
35+
position: absolute;
36+
top: 0;
37+
left: 0;
38+
width: 100%;
39+
height: 100%;
40+
object-fit: cover;
41+
}
42+
43+
.panorama-start {
44+
object-position: top left;
45+
}
46+
47+
.panorama-end {
48+
object-position: top right;
49+
}

‎docs/demo/pan/index.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!--
2+
Copyright 2018 The AMP HTML Authors. All Rights Reserved.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS-IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
16+
17+
<html>
18+
<head>
19+
<meta name="viewport" content="width=device-width, initial-scale=1">
20+
<link rel="stylesheet" href="index.css">
21+
<script type="module" crossorigin src="index.js" defer></script>
22+
</head>
23+
<body>
24+
<figure>
25+
<div class="panorama" aria-hidden="true">
26+
<!--
27+
The start position is placed second in order to stack on top of
28+
the end. This makes the UI render correctly prior to the JS for
29+
animation loading.
30+
-->
31+
<img class="panorama-end" src="./boats.jpg">
32+
<img class="panorama-start" src="./boats.jpg">
33+
</div>
34+
<figcaption>Some boats on Lake Tahoe</figcaption>
35+
</figure>
36+
37+
<p>
38+
This demo is mostly to show that the <code>object-position</code> can be animated. For a simple panning effect, using a <code>transform: translateX(...px)</code> would accomplish the same effect and <code>prepareImageAnimation</code> would be overkill.
39+
</p>
40+
</body>
41+
</html>

0 commit comments

Comments
 (0)