zoom in on any element in the DOM

Related tags

Maps zoom.js
Overview

zoom.js

Enables a minimal JS API for zooming in on specific points or DOM elements.

Note that this is only a proof of concept so don't use it for anything important. Does not work in IE, yet.

Try out the demo.

Usage

Zoom in on an element:

  zoom.to({
    element: document.querySelector( 'img' )
  });

Additional options:

  zoom.to({
    element: document.querySelector( 'img' ),

    // Amount of empty space around zoomed element
    padding: 20,

    // Function to call once zooming completes
    callback: function() { /* ... */ }
  });

Zoom in on a point:

  zoom.to({
    x: 100,
    y: 200,
    width: 300,
    height: 300
  });
  zoom.to({
    x: 100,
    y: 200,
    scale: 3
  });

Reset

  zoom.out();

License

MIT licensed

Copyright (C) 2017 Hakim El Hattab, http://hakim.se

Comments
  • An interesting and revolutionary proposal for WIGC (community) and Zoom.js (community)

    An interesting and revolutionary proposal for WIGC (community) and Zoom.js (community)

    Hi all!

    1. I recently wrote a proposal in wigc about web accessibility with the zoom-js tool.
    2. reference here: https://discourse.wicg.io/t/draft-idea-spec-proposal-api-idea-for-better-accessibility-in-reading-the-web/5873
    opened by ghost 0
  • Element undefined

    Element undefined

    I am trying out zoom.js to zoom in on the div that are inside a container div. The target is not undefined but I keep on getting this error: Uncaught TypeError: Cannot read properties of undefined (reading 'to'). Does the element needs to have a certain attribute to be able to pass in as element?

    Below is the code I'm using:

    document.querySelector("#outerContainer").addEventListener('wheel', function(event) { event.preventDefault(); zoom.to({ element: event.target, padding:20 }); });

    opened by rdimaunahan 0
  • Is zoom.to supposed to work for element and position at same time?

    Is zoom.to supposed to work for element and position at same time?

    Both element and x, y coordinates can be set as options in this library. However, it is not clear what x and y are relative to and whether element and coordinates can be used together. What I mean by used together is that the zoom would focus to a point within the element rather than always the center.

    Please could somebody clarify. Regards.

    opened by goldingdamien 1
  • Can't scroll left after zoom

    Can't scroll left after zoom

    When I zoom, I can pan right, up, and down as the add-on page suggests, but the horizontal scrollbar position always seems locked at the very left, so I can't scroll left.

    Is it possible to fix this please? I see the last commit is years ago, it would be awesome if this can be fixed! I haven't tried yet digging into the source.

    opened by Noitidart 0
  • zoom.js on ipad?

    zoom.js on ipad?

    Hi, I am using zoom js to zoom the grid images for website, it's really great on the browsers. But it's on ipad looks a bit like out of focus, do you have any solutions for that?

    Thanks! Best, HYC

    opened by HsienYu 3
  • Zooming Out After Panning Bug

    Zooming Out After Panning Bug

    Seems that zooming out doesn't take the panned location into account when zooming back out.

    To demonstrate the problem zoom in on the box labelled "Float" then pan down to the unicorn.

    Once there, click on the unicorn.

    opened by allain 0
Owner
Hakim El Hattab
Making Slides.com and reveal.js • Creator of questionable value at https://lab.hakim.se
Hakim El Hattab
GitHub http://lab.hakim.se/zoom-js
Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.

