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

add animation

Browse source
This commit is contained in:
borntojesus 2023-11-14 16:50:06 +02:00
parent 891d7cbb87
commit ed5dbbf39e
18 changed files with 350 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
sass/common/footer.scss Normal file
View file

@ -0,0 +1,29 @@
.footer {
background-color: var(--footer-bg);
padding: 30rem 0;
&__description {
color: var(--black-white);
}
&__logo {
color: var(--common-green);
}
&__nav {
border-top: 1rem solid var(--common-grey);
display: flex;
justify-content: space-between;
padding: 20rem 0;
margin-top: 20rem;
}
&__link {
text-decoration: none;
color: var(--black-white);
}
&__rw {
display: grid;
grid-template-columns: 160rem repeat(2, 1fr);
gap: 38rem;
svg {
width: 100%;
}
}
}

52
sass/component/animation.scss Normal file
View file

@ -0,0 +1,52 @@
.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);
}
}
&--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);
}
}
&--down-play {
.animation-item {
margin-bottom: 0rem!important;
opacity: 1!important;
transition: margin-bottom var(--transition), opacity var(--transition);
}
}
}

2
sass/component/buttons.scss
View file

@ -20,7 +20,7 @@
background-color: var(--common-green);
}
&--transparent {
color: var(--common-green-btn);
color: var(--green-button);
transition: transform var(--transition);
padding: 10rem 0;
min-width: fit-content;

2
sass/component/switch-theme.scss
View file

@ -1,5 +1,5 @@
.switch-theme {
background-color: var(--common-black);
background-color: var(--body-bg);
width: 70rem;
height: 30rem;
padding: 3rem;

2
sass/global/index.scss
View file

@ -5,7 +5,7 @@ html {
body {
font: var(--p);
color: var(--black-white);
background-color: var(--white-black);
background-color: var(--body-bg);
}
.container {

2
sass/main.scss
View file

@ -10,10 +10,12 @@
// Common Style
@import "./common/header";
@import "./common/footer";
// Component Style
@import "./component/buttons";
@import "./component/switch-theme";
@import "./component/animation";
// Pages Style
@import "./pages/home";

41
sass/pages/home.scss
View file

@ -171,8 +171,47 @@
max-height: 374rem;
position: absolute;
top: 50%;
left: -28rem;
left: -19rem;
transform: translateY(-50%);
}
}
}
// Singl
.single-section {
margin: 60rem 0;
overflow: hidden;
&__container {
padding: 0rem 40rem 0;
border-radius: var(--border-r-24);
background-color: var(--bg-green);
}
&__item {
display: flex;
align-items: flex-end;
gap: 50rem;
}
&__content {
max-width: 498rem;
padding: 90rem 0;
}
&__title {
max-width: 357rem;
}
&__description {
margin: 24rem 0;
}
&__card {
position: relative;
flex-grow: 1;
display: flex;
justify-content: flex-end;
overflow: hidden;
}
&__img {
padding: 0;
z-index: 3;
width: 90%;
}
}

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

@ -6,20 +6,26 @@
--common-green-primery: #CCE1D7;
--common-green-btn: #006031;
--common-green-hover: #2b6445;
--common-grey: #D9DBDA;
}
// Theme COLOR change
.light {
--body-bg: var(--common-white);
--white-black: var(--common-white);
--black-white: var(--common-black);
--green-theme: #006031;
--bg-green: #E5F0EB;
--footer-bg: #F5F5F5;
--green-button: var(--common-green);
}
.dark {
--body-bg: #2C2C2C;
--white-black: var(--common-black);
--black-white: var(--common-white);
--green-theme: var(--common-green);
--bg-green: #33453D;
--footer-bg: var(--common-black);
--green-button: #BBD7A7;
}

9
sass/variables/fonts.scss
View file

@ -7,6 +7,8 @@
--h1: 300 48rem/60rem var(--sub-fonst);
--h1-sub: 400 24rem/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 16rem/28rem var(--main-font);
}
@ -33,7 +35,12 @@
.p{
font: var(--p);
}
.p-md {
font: var(--p-md);
}
.p-sm {
font: var(--p-sm);
}
.nav-link{
font: var(--nav-link);
}

BIN
static/images/sections/singl-card-1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 234 KiB

7
templates/base.html
View file

@ -80,16 +80,13 @@
<footer class="footer">
{% include 'common/footer.html' %}
<p>
<span>© 2023 <a href="mailto:legal@organicmaps.app">Organic Maps OÜ</a>, reg. code 16225385</span>
<span>Harju maakond, Tallinn, Kesklinna linnaosa, Rävala pst 8-810, 10143, Estonia</span>
</p>
</footer>
</div>
{% include 'shortcodes/switch-theme.html' %}
{% include 'shortcodes/header-switch.html' %}
{% include 'shortcodes/animation-section-js.html' %}
{% include 'shortcodes/paralax.html' %}
</body>
</html>

70
templates/common/footer.html
View file

