Skip to content

Instantly share code, notes, and snippets.

@mattdesl

mattdesl/test.html

Created July 6, 2020 17:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mattdesl/c969ccb9729c5dfc652b6c80f090c792 to your computer and use it in GitHub Desktop.
Save mattdesl/c969ccb9729c5dfc652b6c80f090c792 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test.html
<body>
<p>Lorem ipsum</p>
<main data-scroll-container>
<p data-scroll data-scroll-speed="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus nisi, maximus non nisl sed, tincidunt pellentesque est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque faucibus posuere ligula dignissim ultrices. Quisque at tellus non massa scelerisque vulputate. Nam dictum eget sapien porta pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla convallis ac nibh ut ultricies. Aliquam aliquam tempus sollicitudin. Donec sed pulvinar ex. Praesent at quam fringilla, pharetra lectus eget, fermentum nisl. Nulla aliquet velit in urna tristique dignissim. Fusce venenatis massa arcu, non accumsan magna egestas et. Vestibulum faucibus eget dolor nec hendrerit.</p>
<iframe
data-scroll
data-scroll-speed="2"
src="webgl/index.html"
width="100%"
height="300px"
frameBorder="0"
scrolling="no"></iframe>
<p data-scroll data-scroll-speed="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus nisi, maximus non nisl sed, tincidunt pellentesque est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque faucibus posuere ligula dignissim ultrices. Quisque at tellus non massa scelerisque vulputate. Nam dictum eget sapien porta pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla convallis ac nibh ut ultricies. Aliquam aliquam tempus sollicitudin. Donec sed pulvinar ex. Praesent at quam fringilla, pharetra lectus eget, fermentum nisl. Nulla aliquet velit in urna tristique dignissim. Fusce venenatis massa arcu, non accumsan magna egestas et. Vestibulum faucibus eget dolor nec hendrerit.</p>
<p data-scroll data-scroll-speed="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus nisi, maximus non nisl sed, tincidunt pellentesque est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque faucibus posuere ligula dignissim ultrices. Quisque at tellus non massa scelerisque vulputate. Nam dictum eget sapien porta pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla convallis ac nibh ut ultricies. Aliquam aliquam tempus sollicitudin. Donec sed pulvinar ex. Praesent at quam fringilla, pharetra lectus eget, fermentum nisl. Nulla aliquet velit in urna tristique dignissim. Fusce venenatis massa arcu, non accumsan magna egestas et. Vestibulum faucibus eget dolor nec hendrerit.</p>
<p data-scroll data-scroll-speed="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus nisi, maximus non nisl sed, tincidunt pellentesque est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque faucibus posuere ligula dignissim ultrices. Quisque at tellus non massa scelerisque vulputate. Nam dictum eget sapien porta pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla convallis ac nibh ut ultricies. Aliquam aliquam tempus sollicitudin. Donec sed pulvinar ex. Praesent at quam fringilla, pharetra lectus eget, fermentum nisl. Nulla aliquet velit in urna tristique dignissim. Fusce venenatis massa arcu, non accumsan magna egestas et. Vestibulum faucibus eget dolor nec hendrerit.</p>
<p data-scroll data-scroll-speed="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus nisi, maximus non nisl sed, tincidunt pellentesque est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque faucibus posuere ligula dignissim ultrices. Quisque at tellus non massa scelerisque vulputate. Nam dictum eget sapien porta pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla convallis ac nibh ut ultricies. Aliquam aliquam tempus sollicitudin. Donec sed pulvinar ex. Praesent at quam fringilla, pharetra lectus eget, fermentum nisl. Nulla aliquet velit in urna tristique dignissim. Fusce venenatis massa arcu, non accumsan magna egestas et. Vestibulum faucibus eget dolor nec hendrerit.</p>
</main>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
<script>
(function () {
var scroll = new LocomotiveScroll({
smooth: true,
el: document.querySelector('main')
});
scroll.init();
scroll.start();
})();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment