• Stars
    star
    1,221
  • Rank 37,330 (Top 0.8 %)
  • Language
    JavaScript
  • Created over 10 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

drop in zoom anything

Zoomerang.js

Zoom in, zoom out on (almost) anything in your page.

Demo

Basic Usage

Include with a script tag, or install with your package manager of choice (Bower/Component/npm).

Zoomerang.listen('#my-image')

Now when you click on #my-image, it will... of course, zoom in. When you click again, it will zoom back out to its original place. (get it?)

This is largely inspired by Medium's avatar zoom in effect, with improvements (you can resize / scroll the page when it's zoomed in and it still works). Please note it depends on the way browsers handle CSS transforms and has limited compatibility.

Caveats / Known Issues

  • CSS Transform required. (basically, IE10+)
  • Works best on fixed size elements such as display: block, display: inline-block and img elements.
  • Avoid using it on long inline text that has natural line wraps.
  • When used on mobile, it's best to avoid auto font size adjustments (e.g. set scale fixed to 1).
  • Elements with non-rectangular shape will have pixelated edge in Firefox.
  • Doesn't work on stock Android 2.x browser.

API Reference

  • Zoomerang.listen(selector | element)

    Attach click listeners to all matched elements. You can also directly pass in a single node to this method.

  • Zoomerang.open(selector | element, [callback])

    Zoom in on the matched element. Fires optional callback when the transition is done.

  • Zoomerang.close([callback])

    Zoom out if currently zoomed-in. Fires optional callback when the transition is done.

  • Zoomerang.config(options)

    Takes an options object. Available options (all options take valid CSS values):

    • transitionDuration - default: '.4s'
    • transitionTimingFunction - default: 'cubic-bezier(.4,0,0,1)'
    • bgColor - default: '#fff'
    • bgOpacity - default: 1
    • maxWidth - max element width when zoomed-in. default: 300
    • maxHeight - max element height when zoomed-in. default: 300
    • deepCopy - whether to copy innerHTML. If target element has complicated inner structure you might need this to make it work. default: false
    • onOpen - a callback function that will be called when a target is zoomed in and transition has ended. It will get the target element as the argument.
    • onClose - same as onOpen, except fired when zoomed out.
    • onBeforeOpen - a callback function, that will be called before zoom-in.
    • onBeforeClose - a callback function, that will be called before zoom-out.

License

MIT

Brought to you by @youyuxi.

More Repositories

1

build-your-own-mint

Build your own personal finance analytics using Plaid, Google Sheets and CircleCI.
HTML
2,456
star
2

vue-hooks

Experimental React hooks implementation in Vue
JavaScript
1,592
star
3

pod

Git push deploy for Node.js
JavaScript
1,344
star
4

vue-lit

Proof of concept custom elements "framework"
JavaScript
1,105
star
5

HTML5-Clear-v2

HTML5 Clear version 2
JavaScript
948
star
6

vite-vs-next-turbo-hmr

Benchmarking Vite vs. Next + turbopack HMR performance
JavaScript
919
star
7

laravel-vue-cli-3

Example project using Vue CLI 3 with Laravel
PHP
850
star
8

HTML5-Clear

[DEPRECATED] A replica of the Clear iphone app in HTML5
JavaScript
719
star
9

register-service-worker

A script to simplify service worker registration with hooks for common events.
JavaScript
635
star
10

vue-wordle

Wordle built with Vue, aka VVordle
TypeScript
573
star
11

launch-editor

Open file in editor from Node.js.
JavaScript
531
star
12

semi

To semicolon or not to semicolon; that is the question
JavaScript
304
star
13

vue-svelte-size-analysis

Comparing generated code size of Vue and Svelte components
JavaScript
300
star
14

okie

Dead simple worker threads pool
TypeScript
257
star
15

starz

Count a GitHub user's total stars
JavaScript
145
star
16

circular-json-es6

circular JSON.stringify and JSON.parse, for environments with native ES6 Map
JavaScript
128
star
17

pug-plain-loader

webpack loader that transforms pug templates to plain HTML
JavaScript
114
star
18

release-tag

GitHub action for auto creating a release on tag push
JavaScript
107
star
19

Speech.js

Simple wrapper for Chrome's web speech recognition API
JavaScript
97
star
20

retweeter

