├── .editorconfig ├── .gitignore ├── README.MD ├── babel.config.js ├── gulpfile.js ├── package.json ├── src ├── js │ ├── index.js │ ├── utills.js │ └── vendor │ │ └── smooth-scrollbar │ │ ├── ScrollTriggerPlugin.js │ │ └── SoftScrollPlugin.js ├── pug │ ├── _includes │ │ ├── head.pug │ │ ├── layout.pug │ │ └── scripts.pug │ └── index.pug ├── scss │ ├── base.scss │ ├── demo.scss │ ├── fonts.scss │ ├── main.scss │ ├── normalize.scss │ ├── outro.scss │ ├── sequence.scss │ └── variables.scss └── static │ └── img │ ├── 1.jpg │ ├── 10.jpg │ ├── 100.jpg │ ├── 101.jpg │ ├── 102.jpg │ ├── 103.jpg │ ├── 104.jpg │ ├── 105.jpg │ ├── 106.jpg │ ├── 107.jpg │ ├── 108.jpg │ ├── 109.jpg │ ├── 11.jpg │ ├── 110.jpg │ ├── 111.jpg │ ├── 112.jpg │ ├── 113.jpg │ ├── 114.jpg │ ├── 115.jpg │ ├── 116.jpg │ ├── 117.jpg │ ├── 118.jpg │ ├── 119.jpg │ ├── 12.jpg │ ├── 120.jpg │ ├── 121.jpg │ ├── 122.jpg │ ├── 123.jpg │ ├── 124.jpg │ ├── 125.jpg │ ├── 126.jpg │ ├── 127.jpg │ ├── 128.jpg │ ├── 129.jpg │ ├── 13.jpg │ ├── 130.jpg │ ├── 131.jpg │ ├── 132.jpg │ ├── 133.jpg │ ├── 134.jpg │ ├── 135.jpg │ ├── 136.jpg │ ├── 137.jpg │ ├── 138.jpg │ ├── 139.jpg │ ├── 14.jpg │ ├── 140.jpg │ ├── 141.jpg │ ├── 142.jpg │ ├── 143.jpg │ ├── 144.jpg │ ├── 145.jpg │ ├── 146.jpg │ ├── 147.jpg │ ├── 148.jpg │ ├── 149.jpg │ ├── 15.jpg │ ├── 150.jpg │ ├── 151.jpg │ ├── 152.jpg │ ├── 153.jpg │ ├── 154.jpg │ ├── 155.jpg │ ├── 156.jpg │ ├── 157.jpg │ ├── 158.jpg │ ├── 159.jpg │ ├── 16.jpg │ ├── 160.jpg │ ├── 161.jpg │ ├── 162.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 19.jpg │ ├── 2.jpg │ ├── 20.jpg │ ├── 21.jpg │ ├── 22.jpg │ ├── 23.jpg │ ├── 24.jpg │ ├── 25.jpg │ ├── 26.jpg │ ├── 27.jpg │ ├── 28.jpg │ ├── 29.jpg │ ├── 3.jpg │ ├── 30.jpg │ ├── 31.jpg │ ├── 32.jpg │ ├── 33.jpg │ ├── 34.jpg │ ├── 35.jpg │ ├── 36.jpg │ ├── 37.jpg │ ├── 38.jpg │ ├── 39.jpg │ ├── 4.jpg │ ├── 40.jpg │ ├── 41.jpg │ ├── 42.jpg │ ├── 43.jpg │ ├── 44.jpg │ ├── 45.jpg │ ├── 46.jpg │ ├── 47.jpg │ ├── 48.jpg │ ├── 49.jpg │ ├── 5.jpg │ ├── 50.jpg │ ├── 51.jpg │ ├── 52.jpg │ ├── 53.jpg │ ├── 54.jpg │ ├── 55.jpg │ ├── 56.jpg │ ├── 57.jpg │ ├── 58.jpg │ ├── 59.jpg │ ├── 6.jpg │ ├── 60.jpg │ ├── 61.jpg │ ├── 62.jpg │ ├── 63.jpg │ ├── 64.jpg │ ├── 65.jpg │ ├── 66.jpg │ ├── 67.jpg │ ├── 68.jpg │ ├── 69.jpg │ ├── 7.jpg │ ├── 70.jpg │ ├── 71.jpg │ ├── 72.jpg │ ├── 73.jpg │ ├── 74.jpg │ ├── 75.jpg │ ├── 76.jpg │ ├── 77.jpg │ ├── 78.jpg │ ├── 79.jpg │ ├── 8.jpg │ ├── 80.jpg │ ├── 81.jpg │ ├── 82.jpg │ ├── 83.jpg │ ├── 84.jpg │ ├── 85.jpg │ ├── 86.jpg │ ├── 87.jpg │ ├── 88.jpg │ ├── 89.jpg │ ├── 9.jpg │ ├── 90.jpg │ ├── 91.jpg │ ├── 92.jpg │ ├── 93.jpg │ ├── 94.jpg │ ├── 95.jpg │ ├── 96.jpg │ ├── 97.jpg │ ├── 98.jpg │ └── 99.jpg └── webpack.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.json] 13 | indent_style = tab 14 | indent_size = 4 15 | 16 | [*.{css,sass,scss,less}] 17 | indent_size = 4 18 | 19 | [*.md] 20 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # System 2 | .DS_Store 3 | .AppleDouble 4 | .LSOverride 5 | Icon 6 | ._* 7 | .Spotlight-V100 8 | .Trashes 9 | Desktop.ini 10 | Thumbs.db 11 | ehthumbs.db 12 | 13 | # IDEs 14 | nbproject/ 15 | .idea 16 | *.iml 17 | .vscode 18 | *.sublime-project 19 | *.sublime-workspace 20 | 21 | # ENVs 22 | node_modules 23 | bower_components 24 | .env 25 | 26 | # Project 27 | /dist/ 28 | /build/ 29 | /tmp/ 30 | /src/scss/generated 31 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | ## Cuberto Scroll Sequence Effect Demo 2 | 3 | ### Frontend dependencies 4 | Smooth Scrollbar (https://github.com/idiotWu/smooth-scrollbar) 5 | 6 | GSAP v3 (https://greensock.com/gsap/) 7 | 8 | ### Setup demo project 9 | 10 | `npm install` or `yarn install` 11 | 12 | ### Start demo project 13 | 14 | `gulp` or `gulp serve` deploy app and start browsersync server + watchers 15 | 16 | ## File structure 17 | ```bash 18 | ├── /tmp/ # Temporary served files 19 | └── /src/ # The source code of the application 20 | ├── /js/ # JavaScript source 21 | ├── /pug/ # Pug templates 22 | └── /_includes/ # Pug partials 23 | ├── /scss/ # SCSS styles 24 | ├── /static/ # Static files (fonts, images, videos, etc..) 25 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | const presets = [ 2 | [ 3 | "@babel/preset-env", 4 | { 5 | "loose": true, 6 | "exclude": ["transform-async-to-generator", "transform-regenerator"] 7 | } 8 | ] 9 | ]; 10 | 11 | const plugins = [ 12 | [ 13 | "module:fast-async", 14 | { 15 | "spec": true 16 | } 17 | ] 18 | ]; 19 | 20 | module.exports = {presets, plugins, "sourceType": "unambiguous"}; 21 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Gulp SMPL Layout Builder 3 | * 4 | * @version 8.3.3 (lite) 5 | * @author Artem Dordzhiev (Draft) | Cuberto 6 | * @type Module gulp 7 | * @license The MIT License (MIT) 8 | */ 9 | 10 | /* Get plugins */ 11 | const gulp = require('gulp'); 12 | const browserSync = require('browser-sync'); 13 | const plumber = require('gulp-plumber'); 14 | const pug = require('gulp-pug'); 15 | const sass = require('gulp-sass')(require('sass')); 16 | const autoprefixer = require('gulp-autoprefixer'); 17 | const del = require('del'); 18 | const webpack = require('webpack-stream'); 19 | 20 | /* Primary tasks */ 21 | gulp.task('default', (done) => { 22 | gulp.series('serve')(done) 23 | }); 24 | 25 | gulp.task('serve', (done) => { 26 | gulp.series('clean', gulp.parallel('pug', 'sass', 'js'), 'browsersync', 'watch')(done) 27 | }); 28 | 29 | /* Pug task */ 30 | gulp.task('pug', () => { 31 | return gulp.src(['./src/pug/**/*.pug', '!./src/pug/_includes/**/*']) 32 | .pipe(plumber()) 33 | .pipe(pug({ 34 | pretty: true, 35 | basedir: "./src/pug/" 36 | })) 37 | .pipe(gulp.dest('./tmp/')).on('end', () => { 38 | browserSync.reload(); 39 | }); 40 | }); 41 | 42 | /* Sass task */ 43 | gulp.task('sass', () => { 44 | return gulp.src('./src/scss/main.scss') 45 | .pipe(sass({ 46 | "includePaths": "node_modules" 47 | })) 48 | .pipe(autoprefixer()) 49 | .pipe(gulp.dest('./tmp/assets/css/')) 50 | .pipe(browserSync.stream({match: '**/*.css'})); 51 | }); 52 | 53 | /* JS (webpack) task */ 54 | gulp.task('js', () => { 55 | return gulp.src(['./src/js/**/*']) 56 | .pipe(webpack(require('./webpack.config.js'))) 57 | .pipe(gulp.dest('./tmp/assets/js')); 58 | }); 59 | 60 | /* Browsersync Server */ 61 | gulp.task('browsersync', (done) => { 62 | browserSync.init({ 63 | server: ["./tmp", "./src/static"], 64 | notify: false, 65 | ui: false, 66 | online: false, 67 | ghostMode: { 68 | clicks: false, 69 | forms: false, 70 | scroll: false 71 | } 72 | }); 73 | done(); 74 | }); 75 | 76 | /* Watcher */ 77 | gulp.task('watch', () => { 78 | global.isWatching = true; 79 | 80 | gulp.watch("./src/scss/**/*.scss", gulp.series('sass')); 81 | gulp.watch("./src/pug/**/*.pug", gulp.series('pug')); 82 | gulp.watch("./src/js/**/*.*", gulp.series('js')); 83 | gulp.watch("./config.json", gulp.parallel('pug', 'js')); 84 | }); 85 | 86 | /* FS tasks */ 87 | gulp.task('clean', () => { 88 | return del(['./tmp/**/*'], {dot: true}); 89 | }); 90 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cuberto-scroll-sequence-demo", 3 | "version": "1.0.0", 4 | "author": "Cuberto (cuberto.com)", 5 | "contributors": [], 6 | "dependencies": { 7 | "smooth-scrollbar": "^8.7.0", 8 | "gsap": "^3.9.0" 9 | }, 10 | "browserslist": [ 11 | "since 2010", 12 | "last 2 versions" 13 | ], 14 | "devDependencies": { 15 | "@babel/core": "^7.16.5", 16 | "@babel/preset-env": "^7.16.5", 17 | "@babel/runtime": "^7.16.5", 18 | "@babel/plugin-transform-runtime": "^7.16.5", 19 | "babel-loader": "^8.2.3", 20 | "browser-sync": "^2.27.7", 21 | "core-js": "^3.20.0", 22 | "del": "^6.0.0", 23 | "fast-async": "^6.3.8", 24 | "gulp": "^4.0.2", 25 | "gulp-autoprefixer": "^8.0.0", 26 | "gulp-pug": "^5.0.0", 27 | "gulp-plumber": "^1.2.1", 28 | "gulp-sass": "^5.0.0", 29 | "imports-loader": "^0.8.0", 30 | "sass": "^1.49.9", 31 | "webpack-stream": "^5.2.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import SmoothScrollbar from 'smooth-scrollbar'; 2 | import ScrollTriggerPlugin from 'vendor/smooth-scrollbar/ScrollTriggerPlugin'; 3 | import SoftScrollPlugin from 'vendor/smooth-scrollbar/SoftScrollPlugin'; 4 | import gsap from "gsap"; 5 | import {preloadImages, calcDrawImage} from "utills"; 6 | 7 | // GSAP ScrollTrigger & Soft Edges plugin for SmoothScroll 8 | SmoothScrollbar.use(ScrollTriggerPlugin, SoftScrollPlugin); 9 | 10 | // Init smooth scrollbar 11 | const view = document.getElementById('view-main'); 12 | const scrollbar = SmoothScrollbar.init(view, { 13 | renderByPixels: false, 14 | damping: 0.075 15 | }); 16 | 17 | // Header out trigger animation 18 | (function () { 19 | const container = document.querySelector('.cb-demo'); 20 | const content = container.querySelector('.cb-demo-content'); 21 | 22 | const tl = new gsap.timeline({ 23 | scrollTrigger: { 24 | trigger: container, 25 | scrub: true, 26 | start: "bottom center" 27 | } 28 | }); 29 | 30 | tl.to(content, { 31 | y: "50%", 32 | skewY: 3, 33 | duration: 1, 34 | ease: "none" 35 | }, 0); 36 | 37 | tl.to(content, { 38 | opacity: 0, 39 | duration: 0.5, 40 | ease: "none" 41 | }, 0); 42 | })(); 43 | 44 | // Sequence trigger animation 45 | (function () { 46 | 47 | // generate array of images paths. length = frames length, see: /src/assets/img 48 | const urls = new Array(162).fill(null).map((value, index) => `/img/${(index + 1)}.jpg`); 49 | 50 | // load images async 51 | const images = preloadImages(urls); 52 | 53 | const container = document.querySelector('.cb-sequence'); 54 | const canvas = container.querySelector('canvas'); 55 | const ctx = canvas.getContext('2d'); 56 | 57 | // create "scrub" ScrollTrigger effect with pin of main block 58 | // pinType: transform is required when use pin with smooth scrollbar 59 | const tl = new gsap.timeline({ 60 | scrollTrigger: { 61 | trigger: container, 62 | scrub: true, 63 | start: "top top", 64 | end: "200%", // scene duration 65 | pin: true, 66 | pinType: "transform" 67 | } 68 | }); 69 | 70 | // canvas resize handler 71 | window.addEventListener('resize', function resize() { 72 | ctx.canvas.width = document.documentElement.clientWidth; 73 | ctx.canvas.height = document.documentElement.clientHeight; 74 | return resize; 75 | }()); 76 | 77 | // when all images ready 78 | images.then((imgs) => { 79 | const counter = {i: 0}; // iteration object 80 | 81 | tl.to(counter, { 82 | i: imgs.length - 1, // increment counter to frames length 83 | roundProps: "i", // round, only int 84 | ease: "none", // ease provided by smooth-scroll momentum 85 | immediateRender: true, // render first frame immediately 86 | onUpdate: () => calcDrawImage(ctx, imgs[counter.i]) // draw image in canvas when timeline update 87 | }, 0); 88 | 89 | // draw current frame again when scroll stopped and resize happened 90 | window.addEventListener('resize', () => calcDrawImage(ctx, imgs[counter.i])); 91 | }); 92 | 93 | })(); 94 | -------------------------------------------------------------------------------- /src/js/utills.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Load image via XHR as blob 3 | */ 4 | export const preloadImage = (src) => { 5 | return new Promise((resolve, reject) => { 6 | const img = new Image(); 7 | const xhr = new XMLHttpRequest(); 8 | 9 | xhr.open("GET", src, true); 10 | xhr.responseType = "blob"; 11 | xhr.onload = () => { 12 | img.src = URL.createObjectURL(xhr.response); 13 | img.onload = () => resolve(img); 14 | }; 15 | xhr.onerror = () => reject(); 16 | xhr.send(); 17 | }); 18 | }; 19 | 20 | /** 21 | * Batch load images via XHR as blob 22 | */ 23 | export const preloadImages = (urls) => { 24 | return Promise.all(urls.map((src) => preloadImage(src))); 25 | }; 26 | 27 | /** 28 | * Draw and scale image in canvas 29 | */ 30 | export const calcDrawImage = (ctx, image, left = 0.5, top = 0.5) => { 31 | const cWidth = ctx.canvas.width; 32 | const cHeight = ctx.canvas.height; 33 | const width = image.width; 34 | const height = image.height; 35 | const ratio = width / height; 36 | const cRatio = cWidth / cHeight; 37 | let resultHeight, resultWidth; 38 | 39 | if (ratio > cRatio) { 40 | resultHeight = cHeight; 41 | resultWidth = cHeight * ratio; 42 | } else { 43 | resultWidth = cWidth; 44 | resultHeight = cWidth / ratio; 45 | } 46 | 47 | ctx.drawImage(image, (cWidth - resultWidth) * left, (cHeight - resultHeight) * top, resultWidth, resultHeight) 48 | }; -------------------------------------------------------------------------------- /src/js/vendor/smooth-scrollbar/ScrollTriggerPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * SmoothScrollbar GSAP ScrollTrigger Plugin 3 | * 4 | * @version 1.0.1 5 | * @author Artem Dordzhiev (Draft) 6 | */ 7 | 8 | import Scrollbar from "smooth-scrollbar"; 9 | import gsap from "gsap"; 10 | import ScrollTrigger from "gsap/ScrollTrigger"; 11 | 12 | gsap.registerPlugin(ScrollTrigger); 13 | 14 | class ScrollTriggerPlugin extends Scrollbar.ScrollbarPlugin { 15 | constructor(scrollbar, options) { 16 | super(scrollbar, options); 17 | this.setProxy(); 18 | } 19 | 20 | setProxy() { 21 | const scrollbar = this.scrollbar; 22 | 23 | ScrollTrigger.scrollerProxy(document.body, { 24 | scrollTop(value) { 25 | if (arguments.length) { 26 | scrollbar.scrollTop = value; // setter 27 | } 28 | return scrollbar.scrollTop; // getter 29 | }, 30 | getBoundingClientRect() { 31 | return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; 32 | }, 33 | pinType: "transform" 34 | }); 35 | 36 | scrollbar.addListener(ScrollTrigger.update); 37 | } 38 | } 39 | 40 | ScrollTriggerPlugin.pluginName = 'ScrollTrigger'; 41 | 42 | export default ScrollTriggerPlugin; 43 | -------------------------------------------------------------------------------- /src/js/vendor/smooth-scrollbar/SoftScrollPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * SmoothScrollbar SoftScroll Plugin 3 | * https://cuberto.com/ 4 | * 5 | * @version 1.0.2 6 | * @author Artem Dordzhiev (Draft) | Cuberto, info@cuberto.com 7 | * @license Copyright 2020, Cuberto. All rights reserved. 8 | */ 9 | 10 | import Scrollbar from "smooth-scrollbar"; 11 | 12 | class SoftScrollPlugin extends Scrollbar.ScrollbarPlugin { 13 | transformDelta(delta, fromEvent) { 14 | const dirX = delta.x > 0 ? 1 : -1; 15 | const dirY = delta.y > 0 ? 1 : -1; 16 | 17 | if (dirX === this.lockX || dirY === this.lockY) { 18 | return {x: 0, y: 0}; 19 | } else { 20 | this.lockX = null; 21 | this.lockY = null; 22 | } 23 | 24 | return delta; 25 | } 26 | 27 | onRender(Data2d) { 28 | const {x, y} = Data2d; 29 | 30 | // Up 31 | if (y < 0 && !this.lockY && Math.abs(y) >= this.scrollbar.scrollTop) { 32 | this.scrollbar.setMomentum(0, -this.scrollbar.scrollTop); 33 | this.lockY = -1; 34 | } 35 | 36 | // Left 37 | if (x < 0 && !this.lockX && Math.abs(x) >= this.scrollbar.scrollLeft) { 38 | this.scrollbar.setMomentum(-this.scrollbar.scrollLeft, 0); 39 | this.lockX = -1; 40 | } 41 | 42 | // Right 43 | if (x > 0 && !this.lockX && Math.abs(x) >= (this.scrollbar.limit.x - this.scrollbar.scrollLeft)) { 44 | this.scrollbar.setMomentum((this.scrollbar.limit.x - this.scrollbar.scrollLeft), 0); 45 | this.lockX = 1; 46 | } 47 | 48 | // Down 49 | if (y > 0 && !this.lockY && Math.abs(y) >= (this.scrollbar.limit.y - this.scrollbar.scrollTop)) { 50 | this.scrollbar.setMomentum(0, (this.scrollbar.limit.y - this.scrollbar.scrollTop)); 51 | this.lockY = 1; 52 | } 53 | 54 | if(y === 0) this.lockY = null; 55 | if(x === 0) this.lockX = null; 56 | } 57 | } 58 | 59 | SoftScrollPlugin.pluginName = 'SoftScroll'; 60 | 61 | export default SoftScrollPlugin; 62 | -------------------------------------------------------------------------------- /src/pug/_includes/head.pug: -------------------------------------------------------------------------------- 1 | meta(charset='utf-8') 2 | block title 3 | title Cuberto Cursor 4 | meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=3.0") 5 | link(rel="stylesheet" href="/assets/css/main.css") -------------------------------------------------------------------------------- /src/pug/_includes/layout.pug: -------------------------------------------------------------------------------- 1 | block variables 2 | doctype html 3 | html 4 | head 5 | include head 6 | body 7 | block content 8 | include scripts 9 | -------------------------------------------------------------------------------- /src/pug/_includes/scripts.pug: -------------------------------------------------------------------------------- 1 | script(src='/assets/js/bundle.js', defer) 2 | -------------------------------------------------------------------------------- /src/pug/index.pug: -------------------------------------------------------------------------------- 1 | extends /_includes/layout 2 | 3 | block title 4 | title Cuberto Sequence Scroll | Demo 5 | 6 | block content 7 | 8 | .cb-layout#view-main 9 | .cb-content 10 | 11 | header.cb-demo 12 | .cb-demo-content 13 | .cb-demo-container 14 | .cb-demo-header 15 | h1 Cuberto Sequence#[br] Scroll Effect 16 | //h2 With GSAP ScrollTrigger & SmoothScroll 17 | 18 | section.cb-sequence 19 | .cb-sequence-stage 20 | canvas 21 | 22 | section.cb-outro 23 | .cb-outro-content 24 | .cb-outro-container 25 | .cb-outro-header 26 | h2 Credits 27 | .cb-outro-list 28 | .cb-outro-list-item: a(href="//cuberto.com/", target="_blank") Cuberto 29 | .cb-outro-list-item: a(href="//greensock.com/gsap/", target="_blank") GreenSock GSAP 30 | .cb-outro-list-item: a(href="//github.com/idiotWu/smooth-scrollbar", target="_blank") Smooth Scrollbar -------------------------------------------------------------------------------- /src/scss/base.scss: -------------------------------------------------------------------------------- 1 | // Document 2 | html { 3 | height:100%; 4 | } 5 | 6 | body { 7 | height:100%; 8 | margin:0; 9 | padding:0; 10 | 11 | background:$color-bg; 12 | color:$color-text; 13 | 14 | font-family:$font-family; 15 | font-size:$font-size; 16 | letter-spacing:$letter-spacing; 17 | line-height:$line-height; 18 | text-align:left; 19 | -webkit-font-smoothing:antialiased; 20 | -moz-osx-font-smoothing:grayscale; 21 | 22 | overflow:hidden !important; 23 | } 24 | 25 | * { 26 | box-sizing:border-box; 27 | 28 | &:before, &:after { 29 | box-sizing:border-box; 30 | } 31 | 32 | &:focus { 33 | outline:none !important; 34 | } 35 | 36 | &::selection { 37 | color:$color-base; 38 | background:$color-graybase; 39 | } 40 | } 41 | 42 | // Links 43 | a { 44 | color:$color-link; 45 | cursor:pointer; 46 | text-decoration:underline; 47 | 48 | &:hover, &:focus { 49 | color:$color-link-hover; 50 | text-decoration:none; 51 | } 52 | } 53 | 54 | a, button, label, input { 55 | -webkit-tap-highlight-color:transparent; 56 | } 57 | 58 | // Media 59 | img, svg, canvas, audio, video, iframe { 60 | vertical-align:middle; 61 | } 62 | 63 | figure { 64 | margin:0; 65 | } 66 | 67 | // Inputs 68 | input, button, select, textarea { 69 | font-family:inherit; 70 | font-size:inherit; 71 | line-height:inherit; 72 | } 73 | 74 | // Buttons 75 | button, [type="button"], [type="reset"], [type="submit"] { 76 | &:not(:disabled) { 77 | cursor:pointer; 78 | } 79 | } 80 | 81 | // Text 82 | p, h1, h2, h3, h4, h5, h6, blockquote { 83 | margin:0; 84 | padding:0; 85 | } 86 | 87 | em { 88 | font-style:normal; 89 | } 90 | 91 | // View 92 | .cb-layout { 93 | height:100%; 94 | } 95 | 96 | .cb-content { 97 | height:100%; 98 | } -------------------------------------------------------------------------------- /src/scss/demo.scss: -------------------------------------------------------------------------------- 1 | .cb-demo { 2 | $root:&; 3 | 4 | position:relative; 5 | z-index:2; 6 | 7 | &-content { 8 | display:flex; 9 | align-items:flex-end; 10 | text-align:center; 11 | height:50vh; 12 | } 13 | 14 | &-container { 15 | flex:1; 16 | width:100%; 17 | padding:0 40px; 18 | 19 | @media (min-width:$screen-md-min) { 20 | padding:0 120px; 21 | } 22 | 23 | @media (min-width:$screen-lg-min) { 24 | padding:0 180px; 25 | } 26 | } 27 | 28 | &-header { 29 | color:#204B45; 30 | transform:translateY(50%); 31 | 32 | h1 { 33 | font-size:30px; 34 | font-weight:bold; 35 | line-height:1; 36 | letter-spacing:-0.02em; 37 | text-align:center; 38 | 39 | @media (min-width:$screen-sm-min) { 40 | font-size:45px; 41 | } 42 | 43 | @media (min-width:$screen-md-min) { 44 | font-size:60px; 45 | } 46 | 47 | @media (min-width:$screen-lg-min) { 48 | font-size:70px; 49 | } 50 | 51 | @media (min-width:$screen-xl-min) { 52 | font-size:80px; 53 | } 54 | } 55 | 56 | h2 { 57 | padding-top:20px; 58 | 59 | font-size:14px; 60 | font-weight:normal; 61 | 62 | @media (min-width:$screen-md-min) { 63 | font-size:16px; 64 | } 65 | 66 | @media (min-width:$screen-xl-min) { 67 | font-size:20px; 68 | } 69 | } 70 | } 71 | } -------------------------------------------------------------------------------- /src/scss/fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap'); -------------------------------------------------------------------------------- /src/scss/main.scss: -------------------------------------------------------------------------------- 1 | // Commons 2 | @import "variables"; 3 | 4 | // Base 5 | @import "fonts"; 6 | @import "normalize"; 7 | @import "base"; 8 | 9 | // Components 10 | @import "demo"; 11 | @import "sequence"; 12 | @import "outro"; -------------------------------------------------------------------------------- /src/scss/normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in 9 | * IE on Windows Phone and in iOS. 10 | */ 11 | 12 | html { 13 | line-height:1.15; /* 1 */ 14 | -ms-text-size-adjust:100%; /* 2 */ 15 | -webkit-text-size-adjust:100%; /* 2 */ 16 | } 17 | 18 | /* Sections 19 | ========================================================================== */ 20 | 21 | /** 22 | * Remove the margin in all browsers (opinionated). 23 | */ 24 | 25 | body { 26 | margin:0; 27 | } 28 | 29 | /** 30 | * Add the correct display in IE 9-. 31 | */ 32 | 33 | article, 34 | aside, 35 | footer, 36 | header, 37 | nav, 38 | section { 39 | display:block; 40 | } 41 | 42 | /** 43 | * Correct the font size and margin on `h1` elements within `section` and 44 | * `article` contexts in Chrome, Firefox, and Safari. 45 | */ 46 | 47 | h1 { 48 | font-size:2em; 49 | margin:0.67em 0; 50 | } 51 | 52 | /* Grouping content 53 | ========================================================================== */ 54 | 55 | /** 56 | * Add the correct display in IE 9-. 57 | * 1. Add the correct display in IE. 58 | */ 59 | 60 | figcaption, 61 | figure, 62 | main { /* 1 */ 63 | display:block; 64 | } 65 | 66 | /** 67 | * Add the correct margin in IE 8. 68 | */ 69 | 70 | figure { 71 | margin:1em 40px; 72 | } 73 | 74 | /** 75 | * 1. Add the correct box sizing in Firefox. 76 | * 2. Show the overflow in Edge and IE. 77 | */ 78 | 79 | hr { 80 | box-sizing:content-box; /* 1 */ 81 | height:0; /* 1 */ 82 | overflow:visible; /* 2 */ 83 | } 84 | 85 | /** 86 | * 1. Correct the inheritance and scaling of font size in all browsers. 87 | * 2. Correct the odd `em` font sizing in all browsers. 88 | */ 89 | 90 | pre { 91 | font-family:monospace, monospace; /* 1 */ 92 | font-size:1em; /* 2 */ 93 | } 94 | 95 | /* Text-level semantics 96 | ========================================================================== */ 97 | 98 | /** 99 | * 1. Remove the gray background on active links in IE 10. 100 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 101 | */ 102 | 103 | a { 104 | background-color:transparent; /* 1 */ 105 | -webkit-text-decoration-skip:objects; /* 2 */ 106 | } 107 | 108 | /** 109 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-. 110 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 111 | */ 112 | 113 | abbr[title] { 114 | border-bottom:none; /* 1 */ 115 | text-decoration:underline; /* 2 */ 116 | text-decoration:underline dotted; /* 2 */ 117 | } 118 | 119 | /** 120 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 121 | */ 122 | 123 | b, 124 | strong { 125 | font-weight:inherit; 126 | } 127 | 128 | /** 129 | * Add the correct font weight in Chrome, Edge, and Safari. 130 | */ 131 | 132 | b, 133 | strong { 134 | font-weight:bolder; 135 | } 136 | 137 | /** 138 | * 1. Correct the inheritance and scaling of font size in all browsers. 139 | * 2. Correct the odd `em` font sizing in all browsers. 140 | */ 141 | 142 | code, 143 | kbd, 144 | samp { 145 | font-family:monospace, monospace; /* 1 */ 146 | font-size:1em; /* 2 */ 147 | } 148 | 149 | /** 150 | * Add the correct font style in Android 4.3-. 151 | */ 152 | 153 | dfn { 154 | font-style:italic; 155 | } 156 | 157 | /** 158 | * Add the correct background and color in IE 9-. 159 | */ 160 | 161 | mark { 162 | background-color:#ff0; 163 | color:#000; 164 | } 165 | 166 | /** 167 | * Add the correct font size in all browsers. 168 | */ 169 | 170 | small { 171 | font-size:80%; 172 | } 173 | 174 | /** 175 | * Prevent `sub` and `sup` elements from affecting the line height in 176 | * all browsers. 177 | */ 178 | 179 | sub, 180 | sup { 181 | font-size:75%; 182 | line-height:0; 183 | position:relative; 184 | vertical-align:baseline; 185 | } 186 | 187 | sub { 188 | bottom:-0.25em; 189 | } 190 | 191 | sup { 192 | top:-0.5em; 193 | } 194 | 195 | /* Embedded content 196 | ========================================================================== */ 197 | 198 | /** 199 | * Add the correct display in IE 9-. 200 | */ 201 | 202 | audio, 203 | video { 204 | display:inline-block; 205 | } 206 | 207 | /** 208 | * Add the correct display in iOS 4-7. 209 | */ 210 | 211 | audio:not([controls]) { 212 | display:none; 213 | height:0; 214 | } 215 | 216 | /** 217 | * Remove the border on images inside links in IE 10-. 218 | */ 219 | 220 | img { 221 | border-style:none; 222 | } 223 | 224 | /** 225 | * Hide the overflow in IE. 226 | */ 227 | 228 | svg:not(:root) { 229 | overflow:hidden; 230 | } 231 | 232 | /* Forms 233 | ========================================================================== */ 234 | 235 | /** 236 | * 1. Change the font styles in all browsers (opinionated). 237 | * 2. Remove the margin in Firefox and Safari. 238 | */ 239 | 240 | button, 241 | input, 242 | optgroup, 243 | select, 244 | textarea { 245 | font-family:sans-serif; /* 1 */ 246 | font-size:100%; /* 1 */ 247 | line-height:1.15; /* 1 */ 248 | margin:0; /* 2 */ 249 | } 250 | 251 | /** 252 | * Show the overflow in IE. 253 | * 1. Show the overflow in Edge. 254 | */ 255 | 256 | button, 257 | input { /* 1 */ 258 | overflow:visible; 259 | } 260 | 261 | /** 262 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 263 | * 1. Remove the inheritance of text transform in Firefox. 264 | */ 265 | 266 | button, 267 | select { /* 1 */ 268 | text-transform:none; 269 | } 270 | 271 | /** 272 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 273 | * controls in Android 4. 274 | * 2. Correct the inability to style clickable types in iOS and Safari. 275 | */ 276 | 277 | button, 278 | html [type="button"], /* 1 */ 279 | [type="reset"], 280 | [type="submit"] { 281 | -webkit-appearance:button; /* 2 */ 282 | } 283 | 284 | /** 285 | * Remove the inner border and padding in Firefox. 286 | */ 287 | 288 | button::-moz-focus-inner, 289 | [type="button"]::-moz-focus-inner, 290 | [type="reset"]::-moz-focus-inner, 291 | [type="submit"]::-moz-focus-inner { 292 | border-style:none; 293 | padding:0; 294 | } 295 | 296 | /** 297 | * Restore the focus styles unset by the previous rule. 298 | */ 299 | 300 | button:-moz-focusring, 301 | [type="button"]:-moz-focusring, 302 | [type="reset"]:-moz-focusring, 303 | [type="submit"]:-moz-focusring { 304 | outline:1px dotted ButtonText; 305 | } 306 | 307 | /** 308 | * Correct the padding in Firefox. 309 | */ 310 | 311 | fieldset { 312 | padding:0.35em 0.75em 0.625em; 313 | } 314 | 315 | /** 316 | * 1. Correct the text wrapping in Edge and IE. 317 | * 2. Correct the color inheritance from `fieldset` elements in IE. 318 | * 3. Remove the padding so developers are not caught out when they zero out 319 | * `fieldset` elements in all browsers. 320 | */ 321 | 322 | legend { 323 | box-sizing:border-box; /* 1 */ 324 | color:inherit; /* 2 */ 325 | display:table; /* 1 */ 326 | max-width:100%; /* 1 */ 327 | padding:0; /* 3 */ 328 | white-space:normal; /* 1 */ 329 | } 330 | 331 | /** 332 | * 1. Add the correct display in IE 9-. 333 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 334 | */ 335 | 336 | progress { 337 | display:inline-block; /* 1 */ 338 | vertical-align:baseline; /* 2 */ 339 | } 340 | 341 | /** 342 | * Remove the default vertical scrollbar in IE. 343 | */ 344 | 345 | textarea { 346 | overflow:auto; 347 | } 348 | 349 | /** 350 | * 1. Add the correct box sizing in IE 10-. 351 | * 2. Remove the padding in IE 10-. 352 | */ 353 | 354 | [type="checkbox"], 355 | [type="radio"] { 356 | box-sizing:border-box; /* 1 */ 357 | padding:0; /* 2 */ 358 | } 359 | 360 | /** 361 | * Correct the cursor style of increment and decrement buttons in Chrome. 362 | */ 363 | 364 | [type="number"]::-webkit-inner-spin-button, 365 | [type="number"]::-webkit-outer-spin-button { 366 | height:auto; 367 | } 368 | 369 | /** 370 | * 1. Correct the odd appearance in Chrome and Safari. 371 | * 2. Correct the outline style in Safari. 372 | */ 373 | 374 | [type="search"] { 375 | -webkit-appearance:textfield; /* 1 */ 376 | outline-offset:-2px; /* 2 */ 377 | } 378 | 379 | /** 380 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 381 | */ 382 | 383 | [type="search"]::-webkit-search-cancel-button, 384 | [type="search"]::-webkit-search-decoration { 385 | -webkit-appearance:none; 386 | } 387 | 388 | /** 389 | * 1. Correct the inability to style clickable types in iOS and Safari. 390 | * 2. Change font properties to `inherit` in Safari. 391 | */ 392 | 393 | ::-webkit-file-upload-button { 394 | -webkit-appearance:button; /* 1 */ 395 | font:inherit; /* 2 */ 396 | } 397 | 398 | /* Interactive 399 | ========================================================================== */ 400 | 401 | /* 402 | * Add the correct display in IE 9-. 403 | * 1. Add the correct display in Edge, IE, and Firefox. 404 | */ 405 | 406 | details, /* 1 */ 407 | menu { 408 | display:block; 409 | } 410 | 411 | /* 412 | * Add the correct display in all browsers. 413 | */ 414 | 415 | summary { 416 | display:list-item; 417 | } 418 | 419 | /* Scripting 420 | ========================================================================== */ 421 | 422 | /** 423 | * Add the correct display in IE 9-. 424 | */ 425 | 426 | canvas { 427 | display:inline-block; 428 | } 429 | 430 | /** 431 | * Add the correct display in IE. 432 | */ 433 | 434 | template { 435 | display:none; 436 | } 437 | 438 | /* Hidden 439 | ========================================================================== */ 440 | 441 | /** 442 | * Add the correct display in IE 10-. 443 | */ 444 | 445 | [hidden] { 446 | display:none; 447 | } 448 | -------------------------------------------------------------------------------- /src/scss/outro.scss: -------------------------------------------------------------------------------- 1 | .cb-outro { 2 | $root:&; 3 | 4 | &-content { 5 | padding:80px 0; 6 | display:flex; 7 | align-items:center; 8 | justify-content:center; 9 | height:100vh; 10 | } 11 | 12 | &-container { 13 | flex:1; 14 | width:100%; 15 | padding:0 40px; 16 | text-align:center; 17 | 18 | @media (min-width:$screen-md-min) { 19 | padding:0 120px; 20 | } 21 | 22 | @media (min-width:$screen-lg-min) { 23 | padding:0 180px; 24 | } 25 | 26 | @media (min-width:$screen-xl-min) { 27 | padding:0 220px; 28 | } 29 | } 30 | 31 | &-header { 32 | color:#204B45; 33 | 34 | h2 { 35 | font-size:20px; 36 | font-weight:bold; 37 | line-height:120%; 38 | 39 | @media (min-width:$screen-md-min) { 40 | font-size:40px; 41 | } 42 | 43 | @media (min-width:$screen-lg-min) { 44 | font-size:60px; 45 | } 46 | } 47 | } 48 | 49 | &-list { 50 | margin:40px 0 0 0; 51 | 52 | &-item { 53 | display:block; 54 | padding:5px 0; 55 | 56 | font-size:16px; 57 | font-weight:normal; 58 | line-height:150%; 59 | 60 | @media (min-width:$screen-md-min) { 61 | font-size:18px; 62 | } 63 | 64 | @media (min-width:$screen-lg-min) { 65 | font-size:21px; 66 | } 67 | 68 | a { 69 | opacity:0.5; 70 | text-decoration:none; 71 | 72 | &:hover { 73 | opacity:1; 74 | } 75 | } 76 | } 77 | } 78 | } -------------------------------------------------------------------------------- /src/scss/sequence.scss: -------------------------------------------------------------------------------- 1 | .cb-sequence { 2 | $root:&; 3 | 4 | position:relative; 5 | height:100vh; 6 | 7 | &-stage { 8 | width:100%; 9 | height:100%; 10 | } 11 | } -------------------------------------------------------------------------------- /src/scss/variables.scss: -------------------------------------------------------------------------------- 1 | /* Main Colors */ 2 | $color-base:#fff; 3 | $color-graybase:#000; 4 | 5 | $color-primary:#4e4d8f; 6 | $color-secondary:#00092b; 7 | 8 | $color-smooth:#6F6F6F; 9 | $color-fill:#EEEEEE; 10 | 11 | $color-bg:$color-base; 12 | $color-text:#000; 13 | $color-link:inherit; 14 | $color-link-hover:inherit; 15 | 16 | /* Fonts */ 17 | $font-family:"Montserrat", sans-serif; 18 | $font-size:14px; 19 | $font-weight:normal; 20 | $letter-spacing:normal; 21 | $line-height:normal; 22 | 23 | /* Screen sizes */ 24 | $screen-xs:360px; 25 | $screen-sm:768px; 26 | $screen-md:1024px; 27 | $screen-lg:1200px; 28 | $screen-ml:1350px; 29 | $screen-xl:1600px; 30 | $screen-ul:1900px; 31 | 32 | $screen-xs-min:$screen-xs; 33 | $screen-xs-max:($screen-sm - 1); 34 | $screen-sm-min:$screen-sm; 35 | $screen-sm-max:($screen-md - 1); 36 | $screen-md-min:$screen-md; 37 | $screen-md-max:($screen-lg - 1); 38 | $screen-lg-min:$screen-lg; 39 | $screen-lg-max:($screen-ml - 1); 40 | $screen-ml-min:$screen-ml; 41 | $screen-ml-max:($screen-xl - 1); 42 | $screen-xl-min:$screen-xl; 43 | $screen-xl-max:($screen-ul - 1); 44 | $screen-ul-min:$screen-ul; 45 | -------------------------------------------------------------------------------- /src/static/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/1.jpg -------------------------------------------------------------------------------- /src/static/img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/10.jpg -------------------------------------------------------------------------------- /src/static/img/100.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/100.jpg -------------------------------------------------------------------------------- /src/static/img/101.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/101.jpg -------------------------------------------------------------------------------- /src/static/img/102.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/102.jpg -------------------------------------------------------------------------------- /src/static/img/103.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/103.jpg -------------------------------------------------------------------------------- /src/static/img/104.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/104.jpg -------------------------------------------------------------------------------- /src/static/img/105.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/105.jpg -------------------------------------------------------------------------------- /src/static/img/106.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/106.jpg -------------------------------------------------------------------------------- /src/static/img/107.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/107.jpg -------------------------------------------------------------------------------- /src/static/img/108.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/108.jpg -------------------------------------------------------------------------------- /src/static/img/109.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/109.jpg -------------------------------------------------------------------------------- /src/static/img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/11.jpg -------------------------------------------------------------------------------- /src/static/img/110.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/110.jpg -------------------------------------------------------------------------------- /src/static/img/111.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/111.jpg -------------------------------------------------------------------------------- /src/static/img/112.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/112.jpg -------------------------------------------------------------------------------- /src/static/img/113.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/113.jpg -------------------------------------------------------------------------------- /src/static/img/114.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/114.jpg -------------------------------------------------------------------------------- /src/static/img/115.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/115.jpg -------------------------------------------------------------------------------- /src/static/img/116.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/116.jpg -------------------------------------------------------------------------------- /src/static/img/117.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/117.jpg -------------------------------------------------------------------------------- /src/static/img/118.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/118.jpg -------------------------------------------------------------------------------- /src/static/img/119.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/119.jpg -------------------------------------------------------------------------------- /src/static/img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/12.jpg -------------------------------------------------------------------------------- /src/static/img/120.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/120.jpg -------------------------------------------------------------------------------- /src/static/img/121.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/121.jpg -------------------------------------------------------------------------------- /src/static/img/122.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/122.jpg -------------------------------------------------------------------------------- /src/static/img/123.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/123.jpg -------------------------------------------------------------------------------- /src/static/img/124.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/124.jpg -------------------------------------------------------------------------------- /src/static/img/125.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/125.jpg -------------------------------------------------------------------------------- /src/static/img/126.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/126.jpg -------------------------------------------------------------------------------- /src/static/img/127.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/127.jpg -------------------------------------------------------------------------------- /src/static/img/128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/128.jpg -------------------------------------------------------------------------------- /src/static/img/129.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/129.jpg -------------------------------------------------------------------------------- /src/static/img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/13.jpg -------------------------------------------------------------------------------- /src/static/img/130.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/130.jpg -------------------------------------------------------------------------------- /src/static/img/131.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/131.jpg -------------------------------------------------------------------------------- /src/static/img/132.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/132.jpg -------------------------------------------------------------------------------- /src/static/img/133.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/133.jpg -------------------------------------------------------------------------------- /src/static/img/134.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/134.jpg -------------------------------------------------------------------------------- /src/static/img/135.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/135.jpg -------------------------------------------------------------------------------- /src/static/img/136.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/136.jpg -------------------------------------------------------------------------------- /src/static/img/137.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/137.jpg -------------------------------------------------------------------------------- /src/static/img/138.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/138.jpg -------------------------------------------------------------------------------- /src/static/img/139.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/139.jpg -------------------------------------------------------------------------------- /src/static/img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/14.jpg -------------------------------------------------------------------------------- /src/static/img/140.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/140.jpg -------------------------------------------------------------------------------- /src/static/img/141.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/141.jpg -------------------------------------------------------------------------------- /src/static/img/142.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/142.jpg -------------------------------------------------------------------------------- /src/static/img/143.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/143.jpg -------------------------------------------------------------------------------- /src/static/img/144.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/144.jpg -------------------------------------------------------------------------------- /src/static/img/145.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/145.jpg -------------------------------------------------------------------------------- /src/static/img/146.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/146.jpg -------------------------------------------------------------------------------- /src/static/img/147.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/147.jpg -------------------------------------------------------------------------------- /src/static/img/148.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/148.jpg -------------------------------------------------------------------------------- /src/static/img/149.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/149.jpg -------------------------------------------------------------------------------- /src/static/img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/15.jpg -------------------------------------------------------------------------------- /src/static/img/150.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/150.jpg -------------------------------------------------------------------------------- /src/static/img/151.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/151.jpg -------------------------------------------------------------------------------- /src/static/img/152.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/152.jpg -------------------------------------------------------------------------------- /src/static/img/153.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/153.jpg -------------------------------------------------------------------------------- /src/static/img/154.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/154.jpg -------------------------------------------------------------------------------- /src/static/img/155.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/155.jpg -------------------------------------------------------------------------------- /src/static/img/156.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/156.jpg -------------------------------------------------------------------------------- /src/static/img/157.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/157.jpg -------------------------------------------------------------------------------- /src/static/img/158.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/158.jpg -------------------------------------------------------------------------------- /src/static/img/159.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/159.jpg -------------------------------------------------------------------------------- /src/static/img/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/16.jpg -------------------------------------------------------------------------------- /src/static/img/160.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/160.jpg -------------------------------------------------------------------------------- /src/static/img/161.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/161.jpg -------------------------------------------------------------------------------- /src/static/img/162.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/162.jpg -------------------------------------------------------------------------------- /src/static/img/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/17.jpg -------------------------------------------------------------------------------- /src/static/img/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/18.jpg -------------------------------------------------------------------------------- /src/static/img/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/19.jpg -------------------------------------------------------------------------------- /src/static/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/2.jpg -------------------------------------------------------------------------------- /src/static/img/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/20.jpg -------------------------------------------------------------------------------- /src/static/img/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/21.jpg -------------------------------------------------------------------------------- /src/static/img/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/22.jpg -------------------------------------------------------------------------------- /src/static/img/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/23.jpg -------------------------------------------------------------------------------- /src/static/img/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/24.jpg -------------------------------------------------------------------------------- /src/static/img/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/25.jpg -------------------------------------------------------------------------------- /src/static/img/26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/26.jpg -------------------------------------------------------------------------------- /src/static/img/27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/27.jpg -------------------------------------------------------------------------------- /src/static/img/28.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/28.jpg -------------------------------------------------------------------------------- /src/static/img/29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/29.jpg -------------------------------------------------------------------------------- /src/static/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/3.jpg -------------------------------------------------------------------------------- /src/static/img/30.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/30.jpg -------------------------------------------------------------------------------- /src/static/img/31.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/31.jpg -------------------------------------------------------------------------------- /src/static/img/32.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/32.jpg -------------------------------------------------------------------------------- /src/static/img/33.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/33.jpg -------------------------------------------------------------------------------- /src/static/img/34.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/34.jpg -------------------------------------------------------------------------------- /src/static/img/35.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/35.jpg -------------------------------------------------------------------------------- /src/static/img/36.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/36.jpg -------------------------------------------------------------------------------- /src/static/img/37.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/37.jpg -------------------------------------------------------------------------------- /src/static/img/38.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/38.jpg -------------------------------------------------------------------------------- /src/static/img/39.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/39.jpg -------------------------------------------------------------------------------- /src/static/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/4.jpg -------------------------------------------------------------------------------- /src/static/img/40.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/40.jpg -------------------------------------------------------------------------------- /src/static/img/41.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/41.jpg -------------------------------------------------------------------------------- /src/static/img/42.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/42.jpg -------------------------------------------------------------------------------- /src/static/img/43.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/43.jpg -------------------------------------------------------------------------------- /src/static/img/44.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/44.jpg -------------------------------------------------------------------------------- /src/static/img/45.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/45.jpg -------------------------------------------------------------------------------- /src/static/img/46.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/46.jpg -------------------------------------------------------------------------------- /src/static/img/47.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/47.jpg -------------------------------------------------------------------------------- /src/static/img/48.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/48.jpg -------------------------------------------------------------------------------- /src/static/img/49.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/49.jpg -------------------------------------------------------------------------------- /src/static/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/5.jpg -------------------------------------------------------------------------------- /src/static/img/50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/50.jpg -------------------------------------------------------------------------------- /src/static/img/51.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/51.jpg -------------------------------------------------------------------------------- /src/static/img/52.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/52.jpg -------------------------------------------------------------------------------- /src/static/img/53.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/53.jpg -------------------------------------------------------------------------------- /src/static/img/54.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/54.jpg -------------------------------------------------------------------------------- /src/static/img/55.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/55.jpg -------------------------------------------------------------------------------- /src/static/img/56.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/56.jpg -------------------------------------------------------------------------------- /src/static/img/57.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/57.jpg -------------------------------------------------------------------------------- /src/static/img/58.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/58.jpg -------------------------------------------------------------------------------- /src/static/img/59.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/59.jpg -------------------------------------------------------------------------------- /src/static/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/6.jpg -------------------------------------------------------------------------------- /src/static/img/60.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/60.jpg -------------------------------------------------------------------------------- /src/static/img/61.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/61.jpg -------------------------------------------------------------------------------- /src/static/img/62.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/62.jpg -------------------------------------------------------------------------------- /src/static/img/63.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/63.jpg -------------------------------------------------------------------------------- /src/static/img/64.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/64.jpg -------------------------------------------------------------------------------- /src/static/img/65.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/65.jpg -------------------------------------------------------------------------------- /src/static/img/66.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/66.jpg -------------------------------------------------------------------------------- /src/static/img/67.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/67.jpg -------------------------------------------------------------------------------- /src/static/img/68.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/68.jpg -------------------------------------------------------------------------------- /src/static/img/69.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/69.jpg -------------------------------------------------------------------------------- /src/static/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/7.jpg -------------------------------------------------------------------------------- /src/static/img/70.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/70.jpg -------------------------------------------------------------------------------- /src/static/img/71.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/71.jpg -------------------------------------------------------------------------------- /src/static/img/72.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/72.jpg -------------------------------------------------------------------------------- /src/static/img/73.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/73.jpg -------------------------------------------------------------------------------- /src/static/img/74.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/74.jpg -------------------------------------------------------------------------------- /src/static/img/75.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/75.jpg -------------------------------------------------------------------------------- /src/static/img/76.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/76.jpg -------------------------------------------------------------------------------- /src/static/img/77.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/77.jpg -------------------------------------------------------------------------------- /src/static/img/78.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/78.jpg -------------------------------------------------------------------------------- /src/static/img/79.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/79.jpg -------------------------------------------------------------------------------- /src/static/img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/8.jpg -------------------------------------------------------------------------------- /src/static/img/80.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/80.jpg -------------------------------------------------------------------------------- /src/static/img/81.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/81.jpg -------------------------------------------------------------------------------- /src/static/img/82.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/82.jpg -------------------------------------------------------------------------------- /src/static/img/83.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/83.jpg -------------------------------------------------------------------------------- /src/static/img/84.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/84.jpg -------------------------------------------------------------------------------- /src/static/img/85.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/85.jpg -------------------------------------------------------------------------------- /src/static/img/86.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/86.jpg -------------------------------------------------------------------------------- /src/static/img/87.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/87.jpg -------------------------------------------------------------------------------- /src/static/img/88.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/88.jpg -------------------------------------------------------------------------------- /src/static/img/89.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/89.jpg -------------------------------------------------------------------------------- /src/static/img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/9.jpg -------------------------------------------------------------------------------- /src/static/img/90.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/90.jpg -------------------------------------------------------------------------------- /src/static/img/91.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/91.jpg -------------------------------------------------------------------------------- /src/static/img/92.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/92.jpg -------------------------------------------------------------------------------- /src/static/img/93.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/93.jpg -------------------------------------------------------------------------------- /src/static/img/94.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/94.jpg -------------------------------------------------------------------------------- /src/static/img/95.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/95.jpg -------------------------------------------------------------------------------- /src/static/img/96.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/96.jpg -------------------------------------------------------------------------------- /src/static/img/97.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/97.jpg -------------------------------------------------------------------------------- /src/static/img/98.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/98.jpg -------------------------------------------------------------------------------- /src/static/img/99.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cuberto/scroll-sequence-demo/7ccc1018c2555d6c2e106a55b77e215ea306564d/src/static/img/99.jpg -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | 3 | const webpackConfig = { 4 | entry: "./src/js/index.js", 5 | output: { 6 | path: __dirname, 7 | filename: "bundle.js", 8 | publicPath: "/assets/js/" 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.js$/, 14 | loader: "babel-loader", 15 | exclude: /(node_modules|bower_components)/, 16 | options: { 17 | compact: true 18 | } 19 | }, 20 | { 21 | test: /\.js$/, 22 | loader: 'imports-loader?define=>false' 23 | } 24 | ] 25 | }, 26 | resolve: { 27 | modules: ['./src/js', 'node_modules'] 28 | }, 29 | plugins: [ 30 | new webpack.ProvidePlugin({ 31 | $: "jquery", 32 | jQuery: "jquery", 33 | "window.jQuery": "jquery" 34 | }) 35 | ], 36 | mode: "development", 37 | devtool: "source-map" 38 | }; 39 | 40 | module.exports = webpackConfig; 41 | --------------------------------------------------------------------------------