organicmaps/website
13
Fork 1
Code Issues 31 Pull requests 8 Projects Releases Wiki Activity Actions

add mobile version

Browse source
This commit is contained in:
borntojesus 2023-11-16 13:52:12 +02:00
parent 2910d978f0
commit 7525ba83cf
20 changed files with 466 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
.idea/workspace.xml generated
View file

@ -5,9 +5,26 @@
</component>
<component name="ChangeListManager">
<list default="true" id="b9871119-7d48-43df-9f66-6fd91d65a1cb" name="Changes" comment="no index">
<change afterPath="$PROJECT_DIR$/sass/variables/media.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/static/robots.txt" beforeDir="false" afterPath="$PROJECT_DIR$/templates/robots.txt" afterDir="false" />
<change beforePath="$PROJECT_DIR$/sass/common/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/common/footer.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/sass/common/header.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/common/header.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/sass/component/animation.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/component/animation.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/sass/component/buttons.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/component/buttons.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/sass/global/index.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/global/index.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/sass/main.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/main.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/sass/pages/home.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/pages/home.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/sass/variables/color-theme.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/variables/color-theme.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/sass/variables/fonts.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/variables/fonts.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/sass/variables/images.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/variables/images.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/sass/variables/spasing.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/variables/spasing.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/templates/base.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/base.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/templates/common/header.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/common/header.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/templates/section/home-services.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/section/home-services.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/templates/shortcodes/animation-section-js.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/shortcodes/animation-section-js.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/templates/shortcodes/header-switch.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/shortcodes/header-switch.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/templates/shortcodes/paralax.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/shortcodes/paralax.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/templates/shortcodes/switch-theme.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/shortcodes/switch-theme.html" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -46,6 +63,7 @@
"RunOnceActivity.OpenProjectViewOnStart": "true",
"RunOnceActivity.ShowReadmeOnStart": "true",
"WebServerToolWindowFactoryState": "false",
"git-widget-placeholder": "preprod",
"last_opened_file_path": "E:/organicmaps.github.io/static/images",
"node.js.detected.package.eslint": "true",
"node.js.detected.package.stylelint": "true",

30
sass/common/footer.scss
View file

