Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/caner-yesiltas/lord-of-the-rings-gallery

🧙‍♂️ Interactive Lord of the Rings image gallery with Flickr API integration and animated Ring cursor 💍
https://github.com/caner-yesiltas/lord-of-the-rings-gallery

css-animations error-handling flickr-api loading-screen vanilla-js

Last synced: 16 days ago
JSON representation

🧙‍♂️ Interactive Lord of the Rings image gallery with Flickr API integration and animated Ring cursor 💍

Host: GitHub
URL: https://github.com/caner-yesiltas/lord-of-the-rings-gallery
Owner: Caner-Yesiltas
Created: 2024-08-11T01:24:23.000Z (5 months ago)
Default Branch: main
Last Pushed: 2024-11-20T03:52:44.000Z (about 1 month ago)
Last Synced: 2024-12-10T10:10:16.477Z (16 days ago)
Topics: css-animations, error-handling, flickr-api, loading-screen, vanilla-js
Language: JavaScript
Homepage: https://lord-of-the-rings-gallery.vercel.app
Size: 19.4 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Lord of the Rings Image Gallery 💍

👉 Live Demo 👈

## 📌 About The Project

This project is an interactive web application that dynamically fetches and displays Lord of the Rings themed images using the Flickr API. It offers an enhanced user experience with custom animations and loading effects.

### ✨ Key Features

- 🖼️ Dynamic image gallery using Flickr API
- 💫 Custom ring animation
- ⏳ Loading screen and effects
- 🔄 Real-time date updates
- 🎲 Random page display
- 🖱️ One-click image refresh
- 🎨 Custom CSS animations

### 🛠️ Built With

- HTML5
- CSS3 (Pure CSS Animations)
- JavaScript (ES6+)
- Flickr API

## 💻 Technical Details

### API Integration
```javascript
const flickrApiKey = "6f7487affd74f71e1148975206f1d0a0";
const flickrApiUrl = `https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${flickrApiKey}&tags=lord+of+the+rings&per_page=5&page=${randomPage}&format=json&nojsoncallback=1`;
```

### Custom Animations
- 🎭 Ring Animation: 8-second infinite loop
- 🌟 Custom loading effects
- 💫 Smooth transition animations

### Core Components

#### Loading System
- Initial loading screen
- Loading indicator during API calls
- Custom error.gif display for error states

#### Image Gallery
- Pure CSS layout
- Dynamic image loading
- CSS-based image sizing

#### Time Information
- Real-time date/time display
- Time stamp updates with each image refresh

### CSS Features
```css
/* Ring Animation */
@keyframes moveRing {
0% {
transform: translate(-50%, -50%) translateX(-50vw) translateY(-50vh);
}
/* ... animation keyframes ... */
}

/* Background Styling */
body {
background-image: url('./img/thumb-1920-1275631.jpg');
background-repeat: no-repeat;
overflow: hidden;
}
```

## 🎯 Installation

1. Clone the project
2. Open `index.html` in a browser
3. Replace the API key with your own Flickr API key

## 💡 Usage

- Images will load automatically after page load
- Click the "Refresh" button to load new images
- Watch the ring animation move across the screen

## ⚠️ Error Handling

- User notification for failed API calls
- Error.gif display in error states
- Detailed error information in console

## 🔄 Update History

v1.0.0
- Initial release
- Core features implemented
- Custom animations integrated

## 📫 Contact

Caner Yesiltas - [email protected]

Project Link: [https://lord-of-the-rings-gallery.vercel.app/](https://lord-of-the-rings-gallery.vercel.app/)

---

Made with ❤️ by Caner Yesiltas

🧙‍♂️ One Ring to Rule Them All... 🧙‍♂️