@ -1,27 +1,53 @@
{% set home = get_section(path='_index.md') %}
{% set news = get_section(path='news/_index.md') %}
<nav id="bottom-menu" role="navigation">
{% for page in [home, news] | concat(with=home.pages) %}
{% set translated = page.translations | filter(attribute='lang', value=lang) | first %}
{% if translated %}
{% if "_index" in translated.path %}
{% set page = get_section(path=translated.path) %}
{% else %}
{% set page = get_page(path=translated.path) %}
{% endif %}
{% endif %}
{% set langPathPrefix = '' %}
{% if lang != config.default_language %}
{% set langPathPrefix = '/' ~ lang %}
{% endif %}
{% if page.extra.menu_title %}
{% if resource.path != page.path %}<a href="{{ page.permalink | replace(from=config.base_url, to="") | safe }}">{% endif %}
<span>{{ page.extra.menu_title }}</span>
{%- if resource.path != page.path %}</a>{% endif %}
&nbsp;
{% endif %}
{% endfor %}
<a href="mailto:hello@organicmaps.app">{{ trans(key='contact', lang=lang) }}</a>
<button></button>
<div class="switch-theme">
<div class="switch-theme__toggle"></div>
<div class="container footer__container">
<div class="footer__rw">
<a class="footer__logo logo" href="{{ langPathPrefix | safe }}/">{% include 'ui/logo.html' %}</a>
<div class="footer__text">
<p class="p-md footer__description">© 2023 Organic Maps OÜ</p>
<p class="p-md footer__description">reg. code 16225385 </p>
</div>
<div class="footer__text">
<p class="p-md footer__description">Harju maakond, Tallinn, Kesklinna </p>
<p class="p-md footer__description">linnaosa, Rävala pst 8-810, 10143, Estoni</p>
</div>
</div>
</nav>
<div class="footer__item">
<div class="footer__nav">
<nav class="footer__nav-item" id="bottom-menu" role="navigation">
{% for page in [home, news] | concat(with=home.pages) %}
{% set translated = page.translations | filter(attribute='lang', value=lang) | first %}
{% if translated %}
{% if "_index" in translated.path %}
{% set page = get_section(path=translated.path) %}
{% else %}
{% set page = get_page(path=translated.path) %}
{% endif %}
{% endif %}
{% if page.extra.menu_title %}
{% if resource.path != page.path %}<a class="p-sm footer__link" href="{{ page.permalink | replace(from=config.base_url, to="") | safe }}">{% endif %}
<span class="p-sm footer__link">{{ page.extra.menu_title }}</span>
{%- if resource.path != page.path %}</a>{% endif %}
&nbsp;
{% endif %}
{% endfor %}
<a class="p-sm footer__link" href="mailto:hello@organicmaps.app">{{ trans(key='contact', lang=lang) }}</a>
</nav>
<div class="switch-theme">
<div class="switch-theme__toggle"></div>
</div>
</div>
</div>
</div>

3
templates/home.html
View file

@ -8,9 +8,10 @@
{% include 'section/home-services.html' %}
{% include 'section/single-section.html' %}
{{ resource.content | safe }}
{% include 'components/google_native_app_prompt.html' %}
{% endblock content %}

4
templates/index.html
View file

@ -9,10 +9,10 @@
{% include 'section/home-services.html' %}
{% include 'section/single-section.html' %}
{{ resource.content | safe }}
{% include 'components/google_native_app_prompt.html' %}
{% endblock content %}

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

@ -1,7 +1,7 @@
<section class="services">
<div class="container services__container">
<!--Item-->
<div class="services__item">
<div class="services__item animation animation--right">
<div class="services__content">
<h3 class="h2 services__title">
Offline Search and Route
@ -16,7 +16,7 @@
</a>
</div>
<div class="services__card">
<img class="services__img services__img--first" src="/images/sections/map-m-1.png">
<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="#">
Learn more
@ -26,7 +26,7 @@
</div>
<!--Item End-->
<!--Item-->
<div class="services__item">
<div class="services__item animation animation--left">
<div class="services__content">
<h3 class="h2 services__title">
Offline Search and Route
@ -41,7 +41,32 @@
</a>
</div>
<div class="services__card">
<img class="services__img services__img--first" src="/images/sections/map-m-1.png">
<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="#">
Learn more
{% include 'ui/btn-arrow.html' %}
</a>
</div>
</div>
<!-- Item End-->
<!--Item-->
<div class="services__item animation animation--right">
<div class="services__content">
<h3 class="h2 services__title">
Offline Search and Route
</h3>
<p class="p services__description">
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="#">
Learn more
{% include 'ui/btn-arrow.html' %}
</a>
</div>
<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="#">
Learn more

23
templates/section/single-section.html Normal file
View file

@ -0,0 +1,23 @@
<section class="single-section">
<div class="container single-section__container">
<!--Item-->
<div class="single-section__item animation animation--down">
<div class="single-section__content">
<h3 class="h2 single-section__title">
Offline Search and Route
</h3>
<p class="p single-section__description">
See the place you want to go while in an underground parking garage, and navigate while on a distant
hike.
</p>
{% include 'components/download-button.html' %}
</div>
<div class="single-section__card">
<img class="single-section__img animation-item" src="/images/sections/singl-card-1.png">
</div>
</div>
<!--Item End-->
</div>
</section>

47
templates/shortcodes/animation-section-js.html Normal file
View file

@ -0,0 +1,47 @@
<script>
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) {
if(animationRight) {
item.classList.add('animation--right-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 });
observer.observe(item);
})
}
</script>

56
templates/shortcodes/paralax.html Normal file
View file

@ -0,0 +1,56 @@
<script>
let options = {
root: null,
rootMargin: '0px',
threshold: 0.5
};
let lastScrollTop = 0;
let yPos = 0;
document.addEventListener("scroll", function onScroll() {
let scrollTop = window.scrollY;
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("Прокрутка не изменилась");
}
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);
});
});
</script>