diff --git a/Infinite Slider of Images/assets/img1.jpg b/Infinite Slider of Images/assets/img1.jpg new file mode 100644 index 00000000..97867689 Binary files /dev/null and b/Infinite Slider of Images/assets/img1.jpg differ diff --git a/Infinite Slider of Images/assets/img2.jpg b/Infinite Slider of Images/assets/img2.jpg new file mode 100644 index 00000000..8f995b44 Binary files /dev/null and b/Infinite Slider of Images/assets/img2.jpg differ diff --git a/Infinite Slider of Images/assets/img3.jpg b/Infinite Slider of Images/assets/img3.jpg new file mode 100644 index 00000000..42eec237 Binary files /dev/null and b/Infinite Slider of Images/assets/img3.jpg differ diff --git a/Infinite Slider of Images/assets/img4.jpg b/Infinite Slider of Images/assets/img4.jpg new file mode 100644 index 00000000..a838adcf Binary files /dev/null and b/Infinite Slider of Images/assets/img4.jpg differ diff --git a/Infinite Slider of Images/assets/img5.jpg b/Infinite Slider of Images/assets/img5.jpg new file mode 100644 index 00000000..4892eb01 Binary files /dev/null and b/Infinite Slider of Images/assets/img5.jpg differ diff --git a/Infinite Slider of Images/assets/img6.jpg b/Infinite Slider of Images/assets/img6.jpg new file mode 100644 index 00000000..790fbee4 Binary files /dev/null and b/Infinite Slider of Images/assets/img6.jpg differ diff --git a/Infinite Slider of Images/assets/img7.jpg b/Infinite Slider of Images/assets/img7.jpg new file mode 100644 index 00000000..8e142f1b Binary files /dev/null and b/Infinite Slider of Images/assets/img7.jpg differ diff --git a/Infinite Slider of Images/assets/img8.jpg b/Infinite Slider of Images/assets/img8.jpg new file mode 100644 index 00000000..02780632 Binary files /dev/null and b/Infinite Slider of Images/assets/img8.jpg differ diff --git a/Infinite Slider of Images/assets/img9.jpg b/Infinite Slider of Images/assets/img9.jpg new file mode 100644 index 00000000..2786413f Binary files /dev/null and b/Infinite Slider of Images/assets/img9.jpg differ diff --git a/Infinite Slider of Images/index.html b/Infinite Slider of Images/index.html new file mode 100644 index 00000000..14a399f6 --- /dev/null +++ b/Infinite Slider of Images/index.html @@ -0,0 +1,31 @@ + + + + + + Infinite Slider of Images + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/Infinite Slider of Images/style.css b/Infinite Slider of Images/style.css new file mode 100644 index 00000000..465f6da5 --- /dev/null +++ b/Infinite Slider of Images/style.css @@ -0,0 +1,66 @@ + +body{ + margin: 0; + background-color: #e5e5e5; +} + +.content{ + padding: 5rem; + margin: 0.5rem 0px; + text-align: center; + width: min(1200px, 90vw); +} + +.slider{ + width: 100%; + height: var(--height); + overflow: hidden; + mask-image: linear-gradient( + to right, + transparent, + #000 10% 90%, + transparent + ); +} +.slider .list{ + display: flex; + width: 100%; + min-width: calc(var(--width) * var(--quantity)); + position: relative; +} +.slider .list .item{ + width: var(--width); + height: var(--height); + position: absolute; + left: 100%; + animation: autoRun 10s linear infinite; + transition: filter 0.5s; + animation-delay: calc( (10s / var(--quantity)) * (var(--position) - 1) - 10s)!important; +} +.slider .list .item img{ + width: 100%; +} +@keyframes autoRun{ + from{ + left: 100%; + }to{ + left: calc(var(--width) * -1); + } +} +.slider:hover .item{ + animation-play-state: paused!important; + filter: grayscale(1); +} +.slider .item:hover{ + filter: grayscale(0); +} +.slider[reverse="true"] .item{ + animation: reversePlay 10s linear infinite; +} +@keyframes reversePlay{ + from{ + left: calc(var(--width) * -1); + }to{ + left: 100%; + } +} \ No newline at end of file diff --git a/README.md b/README.md index 34f19f48..a458a8c0 100644 --- a/README.md +++ b/README.md @@ -372,6 +372,8 @@ Your browser does not support the video tag. [](https://codepen.io/olgamozejko/pen/yLjwyye) []() []() +[]() + **[⬆ back to top](#quick-links)** diff --git a/images/infinite-slider.png b/images/infinite-slider.png new file mode 100644 index 00000000..344b4c28 Binary files /dev/null and b/images/infinite-slider.png differ