Skip to content
Permalink
Browse files

Added examples, updated license year

  • Loading branch information...
rigor789 committed Feb 7, 2017
1 parent 919ff90 commit 31170525d9c07bf08aeb6239bf7a2658594748d1
Showing with 153 additions and 1 deletion.
  1. +1 −0 .npmignore
  2. +1 −1 LICENSE
  3. +2 −0 example/client.css
  4. +1 −0 example/client.css.map
  5. +3 −0 example/client.js
  6. +1 −0 example/client.js.map
  7. +10 −0 example/index.html
  8. +11 −0 examples.config.js
  9. +120 −0 examples.vue
  10. +3 −0 package.json
@@ -1,2 +1,3 @@
node_modules
.editorconfig
.idea
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2015 Igor Randjelovic
Copyright (c) 2017 Igor Randjelovic

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

Some generated files are not rendered by default. Learn more.

Some generated files are not rendered by default. Learn more.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>vue-scrollTo examples</title>
<link href="/client.css" rel="stylesheet"></head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/client.js"></script></body>
</html>
@@ -0,0 +1,11 @@
module.exports = {

filename: {
js: '[name].js',
css: '[name].css'
},

html: {
title: 'vue-scrollTo examples'
}
}
@@ -0,0 +1,120 @@
<template>
<div class="Index">
<p class="center">
<img class="vue-logo" src="https://vuejs.org/images/logo.png" alt="Vue logo">
</p>

<h1 class="center">
vue-scrollTo Examples
</h1>

<p class="center">
<button v-scroll-to="'#element'">Scroll down with string literal</button>
<button v-scroll-to="{ el: '#element' }">Scroll down with el:</button>
<button v-scroll-to="{ element: '#element' }">Scroll down with element:</button>
<button v-scroll-to="{ el: '#element', duration: 5000 }">Scroll down in 5 seconds</button>
<button v-scroll-to="{ el: '#element', easing: 'linear' }">Scroll down with different easing</button>
<button v-scroll-to="{ el: '#element', easing: [.6, -.80, .30, 1.9], duration: 2000 }">Scroll down with custom easing</button>
<button v-scroll-to="{ el: '#element', offset: 200 }">Scroll down with offset</button>
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<h1 id="element">Hi i'm #element, nice to meet you. You scrolled a long way to meet me!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
This paragraph is about 200px lower from the #element...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</template>


<script>
import Vue from 'vue'
import VueScrollTo from 'index.js'
Vue.use(VueScrollTo)
export default {
}
</script>

<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
width: 600px;
margin: 0 auto;
font-family: sans-serif;
}
.vue-logo {
width: 200px;
height: auto;
}
h1 {
}
button {
display: inline-block;
border: none;
outline: none;
padding: 10px 15px;
background: #4fc08d;
border: 1px solid #4fc08d;
color: #fff;
border-radius: 20px;
margin: 10px;
cursor: pointer;
}
.center {
text-align: center;
}
</style>
@@ -24,5 +24,8 @@
},
"dependencies": {
"bezier-easing": "^2.0.3"
},
"scripts": {
"build-examples": "vue build examples.vue --prod --dist example --config examples.config.js"
}
}

0 comments on commit 3117052

Please sign in to comment.
You can’t perform that action at this time.