Updates coding styles Scroll.js and app.js
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { module } from 'modujs';
|
import { module } from 'modujs';
|
||||||
import LocomotiveScroll from 'locomotive-scroll';
|
import LocomotiveScroll from 'locomotive-scroll';
|
||||||
|
|
||||||
export default class extends module {
|
export default class extends module {
|
||||||
@@ -13,9 +13,9 @@ export default class extends module {
|
|||||||
smooth: true
|
smooth: true
|
||||||
});
|
});
|
||||||
|
|
||||||
this.scroll.on('call', (func,way,obj,id) => {
|
this.scroll.on('call', (func, way, obj, id) => {
|
||||||
// Using modularJS
|
// Using modularJS
|
||||||
this.call(func[0],{way,obj},func[1],func[2]);
|
this.call(func[0], { way, obj }, func[1], func[2]);
|
||||||
});
|
});
|
||||||
|
|
||||||
this.scroll.on('scroll', (args) => {
|
this.scroll.on('scroll', (args) => {
|
||||||
@@ -25,11 +25,11 @@ export default class extends module {
|
|||||||
|
|
||||||
toggleLazy(args) {
|
toggleLazy(args) {
|
||||||
let src = this.getData('lazy', args.obj.el)
|
let src = this.getData('lazy', args.obj.el)
|
||||||
if(src.length) {
|
if (src.length) {
|
||||||
if(args.obj.el.tagName == "IMG") {
|
if (args.obj.el.tagName === 'IMG') {
|
||||||
args.obj.el.src = src
|
args.obj.el.src = src
|
||||||
} else {
|
} else {
|
||||||
args.obj.el.style.backgroundImage = `url(${src})`
|
args.obj.el.style.backgroundImage = `url('${src}')`
|
||||||
}
|
}
|
||||||
this.setData('lazy', '', args.obj.el)
|
this.setData('lazy', '', args.obj.el)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html class="is-loading" lang="en" data-page="home">
|
<html class="is-loading" lang="en" data-page="home">
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Boilerplate</title>
|
<title>Boilerplate</title>
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
@@ -28,13 +29,17 @@
|
|||||||
-->
|
-->
|
||||||
<!-- <link rel="icon" href="assets/images/favicons/favicon.svg"> -->
|
<!-- <link rel="icon" href="assets/images/favicons/favicon.svg"> -->
|
||||||
|
|
||||||
<link id="stylesheet" rel="stylesheet" href="assets/styles/main.css" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true">
|
<link id="main-css" rel="stylesheet" href="assets/styles/main.css" media="print"
|
||||||
</head>
|
onload="this.media='all'; this.onload=null; this.isLoaded=true">
|
||||||
<body data-module-load>
|
</head>
|
||||||
|
|
||||||
|
<body data-module-load>
|
||||||
<div data-load-container>
|
<div data-load-container>
|
||||||
<div class="o-scroll" data-module-scroll="main">
|
<div class="o-scroll" data-module-scroll="main">
|
||||||
<header data-scroll-section>
|
<header data-scroll-section>
|
||||||
<a href="/"><h1>Boilerplate</h1></a>
|
<a href="/">
|
||||||
|
<h1>Boilerplate</h1>
|
||||||
|
</a>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="images.html">Images</a></li>
|
<li><a href="images.html">Images</a></li>
|
||||||
@@ -50,15 +55,20 @@
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer data-scroll-section>
|
<footer data-scroll-section>
|
||||||
<p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
|
<p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
|
||||||
|
title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
|
<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
|
||||||
<script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>
|
crossorigin="anonymous"></script>
|
||||||
|
<script nomodule
|
||||||
|
src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
|
||||||
<script src="assets/scripts/vendors.js" defer></script>
|
<script src="assets/scripts/vendors.js" defer></script>
|
||||||
<script src="assets/scripts/app.js" defer></script>
|
<script src="assets/scripts/app.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user