Me: Hm look at this
Friend: Wow so frustrating
Me: I guess that's the title
Created
January 13, 2021 23:39
-
-
Save yinkakun/09806b95b9626961609ed1983dbce3cb to your computer and use it in GitHub Desktop.
Animated Photo Gallery (Also Frustrating)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .gallery | |
| .gallery__strip__wrapper | |
| .gallery__strip.one | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-kyoto.jpeg") | |
| .photo__name Kyoto | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-austria.jpeg") | |
| .photo__name Halstatt | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-peru.jpeg") | |
| .photo__name Peru | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-rio.jpeg") | |
| .photo__name Rio | |
| .gallery__strip__wrapper | |
| .gallery__strip.two | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-italy.jpeg") | |
| .photo__name Italy | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-osaka.jpeg") | |
| .photo__name Osaka | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-bali.jpeg") | |
| .photo__name Bali | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-paris2.jpg") | |
| .photo__name Paris | |
| .gallery__strip__wrapper | |
| .gallery__strip.three | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-cusco.jpeg") | |
| .photo__name Cusco | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-rome.jpeg") | |
| .photo__name Rome | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-paris.jpeg") | |
| .photo__name Paris | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-bali2.jpeg") | |
| .photo__name Bali | |
| .gallery__strip__wrapper | |
| .gallery__strip.four | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-milan.jpeg") | |
| .photo__name Milan | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-budapest.jpg") | |
| .photo__name Budapest | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-vienna.jpg") | |
| .photo__name Vienna | |
| .photo | |
| .photo__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-mexico.jpg") | |
| .photo__name Mexico | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background: #222; | |
| font-family: "Fira Sans", sans-serif; | |
| padding-right: 2rem; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .gallery { | |
| display: flex; | |
| flex-wrap: wrap; | |
| width: 100%; | |
| overflow: hidden; | |
| max-width: 1300px; | |
| margin: auto; | |
| &__strip { | |
| min-height: 100vh; | |
| &__wrapper { | |
| flex: 0 0 100%; | |
| justify-content: flex-end; | |
| background: #222; | |
| border-right: 2px solid #333; | |
| position: relative; | |
| } | |
| } | |
| } | |
| @media (min-width: 500px) { | |
| .gallery__strip__wrapper { | |
| flex: 0 0 50%; | |
| } | |
| } | |
| @media (min-width: 950px) { | |
| .gallery { | |
| height: 100vh; | |
| &__strip { | |
| &.one { | |
| animation: 60s move-it ease alternate infinite 5s; | |
| transform: translateY(2%); | |
| } | |
| &.three { | |
| animation: 70s move-it ease alternate infinite 6s; | |
| transform: translateY(2%); | |
| } | |
| &.two { | |
| animation: 58s move-it-2 ease alternate infinite 5s; | |
| transform: translateY(-50%); | |
| } | |
| &.four { | |
| animation: 65s move-it-2 ease alternate infinite 5.5s; | |
| transform: translateY(-50%); | |
| } | |
| &:hover { | |
| animation-play-state: paused; | |
| } | |
| &__wrapper { | |
| flex: 0 0 25%; | |
| } | |
| } | |
| } | |
| } | |
| .photo { | |
| position: relative; | |
| text-align: right; | |
| padding-bottom: 3rem; | |
| &__image img { | |
| width: 90%; | |
| transform: translateX(30%); | |
| transition: 1s cubic-bezier(0.19, 1, 0.22, 1) 0.2s; | |
| } | |
| &__name { | |
| text-transform: uppercase; | |
| font-size: 40px; | |
| letter-spacing: 2px; | |
| color: transparent; | |
| -webkit-text-stroke-width: 1px; | |
| -webkit-text-stroke-color: white; | |
| margin-top: -25px; | |
| transition: 0.4s ease-in-out 0.4s; | |
| position: relative; | |
| width: 100%; | |
| } | |
| &:hover { | |
| .photo__image img { | |
| transform: translateX(0%); | |
| } | |
| .photo__name { | |
| color: #fff; | |
| } | |
| } | |
| } | |
| @keyframes move-it { | |
| 0%, | |
| 90%, | |
| 100% { | |
| transform: translateY(2%); | |
| } | |
| 45% { | |
| transform: translateY(-50%); | |
| } | |
| } | |
| @keyframes move-it-2 { | |
| 0%, | |
| 90%, | |
| 100% { | |
| transform: translateY(-50%); | |
| } | |
| 45% { | |
| transform: translateY(5%); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment