danak/arakrail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add sass modules

Browse Source
This commit is contained in:
Amir Mohamadi
2020-11-14 19:45:07 +03:30
parent 56b295b75d
commit 95149f0e72
17 changed files with 4140 additions and 2923 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -3
View File
@@ -1,6 +1,4 @@
# ArakRail
> ArakRail Front-End
# arakrail
## Build Setup
assets/sass/_extentions.scss
+97
View File
@@ -0,0 +1,97 @@
%defaultTransition {
@include transition(0.3s);
}
%userSelect {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
%appearance {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
%titleShape {
&::after {
content: '';
display: block;
background: #000;
width: 40px;
height: 4px;
position: absolute;
right: 0;
bottom: 0;
@extend %defaultTransition;
}
&:lang(en) {
&::after {
right: auto;
left: 0;
}
}
&.active {
&::after {
width: 100%;
}
}
}
%titleShapeCenter {
&::after {
content: '';
display: block;
background: #000;
width: 50px;
height: 4px;
position: absolute;
left: calc(50% - 25px);
bottom: 0;
@extend %defaultTransition;
}
&.active {
&::after {
width: 100%;
left: 0;
}
}
}
%imgBoxShape {
&::before {
content: '';
display: block;
width: 80%;
height: 40px;
background: $theme;
position: absolute;
top: -30px;
right: 10%;
z-index: -1;
}
}
%imgBoxShape-reverse {
&::before {
content: '';
display: block;
width: 80%;
height: 40px;
background: $theme;
position: absolute;
bottom: -30px;
left: 10%;
z-index: -1;
}
}
%defaultBoxShadow {
@include boxShadow(0 0px 20px rgba(0, 0, 0, 0.2))
}
assets/sass/_fonts.scss
+51
View File
@@ -0,0 +1,51 @@
////// sahel
@font-face {
font-family: 'sahel';
src: url("../fonts/sahel/Sahel-FD.eot"),
url("../fonts/sahel/Sahel-FD.ttf"),
url("../fonts/sahel/Sahel-FD.woff") ;
}
@font-face {
font-family: 'sahel-bold';
src: url("../fonts/sahel/Sahel-Bold-FD.eot"),
url("../fonts/sahel/Sahel-Bold-FD.ttf"),
url("../fonts/sahel/Sahel-Bold-FD.woff") ;
}
@font-face {
font-family: 'sahel-black';
src: url("../fonts/sahel/Sahel-Black-FD.eot"),
url("../fonts/sahel/Sahel-Black-FD.ttf"),
url("../fonts/sahel/Sahel-Black-FD.woff");
}
////// diodrum
@font-face {
font-family: 'diodrum';
src: url("../fonts/diodrum/Diodrum-Regular.eot"),
url("../fonts/diodrum/Diodrum-Regular.otf"),
url("../fonts/diodrum/Diodrum-Regular.ttf"),
url("../fonts/diodrum/Diodrum-Regular.woff"),
url("../fonts/diodrum/Diodrum-Regular.woff2");
}
@font-face {
font-family: 'diodrum-bold';
src: url("../fonts/diodrum/Diodrum-Semibold.eot"),
url("../fonts/diodrum/Diodrum-Semibold.otf"),
url("../fonts/diodrum/Diodrum-Semibold.ttf"),
url("../fonts/diodrum/Diodrum-Semibold.woff"),
url("../fonts/diodrum/Diodrum-Semibold.woff2");
}
////// anton
@font-face {
font-family: 'anton';
src: url("../fonts/Anton/Anton.eot"),
url("../fonts/Anton/Anton.otf"),
url("../fonts/Anton/Anton.ttf"),
url("../fonts/Anton/Anton.woff"),
url("../fonts/Anton/Anton.woff2");
}
assets/sass/_globalStyles.scss
+545
View File
@@ -0,0 +1,545 @@
body {
direction: rtl;
background: $bg;
&:lang(en) {
direction: ltr;
}
}
p, a, span, b, i {
font-family: 'sahel';
color: rgba(0, 0, 0, 0.7);
line-height: 1.6em;
&:lang(en) {
font-family: 'diodrum';
}
}
h1, h2, h3, h4, h5, h6 {
font-family: 'sahel-black';
line-height: 1.3em;
&:lang(en) {
font-family: 'diodrum-bold';
}
}
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18.72px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 13.28px;
}
h6 {
font-size: 10.72px;
}
a {
text-decoration: none;
&:hover {
text-decoration: none;
color: rgba(0, 0, 0, 0.7);
}
}
section {
padding: 0 0 100px;
}
/////// global classes
.page {
min-height: calc(100vh - 200px);
}
.logo {
display: inline-block;
width: 50px;
svg {
width: 100%;
}
}
.header {
width: 100%;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 5;
@include boxShadow(0 4px 10px rgba(0, 0, 0, 0.07));
.links {
li {
text-align: right;
padding: 30px 0;
@extend %defaultTransition;
&.active {
a::after {
width: 100% !important;
}
}
&:lang(en) {
text-align: left;
}
&:first-child {
text-align: right;
&:lang(en) {
text-align: left;
}
}
a:not(.logo) {
position: relative;
padding: 5px 0;
&::after {
content: '';
display: block;
width: 20px;
height: 1.5px;
background: $darkGray;
position: absolute;
bottom: 0;
right: 0;
@extend %defaultTransition;
}
&:lang(en) {
&::after {
right: auto;
left: 0;
}
}
&:hover {
&::after {
width: 100%;
}
}
}
}
}
.lag-switcher {
.dropdown {
position: relative;
.title {
@extend %defaultTransition;
padding: 0 10px;
margin-bottom: 0;
p {
@extend %userSelect;
@extend %defaultTransition;
text-align: center;
font-size: 23px;
font-family: 'diodrum', 'sahel';
}
}
.dropMenu {
width: 100%;
height: 0;
overflow: hidden;
background: $darkGray;
@extend %defaultTransition;
position: absolute;
top: 37px;
left: 0;
.drop-item {
padding-top: 10px;
a {
display: block;
padding: 5px;
color: #fff;
font-size: 13px;
text-align: center;
cursor: pointer;
@extend %userSelect;
@extend %defaultTransition;
font-family: 'diodrum', 'sahel';
}
}
}
&.dropdown-active {
.title {
background: $darkGray;
p {
color: #fff;
}
}
.dropMenu {
height: 85px;
p:hover {
background: rgba(255, 255, 255, 0.05);
}
}
}
}
}
&.header-small {
.links {
li {
padding: 5px 0;
}
}
}
}
.footer {
background: #fff;
padding: 20px 0;
.links {
svg {
width: 50px;
margin-bottom: 20px;
}
p {
font-size: 13px;
}
hr {
margin: 20px 0;
}
.box {
max-width: 400px;
}
}
.social {
display: flex;
flex-direction: column;
justify-content: center;
ul {
display: block;
margin-bottom: 20px;
li {
display: inline-block;
margin-left: 20px;
&:lang(en) {
margin-left: 0;
margin-right: 20px;
}
}
}
p {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
}
a {
display: inline-block;
direction: ltr;
@extend %defaultTransition;
&:hover {
color: #5b5bec;
}
}
&.footer--home {
padding: 50px 0;
background: $bg;
.links {
hr {
margin: 15px 0;
}
.social-links {
margin: $mt 0;
li {
display: inline-block;
margin-left: 20px;
&:lang(en) {
margin-left: 0;
margin-right: 20px;
}
em {
color: rgba(0, 0, 0, 0.5);
@extend %defaultTransition;
&:hover {
color: rgba(0, 0, 0, 1);
}
}
}
}
}
.map {
img {
width: 100%;
@extend %defaultBoxShadow;
}
p {
font-size: 13px;
margin-top: 10px;
}
}
}
}
.hero {
position: relative;
.bg {
width: 100%;
height: 90vh;
background-size: cover;
-webkit-background-size: cover;
background-repeat: no-repeat;
}
.txt {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
.row {
height: 80vh;
h2 {
color: #fff;
font-size: 50px;
margin-top: 107px;
}
}
}
}
.btn {
display: inline-block;
padding: 10px 30px;
cursor: pointer;
@extend %defaultTransition;
font-family: 'sahel';
font-size: 16px;
margin-top: $mt;
&.btn-primary {
border: 1px solid #000;
color: #000;
&:hover {
background: #000;
color: #fff;
}
}
&.btn-primary-fill {
border: 1px solid #000;
background: #000;
color: #fff;
}
&.btn-reverse {
border: 1px solid #fff;
color: #fff;
&:hover {
background: #fff;
color: #000;
}
}
&.btn-reverse-fill {
border: 1px solid #fff;
background: #fff;
color: #000;
}
}
.panel {
background: #fff;
padding: 100px;
position: relative;
margin-top: -80px;
z-index: 0;
@include boxSizing(border-box);
}
.title {
display: inline-block;
position: relative;
font-size: 35px;
padding-bottom: 10px;
margin-bottom: $mt;
&.title-shape {
@extend %titleShape;
}
&.title-shape-center {
@extend %titleShapeCenter;
}
&.title-subtitle {
font-size: 25px;
margin-bottom: 15px;
}
}
.overflow-hidden {
overflow-x: hidden;
}
.imgBox {
width: 100%;
position: relative;
&.imgBox-reverse {
direction: ltr;
&:lang(en) {
direction: rtl;
}
}
&.imgBox-shape {
@extend %imgBoxShape;
}
&.imgBox-shape-reverse {
@extend %imgBoxShape-reverse;
}
img {
width: 140%;
@extend %defaultBoxShadow;
}
}
.section-bg {
width: 100%;
}
.form {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.formRow {
flex-basis: 40%;
display: inline-block;
margin-bottom: 20px;
&.formRow-wide {
flex-basis: 90%;
}
&.buttonRow {
flex-basis: 100%;
text-align: center;
}
&.err {
input, textarea {
@include boxShadow(0 0 5px rgba(red, 0.3));
border: 2px solid rgba(red, 0.2);
&::placeholder {
color: red;
}
}
p {
color: red;
}
}
input, textarea {
@extend %appearance;
@extend %defaultTransition;
width: 100%;
border: 2px solid transparent;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
outline: none;
padding: 10px;
font-family: 'sahel', 'diodrum', sans-serif;
background: transparent;
&:focus {
@include boxShadow(0 0 5px rgba($theme, 0.3));
border: 2px solid rgba($theme, 0.2);
}
}
button {
@extend %appearance;
@extend %defaultTransition;
margin-top: 50px;
}
}
}
.customers-communication {
.panel {
margin-top: 100px;
background: $theme;
.title {
color: #fff;
&::after {
background: #fff;
}
}
p {
color: #fff;
}
}
}
assets/sass/_mixins.scss
+44
View File
@@ -0,0 +1,44 @@
@mixin transform($p...) {
transform: $p;
-webkit-transform: $p;
-moz-transform: $p;
-ms-transform: $p;
-o-transform: $p;
}
@mixin transition($p...) {
transition: $p;
-webkit-transition: $p;
-moz-transition: $p;
-ms-transition: $p;
-o-transition: $p;
}
@mixin boxSizing($p) {
box-sizing: $p;
-webkit-box-sizing: $p;
-moz-box-sizing: $p;
}
@mixin filter($p...) {
filter: $p;
-ms-filter: $p;
}
@mixin boxShadow($p) {
box-shadow: $p;
-webkit-box-shadow: $p;
-moz-box-shadow: $p;
}
@mixin borderRadius($p) {
border-radius: $p;
-webkit-border-radius: $p;
-moz-border-radius: $p;
}
@mixin animation($p) {
animation: $p;
-webkit-animation: $p;
-o-animation: $p;
}
assets/sass/_pages.scss
+442
View File
@@ -0,0 +1,442 @@
///////////////////////////// error page
.error--page {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
h1 {
font-family: sans-serif;
font-size: 60px;
}
p {
text-transform: uppercase;
font-family: sans-serif;
font-size: 14px;
margin-top: -20px;
}
a {
margin-top: 20px;
font-family: 'sahel', sans-serif;
}
}
///////////////////////////// home page
.home--page {
.hero {
.bg {
background-image: url("../img/hp-s1-i1.jpg");
}
.txt--home {
width: 400px;
height: 300px;
position: absolute;
bottom: 20%;
right: 200px;
&:lang(en) {
right: auto;
left: 200px;
}
h1 {
color: #fff;
&:lang(en) {
font-family: 'anton';
}
}
p {
color: #fff;
}
}
}
.s1 {
position: relative;
padding: 100px 0;
.go-down-btn {
width: 250px;
height: 80px;
background: #fff;
text-align: center;
position: absolute;
top: -40px;
left: calc(50% - 125px);
z-index: 2;
cursor: pointer;
em {
line-height: 80px;
font-size: 30px;
}
}
.title-side {
text-align: center;
}
}
.s2 {
overflow-x: hidden;
.panel {
padding: 100px 100px 130px;
}
.parts {
width: 100%;
&.p1 {
width: 100%;
text-align: center;
p {
display: inline-block;
max-width: 480px;
}
}
&.p2 {
margin-top: 100px;
}
&.p3 {
margin-top: 100px;
}
}
}
.s3 {
.panel1 {
padding: 100px 100px 0;
height: 380px;
.parts {
&.p1 {
text-align: center;
}
&.p2 {
text-align: center;
.imgBox {
text-align: right;
&:lang(en) {
text-align: left;
}
p {
margin-top: 15px;
}
img {
width: 100%;
}
}
}
}
}
.panel2 {
margin-top: 250px;
background: transparent;
padding: 100px 100px 0;
.p3 {
text-align: center;
.imgBox {
background: #fff;
padding-bottom: 20px;
@extend %defaultBoxShadow;
margin-bottom: 30px;
p {
margin-top: 20px;
}
img {
width: 100%;
@include boxShadow(none);
}
}
}
}
}
.s4 {
position: relative;
.txt {
max-width: 600px;
height: 300px;
position: absolute;
top: 20%;
right: 200px;
&:lang(en) {
right: auto;
left: 200px;
}
.title {
color: #fff;
&::after {
background: #fff;
}
span {
display: block;
font-size: 13px;
color: #fff;
}
}
p {
margin-top: $mt;
color: #fff;
}
}
}
.s5 {
.panel {
background: $theme;
margin-top: 0;
.p1 {
text-align: center;
.title {
color: #fff;
&::after {
background: #fff;
}
}
p {
color: #fff;
}
}
.form {
margin-top: 50px;
input, textarea {
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
color: #fff;
&::placeholder {
color: rgba(255, 255, 255, 0.8);
}
&:focus {
@include boxShadow(0 0 5px rgba(#fff, 0.05));
border: 2px solid rgba(#fff, 0.1);
}
}
}
}
.watermark {
text-align: center;
padding-top: 100px;
svg {
width: 100px;
path {
fill: rgba(0, 0, 0, 0.1);
}
}
}
}
.s6 {
padding: 100px 0;
background: #fff;
.img-side {
text-align: center;
img {
width: 100%;
}
}
}
}
///////////////////////////// about page
.about--page {
overflow: hidden;
.hero {
.bg {
background-image: url("../img/about-hero.jpg");
}
}
.s1 {
.parts {
margin-bottom: 100px;
&.p1 {
text-align: center;
direction: ltr;
svg {
width: 80px;
}
span {
color: $theme;
font-family: 'diodrum-bold';
font-size: 40px;
}
}
&.p2 {
align-items: center;
}
&.p3 {
align-items: center;
}
&.p4 {
margin-bottom: 0;
text-align: center;
}
}
}
.s2 {
background: $theme;
padding: 100px 0 150px;
.title {
color: #fff;
&::after {
background: #fff;
}
}
p {
color: #fff;
margin-top: $mt;
max-width: 700px;
}
}
.s3 {
padding-bottom: 0;
.panel {
direction: ltr;
.txt {
direction: ltr;
text-align: left;
p {
font-family: 'diodrum-bold';
}
}
.img {
text-align: center;
}
&:not(.p1) {
margin-top: 20px;
}
}
}
}
///////////////////////////// services page
.services--page {
overflow-x: hidden;
.hero {
.bg {
background-image: url('../img/services-hero.jpg');
}
}
.s1 {
text-align: center;
}
.s2 {
ol {
li {
list-style: decimal;
}
}
}
.s3 {
padding-bottom: 0;
.parts {
margin-top: 100px;
&.p1 {
margin-top: 0;
text-align: center;
}
&.lastPart {
text-align: center;
}
}
}
}
///////////////////////////// products page
.products--page {
.hero {
.bg {
background-image: url('../img/products-hero.jpg');
}
}
.s1 {
text-align: center;
}
.s2 {
text-align: center;
.filters {
margin: 0 auto;
max-width: 700px;
background: red;
ul {
display: flex;
flex-direction: row;
li {
display: block;
}
}
}
}
}
assets/sass/_variables.scss
+7
View File
@@ -0,0 +1,7 @@
// colors
$theme: #1B407C;
$bg: #F0F0F0;
$darkGray: #303030;
// units
$mt: 30px;
assets/sass/app.scss
-1159
View File
File diff suppressed because it is too large Load Diff
assets/sass/main.scss
+6
View File
@@ -0,0 +1,6 @@
@use "fonts";
@use "extentions";
@use "mixins";
@use "variables";
@use "globalStyles";
@use "pages";
components/Logo.vue
+29
View File
@@ -0,0 +1,29 @@
<template>
<svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
<path
d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
fill="#00C58E"
/>
<path
d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
fill="#108775"
/>
<path
d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
fill="#2F495E"
/>
</svg>
</template>
<style>
.NuxtLogo {
animation: 1s appear;
margin: auto;
}
@keyframes appear {
0% {
opacity: 0;
}
}
</style>
layouts/default.vue
+5 -8
View File
@@ -10,16 +10,13 @@
<script>
export default {
beforeCreate() {
if (this.$route.params.lang === 'fa') {
$('html').attr({lang: 'fa'})
} else if (this.$route.params.lang === 'en') {
$('html').attr({lang: 'en'})
}
},
mounted() {},
head() {
return {}
return {
htmlAttrs: {
lang: 'fa'
}
}
}
}
</script>
middleware/README.md
+8
View File
@@ -0,0 +1,8 @@
# MIDDLEWARE
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your application middleware.
Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
nuxt.config.js
+20 -52
View File
@@ -1,87 +1,55 @@
const webpack = require("webpack")
export default {
mode: 'spa',
/*
** Headers of the page
*/
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: process.env.npm_package_name || '',
title: 'Arak Rail',
meta: [
{charset: 'utf-8'},
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
{hid: 'description', name: 'description', content: process.env.npm_package_description || ''}
{hid: 'description', name: 'description', content: ''}
],
link: [
{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
]
},
/*
** Customize the progress-bar color
*/
loading: {color: '#fff'},
/*
** Global CSS
*/
// Global CSS (https://go.nuxtjs.dev/config-css)
css: [
'element-ui/lib/theme-chalk/index.css',
'~/assets/css/bootstrap-grid-customized.css',
'~/assets/css/fontawesome/css/all.min.css',
'~/assets/sass/app.scss',
'~/assets/sass/main.scss'
],
/*
** Plugins to load before mounting the App
*/
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
'@/plugins/element-ui',
'@/plugins/gsap',
'@/plugins/scrollMagic',
'@/plugins/components'
],
/*
** Nuxt.js dev-modules
*/
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [],
/*
** Nuxt.js modules
*/
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
// Doc: https://axios.nuxtjs.org/usage
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {},
/*
** Build configuration
*/
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
transpile: [/^element-ui/],
vendor: ["jquery"],
plugins: [new webpack.ProvidePlugin({$: "jquery"})],
/*
** Run ESLint
*/
/*
** You can extend webpack config here
*/
extend(config, ctx) {
},
filenames: {
app: ({isDev}) => isDev ? '[name].js' : '[name].js',
chunk: ({isDev}) => isDev ? '[name].js' : '[name].js',
css: ({isDev}) => isDev ? '[name].css' : '[name].css',
img: ({isDev}) => isDev ? '[path][name].[ext]' : 'images/[name].[ext]',
font: ({isDev}) => isDev ? '[path][name].[ext]' : 'fonts/[name].[ext]',
video: ({isDev}) => isDev ? '[path][name].[ext]' : 'videos/[name].[ext]'
}
},
generate: {
dir: '../../public/nuxt_build'
},
router: {
mode: 'history',
middleware: 'routerGuards',
linkActiveClass: 'active'
}
package-lock.json
Generated
+2847 -1674
View File
File diff suppressed because it is too large Load Diff
package.json
+9 -8
View File
@@ -1,23 +1,24 @@
{
"name": "ArakRail",
"name": "arakrail",
"version": "1.0.0",
"description": "ArakRail Front-End nuxt app",
"author": "Amir Mohamadi",
"private": true,
"scripts": {
"nodemon": "nodemon --watch api --exec \"nuxt start\"",
"nodemonDev": "nodemon --watch api --exec \"nuxt\"",
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"nuxt": "^2.0.0",
"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/axios": "^5.12.2",
"core-js": "^3.6.5",
"element-ui": "^2.13.2",
"gsap": "^3.5.1",
"jquery": "^3.5.1",
"gsap": "^3.2.6",
"scrollmagic": "^2.0.7",
"vue-scrollmagic": "^1.2.0",
"element-ui": "^2.4.11"
"nodemon": "^2.0.6",
"nuxt": "^2.14.6"
},
"devDependencies": {
"node-sass": "^4.14.1",
pages/_lang/index.vue
+15 -15
View File
@@ -193,21 +193,21 @@
/////////////////// title shapes activation
const titles = $('.home--page h2.title')
const titleScene = []
for (let i = 0; i < titles.length; i++) {
$(titles[i]).attr('data-pos', i)
titleScene[i] = this.$scrollmagic.scene({
triggerElement: `.home--page *[data-pos="${i}"]`,
triggerHook: th,
reverse: rev
}).on('enter', function () {
$(titles[i]).addClass('active')
}).on('leave', function () {
$(titles[i]).removeClass('active')
})
this.$scrollmagic.addScene(titleScene[i])
}
//
// for (let i = 0; i < titles.length; i++) {
// $(titles[i]).attr('data-pos', i)
// titleScene[i] = this.$scrollmagic.scene({
// triggerElement: `.home--page *[data-pos="${i}"]`,
// triggerHook: th,
// reverse: rev
// }).on('enter', function () {
// $(titles[i]).addClass('active')
// }).on('leave', function () {
// $(titles[i]).removeClass('active')
// })
//
// this.$scrollmagic.addScene(titleScene[i])
// }
}
}
</script>
store/README.md
+10
View File
@@ -0,0 +1,10 @@
# STORE
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your Vuex Store files.
Vuex Store option is implemented in the Nuxt.js framework.
Creating a file in this directory automatically activates the option in the framework.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).