Auto retweet from another account using CircleCI scheduled workflows
JavaScript
59
star
21

matrix.js

Featherweight CSS3 3D engine
JavaScript
58
star
22

buble

a fork of buble with some vue-specific hacks, used in vue-template-es2015-compiler
JavaScript
54
star
23

nightwatch-helpers

custom assertions and commands for easier nightwatch tests
JavaScript
53
star
24

shell-task

Proof-of-concept then-able shell commands in node.
JavaScript
46
star
25

creative-html5

A class about JavaScript, html5 and creative coding.
JavaScript
46
star
26

vue-template-explorer

See how vue templates get compiled into render functions under the hood
Vue
44
star
27

QR.js

Simple HTML5 Canvas-based QR Code generation
JavaScript
42
star
28

vue-tsc-3.3-type-repro

Vue
37
star
29

material-color-scheme-es6

Material Theme color scheme tweaked for ES6
JavaScript
32
star
30

semi-sublime

Sublime Text 3 plugin for Semi
Python
32
star
31

vite-pre-transform-test

JavaScript
29
star
32

speech

component for Chrome speech recognition wrapper
JavaScript
29
star
33

raveal

Radially reveal an element
JavaScript
27
star
34

webpack-hmr-repro

JavaScript
27
star
35

cjs-module-lexer-rollup-reexports

JavaScript
25
star
36

roetem

meteor-like experiment with vue and rethinkdb
JavaScript
24
star
37

gulp-component

component plugin for gulp
JavaScript
22
star
38

tucao

吐槽专用
21
star
39

thread-loader-bug

JavaScript
20
star
40

browser-audio

Simple cross browser audio player
JavaScript
19
star
41

rollup-tostringtag-symbol-conflict

JavaScript
19
star
42

resolve-type-test

TypeScript
19
star
43

babel-preset-flow-vue

JavaScript
17
star
44

popSlides

javascript popup slideshow plugin based on jQuery
JavaScript
17
star
45

esbuild-exports-signature-repro

JavaScript
16
star
46

vue

vue bug
HTML
14
star
47

Puzzle-Demo

A slider puzzle game with CSS3 transitions.
JavaScript
14
star
48

rollup-commonjs-bug

JavaScript
14
star
49

capper

Capture canvas animations.
JavaScript
12
star
50

Socket-Play

iPhone-controlled HTML5 game concept demo
JavaScript
12
star
51

Kinect-Keylight

Kinect version of @hakimel 's Keylight
C++
11
star
52

showme

show me the code (for an npm package)
JavaScript
11
star
53

workerify

Component for easy inline web worker
JavaScript
10
star
54

de-indent

remove extra indent from a block of code
JavaScript
10
star
55

new

Scaffold a new project.
JavaScript
8
star
56

Telekinesis

User gesture input simulation.
JavaScript
8
star
57

whipcream

Chai-style chaining sugar for webdriverjs
JavaScript
8
star
58

babel-plugin-transform-es2015-classes-simple

JavaScript
7
star
59

emitter-fsm

EventEmitter based finite state machine
JavaScript
6
star
60

weex-native-directive

Weex native directive design
JavaScript
6
star
61

templates

Personal project scaffolding templates
JavaScript
5
star
62

choreo.js

Event-based flow control for interactive walkthroughs
JavaScript
4
star
63

gulp-jscoverage

JSCoverage instrumentation plugin for gulp
JavaScript
4
star
64

fancytext

Text with fancy transitions
JavaScript
4
star
65

gruntfile-yaml

write grunt config in yaml.
JavaScript
4
star
66

roller

One-dimensional touch scroller with momentum and elastic pagination
JavaScript
4
star
67

test-cli-preset

JavaScript
3
star
68

generator-extension

A Chrome extension generator
JavaScript
3
star
69

generator-dude

A personal Yeoman generator
JavaScript
3
star
70

blaze-local-state

Local reactive state for Blaze templates
JavaScript
3
star
71

eslint

A fully pluggable tool for identifying and reporting on patterns in JavaScript.
JavaScript
2
star
72

tester

webhook tests.
JavaScript
2
star
73

gulp-component-updater

Gulp-friendly module to auto add/delete files in your component.json
JavaScript
2
star
74

grunt-component-add

Automatically add files to component.json
JavaScript
1
star
75

inferno-website

JavaScript
1
star