Skip to content

Commit c99b72c

Browse files
author
Chris Hurlburt
committed
scroll-marker component, image lazy load example, scroll markers example
1 parent 652d1fc commit c99b72c

30 files changed

+417
-43
lines changed

‎examples/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1.0">
6-
<title>testing</title>
6+
<title>ScrollView Examples</title>
77
</head>
88
<body>
99
<div id="app"></div>

‎examples/src/App.vue‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
<template>
22
<div id="app">
3+
<Navigation></Navigation>
34
<router-view></router-view>
45
</div>
56
</template>
67

78
<script>
9+
import Navigation from './components/Navigation'
10+
811
export default {
9-
name: 'app'
12+
name: 'app',
13+
components: {
14+
Navigation
15+
}
1016
}
1117
</script>
1218

@@ -15,4 +21,13 @@ body, html {
1521
margin: 0;
1622
padding: 0;
1723
}
24+
25+
body {
26+
font-family: sans-serif;
27+
}
28+
29+
p {
30+
line-height: 1.5;
31+
}
32+
1833
</style>

‎examples/src/components/ExampleStart.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div class="example-start">
3+
<h1 class="example-title">{{ title }}</h1>
4+
<p class="example-description">{{ description }}</p>
5+
<h3>Scroll to Begin</h3>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
props: {
12+
title: {
13+
type: String,
14+
required: true
15+
},
16+
description: {
17+
type: String,
18+
required: true
19+
}
20+
}
21+
}
22+
</script>
23+
24+
25+
<style scoped>
26+
.example-start {
27+
width: 100%;
28+
height: 100vh;
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
flex-direction: column;
33+
line-height: 1.5;
34+
}
35+
36+
.example-title {
37+
text-align: center;
38+
}
39+
40+
.example-description {
41+
text-align: center;
42+
max-width: 600px;
43+
}
44+
</style>

‎examples/src/components/Navigation.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<nav class="main-navigation">
3+
<ul class="nav-list">
4+
<li class="nav-item"><a :href="`${path}#/`">Home</a></li>
5+
<li class="nav-item"><a :href="`${path}#/animation`">Animation</a></li>
6+
<li class="nav-item"><a :href="`${path}#/lazy-load`">Lazy Loading</a></li>
7+
<li class="nav-item"><a :href="`${path}#/scrollspy`">Scrollspy Navigation</a></li>
8+
<li class="nav-item"><a :href="`${path}#/scroll-markers`">Scroll Markers</a></li>
9+
</ul>
10+
<p class="menu">Menu</p>
11+
</nav>
12+
</template>
13+
14+
<script>
15+
export default {
16+
computed: {
17+
path() {
18+
return __webpack_public_path__
19+
}
20+
}
21+
}
22+
</script>
23+
24+
<style scoped>
25+
.main-navigation {
26+
position: fixed;
27+
top: 0;
28+
right: 0;
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
padding: 15px 40px;
33+
z-index: 99;
34+
}
35+
36+
.main-navigation:hover .nav-list {
37+
opacity: 1;
38+
transform: translateY(0);
39+
}
40+
41+
.nav-list {
42+
transition: all .2s ease-in-out;
43+
transform: translateY(-100%);
44+
opacity: 0;
45+
}
46+
47+
.nav-item {
48+
display: inline-block;
49+
margin: 0 15px;
50+
}
51+
52+
.menu {
53+
cursor: pointer;
54+
border: 1px solid #000;
55+
padding: 10px 20px;
56+
margin-left: 15px;
57+
transition: all .2s ease-in-out;
58+
}
59+
60+
.menu:hover {
61+
background: #000;
62+
color: #fff;
63+
}
64+
65+
</style>

‎examples/src/components/pages/Home.vue‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
<template>
22
<section class="home">
33
<h1 class="title">ScrollView Examples</h1>
4-
<div class="examples">
4+
<!-- <div class="examples">
55
<a :href="`${path}#/animation`">Animation</a>
66
<a :href="`${path}#/lazy-load`">Lazy Loading</a>
77
<a :href="`${path}#/scrollspy`">Scrollspy Navigation</a>
88
<a :href="`${path}#/scroll-markers`">Scroll Markers</a>
9-
</div>
9+
</div> -->
1010
</section>
1111
</template>
1212

