diff --git a/src/components/parallax/budda-parallax.pug b/src/components/parallax/budda-parallax.pug new file mode 100644 index 0000000..3ff0861 --- /dev/null +++ b/src/components/parallax/budda-parallax.pug @@ -0,0 +1,32 @@ +- var path = "parallax/budda" +.parallax.parallax--feedback + picture(data-speed="0.1").parallax__layer + source(media="(min-width: 1801px)" type="image/jpg" srcset=require(`images/${path}/2560/1.jpg`)) + source(media="(min-width: 1201px)" type="image/jpg" srcset=require(`images/${path}/1800/1.jpg`)) + source(media="(min-width: 769px)" type="image/jpg" srcset=require(`images/${path}/1200/1.jpg`)) + source(media="(min-width: 481px)" type="image/jpg" srcset=require(`images/${path}/768.jpg`)) + source(media="(max-width: 480px)" type="image/jpg" srcset=require(`images/${path}/320.jpg`)) + img(src=require(`images/${path}/768.jpg`) alt="").parallax__image + picture(data-speed="0.18").parallax__layer + source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/2.png`)) + source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/2.png`)) + source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/2.png`)) + img(src="" alt="").parallax__image + picture(data-speed="0.4").parallax__layer + source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/budda.png`)) + img(src="" alt="").parallax__image + picture(data-speed="0.6").parallax__layer + source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/4.png`)) + source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/4.png`)) + source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/4.png`)) + img(src="" alt="").parallax__image + picture(data-speed="0.65").parallax__layer + source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/5.png`)) + source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/5.png`)) + source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/5.png`)) + img(src="" alt="").parallax__image + picture(data-speed="0.8").parallax__layer + source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/6.png`)) + source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/6.png`)) + source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/6.png`)) + img(src="" alt="").parallax__image \ No newline at end of file diff --git a/src/components/parallax/mountain-parallax.pug b/src/components/parallax/mountain-parallax.pug new file mode 100644 index 0000000..b716850 --- /dev/null +++ b/src/components/parallax/mountain-parallax.pug @@ -0,0 +1,37 @@ +- var path = "parallax/mountain" +.parallax + picture(data-speed="0.1").parallax__layer + source(media="(min-width: 1801px)" type="image/jpg" srcset=require(`images/${path}/2560/1.jpg`)) + source(media="(min-width: 1201px)" type="image/jpg" srcset=require(`images/${path}/1800/1.jpg`)) + source(media="(min-width: 769px)" type="image/jpg" srcset=require(`images/${path}/1200/1.jpg`)) + source(media="(min-width: 481px)" type="image/jpg" srcset=require(`images/${path}/768.jpg`)) + source(media="(max-width: 480px)" type="image/jpg" srcset=require(`images/${path}/320.jpg`)) + img(src=require(`images/${path}/768.jpg`) alt="").parallax__image + picture(data-speed="0.25").parallax__layer + source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/2.png`)) + source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/2.png`)) + source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/2.png`)) + img(src="" alt="").parallax__image + picture(data-speed="0.35").parallax__layer + source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/balloon.png`)) + img(src="" alt="").parallax__image + picture(data-speed="0.38").parallax__layer + source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/4.png`)) + source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/4.png`)) + source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/4.png`)) + img(src="" alt="").parallax__image + picture(data-speed="0.42").parallax__layer + source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/5.png`)) + source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/5.png`)) + source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/5.png`)) + img(src="" alt="").parallax__image + picture(data-speed="0.45").parallax__layer + source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/6.png`)) + source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/6.png`)) + source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/6.png`)) + img(src="" alt="").parallax__image + picture(data-speed="0.45").parallax__layer + source(media="(min-width: 1801px)" type="image/png" srcset=require(`images/${path}/2560/7.png`)) + source(media="(min-width: 1201px)" type="image/png" srcset=require(`images/${path}/1800/7.png`)) + source(media="(min-width: 769px)" type="image/png" srcset=require(`images/${path}/1200/7.png`)) + img(src="" alt="").parallax__image \ No newline at end of file diff --git a/src/components/reviews/reviews.pug b/src/components/reviews/reviews.pug index f680c20..a41a3e6 100644 --- a/src/components/reviews/reviews.pug +++ b/src/components/reviews/reviews.pug @@ -2,31 +2,4 @@ include ./review include ./reviews-content section.reviews(id="reviews") - #reviews-component - //- .reviews__title - //- h2.section__title.reviews__title-text Что обо мне говорят - //- .reviews-slider__buttons.slider-btns.slider-btns--rounded - //- button( - //- type="button" - //- :disabled="prevBtnDisable" - //- @click.prevent="slide('prev')" - //- ).slider-btn.slider-btn--prev - //- +icon('short-arrow', 'slider-btn__icon') - //- button( - //- type="button" - //- :disabled="nextBtnble" - //- @click.prevent="slide('next')" - //- ).slider-btn.slider-btn--next - //- +icon('short-arrow', 'slider-btn__icon') - //- {{test}} - //- .reviews-slider - //- carousel( - //- ref="carousel" - //- :pagination-enabled="false" - //- :per-page-custom="[[320, 1], [577, 2]]" - //- ).revies-slider__list - //- slide( - //- v-for="review in reviews" - //- :key="review.id" - //- ).reviews__slider-item - //- review(:review="review") \ No newline at end of file + #reviews-component \ No newline at end of file diff --git a/src/images/bg/budda.jpg b/src/images/bg/budda.jpg deleted file mode 100644 index ec0cd14..0000000 Binary files a/src/images/bg/budda.jpg and /dev/null differ diff --git a/src/images/bg/mountain.jpg b/src/images/bg/mountain.jpg deleted file mode 100644 index fc42e1d..0000000 Binary files a/src/images/bg/mountain.jpg and /dev/null differ diff --git a/src/images/parallax/budda/1200/1.jpg b/src/images/parallax/budda/1200/1.jpg new file mode 100644 index 0000000..1b5f9ba Binary files /dev/null and b/src/images/parallax/budda/1200/1.jpg differ diff --git a/src/images/parallax/budda/1200/2.png b/src/images/parallax/budda/1200/2.png new file mode 100644 index 0000000..3e86c60 Binary files /dev/null and b/src/images/parallax/budda/1200/2.png differ diff --git a/src/images/parallax/budda/fhd/3.png b/src/images/parallax/budda/1200/3.png similarity index 100% rename from src/images/parallax/budda/fhd/3.png rename to src/images/parallax/budda/1200/3.png diff --git a/src/images/parallax/budda/1200/4.png b/src/images/parallax/budda/1200/4.png new file mode 100644 index 0000000..cfe4238 Binary files /dev/null and b/src/images/parallax/budda/1200/4.png differ diff --git a/src/images/parallax/budda/1200/5.png b/src/images/parallax/budda/1200/5.png new file mode 100644 index 0000000..cfe4238 Binary files /dev/null and b/src/images/parallax/budda/1200/5.png differ diff --git a/src/images/parallax/budda/1200/6.png b/src/images/parallax/budda/1200/6.png new file mode 100644 index 0000000..cfe4238 Binary files /dev/null and b/src/images/parallax/budda/1200/6.png differ diff --git a/src/images/parallax/budda/1800/1.jpg b/src/images/parallax/budda/1800/1.jpg new file mode 100644 index 0000000..9758c50 Binary files /dev/null and b/src/images/parallax/budda/1800/1.jpg differ diff --git a/src/images/parallax/budda/1800/2.png b/src/images/parallax/budda/1800/2.png new file mode 100644 index 0000000..5babec6 Binary files /dev/null and b/src/images/parallax/budda/1800/2.png differ diff --git a/src/images/parallax/budda/qhd/3.png b/src/images/parallax/budda/1800/3.png similarity index 100% rename from src/images/parallax/budda/qhd/3.png rename to src/images/parallax/budda/1800/3.png diff --git a/src/images/parallax/budda/1800/4.png b/src/images/parallax/budda/1800/4.png new file mode 100644 index 0000000..c553516 Binary files /dev/null and b/src/images/parallax/budda/1800/4.png differ diff --git a/src/images/parallax/budda/1800/5.png b/src/images/parallax/budda/1800/5.png new file mode 100644 index 0000000..c553516 Binary files /dev/null and b/src/images/parallax/budda/1800/5.png differ diff --git a/src/images/parallax/budda/1800/6.png b/src/images/parallax/budda/1800/6.png new file mode 100644 index 0000000..c553516 Binary files /dev/null and b/src/images/parallax/budda/1800/6.png differ diff --git a/src/images/parallax/budda/qhd/1.jpg b/src/images/parallax/budda/2560/1.jpg similarity index 100% rename from src/images/parallax/budda/qhd/1.jpg rename to src/images/parallax/budda/2560/1.jpg diff --git a/src/images/parallax/budda/qhd/2.png b/src/images/parallax/budda/2560/2.png similarity index 100% rename from src/images/parallax/budda/qhd/2.png rename to src/images/parallax/budda/2560/2.png diff --git a/src/images/parallax/budda/2560/3.png b/src/images/parallax/budda/2560/3.png new file mode 100644 index 0000000..fb493ed Binary files /dev/null and b/src/images/parallax/budda/2560/3.png differ diff --git a/src/images/parallax/budda/qhd/4.png b/src/images/parallax/budda/2560/4.png similarity index 100% rename from src/images/parallax/budda/qhd/4.png rename to src/images/parallax/budda/2560/4.png diff --git a/src/images/parallax/budda/qhd/5.png b/src/images/parallax/budda/2560/5.png similarity index 100% rename from src/images/parallax/budda/qhd/5.png rename to src/images/parallax/budda/2560/5.png diff --git a/src/images/parallax/budda/qhd/6.png b/src/images/parallax/budda/2560/6.png similarity index 100% rename from src/images/parallax/budda/qhd/6.png rename to src/images/parallax/budda/2560/6.png diff --git a/src/images/parallax/budda/320.jpg b/src/images/parallax/budda/320.jpg new file mode 100644 index 0000000..be919f6 Binary files /dev/null and b/src/images/parallax/budda/320.jpg differ diff --git a/src/images/parallax/budda/768.jpg b/src/images/parallax/budda/768.jpg new file mode 100644 index 0000000..17c8691 Binary files /dev/null and b/src/images/parallax/budda/768.jpg differ diff --git a/src/images/parallax/budda/budda.png b/src/images/parallax/budda/budda.png new file mode 100644 index 0000000..fb493ed Binary files /dev/null and b/src/images/parallax/budda/budda.png differ diff --git a/src/images/parallax/budda/fhd/1.jpg b/src/images/parallax/budda/fhd/1.jpg deleted file mode 100644 index 9ae3e98..0000000 Binary files a/src/images/parallax/budda/fhd/1.jpg and /dev/null differ diff --git a/src/images/parallax/budda/fhd/2.png b/src/images/parallax/budda/fhd/2.png deleted file mode 100644 index a9570d7..0000000 Binary files a/src/images/parallax/budda/fhd/2.png and /dev/null differ diff --git a/src/images/parallax/budda/fhd/4.png b/src/images/parallax/budda/fhd/4.png deleted file mode 100644 index 6595bec..0000000 Binary files a/src/images/parallax/budda/fhd/4.png and /dev/null differ diff --git a/src/images/parallax/budda/fhd/5.png b/src/images/parallax/budda/fhd/5.png deleted file mode 100644 index 6595bec..0000000 Binary files a/src/images/parallax/budda/fhd/5.png and /dev/null differ diff --git a/src/images/parallax/budda/fhd/6.png b/src/images/parallax/budda/fhd/6.png deleted file mode 100644 index 6595bec..0000000 Binary files a/src/images/parallax/budda/fhd/6.png and /dev/null differ diff --git a/src/images/parallax/mountain/1200/1.jpg b/src/images/parallax/mountain/1200/1.jpg new file mode 100644 index 0000000..7805102 Binary files /dev/null and b/src/images/parallax/mountain/1200/1.jpg differ diff --git a/src/images/parallax/mountain/1200/2.png b/src/images/parallax/mountain/1200/2.png new file mode 100644 index 0000000..1d04489 Binary files /dev/null and b/src/images/parallax/mountain/1200/2.png differ diff --git a/src/images/parallax/mountain/1200/4.png b/src/images/parallax/mountain/1200/4.png new file mode 100644 index 0000000..a1a9ba3 Binary files /dev/null and b/src/images/parallax/mountain/1200/4.png differ diff --git a/src/images/parallax/mountain/1200/5.png b/src/images/parallax/mountain/1200/5.png new file mode 100644 index 0000000..43d129e Binary files /dev/null and b/src/images/parallax/mountain/1200/5.png differ diff --git a/src/images/parallax/mountain/1200/6.png b/src/images/parallax/mountain/1200/6.png new file mode 100644 index 0000000..0351efd Binary files /dev/null and b/src/images/parallax/mountain/1200/6.png differ diff --git a/src/images/parallax/mountain/1200/7.png b/src/images/parallax/mountain/1200/7.png new file mode 100644 index 0000000..cfd2431 Binary files /dev/null and b/src/images/parallax/mountain/1200/7.png differ diff --git a/src/images/parallax/mountain/1800/1.jpg b/src/images/parallax/mountain/1800/1.jpg new file mode 100644 index 0000000..2384203 Binary files /dev/null and b/src/images/parallax/mountain/1800/1.jpg differ diff --git a/src/images/parallax/mountain/1800/2.png b/src/images/parallax/mountain/1800/2.png new file mode 100644 index 0000000..f16164b Binary files /dev/null and b/src/images/parallax/mountain/1800/2.png differ diff --git a/src/images/parallax/mountain/1800/4.png b/src/images/parallax/mountain/1800/4.png new file mode 100644 index 0000000..a3564f4 Binary files /dev/null and b/src/images/parallax/mountain/1800/4.png differ diff --git a/src/images/parallax/mountain/1800/5.png b/src/images/parallax/mountain/1800/5.png new file mode 100644 index 0000000..a583eed Binary files /dev/null and b/src/images/parallax/mountain/1800/5.png differ diff --git a/src/images/parallax/mountain/1800/6.png b/src/images/parallax/mountain/1800/6.png new file mode 100644 index 0000000..01ce7f9 Binary files /dev/null and b/src/images/parallax/mountain/1800/6.png differ diff --git a/src/images/parallax/mountain/1800/7.png b/src/images/parallax/mountain/1800/7.png new file mode 100644 index 0000000..ab02a55 Binary files /dev/null and b/src/images/parallax/mountain/1800/7.png differ diff --git a/src/images/parallax/mountain/2560/1.jpg b/src/images/parallax/mountain/2560/1.jpg new file mode 100644 index 0000000..1e96b0a Binary files /dev/null and b/src/images/parallax/mountain/2560/1.jpg differ diff --git a/src/images/parallax/mountain/2560/2.png b/src/images/parallax/mountain/2560/2.png new file mode 100644 index 0000000..e911675 Binary files /dev/null and b/src/images/parallax/mountain/2560/2.png differ diff --git a/src/images/parallax/mountain/2560/4.png b/src/images/parallax/mountain/2560/4.png new file mode 100644 index 0000000..588ea93 Binary files /dev/null and b/src/images/parallax/mountain/2560/4.png differ diff --git a/src/images/parallax/mountain/2560/5.png b/src/images/parallax/mountain/2560/5.png new file mode 100644 index 0000000..c07cad6 Binary files /dev/null and b/src/images/parallax/mountain/2560/5.png differ diff --git a/src/images/parallax/mountain/2560/6.png b/src/images/parallax/mountain/2560/6.png new file mode 100644 index 0000000..794c39d Binary files /dev/null and b/src/images/parallax/mountain/2560/6.png differ diff --git a/src/images/parallax/mountain/2560/7.png b/src/images/parallax/mountain/2560/7.png new file mode 100644 index 0000000..e475953 Binary files /dev/null and b/src/images/parallax/mountain/2560/7.png differ diff --git a/src/images/parallax/mountain/320.jpg b/src/images/parallax/mountain/320.jpg new file mode 100644 index 0000000..8b09d19 Binary files /dev/null and b/src/images/parallax/mountain/320.jpg differ diff --git a/src/images/parallax/mountain/768.jpg b/src/images/parallax/mountain/768.jpg new file mode 100644 index 0000000..799aa38 Binary files /dev/null and b/src/images/parallax/mountain/768.jpg differ diff --git a/src/images/parallax/mountain/balloon.png b/src/images/parallax/mountain/balloon.png new file mode 100644 index 0000000..29d02b7 Binary files /dev/null and b/src/images/parallax/mountain/balloon.png differ diff --git a/src/images/parallax/mountain/fhd/1.jpg b/src/images/parallax/mountain/fhd/1.jpg deleted file mode 100644 index 3205e1b..0000000 Binary files a/src/images/parallax/mountain/fhd/1.jpg and /dev/null differ diff --git a/src/images/parallax/mountain/fhd/2.png b/src/images/parallax/mountain/fhd/2.png deleted file mode 100644 index fb1be83..0000000 Binary files a/src/images/parallax/mountain/fhd/2.png and /dev/null differ diff --git a/src/images/parallax/mountain/fhd/3.png b/src/images/parallax/mountain/fhd/3.png deleted file mode 100644 index 58a9daf..0000000 Binary files a/src/images/parallax/mountain/fhd/3.png and /dev/null differ diff --git a/src/images/parallax/mountain/fhd/4.png b/src/images/parallax/mountain/fhd/4.png deleted file mode 100644 index b271d11..0000000 Binary files a/src/images/parallax/mountain/fhd/4.png and /dev/null differ diff --git a/src/images/parallax/mountain/fhd/5.png b/src/images/parallax/mountain/fhd/5.png deleted file mode 100644 index b02c047..0000000 Binary files a/src/images/parallax/mountain/fhd/5.png and /dev/null differ diff --git a/src/images/parallax/mountain/fhd/6.png b/src/images/parallax/mountain/fhd/6.png deleted file mode 100644 index 409e44c..0000000 Binary files a/src/images/parallax/mountain/fhd/6.png and /dev/null differ diff --git a/src/images/parallax/mountain/fhd/7.png b/src/images/parallax/mountain/fhd/7.png deleted file mode 100644 index 6a06aaf..0000000 Binary files a/src/images/parallax/mountain/fhd/7.png and /dev/null differ diff --git a/src/images/parallax/mountain/qhd/1.jpg b/src/images/parallax/mountain/qhd/1.jpg deleted file mode 100644 index 9e19739..0000000 Binary files a/src/images/parallax/mountain/qhd/1.jpg and /dev/null differ diff --git a/src/images/parallax/mountain/qhd/2.png b/src/images/parallax/mountain/qhd/2.png deleted file mode 100644 index c5e413e..0000000 Binary files a/src/images/parallax/mountain/qhd/2.png and /dev/null differ diff --git a/src/images/parallax/mountain/qhd/3.png b/src/images/parallax/mountain/qhd/3.png deleted file mode 100644 index 21268cb..0000000 Binary files a/src/images/parallax/mountain/qhd/3.png and /dev/null differ diff --git a/src/images/parallax/mountain/qhd/4.png b/src/images/parallax/mountain/qhd/4.png deleted file mode 100644 index 63eea56..0000000 Binary files a/src/images/parallax/mountain/qhd/4.png and /dev/null differ diff --git a/src/images/parallax/mountain/qhd/5.png b/src/images/parallax/mountain/qhd/5.png deleted file mode 100644 index 2f25e23..0000000 Binary files a/src/images/parallax/mountain/qhd/5.png and /dev/null differ diff --git a/src/images/parallax/mountain/qhd/6.png b/src/images/parallax/mountain/qhd/6.png deleted file mode 100644 index 0ef4f6e..0000000 Binary files a/src/images/parallax/mountain/qhd/6.png and /dev/null differ diff --git a/src/images/parallax/mountain/qhd/7.png b/src/images/parallax/mountain/qhd/7.png deleted file mode 100644 index 5874500..0000000 Binary files a/src/images/parallax/mountain/qhd/7.png and /dev/null differ diff --git a/src/index.pug b/src/index.pug index fbbea62..a8aa30d 100644 --- a/src/index.pug +++ b/src/index.pug @@ -10,7 +10,7 @@ html(lang="en") body .wrapper .welcome - +paralax('mountain', 7) + include ./components/parallax/mountain-parallax include ./components/hero include ./components/about +triangles('bottom') @@ -19,7 +19,7 @@ html(lang="en") include ./components/works/works +triangles('top', 'triangles--bottom') .feedback - +paralax('budda', 6, 'parallax--feedback') + include ./components/parallax/budda-parallax include ./components/reviews/reviews include ./components/contacts diff --git a/src/mixins.pug b/src/mixins.pug index 3a77603..b44edd3 100644 --- a/src/mixins.pug +++ b/src/mixins.pug @@ -45,21 +45,4 @@ mixin triangles(direction, className) if direction == 'bottom' polygon(points="0,100 1000,100 1000,0") else - polygon(points="0,0 0,100 1000,0") - -mixin paralax(image, layers, className) - .parallax(class=className) - - - var speeds = [ - ['0.1','0.25','0.35','0.38','0.45','0.48','0.5'], - ['0.01','0.1','0.25','0.28','0.35','0.38'] - ] - - for (var i = 1; i <= layers; i++) - .parallax__layer(data-speed=`${image == 'mountain' ? speeds[0][i-1] : speeds[1][i-1]}`) - picture - source(srcset=require(`images/parallax/${image}/fhd/${i}.${i === 1 ? 'jpg' : 'png'}`) media="(min-width: 1200px)").parallax__image - source(srcset=require(`images/parallax/${image}/qhd/${i}.${i === 1 ? 'jpg' : 'png'}`) media="(min-width: 1800px)").parallax__image - if i == 1 - img(srcset=require(`images/bg/${image}.jpg`)).parallax__image - else - img(srcset="").parallax__image \ No newline at end of file + polygon(points="0,0 0,100 1000,0") \ No newline at end of file diff --git a/src/scripts/parallax.js b/src/scripts/parallax.js index e6dd8f5..b3bfc51 100644 --- a/src/scripts/parallax.js +++ b/src/scripts/parallax.js @@ -1,23 +1,35 @@ -const parallax = document.querySelector(".parallax"); -const parallaxFeedback = document.querySelector(".parallax--feedback"); -const layers = parallax.children; -const layersFeedback = parallaxFeedback.children; -const parallaxFeedbackOffset = parallaxFeedback.getBoundingClientRect().top; - -function moveLayers (layers ,scrollOffset, topOffset = null) { - Array.from(layers).forEach(layer => { - const divider = layer.dataset.speed; - let offset = topOffset - ? scrollOffset - topOffset - : scrollOffset; - const strafe = offset * divider / (-60); - - layer.style.transform = `translateY(${strafe}%)`; - }); -} +const parallax = document.querySelectorAll('.parallax'); +let windowWidth = null; + +(() => { + function getWindowWidth() { + windowWidth = document.querySelector('body').clientWidth; + }; + + getWindowWidth(); + + window.addEventListener('resize', () => getWindowWidth()) +})(); + +Array.from(parallax).forEach(parallax => { + const layers = parallax.children; + const parent = parallax.parentNode; + const parentOffsetTop = parent.offsetTop; -window.addEventListener("scroll", e => { - const scrollOffset = window.pageYOffset; - moveLayers(layers, scrollOffset); - moveLayers(layersFeedback, scrollOffset, parallaxFeedbackOffset); -}) \ No newline at end of file + function moveLayers (scrollOffset) { + Array.from(layers).forEach(layer => { + const divider = layer.dataset.speed; + const strafe = scrollOffset * divider / (-60); + + layer.style.transform = `translateY(${ strafe }%)`; + }); + } + + window.addEventListener('scroll', e => { + const scrollOffset = window.pageYOffset; + + if (windowWidth > 768 && scrollOffset - parentOffsetTop >= 0) { + moveLayers(scrollOffset - parentOffsetTop); + } + }); +}); \ No newline at end of file diff --git a/src/scripts/reviews.js b/src/scripts/reviews.js index e4a3d50..6ce2dfe 100644 --- a/src/scripts/reviews.js +++ b/src/scripts/reviews.js @@ -83,7 +83,7 @@ new Vue({ item.photo = requirePic; return item; }); - }, + } } }) \ No newline at end of file diff --git a/src/styles/blocks/feedback.pcss b/src/styles/blocks/feedback.pcss index 806da97..fb20d38 100644 --- a/src/styles/blocks/feedback.pcss +++ b/src/styles/blocks/feedback.pcss @@ -1,3 +1,6 @@ .feedback { position: relative; + width: 100%; + min-height: 1600px; + overflow: hidden; } \ No newline at end of file diff --git a/src/styles/blocks/parallax.pcss b/src/styles/blocks/parallax.pcss index e059fa0..3a6c96d 100644 --- a/src/styles/blocks/parallax.pcss +++ b/src/styles/blocks/parallax.pcss @@ -1,11 +1,25 @@ .parallax { position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; width: 100%; height: 100%; + min-height: 1440px; + overflow: hidden; + top: 0; + left: 50%; + transform: translateX(-50%); + + @include nextTablets { + min-width: 1200px; + } + @include nextDesktops { + min-width: 1800px; + } + @include nextDesktopsHd { + min-width: 2560px; + } + @include nextDesktopsQhd { + min-height: 56.25vw + } } .parallax__layer { @@ -14,108 +28,213 @@ left: 0; width: 100%; height: 100%; +} + +.parallax__image { + position: absolute; will-change: transform; + transition: transform .4s; +} +.parallax__layer { &:nth-child(1) { .parallax__image { object-fit: cover; - width: 100%; - height: 100%; + min-width: 100%; + max-width: initial; } } + &:nth-child(2) { .parallax__image { top: 300px; right: 0; width: 100%; + + @include nextDesktops { + top: 310px; + } + @include nextDesktopsHd { + top: 440px; + } + @include nextDesktopsQhd { + top: 17.1875vw; + } } } + &:nth-child(3) { .parallax__image { - right: 10%; - margin-right: 15%; - top: 480px; - width: 200px; - height: auto; + width: 185px; + height: 241px; + left: 80%; + top: 500px; + + @include nextDesktops { + top: 480px; + } + @include nextDesktopsHd { + top: 685px; + left: 65%; + } } } + &:nth-child(4) { .parallax__image { - left: 0; - top: 610px; width: 100%; + top: 540px; + + @include nextDesktopsHd { + top: 775px; + } + @include nextDesktopsQhd { + top: 30.2734375vw + } } } + &:nth-child(5) { .parallax__image { - left: 0; - top: 670px; - width: 60%; - height: auto; + top: 645px; + + @include nextDesktops { + top: 664px; + } + @include nextDesktopsHd { + top: 945px; + } + @include nextDesktopsQhd { + top: 36.9140625vw + } } } + &:nth-child(6) { .parallax__image { right: 0; - top: 350px; + top: 850px; + @include nextDesktops { + top: 705px; + } + @include nextDesktopsHd { + top: 997px; + } + @include nextDesktopsQhd { + top: 38.9453125vw + } } } + &:nth-child(7) { .parallax__image { - left: 0; width: 100%; - bottom: -400px; + right: 0; + top: 990px; + @include nextDesktops { + top: 1024px; + } + @include nextDesktopsHd { + top: 1444px; + } + @include nextDesktopsQhd { + top: 56.40625vw + } } } } -.parallax__image { - position: absolute; -} - .parallax--feedback { .parallax__layer { + &:nth-child(1) { + .parallax__image { + height: 100%; + } + } + &:nth-child(2) { .parallax__image { top: initial; - bottom: -40px; + bottom: -90px; right: 0; width: 100%; + + @include nextDesktops { + bottom: -70px; + } + @include nextDesktopsQhd { + bottom: -11vw; } } + } &:nth-child(3) { .parallax__image { - right: 5%; - top: 550px; - width: auto; - margin-right: 0; + left: 62%; + top: 750px; + width: 602px; + height: 741px; + + @include nextDesktops { + left: 61%; + top: 650px; + } } } &:nth-child(4) { .parallax__image { - top: auto; - left: 60px; - bottom: -220px; + top: 80%; + left: -55px; transform: scaleX(-1); + + @include nextDesktops { + top: 70%; + left: -60px; + } + @include nextDesktopsHd { + top: 50%; + left: -150px; + } + @include nextDesktopsQhd { + top: 55%; + left: 0; + } } } &:nth-child(5) { .parallax__image { - right: -270px; - left: initial; - top: initial; - bottom: -460px; + left: 0; + top: 80%; width: 100%; height: auto; - transform: scaleX(-1); + + @include nextDesktops { + left: 100px; + top: 50%; + } + @include nextDesktopsHd { + left: 0; + } + @include nextDesktopsQhd { + left: -500px; + } } } &:nth-child(6) { .parallax__image { - right: 300px; - top: initial; - bottom: -460px; - transform: scaleX(-1); + right: 0; + top: 80%; + + @include nextDesktops { + right: -300px; + top: 70%; + } + @include nextDesktopsHd { + right: -200px; + } + @include nextDesktopsQhd { + top: 50%; + right: -300px; + } } } } diff --git a/src/styles/blocks/welcome.pcss b/src/styles/blocks/welcome.pcss index a44646e..122e119 100644 --- a/src/styles/blocks/welcome.pcss +++ b/src/styles/blocks/welcome.pcss @@ -1,3 +1,6 @@ .welcome { position: relative; + width: 100%; + min-height: 1600px; + overflow: hidden; } \ No newline at end of file diff --git a/src/styles/mixins.pcss b/src/styles/mixins.pcss index bd2a864..1cc6ee1 100644 --- a/src/styles/mixins.pcss +++ b/src/styles/mixins.pcss @@ -32,4 +32,28 @@ @media screen and (max-width: $bp-phones) { @content; } +} + +@mixin nextTablets() { + @media screen and (min-width: $bp-nextTablets) { + @content; + } +} + +@mixin nextDesktops() { + @media screen and (min-width: $bp-nextDesktops) { + @content; + } +} + +@mixin nextDesktopsHd() { + @media screen and (min-width: $bp-nextDesktopsHd) { + @content; + } +} + +@mixin nextDesktopsQhd() { + @media screen and (min-width: $bp-nextDesktopsQhd) { + @content; + } } \ No newline at end of file diff --git a/src/styles/variables.json b/src/styles/variables.json index 5709494..85e6c90 100644 --- a/src/styles/variables.json +++ b/src/styles/variables.json @@ -1,12 +1,19 @@ { - "text-color": "#464d62", - "links-color": "#4b6fd7", "bp-desktop-hd": "1800px", "bp-desktop": "1200px", "bp-tablets-lg": "992px", "bp-tablets": "768px", "bp-phones-lg": "576px", "bp-phones": "480px", + + "bp-nextDesktopsQhd": "2560px", + "bp-nextDesktopsHd": "1801px", + "bp-nextDesktops": "1201px", + "bp-nextTablets": "769px", + + + "text-color": "#464d62", + "links-color": "#4b6fd7", "main": "#5500f2", "font": "#464d62", "footer": "#252830",