{"id":22345572,"url":"https://github.com/gerhynes/slide-in-on-scroll","last_synced_at":"2025-03-26T10:22:09.085Z","repository":{"id":106047885,"uuid":"106449501","full_name":"gerhynes/slide-in-on-scroll","owner":"gerhynes","description":"A page built to practice sliding in images on scroll. Built for Wes Bos' JavaScript 30 course. ","archived":false,"fork":false,"pushed_at":"2018-01-16T22:25:40.000Z","size":5,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-01-31T11:48:52.318Z","etag":null,"topics":["javascript","javascript30"],"latest_commit_sha":null,"homepage":"https://gk-hynes.github.io/slide-in-on-scroll/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gerhynes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-10T17:30:46.000Z","updated_at":"2018-01-23T21:46:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"1dc1e5ee-91c2-4346-82c3-a2b18370a6d8","html_url":"https://github.com/gerhynes/slide-in-on-scroll","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fslide-in-on-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fslide-in-on-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fslide-in-on-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fslide-in-on-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gerhynes","download_url":"https://codeload.github.com/gerhynes/slide-in-on-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245632616,"owners_count":20647246,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","javascript30"],"created_at":"2024-12-04T09:18:08.117Z","updated_at":"2025-03-26T10:22:09.079Z","avatar_url":"https://github.com/gerhynes.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Slide in on Scroll](https://gk-hynes.github.io/slide-in-on-scroll/)\n\n[![Screenshot of Slide in on Scroll page](https://res.cloudinary.com/gerhynes/image/upload/v1516049515/SlideInOnScroll_gye8fd.jpg)](https://gk-hynes.github.io/slide-in-on-scroll/)\n\n## Notes\n\nSelect all the images you are going to listen for. By deafult they are hidden slightly offscreen, have an opacity of 0 and are scaled at 95%.\n\nWhen they are scrolled half into view a class of `active` is applied, `translateX` returns them to 0, and they are scaled back up.\n\nFirst, create a function, `checkSlide`, that will run every time the user scrolls. Listen for a scroll on the window and run this function.\n\nUse a `debounce` function to guarantee that you will only run `checkSlide` at most every 20 milliseconds (to protect performance).\n\nInside `checkSlide`, loop over every image and figure out where it needs to be shown.\n\nUse `window.scrollY`, to figure out how far the page is being scrolled down, and add `window.innerHeight` to work out where the bottom of the window is.\n\nThen subtract `sliderImage.height / 2` to find the middle of the image.\n\n```js\nconst slideInAt = window.scrollY + window.innerHeight - sliderImage.height / 2;\n```\n\n`sliderImage.offsetTop` will tell you how far the top of the image is from the top of the window. Then add `sliderImage.height` to find out where the bottom of the image is.\n\n```js\nconst imageBottom = sliderImage.offsetTop + sliderImage.height;\n```\n\nPut `sliderImage.offsetTop`and `window.scrollY` into their own variables to make the subsequent if statment easier to read.\n\n```js\nconst isHalfShown = slideInAt \u003e sliderImage.offsetTop;\nconst isNotScrolledPast = window.scrollY \u003c imageBottom;\n```\n\nIf the image is half shown and not scrolled past add a class, `active`. Otherwise, remove that class.\n\n```js\nif (isHalfShown \u0026\u0026 isNotScrolledPast) {\n  sliderImage.classList.add(\"active\");\n} else {\n  sliderImage.classList.remove(\"active\");\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fslide-in-on-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerhynes%2Fslide-in-on-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fslide-in-on-scroll/lists"}