1313
<script>
1414
export default {
15-
created() {
16-
this.path = __webpack_public_path__
17-
}
15+
1816
}
1917
</script>
2018

‎examples/src/components/pages/LazyLoad.vue‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎examples/src/components/pages/ScrollMarkers.vue‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎examples/src/components/pages/Animation.vue‎ renamed to ‎examples/src/components/pages/animation/Animation.vue‎

File renamed without changes.

‎examples/src/components/pages/lazyload/LazyImage.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div :class="['lazy-image', { loaded }]">
3+
<img :src="from" class="lazy-image__from" />
4+
<img :src="toLoad" class="lazy-image__to" ref="loadedEl" />
5+
</div>
6+
</template>
7+
8+
<script>
9+
export default {
10+
data() {
11+
return {
12+
loaded: false,
13+
toLoad: ''
14+
}
15+
},
16+
watch: {
17+
visible(visible) {
18+
if (visible && !this.loaded) {
19+
this.$refs.loadedEl.onload = () => this.loaded = true
20+
this.toLoad = this.to
21+
}
22+
}
23+
},
24+
props: {
25+
from: {
26+
type: String,
27+
required: true,
28+
},
29+
to: {
30+
type: String,
31+
required: true,
32+
},
33+
visible: {
34+
type: Boolean,
35+
default: () => false
36+
}
37+
}
38+
}
39+
</script>
40+
41+
<style>
42+
.lazy-image {
43+
position: relative;
44+
margin: 400px 0;
45+
}
46+
47+
.lazy-image__to {
48+
position: absolute;
49+
top: 0;
50+
left: 0;
51+
opacity: 0;
52+
transition: opacity .4s ease-in;
53+
}
54+
55+
.lazy-image.loaded .lazy-image__to {
56+
opacity: 1;
57+
}
58+
</style>

‎examples/src/components/pages/lazyload/LazyLoad.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<section class="lazy-load">
3+
<Example-start
4+
title="Lazy Load Example"
5+
description="This is an example demonstrating a Medium style lazy load effect for images. Low resolution
6+
versions of the images are loaded initially. As images scroll into the viewport, ScrollView
7+
triggers the full resolution versions to load."
8+
></Example-start>
9+
<div class="images">
10+
<scroll-view>
11+
<template slot-scope="visibility">
12+
<LazyImage from="/static/vw_blur.jpg" to="/static/vw.jpg" :visible="visibility.vw" key="vw"></LazyImage>
13+
<LazyImage from="/static/temple_blur.jpg" to="/static/temple.jpg" :visible="visibility.temple" key="temple"></LazyImage>
14+
<LazyImage from="/static/squirrel_blur.jpg" to="/static/squirrel.jpg" :visible="visibility.squirrel" key="squirrel"></LazyImage>
15+
<LazyImage from="/static/city_blur.jpg" to="/static/city.jpg" :visible="visibility.city" key="city"></LazyImage>
16+
<LazyImage from="/static/book_blur.jpg" to="/static/book.jpg" :visible="visibility.book" key="book"></LazyImage>
17+
<LazyImage from="/static/ape_blur.jpg" to="/static/ape.jpg" :visible="visibility.ape" key="ape"></LazyImage>
18+
</template>
19+
</scroll-view>
20+
</div>
21+
22+
</section>
23+
</template>
24+
25+
<script>
26+
import ExampleStart from '.././../ExampleStart'
27+
import LazyImage from './LazyImage'
28+
29+
export default {
30+
components: {
31+
LazyImage,
32+
ExampleStart
33+
}
34+
}
35+
</script>
36+
37+
<style scoped>
38+
.images {
39+
display: flex;
40+
flex-direction: column;
41+
align-items: center;
42+
}
43+
</style>
44+

0 commit comments

Comments
 (0)