Waypoints Waypoints is a library that makes it easy to execute a function whenever you scroll to an element. var waypoint = new Waypoint({ element:

Caleb Troughton 10.3k Jan 4, 2023
Visualization of all roads within any city

city-roads Render every single road in any city at once: https://anvaka.github.io/city-roads/ How it is made? The data is fetched from OpenStreetMap u

Andrei Kashcha 5.3k Jan 3, 2023
This repository contains an Advanced Zoom Apps Sample. It should serve as a starting point for you to build and test your own Zoom App in development.

Advanced Zoom Apps Sample Advanced Sample covers most complex scenarios that you might be needed in apps. App has reference implementation for: Authen

Zoom 11 Dec 17, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes.

Note: This repo is currently looking for maintainers: https://github.com/jquery-backstretch/jquery-backstretch/issues/464 Backstretch Backstretch is a

null 3.9k Dec 30, 2022
基于vue3.0-ts-Element集成的简洁/实用后台模板！《带预览地址》vue-admin；vue+admin；vue-element；vue+element；vue后台管理；vue3.0-admin；vue3.0-element。

一、基于vue3.0+ts+Element通用后台admin模板 二、在线预览地址：http://admin.yknba.cn/ 三、下载使用： 1、克隆代码 通过git将代码克隆到本地；或者使用下载安装包模式进行下载。 2、进入目录 进入项目的根目录：vue3.0-ts-admin 3、安装依

null 64 Dec 16, 2022
A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.

A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time. Dropdown, navigation bu

Matthieu Bué 277 Nov 25, 2022
A ready-to-use project template to build custom elements (web components) with Svelte 3 with support and examples for web components, jest, sass, nested components with props, eslinting, stylelinting, Github actions, propagating custom events from shadow-DOM to real-DOM etc.

svelte-webcomponents If you’re using web-components or if you like the project, please ★ this repository to show your support! ?? The world's most eas

Talvinder Singh 28 Nov 9, 2022
Custom Vitest matchers to test the state of the DOM, forked from jest-dom.

vitest-dom Custom Vitest matchers to test the state of the DOM This library is a fork of @testing-library/jest-dom. It shares that library's implement

Chance Strickland 14 Dec 16, 2022
An extension of DOM-testing-library to provide hooks into the shadow dom

Why? Currently, DOM-testing-library does not support checking shadow roots for elements. This can be troublesome when you're looking for something wit

Konnor Rogers 28 Dec 13, 2022
:flashlight: Set a spotlight focus on DOM element adding a overlay layer to the rest of the page

Focusable An awesome and lightweight library for performing spotlight in your DOM elements, setting an animated overlay to the rest of the page. You c

Hector Zarco 1.1k Dec 7, 2022
A custom element for rendering stylable (light DOM) Markdown

Motivation There are many web components these days to render Markdown to HTML. Here are a few: <zero-md> <marked-element> …and I’m sure many others H

Lea Verou 252 Dec 20, 2022
Create DOM element and bind observables on it.

rx-domh Create DOM element and bind observables on it. Inspired by Binding.scala and react-flyd, I made this. Just a simple todo example: /** @jsx h *

xialvjun 4 Feb 6, 2018
I forgot about el.outerHTML so I made this, it takes a DOM element and returns its html as string

htmlToString Convert html/DOM element to string Works with rendered and virtual DOM Installation npm install htmltostring Or using CDN <script src="ht

Shuvo 4 Jul 22, 2022
A JavaScript library to shuffle the text content of a DOM element with an animated effect.

shuffle-letters.js A JavaScript library to shuffle the text content of a DOM element with an animated effect. NOTE: This library is a port to vanilla

George Raptis 6 Jun 2, 2022
A little JavaScript plugin to generate PDF, XLS, CSV and DOC from JavaScript Object or DOM element only from the frontend!

?? JavaScript Object to csv, xls, pdf, doc and DOM to html generator ?? A little JavaScript plugin to generate PDF, XLS, CSV and DOC from JavaScript O

null 61 Jan 7, 2023
Creates a table of contents in a DOM element optionally linked to with anchors. No jQuery or other dependencies.

HTML-Contents Creates a table of contents in a DOM element optionally linked to with anchors. No dependencies. @psalmody Get It We're on npm: npm i ht

Michael Tallino 3 Oct 25, 2022
🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin ?? 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案，它基于 vue3 和 element-plu

雪月欧巴 84 Nov 28, 2022
JavaScript micro-library: pass in an element and a callback and this will trigger when you click anywhere other than the element

Add a click listener to fire a callback for everywhere on the window except your chosen element. Installation run npm install @lukeboyle/when-clicked-

Boyleing Point 5 May 13, 2021
Zoom and pan plugin for Chart.js

chartjs-plugin-zoom A zoom and pan plugin for Chart.js >= 3.0.0 For Chart.js 2.6.0 to 2.9.x support, use version 0.7.7 of this plugin. Panning can be

Chart.js 510 Jan 2, 2023