uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
299 lines (259 loc) • 18.1 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Parallax - UIkit tests</title>
<script src="js/test.js"></script>
<style>
.test-color { border: 10px #fff solid; }
</style>
</head>
<body>
<div class="uk-section-default">
<div class="uk-section uk-background-cover uk-background-primary uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -400; sepia: 100" uk-height-viewport="offset-top: true">
<h1 class="uk-heading-xlarge uk-margin-auto uk-margin-auto-vertical">Parallax</h1>
</div>
</div>
<div class="uk-section uk-section-default">
<div class="uk-container">
<h2>Viewport Units</h2>
<div id="test-viewport-units" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: -20vw">
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
<h1 uk-parallax="target: #test-viewport-units; opacity: 0; y: -20vw">Headline</h1>
<p uk-parallax="target: #test-viewport-units; opacity: 0; y: 20vw">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<h2>Start and End Stops</h2>
<div id="test-start-end-stops" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -200">
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
<h1 uk-parallax="opacity: 0,1; y: -200,0; scale: 2,1;">Headline</h1>
<p uk-parallax="opacity: 0,1; y: 200,0; scale: 0,1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<h2>Multiple Stops</h2>
<div id="test-multiple-stops" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,200,0,200">
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
<h1 uk-parallax="x: -200,200,-200,200; scale: 2,1,2,1;">Headline</h1>
<p uk-parallax="x: 200,-200,200,-200; scale: 1,0,1,0,1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<h2>Stop Positions</h2>
<div id="test-stop-positions" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,50 50%, 200">
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
<h1 uk-parallax="x: -200,200 20%,-200 80%,200; scale: 1,1 50%,2;">Headline</h1>
<p uk-parallax="x: 200,-200 20%,200 80%,-200; scale: 1,1 50%,2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<h2>Target</h2>
<div id="test-target" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: -400">
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
<h1 uk-parallax="target: #test-target; opacity: 0; y: -200; scale: 2">Headline</h1>
<p uk-parallax="target: #test-target; opacity: 0; y: 200; scale: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<h2>Start and End</h2>
<div id="test-start-end" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: -400">
<div class="uk-grid uk-margin-auto uk-flex-inline">
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; y: 396; easing: 0;">0 / 0</div></div>
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100%; end: 100%; y: 396; easing: 0;">100% / 100%</div></div>
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 30vh; end: 30vh; y: 396; easing: 0;">30vh / 30vh</div></div>
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100% + 100; end: 100% + 100; y: 396; easing: 0;">100% + 100 / 100% + 100</div></div>
</div>
</div>
<h2>Easing</h2>
<div id="test-easing" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -200">
<div class="uk-grid uk-margin-auto uk-margin-auto-vertical uk-flex-inline">
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -3">-3</div></div>
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -2">-2</div></div>
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -1">-1</div></div>
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -0.5">-0.5</div></div>
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 0">0</div></div>
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 0.5">0.5</div></div>
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 1">1</div></div>
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 2">2</div></div>
<div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 3">3</div></div>
</div>
</div>
<h2>Color</h2>
<div id="test-color" class="test-color uk-height-large uk-margin uk-overflow-hidden uk-flex" uk-parallax="start: 100%; end: 100%; background-color: yellow,white; border-color: #00f,#f00;">
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
<h1 uk-parallax="target: #test-color; start: 100%; end: 100%; opacity: 0,1; y: -200%,0;">Headline</h1>
<p uk-parallax="target: #test-color; start: 100%; end: 100%; opacity: 0,1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p uk-parallax="target: #test-color; start: 100%; end: 100%; y: 200%,0; color: #0f0;">
<span uk-icon="icon: uikit; ratio: 2"></span>
<span uk-icon="icon: heart; ratio: 2"></span>
<span uk-icon="icon: check; ratio: 2"></span>
</p>
</div>
</div>
<h2>Filter</h2>
<div id="test-filter" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="start: 100%; end: 100%; invert: 100;">
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
<h1 uk-parallax="target: #test-filter; start: 100%; end: 100%; opacity: 0,1; y: -200%,0;">Headline</h1>
<p uk-parallax="target: #test-filter; start: 100%; end: 100%; opacity: 0,1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p uk-parallax="target: #test-filter; start: 100%; end: 100%; blur: 20,0;">
<span uk-icon="icon: uikit; ratio: 2"></span>
<span uk-icon="icon: heart; ratio: 2"></span>
<span uk-icon="icon: check; ratio: 2"></span>
</p>
</div>
</div>
<h2>SVG Stroke</h2>
<div id="test-stroke" class="uk-child-width-expand uk-text-center" uk-grid>
<div uk-parallax="target: #test-stroke; start: 100%; end: 100%; stroke: 45;">
<img width="400" height="400" src="images/icons.svg#cloud-upload" uk-svg alt="">
</div>
<div uk-parallax="target: #test-stroke; start: 100%; end: 100%; stroke: 100%,0;">
<img width="400" height="400" src="images/icons.svg#cloud-upload" uk-svg alt="">
</div>
</div>
<h2>JavaScript Options</h2>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>easing</code></td>
<td>Number</td>
<td>1</td>
<td>Animation easing during scrolling.</td>
</tr>
<tr>
<td><code>target</code></td>
<td>CSS Selector</td>
<td>false</td>
<td>Element dimension reference for animation duration.</td>
</tr>
<tr>
<td><code>start</code></td>
<td>Length</td>
<td>0</td>
<td>Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's top border and viewport's bottom border intersect.</td>
</tr>
<tr>
<td><code>end</code></td>
<td>Length</td>
<td>0</td>
<td>End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's bottom border and the viewport's top border intersect.</td>
</tr>
<tr>
<td><code>media</code></td>
<td>Boolean, Number, String</td>
<td>false</td>
<td>Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).</td>
</tr>
</tbody>
</table>
</div>
<h2>Animated properties</h2>
<p>You can define multiple animation stops by using a comma-separated list of values. (e.g. x: 0,50,150). A stop can be defined by a value and a position. If you don't specify the position of a stop, it is placed halfway between the one that precedes it and the one that follows it.</p>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Default Unit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>x</code></td>
<td><code>px</code></td>
<td>Animate translateX.</td>
</tr>
<tr>
<td><code>y</code></td>
<td><code>px</code></td>
<td>Animate translateY.</td>
</tr>
<tr>
<td><code>bgy</code></td>
<td><code>px</code></td>
<td>Animate a background image (y-axis).</td>
</tr>
<tr>
<td><code>bgx</code></td>
<td><code>px</code></td>
<td>Animate a background image (x-axis).</td>
</tr>
<tr>
<td><code>rotate</code></td>
<td><code>deg</code></td>
<td>Animate rotation clockwise.</td>
</tr>
<tr>
<td><code>scale</code></td>
<td></td>
<td>Animate scaling.</td>
</tr>
<tr>
<td><code>color</code></td>
<td></td>
<td>Animate color (needs start and stop value).</td>
</tr>
<tr>
<td><code>background-color</code></td>
<td></td>
<td>Animate background-color (needs start and stop value).</td>
</tr>
<tr>
<td><code>border-color</code></td>
<td></td>
<td>Animate border color (needs start and stop value).</td>
</tr>
<tr>
<td><code>opacity</code></td>
<td></td>
<td>Animate the opacity.</td>
</tr>
<tr>
<td><code>blur</code></td>
<td><code>px</code></td>
<td>Animate the blur filter.</td>
</tr>
<tr>
<td><code>hue</code></td>
<td><code>deg</code></td>
<td>Animate the hue rotation filter.</td>
</tr>
<tr>
<td><code>grayscale</code></td>
<td><code>%</code></td>
<td>Animate the grayscale filter.</td>
</tr>
<tr>
<td><code>invert</code></td>
<td><code>%</code></td>
<td>Animate the invert filter.</td>
</tr>
<tr>
<td><code>saturate</code></td>
<td><code>%</code></td>
<td>Animate the saturate filter.</td>
</tr>
<tr>
<td><code>sepia</code></td>
<td><code>%</code></td>
<td>Animate the sepia filter.</td>
</tr>
<tr>
<td><code>stroke</code></td>
<td></td>
<td>Animate strokes within SVG images.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>