@ -1,11 +1,18 @@
@import "../variables/media";
.footer {
background-color: var(--footer-bg);
padding: 30rem 0;
@media (max-width: $media-md) {
padding: 48rem 0;
}
&__description {
color: var(--black-white);
}
&__logo {
color: var(--common-green);
@media (max-width: $media-md) {
max-height: 40rem;
}
}
&__nav {
border-top: 1rem solid var(--common-grey);
@ -13,10 +20,27 @@
justify-content: space-between;
padding: 20rem 0;
margin-top: 20rem;
@media (max-width: $media-md) {
margin-top: 32rem;
padding: 32rem 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 30rem;
}
}
&__nav-item {
@media (max-width: $media-md) {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
&__link {
text-decoration: none;
color: var(--black-white);
padding: 8rem 16rem;
}
&__rw {
display: grid;
@ -25,5 +49,11 @@
svg {
width: 100%;
}
@media (max-width: $media-md) {
grid-template-columns: 1fr;
align-items: center;
text-align: center;
gap: 30rem;
}
}
}

54
sass/common/header.scss
View file

@ -1,3 +1,5 @@
@import "../variables/media";
.header {
position: fixed;
left: 0;
@ -5,10 +7,14 @@
width: 100%;
padding: 14rem 0;
z-index: 100;
@media (max-width: $media-md) {
background-color: var(--common-green-primery);
}
&__container {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
&__link a{
text-decoration: none;
@ -16,15 +22,61 @@
color: var(--common-white);
cursor: pointer;
padding: 8rem 16rem;
@media (max-width: $media-md) {
color: var(--common-black);
}
}
&__logo {
color: var(--common-white);
@media (max-width: $media-md) {
color: var(--common-green);
}
}
&__row {
display: flex;
display: flex;
justify-content: space-between;
align-items: center;
@media (max-width: $media-md) {
position: absolute;
background-color: var(--common-green-primery);
top: 55rem;
width: 100%;
left: -500rem;
padding: 16rem 0;
display: flex;
align-items: center;
flex-direction: column;
gap: 16rem;
text-transform: uppercase;
z-index: 80;
transition:left var(--transition), opacity var(--transition);
&.is-active {
left: 0;
opacity: 80;
}
}
}
&__btn {
@media (max-width: $media-md) {
margin-left: auto;
.button--main {
padding: 8rem 12rem;
min-width:107rem;
}
}
}
&__menu-btn {
display: none;
@media (max-width: $media-md) {
display: block;
padding: 8rem 0 8rem 8rem ;
margin-left: 20rem;
display: flex;
align-items: center;
}
}
&--green {
background-color: var(--common-green-primery);

89
sass/component/animation.scss
View file

@ -1,52 +1,55 @@
.animation {
&--right {
.animation-item {
left: 171rem!important;
opacity: 0!important;
transition: left var(--transition), opacity var(--transition);
@import "../variables/media";
@media (min-width: $media-md) {
.animation {
&--right {
.animation-item {
left: 171rem!important;
opacity: 0!important;
transition: left var(--transition), opacity var(--transition);
}
}
&--right-play {
.animation-item {
left: -20rem!important;
opacity: 1!important;
transition: left var(--transition), opacity var(--transition);
}
}
}
&--right-play {
.animation-item {
left: -20rem!important;
opacity: 1!important;
transition: left var(--transition), opacity var(--transition);
&--left {
.animation-item {
right: 171rem!important;
opacity: 0!important;
transition: right var(--transition), opacity var(--transition);
}
}
&--left-play {
.animation-item {
right: -20rem!important;
opacity: 1!important;
transition: right var(--transition), opacity var(--transition);
}
}
}
&--down {
.animation-item {
margin-bottom: -271rem!important;
opacity: 0!important;
transition: margin-bottom var(--transition), opacity var(--transition);
}
&--left {
.animation-item {
right: 171rem!important;
opacity: 0!important;
transition: right var(--transition), opacity var(--transition);
}
&--down-play {
.animation-item {
margin-bottom: 0rem!important;
opacity: 1!important;
transition: margin-bottom var(--transition), opacity var(--transition);
}
}
&--left-play {
.animation-item {
right: -20rem!important;
opacity: 1!important;
transition: right var(--transition), opacity var(--transition);
}
}
&--down {
.animation-item {
margin-bottom: -271rem!important;
opacity: 0!important;
transition: margin-bottom var(--transition), opacity var(--transition);
}
}
&--down-play {
.animation-item {
margin-bottom: 0rem!important;
opacity: 1!important;
transition: margin-bottom var(--transition), opacity var(--transition);
}
}
}
}

1
sass/component/buttons.scss
View file

@ -1,3 +1,4 @@
@import "../variables/media";
.button {
width: fit-content;
padding: 12rem 16rem;

9
sass/global/index.scss
View file

@ -1,3 +1,5 @@
@import "../variables/media";
html {
font-size: 1px;
}
@ -11,5 +13,12 @@ body {
.container {
width: 100%;
margin: 0 auto;
padding: 0 16rem;
max-width: var(--container);
}
.logo .svg-logo {
@media(max-width: $media-md) {
max-width: 130rem;
}
}

1
sass/main.scss
View file

@ -1,4 +1,5 @@
/// Variables ///
@import "./variables/media";
@import "./variables/color-theme";
@import "./variables/fonts";
@import "./variables/spasing";

150
sass/pages/home.scss
View file

@ -1,3 +1,4 @@
@import "../variables/media";
// Hero Section
.hero {
@ -9,15 +10,33 @@
justify-content: center;
position: relative;
@media (max-width: $media-md) {
background: url('/images/hero/hero-bg.jpg') center center / cover no-repeat cover;
min-height: auto;
padding: 120rem 0 51rem;
}
&__container {
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
@media (max-width: $media-md) {
flex-direction: column;
justify-content: center;
}
}
&__content {
max-width: 494rem;
z-index: 10;
@media (max-width: $media-md) {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 35rem;
}
}
&__title {
@ -33,6 +52,11 @@
top: 50%;
right: -20rem;
transform: translateY(-50%);
@media (max-width: $media-md) {
position: static;
transform: none;
width: 100%;
}
}
}
@ -44,18 +68,30 @@
align-items: center;
justify-content: center;
min-height: 660rem;
@media (max-width: $media-md) {
min-height: auto;
padding: 40rem 0;
margin: 0;
}
&__container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
@media (max-width: $media-md) {
max-width: 150rem;
}
}
&__img {
background: var(--map-section-icon) center center / cover no-repeat;
width: 144rem;
height: 144rem;
margin-bottom: var(--mb-16);
@media (max-width: $media-md) {
max-width: 120rem;
max-height: 120rem;
}
}
&__title {
margin-bottom: var(--mb-16);
@ -64,56 +100,110 @@
position: absolute;
left: calc(50% - 25rem);
top: calc(50% - 25rem);
@media (max-width: $media-md) {
border: var(--icon-border) solid var(--icon-border-green);
border-radius: 100rem;
}
&:nth-child(1) {
width: 96rem;
left: calc(50% + 175rem);
top: calc(50% - 85rem);
@media (max-width: $media-md) {
width: calc(30rem + var(--icon-border));
left: calc(50% - -95rem);
top: calc(50% - 59rem);
}
}
&:nth-child(2) {
width: 72rem;
left: calc(50% + 285rem);
top: calc(50% - -45rem);
@media (max-width: $media-md) {
width: calc(22rem + var(--icon-border));
left: calc(50% - -135rem);
top: calc(50% - 6rem);
}
}
&:nth-child(3) {
width: 96rem;
left: calc(50% - 395rem);
top: calc(50% + -86rem);
@media (max-width: $media-md) {
width: calc(30rem + var(--icon-border));
left: calc(50% - 125rem);
top: calc(50% - 59rem);
}
}
&:nth-child(4) {
width: 72rem;
left: calc(50% - 355rem);
top: calc(50% - -74rem);
@media (max-width: $media-md) {
width: calc(22rem + var(--icon-border));
left: calc(50% - 165rem);
top: calc(50% + -6rem);
}
}
&:nth-child(5) {
width: 80rem;
left: calc(50% - -375rem);
top: calc(50% + 153rem);
@media (max-width: $media-md) {
width: calc(25rem + var(--icon-border));
left: calc(50% - -89rem);
top: calc(50% + 43rem);
}
}
&:nth-child(6) {
width: 64rem;
left: calc(50% + 305rem);
top: calc(50% + -217rem);
@media (max-width: $media-md) {
width: calc(20rem + var(--icon-border));
left: calc(50% + 136rem);
top: calc(50% - 105rem);
}
}
&:nth-child(7) {
width: 80rem;
left: calc(50% + -275rem);
top: calc(50% + 223rem);
@media (max-width: $media-md) {
width: calc(25rem + var(--icon-border));
left: calc(50% - 117rem);
top: calc(50% - -43rem);
}
}
&:nth-child(8) {
width: 64rem;
left: calc(50% - 195rem);
top: calc(50% + -227rem);
@media (max-width: $media-md) {
width: calc(20rem + var(--icon-border));
left: calc(50% - 165rem);
top: calc(50% - 104rem);
}
}
}
}
// Services
.services {
&__btn {
@media (max-width: $media-md) {
margin: 0 auto;
}
}
&__container {
padding: 50rem 40rem;
border-radius: var(--border-r-24);
background-color: var(--bg-green);
@media (max-width: $media-md) {
padding: var( --container-mob-section) var( --container-mob-padding);
border-radius: 0;
}
}
&__item {
display: flex;
@ -121,6 +211,13 @@
padding-bottom: 60rem;
gap: 50rem;
margin-right: -50rem;
@media (max-width: $media-md) {
flex-direction: column-reverse;
margin-right: 0;
gap: 40rem;
text-align: center;
padding-bottom: 120rem;
}
&:nth-child(2n) {
flex-direction: row-reverse;
margin-right: auto;
@ -132,6 +229,13 @@
left: auto;
right: 0;
}
@media (max-width: $media-md) {
flex-direction: column-reverse;
margin-left: 0;
.services__card {
justify-content: center;
}
}
}
&:last-child {
padding-bottom: 0;
@ -147,12 +251,20 @@
&__description {
margin: 24rem 0;
}
&__card {
position: relative;
flex-grow: 1;
display: flex;
justify-content: flex-end;
overflow: hidden;
@media (max-width: $media-md) {
width: 100%;
display: flex;
align-items: center;
flex-direction: row-reverse;
justify-content: center;
}
}
&__button {
position: absolute;
@ -164,6 +276,11 @@
&__img {
padding: 20rem;
z-index: 3;
@media (max-width: $media-md) {
max-width: 140rem;
max-height: 240rem;
padding: 0;
}
&--first {
object-fit: cover;
z-index: 1;
@ -173,6 +290,13 @@
top: 50%;
left: -19rem;
transform: translateY(-50%);
@media (max-width: $media-md) {
position: static;
transform: none;
max-width: 190rem;
max-height: 190rem;
margin-left: -60rem;
}
}
}
}
@ -181,19 +305,38 @@
.single-section {
margin: 60rem 0;
overflow: hidden;
@media (max-width: $media-md) {
padding: var( --container-mob-section) 0;
margin:0;
}
&__container {
padding: 0rem 40rem 0;
border-radius: var(--border-r-24);
background-color: var(--bg-green);
@media (max-width: $media-md) {
padding: var(--container-mob-section) var(--container-mob-padding) 0;
}
}
&__item {
display: flex;
align-items: flex-end;
gap: 50rem;
@media (max-width: $media-md) {
gap: 20rem;
flex-direction: column;
}
}
&__content {
max-width: 498rem;
padding: 90rem 0;
@media (max-width: $media-md) {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
}
&__title {
max-width: 357rem;
@ -207,11 +350,14 @@ margin: 60rem 0;
display: flex;
justify-content: flex-end;
overflow: hidden;
@media (max-width: $media-md) {
justify-content: center;
}
}
&__img {
padding: 0;
z-index: 3;
width: 90%;
width: 100%;
}
}

2
sass/variables/color-theme.scss
View file

@ -18,6 +18,7 @@
--bg-green: #E5F0EB;
--footer-bg: #F5F5F5;
--green-button: var(--common-green);
--icon-border-green: #66A686;
}
.dark {
@ -28,4 +29,5 @@
--bg-green: #33453D;
--footer-bg: var(--common-black);
--green-button: #BBD7A7;
--icon-border-green: var(--common-white);
}

14
sass/variables/fonts.scss
View file

@ -1,5 +1,6 @@
//font-family: 'Inter', sans-serif;
//font-family: 'Lato', sans-serif;
@import "../variables/media";
:root {
--main-font: 'Inter', sans-serif;
--sub-fonst: 'Lato', sans-serif;
@ -13,6 +14,19 @@
--nav-link: 500 16rem/28rem var(--main-font);
}
@media (max-width: $media-md) {
:root {
--h1: 300 36rem/normal var(--sub-fonst);
--h1-sub: 400 18rem/32rem var(--main-font);
--p: 300 18rem/28rem var(--main-font);
--p-md: 400 16rem/28rem var(--main-font);
--p-sm: 500 14rem/28rem var(--main-font);
--p-sub: 300 12rem/28rem var(--main-font);
--nav-link: 500 13rem/24rem var(--main-font);
}
}
// Title
.h1{
font: var(--h1);

3
sass/variables/images.scss
View file

@ -1,5 +1,6 @@
:root {
--map-section-icon: url('images/open-map/open-map-logo.png');
--map-section-icon: url('/images/open-map/open-map-logo.png');
}
.light {

3
sass/variables/media.scss Normal file
View file

@ -0,0 +1,3 @@
// Media sm: Mobile, md: Tablet, xl: Desktop
$media-md: 991px;

5
sass/variables/spasing.scss
View file

@ -8,4 +8,9 @@
--border-r-24: 24rem;
--transition: 0.5s;
--icon-border: 2rem;
--container-mob-section: 60rem;
--container-mob-padding: 16rem;
}

22
templates/base.html
View file

@ -10,17 +10,17 @@
<head>
<meta name="robots" content="noindex">
<script>
var password = "tutorial";
(function passcodeprotect() {
var passcode = prompt("Enter PassCode");
while (passcode !== admin) {
alert("Incorrect PassCode");
return passcodeprotect();
}
}());
alert('Welcome To The TP..!');
</script>
<!-- <script>-->
<!-- var password = "tutorial";-->
<!-- (function passcodeprotect() {-->
<!-- var passcode = prompt("Enter PassCode");-->
<!-- while (passcode !== admin) {-->
<!-- alert("Incorrect PassCode");-->
<!-- return passcodeprotect();-->
<!-- }-->
<!-- }());-->
<!-- alert('Welcome To The TP..!');-->
<!-- </script>-->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

5
templates/common/header.html
View file

@ -29,4 +29,9 @@
<div class="header__btn">
{% include 'components/download-button.html' %}
</div>
<div class="header__menu-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6ZM3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12ZM3 18C3 17.4477 3.44772 17 4 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H4C3.44772 19 3 18.5523 3 18Z" fill="#26312C"/>
</svg>
</div>
</div>

8
templates/section/home-services.html
View file

@ -10,7 +10,7 @@
See the place you want to go while in an underground parking garage, and navigate while on a distant
hike.
</p>
<a class="button button--transparent" href="#">
<a class="button button--transparent services__btn" href="#">
Learn more
{% include 'ui/btn-arrow.html' %}
</a>
@ -18,7 +18,7 @@
<div class="services__card">
<img class="services__img services__img--first animation-item" src="/images/sections/map-m-1.png">
<img class="services__img" src="/images/sections/map-s-1.png">
<a class="button button--card services__button" href="#">
<a class="button button--card services__button " href="#">
Learn more
{% include 'ui/btn-arrow.html' %}
</a>
@ -35,7 +35,7 @@
See the place you want to go while in an underground parking garage, and navigate while on a distant
hike.
</p>
<a class="button button--transparent" href="#">
<a class="button button--transparent services__btn" href="#">
Learn more
{% include 'ui/btn-arrow.html' %}
</a>
@ -60,7 +60,7 @@
See the place you want to go while in an underground parking garage, and navigate while on a distant
hike.
</p>
<a class="button button--transparent" href="#">
<a class="button button--transparent services__btn" href="#">
Learn more
{% include 'ui/btn-arrow.html' %}
</a>

73
templates/shortcodes/animation-section-js.html
View file

@ -1,47 +1,52 @@
<script>
if (window.matchMedia('(min-width: 991px)').matches) {
let targetElement = document.querySelectorAll('.animation');
if(targetElement){
targetElement.forEach(item => {
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
let animationRight = entry.target.className.includes('animation--right')
let animationLeft = entry.target.className.includes('animation--left')
let animationDown = entry.target.className.includes('animation--down')
if (entry.isIntersecting) {
let targetElement = document.querySelectorAll('.animation');
if(animationRight) {
item.classList.add('animation--right-play');
}
if (animationLeft) {
item.classList.add('animation--left-play');
}
if(targetElement){
targetElement.forEach(item => {
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
let animationRight = entry.target.className.includes('animation--right')
let animationLeft = entry.target.className.includes('animation--left')
let animationDown = entry.target.className.includes('animation--down')
if (entry.isIntersecting) {
if (animationDown) {
item.classList.add('animation--down-play');
}
if(animationRight) {
item.classList.add('animation--right-play');
} else {
if(animationRight) {
item.classList.remove('animation--right-play');
}
if (animationLeft) {
item.classList.remove('animation--left-play');
}
if (animationDown) {
item.classList.remove('animation--down-play');
}
}
if (animationLeft) {
item.classList.add('animation--left-play');
}
if (animationDown) {
item.classList.add('animation--down-play');
}
} else {
if(animationRight) {
item.classList.remove('animation--right-play');
}
if (animationLeft) {
item.classList.remove('animation--left-play');
}
if (animationDown) {
item.classList.remove('animation--down-play');
}
}
});
}, { threshold: 0.3 });
});
}, { threshold: 0.3 });
observer.observe(item);
})
observer.observe(item);
})
}
} else {
console.log('Mobile');
}
</script>

32
templates/shortcodes/header-switch.html
View file

@ -1,17 +1,29 @@
<script>
if (window.matchMedia('(min-width: 991px)').matches) {
const element = document.querySelector('.header')
const element = document.querySelector('.header')
const scrollThreshold = 20;
const scrollThreshold = 20;
window.addEventListener('scroll', function () {
window.addEventListener('scroll', function () {
let scrollPosition = window.scrollY || window.pageYOffset;
let scrollPosition = window.scrollY || window.pageYOffset;
if (scrollPosition > scrollThreshold) {
element.classList.add('header--green');
} else {
element.classList.remove('header--green');
}
});
} else {
const mobIcon = document.querySelector(".header__menu-btn")
const menu = document.querySelector('.header__row')
const wrapper = document.querySelector('.wrapper')
mobIcon.addEventListener('click', () => {
mobIcon.classList.toggle('is-active')
menu.classList.toggle('is-active')
wrapper.classList.toggle('frizz')
})
}
if (scrollPosition > scrollThreshold) {
element.classList.add('header--green');
} else {
element.classList.remove('header--green');
}
});
</script>

93
templates/shortcodes/paralax.html
View file

@ -1,56 +1,65 @@
<script>
let options = {
root: null,
rootMargin: '0px',
threshold: 0.5
};
let lastScrollTop = 0;
let yPos = 0;
if (window.matchMedia('(min-width: 991px)').matches) {
try {
let options = {
root: null,
rootMargin: '0px',
threshold: 0.5
};
document.addEventListener("scroll", function onScroll() {
let scrollTop = window.scrollY;
let lastScrollTop = 0;
let yPos = 0;
if (scrollTop > lastScrollTop) {
console.log("Прокрутка вниз");
if (yPos < 100) {
yPos = yPos + 1;
console.log(yPos);
}
} else if (scrollTop < lastScrollTop) {
console.log("Прокрутка верх");
if (yPos > 0 && yPos <= 100) {
yPos = yPos - 1;
console.log(yPos);
}
} else {
console.log("Прокрутка не изменилась");
}
document.addEventListener("scroll", function onScroll() {
let scrollTop = window.scrollY;
lastScrollTop = scrollTop;
if (scrollTop > lastScrollTop) {
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let parallaxLayers = entry.target.querySelectorAll(".open-map__icon");
if (yPos < 100) {
yPos = yPos + 1;
console.log(yPos);
}
} else if (scrollTop < lastScrollTop) {
parallaxLayers.forEach(function(layer, index) {
let speed = 1 * (index + 1);
layer.style.transform = `translateY(${yPos / speed}px)`;
});
if (yPos > 0 && yPos <= 100) {
yPos = yPos - 1;
observer.unobserve(entry.target);
}
} else {
console.log('er');
}
lastScrollTop = scrollTop;
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let parallaxLayers = entry.target.querySelectorAll(".open-map__icon");
parallaxLayers.forEach(function(layer, index) {
let speed = 1 * (index + 1);
layer.style.transform = `translateY(${yPos / speed}px)`;
});
observer.unobserve(entry.target);
}
});
}, options);
let sections = document.querySelectorAll('.open-map');
sections.forEach(function(section) {
observer.observe(section);
});
});
}, options);
let sections = document.querySelectorAll('.open-map');
sections.forEach(function(section) {
observer.observe(section);
});
});
} catch (err) {
console.log(err)
}
} else {
console.log('mobile');
}
</script>

2
templates/shortcodes/switch-theme.html
View file

@ -1,5 +1,4 @@
<script>
document.addEventListener('DOMContentLoaded', function () {
const switchTheme = document.querySelector('.switch-theme');
let activeCheck = localStorage.getItem('switchTheme') === 'true';
@ -66,4 +65,5 @@
}
});
</script>