diff --git a/short/leaflate/index.html b/short/leaflate/index.html deleted file mode 100644 index 555bfc0..0000000 --- a/short/leaflate/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - - - - - Document - - - - -
- - - - \ No newline at end of file diff --git a/web components/Sass-sidebar/README.md b/web components/Sass-sidebar/README.md deleted file mode 100644 index f8e91a2..0000000 --- a/web components/Sass-sidebar/README.md +++ /dev/null @@ -1,7 +0,0 @@ -## Responsive Advanced Sidebar Design Using HTML CSS & Javascript - -### [⏯ Watch On Youtube](https://youtu.be/WM3PlCnqfrU) - -![thumbnail](thumbnail.jpg) - ---- diff --git a/web components/Sass-sidebar/images/arrow.svg b/web components/Sass-sidebar/images/arrow.svg deleted file mode 100644 index 71d226d..0000000 --- a/web components/Sass-sidebar/images/arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/Sass-sidebar/images/bg.png b/web components/Sass-sidebar/images/bg.png deleted file mode 100644 index fb05674..0000000 Binary files a/web components/Sass-sidebar/images/bg.png and /dev/null differ diff --git a/web components/Sass-sidebar/images/icon-1.svg b/web components/Sass-sidebar/images/icon-1.svg deleted file mode 100644 index e5cc091..0000000 --- a/web components/Sass-sidebar/images/icon-1.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/Sass-sidebar/images/icon-2.svg b/web components/Sass-sidebar/images/icon-2.svg deleted file mode 100644 index d7a0bf4..0000000 --- a/web components/Sass-sidebar/images/icon-2.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web components/Sass-sidebar/images/icon-3.svg b/web components/Sass-sidebar/images/icon-3.svg deleted file mode 100644 index 1069c43..0000000 --- a/web components/Sass-sidebar/images/icon-3.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/web components/Sass-sidebar/images/icon-4.svg b/web components/Sass-sidebar/images/icon-4.svg deleted file mode 100644 index f6771cb..0000000 --- a/web components/Sass-sidebar/images/icon-4.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/web components/Sass-sidebar/images/icon-5.svg b/web components/Sass-sidebar/images/icon-5.svg deleted file mode 100644 index 65dee00..0000000 --- a/web components/Sass-sidebar/images/icon-5.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web components/Sass-sidebar/images/icon-6.svg b/web components/Sass-sidebar/images/icon-6.svg deleted file mode 100644 index b6df6c8..0000000 --- a/web components/Sass-sidebar/images/icon-6.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/web components/Sass-sidebar/images/icon-7.svg b/web components/Sass-sidebar/images/icon-7.svg deleted file mode 100644 index 7743d07..0000000 --- a/web components/Sass-sidebar/images/icon-7.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web components/Sass-sidebar/images/icon-8.svg b/web components/Sass-sidebar/images/icon-8.svg deleted file mode 100644 index dbe53bb..0000000 --- a/web components/Sass-sidebar/images/icon-8.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web components/Sass-sidebar/images/icon-calendar.svg b/web components/Sass-sidebar/images/icon-calendar.svg deleted file mode 100644 index 8d1ac2e..0000000 --- a/web components/Sass-sidebar/images/icon-calendar.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web components/Sass-sidebar/images/icon-cloud.svg b/web components/Sass-sidebar/images/icon-cloud.svg deleted file mode 100644 index 9af1dc8..0000000 --- a/web components/Sass-sidebar/images/icon-cloud.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web components/Sass-sidebar/images/icon-code-working.svg b/web components/Sass-sidebar/images/icon-code-working.svg deleted file mode 100644 index 1f7df9c..0000000 --- a/web components/Sass-sidebar/images/icon-code-working.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web components/Sass-sidebar/images/icon-design.svg b/web components/Sass-sidebar/images/icon-design.svg deleted file mode 100644 index 375faf1..0000000 --- a/web components/Sass-sidebar/images/icon-design.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web components/Sass-sidebar/images/icon-toggle.svg b/web components/Sass-sidebar/images/icon-toggle.svg deleted file mode 100644 index c6a1cda..0000000 --- a/web components/Sass-sidebar/images/icon-toggle.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web components/Sass-sidebar/images/profile.svg b/web components/Sass-sidebar/images/profile.svg deleted file mode 100644 index e962572..0000000 --- a/web components/Sass-sidebar/images/profile.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web components/Sass-sidebar/images/settings.svg b/web components/Sass-sidebar/images/settings.svg deleted file mode 100644 index e9c53d3..0000000 --- a/web components/Sass-sidebar/images/settings.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/web components/Sass-sidebar/index.html b/web components/Sass-sidebar/index.html deleted file mode 100644 index 741e7ea..0000000 --- a/web components/Sass-sidebar/index.html +++ /dev/null @@ -1,143 +0,0 @@ - - - - - - Side Bar - - - - -
-
-
- Toggle -
-
-
-
  • - - icon - Home - -
    • -
  • - - icon - Campaigns - -
    • -
  • - - icon - Flows - -
    • -
  • - - icon - Forms - -
    • -
  • - - icon - Audience -
    - Arrow -
    -     -
    - - Icon - Audience 1 - - - Icon - Audience 2 - - - Icon - Audience 3 - -
    -
    • -
  • - - icon - Content -
    - Arrow -
    -     -
    - - Icon - Design - - - Icon - Development - - - Icon - Cloud - -
    -
    • -
  • - - icon - Analytics -
    - Arrow -
    -     -
    - - Icon - Day - - - Icon - Month - - - Icon - Yeary - -
    -
    • - -
  • - - icon - Chats - -
    • -
    -
    -
  • - - icon - Settings - -
    • -
    -
    - Profile -
    -

    Ketan’s Studio

    - koriigami@gmail.com -
    -
    -
    -
    -
    - - - diff --git a/web components/Sass-sidebar/script.js b/web components/Sass-sidebar/script.js deleted file mode 100644 index e448f4a..0000000 --- a/web components/Sass-sidebar/script.js +++ /dev/null @@ -1,74 +0,0 @@ -let sidebar = document.querySelector('.sidebar'); -let lists = document.querySelectorAll('.list'); -let dropdown_lists = document.querySelectorAll('.dropdown-list'); -let toggle_icon = document.querySelector('.sidebar-toggle-icon'); -const body = document.body; - -function enableDarkMode() { - body.classList.add('dark'); -} - -function enableLightMode() { - body.classList.remove('dark'); -} - -function toggleColorMode() { - const prefersDarkMode = window.matchMedia( - '(prefers-color-scheme: dark)' - ).matches; - - if (prefersDarkMode) { - enableDarkMode(); - } else { - enableLightMode(); - } -} - -toggleColorMode(); // Initial call to set the color mode based on system theme - -// Listen for changes in system theme preference -window - .matchMedia('(prefers-color-scheme: dark)') - .addEventListener('change', toggleColorMode); - -toggle_icon.addEventListener('click', () => { - toggle_icon.classList.toggle('active'); - sidebar.classList.toggle('active'); - document - .querySelectorAll('.dropdown') - .forEach((dropdown) => dropdown.classList.remove('active')); - dropdown_lists.forEach((list) => list.classList.remove('active')); -}); - -lists.forEach((list) => { - list.addEventListener('click', (e) => { - e.preventDefault(); - lists.forEach((list) => list.classList.remove('active')); - list.classList.add('active'); - document - .querySelectorAll('.dropdown') - .forEach((dropdown) => dropdown.classList.remove('active')); - dropdown_lists.forEach((list) => list.classList.remove('active')); - }); -}); - -dropdown_lists.forEach((dropdown_list) => { - dropdown_list.addEventListener('click', () => { - toggle_icon.classList.toggle('active'); - sidebar.classList.remove('active'); - lists.forEach((list) => list.classList.remove('active')); - - let dropdown = dropdown_list.querySelector('.dropdown'); - let links = dropdown_list.querySelectorAll('.dropdown .dropdown-link'); - dropdown_list.classList.toggle('active'); - dropdown.classList.toggle('active'); - - links.forEach((link) => { - link.addEventListener('click', (e) => { - e.stopPropagation(); - links.forEach((link) => link.classList.remove('active')); - link.classList.add('active'); - }); - }); - }); -}); diff --git a/web components/Sass-sidebar/starter.md b/web components/Sass-sidebar/starter.md deleted file mode 100644 index 6398ee0..0000000 --- a/web components/Sass-sidebar/starter.md +++ /dev/null @@ -1,141 +0,0 @@ -## Content - -> Home
    -> Campaigns
    -> Flows
    -> Forms
    - -> Audience - -- Audience 1 -- Audience 2 -- Audience 3 - -> Content - -- Design -- Development -- Cloud - -> Analytics - -- Day -- Month -- Yeary - -> Chats - -> Settings - -- Ketan’s Studio -- koriigami@gmail.com - -## HTML - -```html - - - - - - Side Bar - - - - - - - -``` - -## CSS - -```css -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap'); -*, -*::after, -*::before { - margin: 0; - padding: 0; - box-sizing: border-box; - text-decoration: none; - list-style-type: none; - outline: none; -} - -html { - font-size: 62.5%; - scroll-behavior: smooth; -} - -::-webkit-scrollbar { - width: 0; -} - -body { - font-size: 1.6rem; - font-family: 'Inter', sans-serif; - background: url('images/bg.png') no-repeat center/cover; - height: 100vh; - --bg: #fff; - --text: #475569; - --active-link: #edeef3; - --divider: 0.1rem solid #d9d9da; - --profile-text-1: #000; - --profile-text-2: #8a8b8c; - --dropdown-bg: rgb(245, 245, 245); -} - -body.dark { - --bg: #1a2037; - --text: #ededed; - --active-link: linear-gradient( - 0deg, - rgba(255, 255, 255, 0.6), - rgba(255, 255, 255, 0.6) - ), #1a2037; - --divider: 0.1rem solid #d9d9da; - --profile-text-1: #e0e0e0; - --profile-text-2: #bfbfbf; - --dropdown-bg: rgb(31, 44, 76); -} - -.container { - max-width: 140rem; - margin: 0 auto; - padding: 0 3rem; -} -``` - -## Light & Dark Mode | Javascript - -```javascript -const body = document.body; - -function enableDarkMode() { - body.classList.add('dark'); -} - -function enableLightMode() { - body.classList.remove('dark'); -} - -function toggleColorMode() { - const prefersDarkMode = window.matchMedia( - '(prefers-color-scheme: dark)' - ).matches; - - if (prefersDarkMode) { - enableDarkMode(); - } else { - enableLightMode(); - } -} - -toggleColorMode(); // Initial call to set the color mode based on system theme - -// Listen for changes in system theme preference -window - .matchMedia('(prefers-color-scheme: dark)') - .addEventListener('change', toggleColorMode); -``` diff --git a/web components/Sass-sidebar/style.css b/web components/Sass-sidebar/style.css deleted file mode 100644 index 8d426f5..0000000 --- a/web components/Sass-sidebar/style.css +++ /dev/null @@ -1,234 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap'); -*, -*::after, -*::before { - margin: 0; - padding: 0; - box-sizing: border-box; - text-decoration: none; - list-style-type: none; - outline: none; -} - -html { - font-size: 62.5%; - scroll-behavior: smooth; -} - -::-webkit-scrollbar { - width: 0; -} - -body { - font-size: 1.6rem; - font-family: 'Inter', sans-serif; - background: url('images/bg.png') no-repeat center/cover; - height: 100vh; - --bg: #fff; - --text: #475569; - --active-link: #edeef3; - --divider: 0.1rem solid #d9d9da; - --profile-text-1: #000; - --profile-text-2: #8a8b8c; - --dropdown-bg: rgb(245, 245, 245); -} - -body.dark { - --bg: #1a2037; - --text: #ededed; - --active-link: linear-gradient( - 0deg, - rgba(255, 255, 255, 0.6), - rgba(255, 255, 255, 0.6) - ), - #1a2037; - --divider: 0.1rem solid #d9d9da; - --profile-text-1: #e0e0e0; - --profile-text-2: #bfbfbf; - --dropdown-bg: rgb(31, 44, 76); -} - -.container { - max-width: 140rem; - margin: 0 auto; - padding: 0 3rem; -} - -body.dark .icon-img, -body.dark .dropdown-arrow img, -body.dark .dropdown-link img, -body.dark .sidebar-toggle-icon img { - filter: brightness(0) invert(1); -} - -.sidebar { - width: 30rem; - max-height: calc(100vh - 5rem); - background: var(--bg); - padding: 1.4rem; - margin: 2.5rem 0; - border-radius: 1.5rem; - position: fixed; - left: 2rem; - display: flex; - gap: 1rem; - flex-direction: column; - justify-content: space-between; - overflow-x: hidden; - overflow-y: scroll; - transition: width 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -} - -.sidebar.active { - width: 7rem; -} - -.sidebar.active .profile-img { - width: 3rem; - height: 3rem; -} - -.sidebar.active .list { - width: 4.5rem; - height: 4.5rem; - padding: 1rem 1.1rem; -} - -.sidebar-toggle { - display: flex; - justify-content: center; -} - -.sidebar-toggle .sidebar-toggle-icon { - width: 4.5rem; - height: 4.5rem; - background: var(--dropdown-bg); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; -} - -.sidebar-toggle-icon img { - width: 3rem; - transform: rotate(180deg); -} - -.sidebar-toggle-icon.active img { - transform: rotate(0deg); -} - -.list, -.dropdown-list { - padding: 1rem 1.3rem; - margin-bottom: 1rem; - border-radius: 0.8rem; - background-blend-mode: soft-light, normal; - transition: all 0.5s ease; -} - -.icon-img { - width: 2.5rem; - height: 2.5rem; -} - -.list.active { - background: var(--active-link); -} - -.link, -.dropdown-link { - display: flex; - gap: 2rem; - align-items: center; - color: var(--text); -} - -.link span, -.dropdown-link span { - font-size: 1.8rem; - font-weight: 500; -} - -.dropdown-arrow { - width: 100%; - text-align: right; -} - -.dropdown-link:not(:last-child) { - margin-bottom: 0.5rem; -} - -.dropdown-link { - padding: 1rem 1.3rem; - border-radius: 0.8rem; - transition: all 0.5s ease; -} - -.dropdown-list.active { - margin-bottom: 0; - background: transparent; -} - -.dropdown-list .dropdown-arrow img { - width: 1.3rem; - transition: transform 0.5s ease; -} - -.dropdown-list.active .dropdown-arrow img { - transform: rotate(90deg); -} - -.dropdown { - height: 0; - background: var(--dropdown-bg); - border-radius: 1rem; - clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); - transition: all 0.5s cubic-bezier(0.51, -0.02, 0.4, 0.91); -} - -.dropdown.active { - margin-top: 1rem; - height: 100%; - clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); - transition: all 0.5s cubic-bezier(0.51, -0.02, 0.4, 0.91); -} - -.dropdown-link.active { - background-blend-mode: soft-light, normal; - background: var(--active-link); -} - -.profile { - padding: 0 0.8rem; -} - -.profile-content { - padding: 1rem 0 0 0; - margin-top: 1rem; - border-top: var(--divider); - display: flex; - align-items: center; - gap: 2rem; -} - -.profile-img { - width: 4rem; - height: 4rem; -} - -.profile-name { - color: var(--profile-text-1); - padding-bottom: 0.3rem; -} - -.profile-email { - color: var(--profile-text-2); -} - -@media (max-width: 375px) { - .sidebar { - width: 28rem; - } -} diff --git a/web components/Sass-sidebar/thumbnail.jpg b/web components/Sass-sidebar/thumbnail.jpg deleted file mode 100644 index e324cf6..0000000 Binary files a/web components/Sass-sidebar/thumbnail.jpg and /dev/null differ diff --git a/web components/sequence_animation_gsap/Intro.mp4 b/web components/sequence_animation_gsap/Intro.mp4 deleted file mode 100644 index 5fa3438..0000000 Binary files a/web components/sequence_animation_gsap/Intro.mp4 and /dev/null differ diff --git a/web components/sequence_animation_gsap/README.md b/web components/sequence_animation_gsap/README.md deleted file mode 100644 index 59d0980..0000000 --- a/web components/sequence_animation_gsap/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Video Intro Sequence Image Animation Using HTML & CSS and GSAP - -[🎬 Watch on Youtube](https://youtu.be/qbl-ExUArqs) - -![thumbnail](thumbnail.png) diff --git a/web components/sequence_animation_gsap/starter.md b/web components/sequence_animation_gsap/starter.md deleted file mode 100644 index c53dcc3..0000000 --- a/web components/sequence_animation_gsap/starter.md +++ /dev/null @@ -1,86 +0,0 @@ -## GSAP - -```html - - - - - -``` - -```javascript -function sequence_animation() { - const canvas = document.querySelector('#home>canvas'); - const context = canvas.getContext('2d'); - - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - - window.addEventListener('resize', function () { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - render(); - }); - - function files(index) { - var data = `images/ezgif-frame-001.jpg - images/ezgif-frame-002.jpg - `; - return data.split('\n')[index]; - } - - const frameCount = 2; - - const images = []; - const imageSeq = { - frame: 0, - }; - - for (let i = 0; i < frameCount; i++) { - const img = new Image(); - img.src = files(i); - images.push(img); - } - - gsap.to(imageSeq, { - frame: frameCount - 1, - snap: 'frame', - ease: 'none', - scrollTrigger: { - scrub: 1.8, - pin: true, - trigger: '#home', - }, - onUpdate: render, - }); - - images[0].onload = render; - - function render() { - scaleImage(images[imageSeq.frame], context); - } - - function scaleImage(img, ctx) { - var canvas = ctx.canvas; - var hRatio = canvas.width / img.width; - var vRatio = canvas.height / img.height; - var ratio = Math.max(hRatio, vRatio); - var centerShift_x = (canvas.width - img.width * ratio) / 2; - var centerShift_y = (canvas.height - img.height * ratio) / 2; - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.drawImage( - img, - 0, - 0, - img.width, - img.height, - centerShift_x, - centerShift_y, - img.width * ratio, - img.height * ratio - ); - } -} - -sequence_animation(); -``` diff --git a/web components/sequence_animation_gsap/thumbnail.png b/web components/sequence_animation_gsap/thumbnail.png deleted file mode 100644 index a6239ea..0000000 Binary files a/web components/sequence_animation_gsap/thumbnail.png and /dev/null differ diff --git a/web components/sequence_animation_gsap/video-to-image.txt b/web components/sequence_animation_gsap/video-to-image.txt deleted file mode 100644 index 0f28db1..0000000 --- a/web components/sequence_animation_gsap/video-to-image.txt +++ /dev/null @@ -1 +0,0 @@ -https://ezgif.com/video-to-png \ No newline at end of file diff --git a/web components/swiper-app-drawer/README.md b/web components/swiper-app-drawer/README.md deleted file mode 100644 index 22ff312..0000000 --- a/web components/swiper-app-drawer/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# How to Implement a Mobile App Drawer using Swiper.js - -[🎬 Watch](https://youtu.be/QdkhtUBKWB0) - -![thumbnail](thumbnail.png) diff --git a/web components/swiper-app-drawer/index.html b/web components/swiper-app-drawer/index.html deleted file mode 100644 index 14fad00..0000000 --- a/web components/swiper-app-drawer/index.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - Swiper demo - - - - - - - - - -
    -
    -
    - -
    -
    -
    -
    -
    -

    Content slide

    -
    -
    -
    - - - - - - - diff --git a/web components/swiper-app-drawer/script.js b/web components/swiper-app-drawer/script.js deleted file mode 100644 index e6aa441..0000000 --- a/web components/swiper-app-drawer/script.js +++ /dev/null @@ -1,28 +0,0 @@ -var menuButton = document.querySelector(".menu-button"); -var openMenu = function () { - swiper.slidePrev(); -}; -var swiper = new Swiper(".swiper", { - slidesPerView: "auto", - initialSlide: 1, - resistanceRatio: 0, - slideToClickedSlide: true, - on: { - slideChangeTransitionStart: function () { - var slider = this; - if (slider.activeIndex === 0) { - menuButton.classList.add("cross"); - // required because of slideToClickedSlide - menuButton.removeEventListener("click", openMenu, true); - } else { - menuButton.classList.remove("cross"); - } - }, - slideChangeTransitionEnd: function () { - var slider = this; - if (slider.activeIndex === 1) { - menuButton.addEventListener("click", openMenu, true); - } - }, - }, -}); diff --git a/web components/swiper-app-drawer/style.css b/web components/swiper-app-drawer/style.css deleted file mode 100644 index 5589679..0000000 --- a/web components/swiper-app-drawer/style.css +++ /dev/null @@ -1,125 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap"); -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; - text-decoration: none; - list-style-type: none; -} -html { - font-size: 62.5%; -} -body { - font-size: 1.6rem; -} -html, -body { - position: relative; - height: 100%; -} - -body { - font-family: "Poppins", sans-serif; - background: rgb(22, 0, 46); - color: #ffffff; -} - -.swiper { - width: 100%; - height: 100%; -} - -.swiper-slide { - text-align: center; - font-size: 1.8rem; - display: flex; - justify-content: center; - align-items: center; -} - -.menu { - min-width: 10rem; - width: 70%; - max-width: 32rem; - background-color: #201b45; - color: #fff; -} - -.content { - width: 100%; -} -.nav_list { - margin: 3rem 0; -} -.nav_link { - color: #fff; - font-size: 2.3rem; - font-weight: 500; - text-transform: uppercase; - position: relative; -} -.nav_link::after { - position: absolute; - content: ""; - width: 0; - height: 2rem; - left: 50%; - top: 0; - transform: translateX(-50%); - border-radius: 1rem; - transition: all 0.5s ease-in-out; - z-index: -1; -} -.nav_link:hover::after { - background: rgb(122 99 237); - width: calc(100% + 2rem); -} -.menu-button { - position: absolute; - top: 0; - left: 0; - width: 5rem; - height: 5rem; - background: #201b45; - border-radius: 0 0 1rem 0; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; -} -.bar { - position: relative; - width: 3.5rem; - height: 0.3rem; - background: #fff; - border-radius: 1rem; - transition: all 0.5s ease-in-out; -} -.bar::before, -.bar::after { - position: absolute; - content: ""; - width: 3.5rem; - height: 0.3rem; - background: #fff; - border-radius: 1rem; - transition: all 0.5s ease-in-out; -} -.bar::before { - transform: translateX(-1.7rem) translateY(-1rem); -} -.bar::after { - transform: translateX(-1.7rem) translateY(1rem); -} -.cross .bar { - background: transparent; - margin-right: 1rem; -} -.cross .bar::before { - transform: translateX(-1.3rem) rotate(45deg); -} -.cross .bar::after { - transform: translateX(-1.3rem) rotate(-45deg); -} diff --git a/web components/swiper-app-drawer/thumbnail.png b/web components/swiper-app-drawer/thumbnail.png deleted file mode 100644 index 2fdb9ca..0000000 Binary files a/web components/swiper-app-drawer/thumbnail.png and /dev/null differ diff --git a/web components/thumbnail-slider/README.md b/web components/thumbnail-slider/README.md deleted file mode 100644 index 2cc90ef..0000000 --- a/web components/thumbnail-slider/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Responsive Product Thumbnail Slider Using | HTML | CSS & Swiper Js - -[🎬 Watch on Youtube](https://youtu.be/HZuyUKSdJOc) - -![thumbnail](thumbnail.png) diff --git a/web components/thumbnail-slider/images/favicon.png b/web components/thumbnail-slider/images/favicon.png deleted file mode 100644 index 33bf3ac..0000000 Binary files a/web components/thumbnail-slider/images/favicon.png and /dev/null differ diff --git a/web components/thumbnail-slider/images/image-1.webp b/web components/thumbnail-slider/images/image-1.webp deleted file mode 100644 index 2523f98..0000000 Binary files a/web components/thumbnail-slider/images/image-1.webp and /dev/null differ diff --git a/web components/thumbnail-slider/images/image-2.webp b/web components/thumbnail-slider/images/image-2.webp deleted file mode 100644 index 66e11c6..0000000 Binary files a/web components/thumbnail-slider/images/image-2.webp and /dev/null differ diff --git a/web components/thumbnail-slider/images/image-3.webp b/web components/thumbnail-slider/images/image-3.webp deleted file mode 100644 index 592d8cc..0000000 Binary files a/web components/thumbnail-slider/images/image-3.webp and /dev/null differ diff --git a/web components/thumbnail-slider/images/image-4.webp b/web components/thumbnail-slider/images/image-4.webp deleted file mode 100644 index a9aa952..0000000 Binary files a/web components/thumbnail-slider/images/image-4.webp and /dev/null differ diff --git a/web components/thumbnail-slider/images/image-5.webp b/web components/thumbnail-slider/images/image-5.webp deleted file mode 100644 index adda030..0000000 Binary files a/web components/thumbnail-slider/images/image-5.webp and /dev/null differ diff --git a/web components/thumbnail-slider/images/image-6.webp b/web components/thumbnail-slider/images/image-6.webp deleted file mode 100644 index a1a515b..0000000 Binary files a/web components/thumbnail-slider/images/image-6.webp and /dev/null differ diff --git a/web components/thumbnail-slider/index.html b/web components/thumbnail-slider/index.html deleted file mode 100644 index f25e9f7..0000000 --- a/web components/thumbnail-slider/index.html +++ /dev/null @@ -1,89 +0,0 @@ - - - - - - - - Nike - - - - - - - - -
    -
    -
    - Image -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - Image -
    -
    - Image -
    -
    - Image -
    -
    - Image -
    -
    - Image -
    -
    - Image -
    -
    -
    -
    -
    -
    -
    -
    - Image -
    -
    - Image -
    -
    - Image -
    -
    - Image -
    -
    - Image -
    -
    - Image -
    -
    -
    -
    -
    -
    - - - - - - - - \ No newline at end of file diff --git a/web components/thumbnail-slider/script.js b/web components/thumbnail-slider/script.js deleted file mode 100644 index e5f84b9..0000000 --- a/web components/thumbnail-slider/script.js +++ /dev/null @@ -1,35 +0,0 @@ -let btn_open = document.querySelector('.open-modal'); -let btn_close = document.querySelector('.btn-close'); -let modal_container = document.querySelector('.modal-container'); - -btn_open.addEventListener('click', () => { - modal_container.classList.add('active'); -}); -btn_close.addEventListener('click', () => { - modal_container.classList.remove('active'); -}); -modal_container.addEventListener('click', (e) => { - if (e.target.closest('modal-container')) { - modal_container.classList.add('active'); - } else { - e.target.classList.remove('active'); - } -}); - -var swiper = new Swiper('.mySwiper', { - loop: true, - spaceBetween: 10, - slidesPerView: 3, - freeMode: true, -}); -var swiper2 = new Swiper('.mySwiper2', { - loop: true, - spaceBetween: 10, - navigation: { - nextEl: '.swiper-button-next', - prevEl: '.swiper-button-prev', - }, - thumbs: { - swiper: swiper, - }, -}); \ No newline at end of file diff --git a/web components/thumbnail-slider/starter.md b/web components/thumbnail-slider/starter.md deleted file mode 100644 index 346652e..0000000 --- a/web components/thumbnail-slider/starter.md +++ /dev/null @@ -1,77 +0,0 @@ -## HTML - -```html - - - - - - - Nike - - - - - - - - - - - - - - - -``` - -## CSS - -```css -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; - border: none; - outline: none; - text-decoration: none; -} - -:root { - --primary-text: #394452; - --btn-bg: #5d63ff; - --overlay: rgba(16, 4, 25, 0.299); - --modal-bg: rgba(238, 236, 243, 0.962); - --white: #fff; - --transition: all 1s ease; -} - -html { - font-size: 62.5%; -} - -body { - font-size: 1.6rem; - font-family: 'Poppins', sans-serif; -} - -.container { - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - overflow-y: auto; -} -``` diff --git a/web components/thumbnail-slider/style.css b/web components/thumbnail-slider/style.css deleted file mode 100644 index dc379a0..0000000 --- a/web components/thumbnail-slider/style.css +++ /dev/null @@ -1,218 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; - border: none; - outline: none; - text-decoration: none; -} - -:root { - --primary-text: #394452; - --btn-bg: #5d63ff; - --overlay: rgba(16, 4, 25, 0.299); - --modal-bg: rgba(238, 236, 243, 0.962); - --white: #fff; - --transition: all 1s ease; -} - -html { - font-size: 62.5%; -} - -body { - font-size: 1.6rem; - font-family: 'Poppins', sans-serif; -} - -.container { - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - overflow-y: auto; -} - -.main-image-container { - width: 40rem; - height: 40rem; - position: relative; -} - -.main-image-container .img img { - width: 40rem; - height: 40rem; -} - -.main-image-container .overlay { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100%; - background: var(--overlay); - display: flex; - align-items: center; - justify-content: center; - clip-path: circle(0% at 50% 50%); - transition: var(--transition); -} - -.main-image-container:hover .overlay { - clip-path: circle(70.7% at 50% 50%); -} - -.overlay ion-icon { - font-size: 3.5rem; - color: var(--white); - background: var(--btn-bg); - padding: 0.5rem; - border-radius: 1rem; - cursor: pointer; -} - -.modal-container { - position: fixed; - top: 0; - width: 100%; - height: 100%; - z-index: 33; - overflow: auto; - background: var(--overlay); - backdrop-filter: blur(1rem); - transition: var(--transition); - clip-path: circle(0% at 50% 50%); -} - -.modal-container::-webkit-scrollbar { - width: 0; -} - -.modal-container.active { - clip-path: circle(70.7% at 50% 50%); -} - -.modal-inner { - position: relative; - width: 100%; - height: 70rem; - z-index: 100; - background: var(--modal-bg); -} - -.btn-close { - position: absolute; - top: 2rem; - right: 3rem; - width: 3rem; - height: 3rem; - z-index: 1000; - background: var(--white); - display: flex; - align-items: center; - justify-content: center; - border-radius: 1rem; - cursor: pointer; -} - -.btn-close ion-icon { - font-size: 2.5rem; -} - -.swiper-button-next, -.swiper-button-prev { - color: var(--primary-text); -} - -.swiper-button-next::after, -.swiper-button-prev::after { - font-size: 4rem !important; -} - -.main { - padding: 6rem 0; -} - -.main .swiper-slide { - text-align: center; -} - -.main .swiper-slide img { - width: 40rem; - height: 40rem; - border-radius: 2rem; -} - -.thumbnail-slider, -.thumbnail-slider .swiper-wrapper { - width: 30rem; - margin: 0 auto; -} - -.thumbnail-slider .swiper-slide { - width: 10rem !important; - height: 10rem !important; - padding: 0.3rem; - border-radius: 2rem; - border: 0.2rem solid transparent; - transition: var(--transition); -} - -.thumbnail-slider .swiper-slide img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: inherit; -} - -.thumbnail-slider { - width: 40rem; - cursor: pointer; -} - -.swiper-slide-thumb-active { - border: 0.2rem solid rgb(165, 165, 165) !important; -} - -@media (max-width: 521px) { - .main .swiper-slide img { - max-width: 40rem; - max-height: 40rem; - border-radius: 2rem; - object-fit: cover; - } - .thumbnail-slider { - width: 100%; - } - .swiper-button-next::after, - .swiper-button-prev::after { - font-size: 3.3rem !important; - } -} - -@media (max-width: 415px) { - .main .swiper-slide img { - max-width: 35rem; - max-height: 35rem; - } - .main-image-container { - width: 90%; - } - .main-image-container .img { - text-align: center; - } - .main-image-container .img img { - width: 100%; - } -} - -@media (max-width: 340px) { - .main-image-container .img img { - width: 90%; - object-fit: cover; - } -} diff --git a/web components/thumbnail-slider/thumbnail.png b/web components/thumbnail-slider/thumbnail.png deleted file mode 100644 index b3cc079..0000000 Binary files a/web components/thumbnail-slider/thumbnail.png and /dev/null differ diff --git a/web components/vision_pro/README.md b/web components/vision_pro/README.md deleted file mode 100644 index d57c09f..0000000 --- a/web components/vision_pro/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Apple Vision Pro Sequence Animation Using HTML & CSS and GSAP - -[🎬 Watch on Youtube](https://youtu.be/1bR159flk_0) - -![thumbnail](thumbnail.png) diff --git a/web components/vision_pro/index.html b/web components/vision_pro/index.html deleted file mode 100644 index e11c0fe..0000000 --- a/web components/vision_pro/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - Apple Vision Pro - - - - -
    -

    Apple Vision Pro

    -
    -
    - -
    - - - - - - - - - diff --git a/web components/vision_pro/script.js b/web components/vision_pro/script.js deleted file mode 100644 index f390993..0000000 --- a/web components/vision_pro/script.js +++ /dev/null @@ -1,272 +0,0 @@ -function sequence_animation() { - const canvas = document.querySelector('#home>canvas'); - const context = canvas.getContext('2d'); - - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - - window.addEventListener('resize', function () { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - render(); - }); - - function files(index) { - var data = ` - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0000.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0001.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0002.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0003.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0004.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0005.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0006.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0007.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0008.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0009.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0010.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0011.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0012.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0013.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0014.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0015.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0016.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0017.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0018.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0019.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0020.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0021.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0022.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0023.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0024.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0025.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0026.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0027.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0028.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0029.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0030.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0031.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0032.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0033.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0034.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0035.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0036.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0037.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0038.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0039.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0040.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0041.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0042.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0043.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0044.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0045.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0046.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0047.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0048.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0049.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0050.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0051.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0052.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0053.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0054.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0055.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0056.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0057.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0058.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0059.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0060.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0061.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0062.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0063.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0064.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0065.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0066.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0067.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0068.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0069.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0070.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0071.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0072.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0073.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0074.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0075.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0076.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0077.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0078.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0079.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0080.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0081.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0082.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0083.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0084.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0085.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0086.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0087.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0088.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0089.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0090.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0091.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0092.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0093.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0094.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0095.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0096.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0097.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0098.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0099.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0100.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0101.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0102.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0103.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0104.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0105.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0106.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0107.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0108.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0109.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0110.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0111.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0112.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0113.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0114.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0115.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0116.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0117.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0118.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0119.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0120.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0121.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0122.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0123.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0124.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0125.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0126.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0127.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0128.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0129.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0130.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0131.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0132.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0133.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0134.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0135.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0136.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0137.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0138.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0139.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0140.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0141.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0142.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0143.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0144.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0145.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0146.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0147.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0148.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0149.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0150.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0151.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0153.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0154.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0155.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0156.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0157.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0158.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0159.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0160.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0161.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0162.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0163.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0164.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0165.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0166.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0167.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0168.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0169.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0170.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0171.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0172.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0173.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0174.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0175.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0176.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0177.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0178.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0179.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0180.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0181.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0182.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0183.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0184.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0185.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0186.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0187.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0188.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0189.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0190.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0191.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0192.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0193.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0194.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0195.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0196.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0197.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0198.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0199.jpg - `; - return data.split('\n')[index]; - } - - const frameCount = 199; - - const images = []; - const imageSeq = { - frame: 0, - }; - - for (let i = 0; i < frameCount; i++) { - const img = new Image(); - img.src = files(i); - images.push(img); - } - - gsap.to(imageSeq, { - frame: frameCount - 1, - snap: 'frame', - ease: 'none', - scrollTrigger: { - scrub: 1.8, - pin: true, - trigger: '#home', - }, - onUpdate: render, - }); - - images[1].onload = render; - - function render() { - scaleImage(images[imageSeq.frame], context); - } - - function scaleImage(img, ctx) { - var canvas = ctx.canvas; - var hRatio = canvas.width / img.width; - var vRatio = canvas.height / img.height; - var ratio = Math.min(hRatio, vRatio); - var centerShift_x = (canvas.width - img.width * ratio) / 2; - var centerShift_y = (canvas.height - img.height * ratio) / 2; - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.drawImage( - img, - 0, - 0, - img.width, - img.height, - centerShift_x, - centerShift_y, - img.width * ratio, - img.height * ratio - ); - } -} - -sequence_animation(); diff --git a/web components/vision_pro/starter.md b/web components/vision_pro/starter.md deleted file mode 100644 index 96f2b43..0000000 --- a/web components/vision_pro/starter.md +++ /dev/null @@ -1,319 +0,0 @@ -## gsap - -```html - - - - - -``` - -## CSS - -```css -@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html { - font-size: 62.5%; - scroll-behavior: smooth; -} - -body { - font-size: 1.6rem; - font-family: 'Lobster', cursive; -} - -body::-webkit-scrollbar { - width: 0; - background: #f5f5f7; -} -``` - -## Javascript - -```javascript -function sequence_animation() { - const canvas = document.querySelector('#home>canvas'); - const context = canvas.getContext('2d'); - - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - - window.addEventListener('resize', function () { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - render(); - }); - - function files(index) { - return data.split('\n')[index]; - } - - const frameCount = 199; - - const images = []; - const imageSeq = { - frame: 0, - }; - - for (let i = 0; i < frameCount; i++) { - const img = new Image(); - img.src = files(i); - images.push(img); - } - - gsap.to(imageSeq, { - frame: frameCount - 1, - snap: 'frame', - ease: 'none', - scrollTrigger: { - scrub: 1.8, - pin: true, - trigger: '#home', - }, - onUpdate: render, - }); - - images[1].onload = render; - - function render() { - scaleImage(images[imageSeq.frame], context); - } - - function scaleImage(img, ctx) { - var canvas = ctx.canvas; - var hRatio = canvas.width / img.width; - var vRatio = canvas.height / img.height; - var ratio = Math.min(hRatio, vRatio); - var centerShift_x = (canvas.width - img.width * ratio) / 2; - var centerShift_y = (canvas.height - img.height * ratio) / 2; - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.drawImage( - img, - 0, - 0, - img.width, - img.height, - centerShift_x, - centerShift_y, - img.width * ratio, - img.height * ratio - ); - } -} - -sequence_animation(); -``` - -## Images - -```javascript -var data = ` - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0000.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0001.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0002.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0003.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0004.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0005.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0006.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0007.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0008.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0009.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0010.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0011.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0012.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0013.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0014.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0015.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0016.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0017.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0018.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0019.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0020.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0021.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0022.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0023.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0024.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0025.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0026.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0027.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0028.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0029.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0030.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0031.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0032.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0033.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0034.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0035.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0036.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0037.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0038.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0039.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0040.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0041.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0042.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0043.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0044.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0045.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0046.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0047.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0048.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0049.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0050.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0051.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0052.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0053.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0054.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0055.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0056.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0057.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0058.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0059.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0060.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0061.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0062.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0063.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0064.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0065.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0066.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0067.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0068.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0069.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0070.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0071.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0072.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0073.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0074.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0075.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0076.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0077.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0078.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0079.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0080.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0081.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0082.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0083.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0084.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0085.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0086.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0087.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0088.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0089.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0090.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0091.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0092.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0093.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0094.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0095.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0096.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0097.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0098.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0099.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0100.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0101.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0102.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0103.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0104.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0105.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0106.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0107.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0108.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0109.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0110.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0111.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0112.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0113.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0114.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0115.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0116.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0117.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0118.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0119.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0120.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0121.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0122.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0123.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0124.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0125.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0126.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0127.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0128.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0129.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0130.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0131.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0132.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0133.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0134.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0135.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0136.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0137.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0138.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0139.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0140.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0141.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0142.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0143.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0144.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0145.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0146.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0147.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0148.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0149.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0150.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0151.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0153.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0154.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0155.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0156.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0157.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0158.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0159.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0160.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0161.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0162.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0163.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0164.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0165.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0166.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0167.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0168.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0169.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0170.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0171.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0172.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0173.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0174.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0175.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0176.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0177.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0178.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0179.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0180.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0181.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0182.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0183.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0184.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0185.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0186.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0187.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0188.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0189.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0190.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0191.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0192.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0193.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0194.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0195.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0196.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0197.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0198.jpg - https://www.apple.com/105/media/us/apple-vision-pro/2023/7e268c13-eb22-493d-a860-f0637bacb569/anim/360/large/0199.jpg - `; -``` diff --git a/web components/vision_pro/style.css b/web components/vision_pro/style.css deleted file mode 100644 index e6be5a4..0000000 --- a/web components/vision_pro/style.css +++ /dev/null @@ -1,58 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html { - font-size: 62.5%; - scroll-behavior: smooth; -} - -body { - font-size: 1.6rem; - font-family: 'Lobster', cursive; -} - -body::-webkit-scrollbar { - width: 0; - background: #f5f5f7; -} - -section { - height: 100vh; - display: flex; - align-items: center; - justify-content: center; -} - -#hero { - background: rgb(87, 76, 176); -} - -#footer { - background: rgb(53, 44, 120); -} - -.title { - font-size: 5rem; - color: transparent; - letter-spacing: 0.4rem; - -webkit-text-stroke-width: 0.01rem; - -webkit-text-stroke-color: #fff; -} - -#home { - min-height: 100vh; - width: 100%; - overflow: hidden; - background: #f5f5f7; -} - -canvas { - max-width: 100vw; - max-height: 100vh; -} diff --git a/web components/vision_pro/thumbnail.png b/web components/vision_pro/thumbnail.png deleted file mode 100644 index 929c88a..0000000 Binary files a/web components/vision_pro/thumbnail.png and /dev/null differ diff --git a/website/Hero-Design/Animated ecommerce/README.md b/website/Hero-Design/Animated ecommerce/README.md deleted file mode 100644 index 6d1c4c2..0000000 --- a/website/Hero-Design/Animated ecommerce/README.md +++ /dev/null @@ -1,7 +0,0 @@ -## Create Stunning E-commerce Websites with Dynamic Animation | HTML, CSS, JavaScript & GSAP - -### [⏯ Watch On Youtube](https://youtu.be/3ncvlaI9PjQ) - -![thumbnail](thumbnail.png) - ---- diff --git a/website/Hero-Design/Animated ecommerce/images/favicon.svg b/website/Hero-Design/Animated ecommerce/images/favicon.svg deleted file mode 100644 index e92efe3..0000000 --- a/website/Hero-Design/Animated ecommerce/images/favicon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/website/Hero-Design/Animated ecommerce/images/hero-image.png b/website/Hero-Design/Animated ecommerce/images/hero-image.png deleted file mode 100644 index c0b125a..0000000 Binary files a/website/Hero-Design/Animated ecommerce/images/hero-image.png and /dev/null differ diff --git a/website/Hero-Design/Animated ecommerce/images/logo.svg b/website/Hero-Design/Animated ecommerce/images/logo.svg deleted file mode 100644 index d655d68..0000000 --- a/website/Hero-Design/Animated ecommerce/images/logo.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/website/Hero-Design/Animated ecommerce/index.html b/website/Hero-Design/Animated ecommerce/index.html deleted file mode 100644 index 4790780..0000000 --- a/website/Hero-Design/Animated ecommerce/index.html +++ /dev/null @@ -1,102 +0,0 @@ - - - - - - - Animated | Ecommerce Shop - - - - - -
    -
    -
    -
    -
    -
    -

    Choose the best

    -

    healthier way

    -

    of life

    -
    -
    -
    -
    -
    -
    -
    -

    100% Natural Food

    -

    - Choose the best
    - healthier way
    - of life -

    -
    - - Explore Now - - -
    -
    -
    -
    - -
    -
    - -
    -
    -
    - - - - - - - diff --git a/website/Hero-Design/Animated ecommerce/script.js b/website/Hero-Design/Animated ecommerce/script.js deleted file mode 100644 index d96b80b..0000000 --- a/website/Hero-Design/Animated ecommerce/script.js +++ /dev/null @@ -1,69 +0,0 @@ -const tl = gsap.timeline({ default: { ease: 'power1.Out' } }); - -tl.to('.popup-bg', { - y: 0, - height: '100%', - duration: 1.5, - dealy: 0.5, - stagger: 0.25, -}) - .to('.text-area', { - opacity: 1, - duration: 1.5, - }) - .to('.hide', { - opacity: 1, - duration: 1, - }) - .to('.text', { - transform: 'translateY(0)', - duration: 1, - dealy: 0.2, - stagger: 0.5, - }) - .to('.text', { - transform: 'translateY(100%)', - duration: 1, - dealy: 0.2, - stagger: 0.5, - }) - .to('.hide', { - opacity: 0, - duration: 1, - }) - .to('.text-area', { - opacity: 0, - duration: 0.3, - }) - .to('.popup-bg', { - y: 0, - height: '0%', - duration: 1.5, - dealy: 0.5, - stagger: 0.25, - }) - .to('header', { - y: 0, - duration: 1, - }) - .to( - '.hero-container', - { - y: '7rem', - duration: 3, - ease: Elastic.easeOut.config(1, 3), - clipPath: 'polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 0)', - }, - '-=1' - ); -tl.play(); - -let nav_menu = document.querySelector('.nav_menu'), - menu_toggle = document.querySelector('.menu_toggle'); - -menu_toggle.addEventListener('click', () => { - nav_menu.classList.toggle('active'); - nav_menu.classList.contains('active') - ? menu_toggle.setAttribute('name', 'close-outline') - : menu_toggle.setAttribute('name', 'menu-outline'); -}); diff --git a/website/Hero-Design/Animated ecommerce/starter.md b/website/Hero-Design/Animated ecommerce/starter.md deleted file mode 100644 index 6d9ce1c..0000000 --- a/website/Hero-Design/Animated ecommerce/starter.md +++ /dev/null @@ -1,105 +0,0 @@ -```html - - - - - - - Animated | Ecommerce Shop - - - - - - - - - - - -``` - -```css -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700;800&family=Yellowtail&display=swap'); -*, -*::after, -*::before { - margin: 0; - padding: 0; - box-sizing: border-box; - text-decoration: none; - list-style-type: none; -} - -:root { - --container: 142rem; - --m-auto: 0 auto; - --white: #fff; - --primary: #68a47f; - --secondary: #efd372; - --text-dark: #274c5b; - --gray: gray; - --transition: all 0.5s cubic-bezier(0.23, 0.63, 0.36, 1); - --popup-bg: rgb(23, 8, 72); -} - -html { - font-size: 62.5%; - scroll-behavior: smooth; -} - -body { - font-size: 1.6rem; - font-family: 'Roboto', sans-serif; -} -::-webkit-scrollbar { - width: 0; -} -.container { - max-width: var(--container); - margin: 0 auto; - padding: 0 2rem; -} - -.subheading { - font-family: 'Yellowtail', cursive; - color: var(--primary); - font-size: 3rem; -} - -.heading { - color: var(--text-dark); - font-size: 4rem; - font-weight: 800; -} - -.btn-primary { - padding: 0.9rem 2rem; - border-radius: 1rem; - display: inline-flex; - align-items: center; - gap: 1rem; - background: var(--secondary); - color: var(--text-dark); - transition: var(--transition); -} - -.btn-primary:hover { - background: var(--text-dark); - color: var(--secondary); -} - -.btn-primary ion-icon { - font-size: 2.4rem; -} -``` - -```javascript -const tl = gsap.timeline({ default: { ease: 'power1.Out' } }); -``` diff --git a/website/Hero-Design/Animated ecommerce/style.css b/website/Hero-Design/Animated ecommerce/style.css deleted file mode 100644 index 0a41149..0000000 --- a/website/Hero-Design/Animated ecommerce/style.css +++ /dev/null @@ -1,290 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700;800&family=Yellowtail&display=swap'); -*, -*::after, -*::before { - margin: 0; - padding: 0; - box-sizing: border-box; - text-decoration: none; - list-style-type: none; -} - -:root { - --container: 142rem; - --m-auto: 0 auto; - --white: #fff; - --primary: #68a47f; - --secondary: #efd372; - --text-dark: #274c5b; - --gray: gray; - --transition: all 0.5s cubic-bezier(0.23, 0.63, 0.36, 1); - --popup-bg: rgb(23, 8, 72); -} - -html { - font-size: 62.5%; - scroll-behavior: smooth; -} - -body { - font-size: 1.6rem; - font-family: 'Roboto', sans-serif; -} - -::-webkit-scrollbar { - width: 0; -} - -.container { - max-width: var(--container); - margin: 0 auto; - padding: 0 2rem; -} - -.subheading { - font-family: 'Yellowtail', cursive; - color: var(--primary); - font-size: 3rem; -} - -.heading { - color: var(--text-dark); - font-size: 4rem; - font-weight: 800; -} - -.btn-primary { - padding: 0.9rem 2rem; - border-radius: 1rem; - display: inline-flex; - align-items: center; - gap: 1rem; - background: var(--secondary); - color: var(--text-dark); - transition: var(--transition); -} - -.btn-primary:hover { - background: var(--text-dark); - color: var(--secondary); -} - -.btn-primary ion-icon { - font-size: 2.4rem; -} - -.popup { - position: fixed; - width: 100%; - height: 100%; -} - -.popup-bg-1, -.popup-bg-2, -.popup-bg-3 { - position: absolute; - width: calc(100% / 3); - height: 0%; -} - -.popup-bg-1 { - background: var(--popup-bg); - left: 0; -} - -.popup-bg-2 { - background: var(--popup-bg); - left: calc(100% / 3); -} - -.popup-bg-3 { - background: var(--popup-bg); - left: calc((100% / 3) * 2); -} - -.popup-container { - height: 100%; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - position: absolute; -} - -.text-area .hide { - display: block; - background: var(--popup-bg); - opacity: 0; - overflow: hidden; -} - -.hide .text { - font-size: 5rem; - line-height: 7rem; - transform: translateY(100%); - display: inline-block; - color: var(--white); -} - -.hero-container { - height: 65rem; - background: url('images/hero-image.png') no-repeat center/cover; - clip-path: polygon(50% 0%, 100% 0, 100% 0, 0 0, 0 0); -} - -.hero-content { - height: 65rem; - display: flex; - gap: 2rem; - flex-direction: column; - justify-content: center; -} - -header { - width: 100%; - position: absolute; - top: 0; - background: var(--white); - transform: translateY(-7rem); -} - -.navigation { - height: 7rem; - display: flex; - align-items: center; - justify-content: space-between; -} - -.logo-img { - width: 13rem; -} - -.menu_toggle { - font-size: 4rem; - cursor: pointer; - display: none; -} - -.nav_menu { - display: flex; - align-items: center; - gap: 2rem; -} - -.nav_link { - color: var(--text-dark); -} - -.nav_actions { - display: inline-flex; - align-items: center; - gap: 1rem; -} - -.input-search-container { - display: flex; - background: #fdf8f8; - padding: 0.3rem; - border-radius: 2rem; -} - -.input-search-container input { - font-size: 1.8rem; - outline: none; - border: none; - background: transparent; - padding: 0 0.8rem; - border-radius: 2rem; -} - -.search-btn { - width: 3.5rem; - height: 3.5rem; - border-radius: 50%; - background: var(--primary); - color: var(--white); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; -} - -.search-btn ion-icon { - font-size: 2.5rem; -} - -.cart-bucket { - padding: 0.3rem; - border: 0.1rem solid var(--text-dark); - border-radius: 3rem; - display: flex; - align-items: center; - gap: 0.5rem; - cursor: pointer; -} - -.cart-bucket ion-icon { - padding: 0.5rem; - font-size: 1.8rem; - border-radius: 2rem; - background: var(--text-dark); - color: var(--white); -} - -@media (max-width: 941px) { - .menu_toggle { - display: block; - } - .nav_menu { - position: absolute; - left: 0; - width: 100%; - background: var(--white); - top: 7rem; - align-items: center; - justify-content: center; - gap: 3rem; - padding: 3rem 0; - flex-direction: column; - clip-path: polygon(50% 0%, 100% 0, 100% 0, 0 0, 0 0); - transition: clip-path 0.5s ease-in-out; - } - .nav_menu.active { - clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 0); - } -} - -@media (max-width: 612px) { - .hide .text { - font-size: 4.5rem; - line-height: 6rem; - } - .logo-img { - width: 12rem; - } - .input-search-container input { - width: 10rem; - } -} - -@media (max-width: 470px) { - .logo-img { - width: 8rem; - } - .nav_menu { - gap: 2rem; - } - .nav_link { - font-size: 1.4rem; - } -} - -@media (max-width: 433px) { - .nav_actions { - zoom: 0.8; - } - .hide .text { - font-size: 3.5rem; - line-height: 5rem; - } -} diff --git a/website/Hero-Design/Responsive-Landing-page-video/thumbnail.png b/website/Hero-Design/Responsive-Landing-page-video/thumbnail.png index 2e9b775..47d929f 100644 Binary files a/website/Hero-Design/Responsive-Landing-page-video/thumbnail.png and b/website/Hero-Design/Responsive-Landing-page-video/thumbnail.png differ diff --git a/website/portfolio/README.md b/website/portfolio/README.md deleted file mode 100644 index e69de29..0000000