mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
251 lines
15 KiB
251 lines
15 KiB
<!DOCTYPE html>
|
|
<html lang="en-gb" dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Transition - UIkit tests</title>
|
|
<script src="js/test.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="uk-container">
|
|
|
|
<h1>Transition</h1>
|
|
|
|
<div class="uk-grid-small uk-child-width-1-3@s uk-child-width-1-6@m" uk-grid>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-fade uk-position-bottom uk-overlay uk-overlay-default">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Fade</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Fade Cover</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-fade uk-position-cover uk-position-small uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Fade Cover Small</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-fade uk-overlay-default uk-position-cover"></div>
|
|
<div class="uk-position-center">Headline</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Without Text</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-position-center">
|
|
<span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
|
|
</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Icon</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<img class="uk-transition-fade uk-position-cover" src="images/dark.jpg" alt="">
|
|
</div>
|
|
<p class="uk-margin-small-top">Fade 2 Images</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-position-center">
|
|
<div class="uk-transition-scale-up">Headline</div>
|
|
</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Scale Up</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-scale-down uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Scale Down Cover</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img class="uk-transition-scale-up uk-transition-opaque" src="images/photo.jpg" alt="">
|
|
</div>
|
|
<p class="uk-margin-small-top">Scale Up Image</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img class="uk-transition-scale-down uk-transition-opaque" src="images/photo.jpg" alt="">
|
|
</div>
|
|
<p class="uk-margin-small-top">Scale Down Image</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<img class="uk-transition-scale-up uk-position-cover" src="images/dark.jpg" alt="">
|
|
</div>
|
|
<p class="uk-margin-small-top">2 Images</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<img class="uk-transition-scale-up uk-position-cover" src="images/dark.jpg" alt="">
|
|
<div class="uk-position-center">
|
|
<span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
|
|
</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">2 Images + Icon</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-slide-top uk-position-top uk-overlay uk-overlay-default">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Top</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Bottom</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-slide-left uk-position-left uk-overlay uk-overlay-default">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Left</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-slide-right uk-position-right uk-overlay uk-overlay-default">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Right</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-slide-top uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Top Cover</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-slide-bottom uk-position-cover uk-position-small uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Bottom Cover</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-position-center">
|
|
<div class="uk-transition-slide-top-small">Headline</div>
|
|
<div class="uk-transition-slide-bottom-small">Subheadline</div>
|
|
</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Small Top + Bottom</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-position-center">
|
|
<div class="uk-transition-slide-left-small">Headline</div>
|
|
<div class="uk-transition-slide-right-small">Subheadline</div>
|
|
</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Small Left + Right</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-slide-top-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Top Small</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-slide-bottom-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Bottom Small</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-slide-left-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Left Small</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-slide-right-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Right Small</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-position-center">
|
|
<div class="uk-transition-slide-top-medium">Headline</div>
|
|
<div class="uk-transition-slide-bottom-medium">Subheadline</div>
|
|
</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Medium Top + Bottom</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-position-center">
|
|
<div class="uk-transition-slide-left-medium">Headline</div>
|
|
<div class="uk-transition-slide-right-medium">Subheadline</div>
|
|
</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Medium Left + Right</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-slide-top-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Top Medium</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-slide-bottom-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Bottom Medium</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-slide-left-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Left Medium</p>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
|
|
<img src="images/photo.jpg" alt="">
|
|
<div class="uk-transition-slide-right-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
|
|
</div>
|
|
<p class="uk-margin-small-top">Right Medium</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|