diff --git a/css/style.css b/css/style.css index 39f83c6..d8303ef 100644 --- a/css/style.css +++ b/css/style.css @@ -76,7 +76,7 @@ body{ background-color: #fff; } -/* ----------------- */ + .background { position: fixed; width: 100%; @@ -111,7 +111,7 @@ body{ object-fit: cover; filter: grayscale(1); } -/* --------------- */ + .text { overflow: hidden; position: absolute; @@ -153,7 +153,7 @@ body{ max-width: 48vw; } } -/* ---------- */ + .open-image { cursor: pointer; @@ -162,4 +162,4 @@ body{ transform: translate(-50%, 100%); opacity: 0; -} \ No newline at end of file +} diff --git a/index.html b/index.html index 7a6cebc..a31d4b1 100644 --- a/index.html +++ b/index.html @@ -11,14 +11,14 @@
-
+
Image
@@ -28,21 +28,21 @@
Image
-
+
Image
@@ -52,7 +52,7 @@
Image
-
+
diff --git a/js/script.js b/js/script.js index 76d492e..f2c0dd3 100644 --- a/js/script.js +++ b/js/script.js @@ -1,139 +1,108 @@ "use strict" -document.addEventListener("DOMContentLoaded", function() { - // Ваш код Swiper та інші дії - let pageSlider = new Swiper('.slider', { - speed: 1000, - scrollbar:{ - el: ".slider__scrolbar", - draggable: true +let pageSlider = new Swiper('.slider', { + speed: 1000, + scrollbar:{ + el: ".slider__scrollbar", + draggable: true + }, + breakpoints: { + "320": { + slidesPerView:1, + centeredSlides: false }, - breakpoints: { - "320": { - slidesPerView:1, - centeredSlides: false - }, - "922": { - slidesPerView:2, - centeredSlides: true - } + "922": { + slidesPerView:2, + centeredSlides: true } - }); - - const page = document.querySelector('.page'); - const images = document.querySelectorAll('.slide__picture'); - - if (images.length) { - let backgroundSlides = ``; - let textSlides = ``; - - images.forEach(image => { - backgroundSlides += ` -
-
- ${image.alt} -
-
- `; - textSlides +=` -
- ${image.dataset.title ? image.dataset.title : ''} -
- `; - }); - - const background = ` -
-
- ${backgroundSlides} + } +}); + +const page = document.querySelector('.page'); +const images = document.querySelectorAll('.slide-picture'); + +if (images.length) { + let backgroundSlides = ``; + let textSlides = ``; + + images.forEach(image => { + backgroundSlides += ` +
+
+ ${image.alt}
`; - const text = ` -
-
- ${textSlides} -
+ textSlides +=` +
+ ${image.dataset.title ? image.dataset.title : ''}
`; - - page.insertAdjacentHTML("afterbegin", background); - page.insertAdjacentHTML("beforeend", text); - - let pageBgSlider = new Swiper('.background', { - speed: 500 - }); - let pageTextSlider = new Swiper('.text', { - effect: "fade", - fadeEffect: { - crossFade: true - }, - speed: 1000 - }); - - //Controll - pageSlider.controller.control = pageBgSlider; - pageBgSlider.controller.control = pageTextSlider; - } - - const speed = 800; - document.addEventListener("click", function (e) { - const targetElement = e.target; - const textBlock = document.querySelector('.text'); - textBlock.style.transitionDuration = `${speed}ms`; - - //Open image - if (targetElement.closest('.slide')) { - const slide = targetElement.closest('.slide'); - const slideImage = document.querySelector('img'); - const activeImage = document.querySelector('.slide__picture.active'); - - if (slide.classList.contains('swiper-slider-active')) { - slideImage.classList.add('active'); - textBlock.classList.add('active'); - imageOpen(slideImage); - } else { - activeImage ? activeImage.classList.remove('active') : null; - pageSlider.slideTo(getIndex(slide)) - } - e.preventDefault(); - } - - //Close image - if (targetElement.closest('.open-image')) { - const openImage = targetElement.closest('.open-image'); - const activeImage = document.querySelector('.slide__picture.active'); - const imagePos = getImagePos(activeImage); - - openImage.style.cssText = ` - position: fixed; - left: ${imagePos.left}px; - top: ${imagePos.top}px; - width: ${imagePos.width}px; - height: ${imagePos.height}px; - transition: all ${speed}ms; - `; - setTimeout(() => { - activeImage.classList.remove('active'); - activeImage.style.opacity = 1; - openImage.remove(); - }, speed); - - textBlock.classList.remove('active'); + }); + + const background = ` +
+
+ ${backgroundSlides} +
+
+ `; + const text = ` +
+
+ ${textSlides} +
+
+ `; + + page.insertAdjacentHTML("afterbegin", background); + page.insertAdjacentHTML("beforeend", text); + + let pageBgSlider = new Swiper('.background', { + speed: 500 + }); + let pageTextSlider = new Swiper('.text', { + effect: "fade", + fadeEffect: { + crossFade: true + }, + speed: 1000 + }); + + //Controll + pageSlider.controller.control = pageBgSlider; + pageBgSlider.controller.control = pageTextSlider; +} + +const speed = 800; +document.addEventListener("click", function (e) { + const targetElement = e.target; + const textBlock = document.querySelector('.text'); + textBlock.style.transitionDuration = `${speed}ms`; + + //Open image + if (targetElement.closest('.slide')) { + const slide = targetElement.closest('.slide'); + const slideImage = slide.querySelector('img'); + const activeImage = document.querySelector('.slide-picture.active'); + + if (slide.classList.contains('swiper-slide-active')) { + slideImage.classList.add('active'); + textBlock.classList.add('active'); + imageOpen(slideImage); + } else { + activeImage ? activeImage.classList.remove('active') : null; + pageSlider.slideTo(getIndex(slide)) } - }) - - function getIndex(el) { - return Array.from(el.parentNode.children).indexOf(el); + e.preventDefault(); } - function imageOpen(image) { - const imagePos = getImagePos(image); - - const openImage = image.cloneNode(); - const openImageBlock = document.createElement('div'); - openImageBlock.classList.add('open-image'); - openImageBlock.append(openImage); - - openImageBlock.style.cssText = ` + + //Close image + if (targetElement.closest('.open-image')) { + const openImage = targetElement.closest('.open-image'); + const activeImage = document.querySelector('.slide-picture.active'); + const imagePos = getImagePos(activeImage); + + openImage.style.cssText = ` position: fixed; left: ${imagePos.left}px; top: ${imagePos.top}px; @@ -141,24 +110,52 @@ document.addEventListener("DOMContentLoaded", function() { height: ${imagePos.height}px; transition: all ${speed}ms; `; - - document.body.append(openImageBlock); - setTimeout(() => { - image.style.opacity = 0; - openImageBlock.style.left = 0; - openImageBlock.style.top = 0; - openImageBlock.style.width = '100%'; - openImageBlock.style.height = '100%'; - }, 0); + activeImage.classList.remove('active'); + activeImage.style.opacity = 1; + openImage.remove(); + }, speed); + + textBlock.classList.remove('active'); } - - function getImagePos(image) { - return { - left: image.getBoundingClientRect().left, - top: image.getBoundingClientRect().top, - width: image.offsetWidth, - height: image.offsetHeight - } +}) + +function getIndex(el) { + return Array.from(el.parentNode.children).indexOf(el); +} +function imageOpen(image) { + const imagePos = getImagePos(image); + + const openImage = image.cloneNode(); + const openImageBlock = document.createElement('div'); + openImageBlock.classList.add('open-image'); + openImageBlock.append(openImage); + + openImageBlock.style.cssText = ` + position: fixed; + left: ${imagePos.left}px; + top: ${imagePos.top}px; + width: ${imagePos.width}px; + height: ${imagePos.height}px; + transition: all ${speed}ms; + `; + + document.body.append(openImageBlock); + + setTimeout(() => { + image.style.opacity = 0; + openImageBlock.style.left = 0; + openImageBlock.style.top = 0; + openImageBlock.style.width = '100%'; + openImageBlock.style.height = '100%'; + }, 0); +} + +function getImagePos(image) { + return { + left: image.getBoundingClientRect().left, + top: image.getBoundingClientRect().top, + width: image.offsetWidth, + height: image.offsetHeight } - }); +};