Skip to content

Commit

Permalink
♻️✨ amp-fx=float-in-(top|bottom) (ampproject#20905)
Browse files Browse the repository at this point in the history 
Partial for ampproject#20881.

Base implementation for `amp-fx="float-in-(top|bottom)"`. Slides elements in-and-out accordingly. Matches behavior of Google viewer's sliding header, see http://go/amp-viewer-scroll and http://go/amp-viewer-scroll-thresholds internally.

Demo: https://scroll-toggle.glitch.me/

Also:

* refactors `amp-fx-collection` for types and size. (~10% down from total bundle)
* adds a bunch of string → types tests (and killed a splice bug, thanks @amphtml-lgtm-bot!)
  • Loading branch information
@alanorozco @bramanudom
alanorozco authored and bramanudom committed Mar 22, 2019
1 parent b23a3e1 commit 8d8252f
Show file tree
Hide file tree
Showing 13 changed files with 1,413 additions and 539 deletions.
202 changes: 202 additions & 0 deletions examples/amp-fx-float-in.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>
<link rel="canonical" href="http://quinta.transformacion/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
</noscript>
<style amp-custom>
body {
font-family: 'Helvetica Neue', sans-serif;
}
header {
height: 60px;
line-height: 60px;
overflow: hidden;
top: 0;
left: 0;
right: 0;
background: rgb(255, 160, 219);
color: white;
font-weight: bold;
text-align: center;
position: fixed;
}
h1 {
margin: 0;
}
main {
padding-top: 20px;
max-width: 600px;
margin: 40px auto;
}
</style>
</head>

<body>
<header id="my-header" amp-fx="float-in-top">
<h1>Ampersand News</h1>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, leo in semper fringilla, magna ante
varius justo, in luctus turpis arcu vitae erat. Proin bibendum tincidunt neque id lobortis. Vivamus id quam ut arcu
convallis pretium quis vel eros. Morbi sagittis pellentesque eros eget lobortis. Pellentesque semper metus eu odio
viverra blandit eu eget orci. Nulla euismod maximus enim, a posuere tortor lacinia in. Sed in maximus orci. Quisque
vehicula, nunc ac fermentum pulvinar, dolor leo ullamcorper ipsum, nec molestie massa erat quis odio. Morbi id diam
eget leo mollis aliquam vel sit amet libero. Fusce at est non mi dignissim hendrerit. Donec fringilla ex quis lacus
rutrum tempus. Nam eu cursus ante.
</p>
<p>
Maecenas ut odio mollis, volutpat ipsum et, semper dolor. Donec commodo lorem semper bibendum commodo. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer auctor velit velit, in
ultricies est fermentum a. Suspendisse ligula nisi, cursus non nisl in, fermentum semper metus. Mauris est massa,
ornare in ipsum vel, tincidunt semper nibh. Donec faucibus dignissim ante, ac commodo leo gravida sed. Nullam diam
massa, consectetur quis purus sed, bibendum dictum sem.
</p>
<p>
Nam ac magna dapibus, feugiat leo non, scelerisque erat. Praesent augue ex, fermentum quis elit at, tincidunt
condimentum leo. Praesent eu turpis quis sapien elementum tempus. Nam vitae ligula vitae quam vulputate fermentum.
Pellentesque felis metus, tincidunt sit amet tortor vel, mattis pharetra tortor. Suspendisse quis vestibulum
mauris, ut laoreet diam. Cras pretium tortor porta leo vulputate, et sodales libero molestie. Sed id urna urna.
</p>
<p>
Phasellus sollicitudin varius odio non luctus. Quisque id blandit sapien. Morbi purus nisl, interdum at posuere sit
amet, egestas non nisl. In lacinia purus in felis venenatis faucibus. Curabitur quis magna quis urna volutpat
blandit non id nulla. Vivamus sollicitudin scelerisque justo. Aliquam ullamcorper vel ipsum eget vehicula. Nulla
condimentum eleifend elit. Quisque tempus vulputate ultrices. Aliquam in nisi vel nisi malesuada dignissim.
Phasellus faucibus, lorem at suscipit vestibulum, quam mi placerat dolor, sed porta nisl mauris ornare risus.
Suspendisse id gravida dui.
</p>
<p>
Etiam et mi rutrum, rutrum ante vitae, semper nulla. Praesent dignissim enim orci, vitae iaculis tellus varius id.
Pellentesque volutpat suscipit efficitur. Vivamus sem urna, pharetra nec dignissim sit amet, vehicula vitae velit.
Suspendisse potenti. Etiam iaculis aliquam auctor. Donec mattis, eros a elementum mattis, dui est accumsan est, eu
vulputate ex lorem nec quam. Cras lobortis, lectus vitae vestibulum eleifend, lectus sapien congue lorem, non
tempus dui lorem vel nibh. Integer sodales lorem facilisis dolor consectetur, at fermentum nibh bibendum. Proin
elementum vehicula cursus. Pellentesque vulputate molestie diam id condimentum.
</p>
<p>
Mauris condimentum vitae diam eget iaculis. Morbi sodales porta metus, consequat ultricies tortor lacinia id.
Vivamus eleifend sapien id cursus consequat. Aliquam erat volutpat. Sed suscipit quam eget libero pellentesque,
vitae porttitor nulla blandit. Vestibulum eu erat est. Quisque auctor mauris tellus. Praesent sodales commodo
tristique.
</p>
<p>
Quisque venenatis sagittis posuere. Morbi magna lorem, dapibus id enim sed, sodales commodo mi. Maecenas luctus
lobortis tortor, a volutpat leo iaculis at. Etiam bibendum, lacus nec pretium tristique, urna diam condimentum
nunc, in mollis augue risus at justo. Sed gravida, eros sit amet lobortis imperdiet, mauris arcu sodales sem, sed
facilisis dolor nisi ac purus. Pellentesque a tristique nisl, ut consequat turpis. Integer euismod non neque quis
eleifend. Curabitur ullamcorper sodales diam, quis faucibus nulla semper ut. Nullam blandit arcu eu mauris
ullamcorper porttitor. Praesent sollicitudin tincidunt quam nec laoreet. Interdum et malesuada fames ac ante ipsum
primis in faucibus.
</p>
<p>
Vivamus lacinia pharetra odio, vitae fermentum urna tristique vel. Praesent viverra euismod massa, at commodo elit
pellentesque eu. Proin semper, quam ac aliquam pharetra, nulla dolor maximus dolor, nec auctor eros ligula at nibh.
Nulla porttitor rutrum est, sit amet aliquam erat volutpat sed. In in nibh in nisi commodo finibus. Pellentesque
sollicitudin est hendrerit leo fringilla commodo. Praesent ipsum risus, ultricies ut facilisis ac, gravida id
libero. Fusce ut nulla sem. Integer pulvinar neque ante, eu sollicitudin ex condimentum bibendum. Maecenas sed
molestie metus. Fusce eget fringilla sem. Donec sed nulla rhoncus, tempor ante commodo, iaculis nunc. Suspendisse
potenti.
</p>
<p>
Vivamus ut mi a sapien tincidunt facilisis. Cras sed volutpat elit. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Nulla feugiat lorem nec nulla gravida, ac commodo ex ornare. Vivamus scelerisque rhoncus magna
vel posuere. Aliquam erat volutpat. Quisque eget risus vestibulum, pellentesque odio eget, semper risus. Praesent
dui tortor, mollis et mi nec, interdum gravida risus. Nulla dapibus eget nisl quis tincidunt. Donec tincidunt nibh
eget dapibus malesuada.
</p>
<p>
Fusce varius, lorem sit amet mattis pretium, dui lacus iaculis dui, ac finibus turpis quam vel velit. Duis eu
auctor urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque faucibus placerat ligula id
lobortis. In varius cursus mi, non egestas est ornare sit amet. Mauris nisi elit, aliquam id dolor sed, fringilla
egestas libero. Integer mollis, diam ut convallis feugiat, dui lectus vulputate sem, vitae egestas justo quam vitae
ligula. In quis sem finibus, posuere eros ut, accumsan orci. Curabitur eget eleifend metus. Vivamus in bibendum
tortor. Suspendisse dignissim nibh a pellentesque imperdiet. Aenean finibus risus non arcu molestie, at consectetur
justo porttitor. Vestibulum nec risus varius, fringilla augue nec, consectetur magna. Nam nisl eros, iaculis eget
tincidunt eget, lobortis quis turpis. In tincidunt nunc arcu, vel feugiat leo iaculis quis. In sodales ligula dui,
sit amet scelerisque turpis eleifend id.
</p>
<p>
Curabitur quis dictum arcu. Maecenas hendrerit tristique elit quis gravida. Morbi in magna aliquam, blandit ligula
eget, pretium sapien. Curabitur a elit rhoncus justo auctor faucibus. Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. In imperdiet tempor arcu, at consequat ligula. Morbi nec eros id leo
sagittis consequat.
</p>
<p>
Proin euismod ut ligula in viverra. Cras mauris mi, faucibus nec faucibus id, porta ac augue. Nam lobortis elit
sagittis, laoreet metus sed, consequat elit. Cras posuere est sit amet varius aliquet. Nunc non nibh volutpat,
tempus risus sit amet, sagittis est. Nulla ut dictum nisl. Donec nec ipsum ante. Mauris vehicula lectus venenatis
maximus efficitur.
</p>
<p>
In malesuada aliquet nisi vel posuere. Mauris vestibulum pellentesque vulputate. Curabitur at massa mattis, varius
elit vitae, pulvinar purus. Cras dictum facilisis ante ut hendrerit. Vivamus eu orci eget nisl lobortis mattis.
Vivamus dui ante, consectetur sit amet eros ut, dapibus tempor risus. Praesent faucibus molestie pellentesque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida, nisi eget gravida bibendum, sapien elit
imperdiet odio, non elementum ante nisi nec purus. Morbi ac ante justo. Integer rhoncus odio vitae iaculis
suscipit. Nulla tellus metus, porttitor ac sagittis at, lobortis sit amet lectus. Donec et enim vitae sem tincidunt
consectetur. Aenean dapibus semper faucibus. Duis et imperdiet libero.
</p>
<p>
Nam placerat quam ac nisi aliquam, quis sagittis dolor mollis. Curabitur vel nisl id magna semper sagittis.
Phasellus sem ipsum, pretium sed justo a, fermentum ornare leo. Duis aliquam malesuada scelerisque. Phasellus
posuere enim id ornare egestas. Sed sit amet risus quis tortor facilisis aliquet sed ut enim. Morbi placerat felis
id ipsum volutpat scelerisque ultricies a augue. Orci varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur ligula urna, sollicitudin ac ultrices a, sodales eu enim. Pellentesque felis
metus, dignissim ut nisi quis, feugiat iaculis ex. Cras et lorem purus. Quisque auctor sed magna ac molestie.
Nullam rutrum, urna vel mollis rhoncus, tortor est consectetur felis, quis semper nunc leo nec libero. Mauris
vestibulum rhoncus finibus. Donec vitae libero sem. Cras ultrices dolor vitae varius tempor.
</p>
<p>
Praesent et neque in tellus maximus lobortis. Aenean ut malesuada nisl, a dictum dui. Proin sed ipsum sed libero
laoreet volutpat non ac dui. Vestibulum eget ipsum ut sapien accumsan consequat. Donec ut quam eget tellus lobortis
bibendum eu eget sem. Praesent gravida est ac nisi facilisis volutpat vel non tellus. Nam id dolor elementum,
aliquet metus sed, vehicula nisl. Pellentesque vel fringilla lorem. Suspendisse lacinia diam eu aliquam aliquet.
Nulla vulputate suscipit enim.
</p>
<p>
Nam in pulvinar arcu, ut facilisis magna. Vivamus sollicitudin accumsan dignissim. Donec eu erat volutpat, dictum
metus quis, pharetra sem. Duis ligula purus, consequat eu enim nec, volutpat pretium diam. Proin imperdiet
consequat lacinia. Pellentesque vel tincidunt urna, non cursus odio. Fusce pellentesque rhoncus interdum. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Donec posuere, quam ac tincidunt molestie, tellus ex fermentum
tellus, vitae fermentum justo lacus in justo. In rhoncus rutrum lectus, eu sodales metus pharetra sit amet.
Phasellus eget accumsan ipsum, ut euismod velit. Vivamus pellentesque velit justo, eu commodo sem iaculis eget.
Maecenas bibendum libero a neque elementum, in dignissim tortor tempor.
</p>
<p>
Quisque faucibus sodales metus non mollis. Nunc sodales ex a rhoncus fermentum. Proin lectus dui, accumsan ac
vehicula ac, varius eget lacus. Aliquam pellentesque metus eget maximus laoreet. Vivamus elementum ipsum sit amet
lectus vestibulum, venenatis porta nunc aliquam. Phasellus vitae metus faucibus, ullamcorper enim eget, congue
lectus. Quisque fermentum in dui ut eleifend. Ut dictum tellus enim, in luctus orci consectetur sed. Phasellus
consequat elit quam, ac auctor lorem convallis eu. Vivamus eget justo id nisi fermentum fermentum. Vivamus
scelerisque libero ac mi sollicitudin pretium et ut eros. Aliquam consectetur auctor sagittis. Nullam dignissim
elit et vehicula sagittis. Fusce tristique nulla ut lorem pharetra rhoncus. Ut ac dui erat.
</p>
<p>
Quisque aliquet viverra feugiat. Sed ac erat pulvinar, dapibus sapien ac, semper nisl. Mauris purus ex, consectetur
eget libero at, efficitur aliquet turpis. Praesent et mi sed eros sollicitudin ultricies a id magna. Quisque non
euismod sapien. Aenean posuere metus vitae sem rutrum aliquet. Sed porta facilisis neque eget blandit. Sed sit amet
tincidunt est. Phasellus vitae urna condimentum, consequat velit vel, pellentesque augue. Aenean feugiat eros non
mi luctus, nec facilisis felis consequat.
</p>
<p>
Ut quis augue tristique, consequat neque eget, finibus metus. Nam at odio luctus, finibus sapien et, pellentesque
metus. Cras vitae faucibus turpis, in viverra neque. Aenean sit amet diam lobortis, laoreet enim in, euismod est.
Nullam mi quam, scelerisque eget volutpat id, scelerisque et nibh. Fusce imperdiet cursus varius. Integer
scelerisque tempus elit, tristique pulvinar dui luctus ut. Proin fringilla gravida mi vitae convallis.
</p>
<p>
Proin condimentum euismod pulvinar. Donec vitae augue a eros imperdiet ultricies. Mauris in sollicitudin neque.
Maecenas faucibus vulputate ligula. In sed dolor non augue aliquam finibus. Suspendisse sit amet lorem purus. Morbi
aliquet venenatis ligula, at gravida ex faucibus vel. Vivamus ornare elit sit amet mi faucibus, eu finibus neque
condimentum. Duis interdum, nisl vitae vehicula varius, nisi tortor pellentesque risus, ut rhoncus justo augue et
urna. Nulla tristique tortor nisl, id maximus justo iaculis aliquam. Donec elementum sagittis dolor.
</p>
</main>
</body>
</html>

0 comments on commit 8d8252f

Please sign in to comment.