Top Related Projects
A lightweight script to animate scrolling to anchor links.
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
Animate on scroll library
🛤 Detection of elements in viewport & smooth scrolling with parallax.
Quick Overview
zoom.js is a lightweight JavaScript library that enables smooth image zooming functionality on web pages. It allows users to click on images to zoom in and out, providing an interactive and engaging viewing experience without the need for complex setups or dependencies.
Pros
- Simple and easy to implement
- Lightweight with no external dependencies
- Customizable zoom behavior and styling
- Works well with responsive designs
Cons
- Limited to image zooming only
- May not be suitable for complex image galleries or sliders
- Lacks advanced features like touch gestures or multi-image support
- Not actively maintained (last update was in 2018)
Code Examples
Basic usage:
// Initialize zoom on all images with class 'zoomable'
zoom('.zoomable');
Customizing zoom options:
zoom('.zoomable', {
scale: 2, // Set zoom scale
transitionDuration: 300, // Set transition duration in milliseconds
backgroundColor: '#000' // Set background color when zoomed
});
Programmatically trigger zoom:
const zoomInstance = zoom('.zoomable');
const image = document.querySelector('.zoomable');
// Zoom in
zoomInstance.zoomIn(image);
// Zoom out
zoomInstance.zoomOut();
Getting Started
- Include the zoom.js script in your HTML file:
<script src="https://unpkg.com/zoom.js@0.0.2/dist/zoom.min.js"></script>
- Add the 'zoomable' class to images you want to make zoomable:
<img src="example.jpg" class="zoomable" alt="Zoomable Image">
- Initialize zoom in your JavaScript:
document.addEventListener('DOMContentLoaded', function() {
zoom('.zoomable');
});
That's it! Your images should now be zoomable when clicked.
Competitor Comparisons
A lightweight script to animate scrolling to anchor links.
Pros of smooth-scroll
- Broader functionality: Handles smooth scrolling to any element, not just image zooming
- More actively maintained: Last updated more recently with regular commits
- Better documentation: Includes detailed API docs and examples
Cons of smooth-scroll
- Larger file size: More features mean a slightly bigger footprint
- Less specialized: May include unnecessary features if only image zooming is needed
- More complex setup: Requires more configuration options compared to zoom.js
Code Comparison
zoom.js:
zoom.to({
element: document.querySelector('img'),
padding: 20,
callback: function () {
console.log('Zoom complete');
}
});
smooth-scroll:
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 500,
speedAsDuration: true,
easing: 'easeInOutCubic'
});
scroll.animateScroll(document.querySelector('#target'));
Both libraries offer simple APIs for their respective functionalities. zoom.js focuses on image zooming with minimal setup, while smooth-scroll provides more options for customizing scroll behavior across various elements.
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
Pros of fullPage.js
- More comprehensive solution for creating full-screen scrolling websites
- Offers a wide range of customization options and callbacks
- Supports touch devices and responsive design out of the box
Cons of fullPage.js
- Larger file size and potentially more complex to implement
- May have a steeper learning curve for beginners
- Requires jQuery (unless using the vanilla JS version)
Code Comparison
zoom.js:
zoom.to({
element: document.querySelector('.zoomable'),
padding: 20,
callback: function() {
console.log('Zoom complete');
}
});
fullPage.js:
new fullpage('#fullpage', {
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke'],
onLeave: function(origin, destination, direction) {
console.log('Section ' + origin.index + ' left');
}
});
Summary
While zoom.js focuses specifically on zooming functionality for elements, fullPage.js provides a complete solution for creating full-screen scrolling websites. fullPage.js offers more features and customization options but comes with a larger file size and potential complexity. zoom.js is simpler and more lightweight, ideal for projects that only require zooming capabilities. The choice between the two depends on the specific needs of your project and the desired user experience.
Animate on scroll library
Pros of AOS
- More comprehensive animation library with various effects
- Easier to implement for multiple elements
- Better documentation and examples
Cons of AOS
- Larger file size and potentially heavier on performance
- Less focused, not specialized for zooming functionality
Code Comparison
AOS:
<div data-aos="fade-up" data-aos-duration="3000">
This element will fade up
</div>
zoom.js:
<img src="image.jpg" data-action="zoom" />
Summary
AOS is a more versatile animation library that offers various effects beyond just zooming, making it suitable for projects requiring diverse animations. It's easier to implement for multiple elements and has better documentation. However, this comes at the cost of a larger file size and potentially heavier performance impact.
zoom.js, on the other hand, is a lightweight and focused library specifically for image zooming. It's simpler to use for its intended purpose but lacks the variety of animations that AOS provides.
The choice between the two depends on the project requirements. If you need a range of animations, AOS is the better choice. For simple image zooming functionality, zoom.js might be more appropriate due to its lightweight nature and specific focus.
🛤 Detection of elements in viewport & smooth scrolling with parallax.
Pros of Locomotive Scroll
- Offers smooth scrolling with parallax effects and custom easing
- Provides advanced features like scroll-triggered animations and horizontal scrolling
- Actively maintained with regular updates and a large community
Cons of Locomotive Scroll
- Larger file size and potentially higher performance overhead
- Steeper learning curve due to more complex API and configuration options
Code Comparison
Zoom.js:
zoom.to({
element: document.querySelector('.zoomable'),
padding: 20,
callback: function() {
console.log('Zoom complete');
}
});
Locomotive Scroll:
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true,
multiplier: 1,
lerp: 0.1
});
scroll.on('scroll', (obj) => {
// Handle scroll event
});
Summary
Locomotive Scroll is a more feature-rich and actively maintained library, offering advanced scrolling effects and animations. It's ideal for complex, interactive websites but may be overkill for simpler projects. Zoom.js, on the other hand, is a lightweight solution focused specifically on image zooming functionality, making it easier to implement for basic zoom requirements but lacking the versatility of Locomotive Scroll.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
zoom.js
An image zooming plugin, as seen on older versions of medium.com. This
project is a port of fat/zoom.js
but has no jQuery or Bootstrap
dependencies.
Version 4 is written in TypeScript, has a new API, includes typings, and has no dependencies.
npm package: https://www.npmjs.com/package/@nishanths/zoom.js
Branches
- v4: The default branch. It contains code for version 4, which is the current major version.
- master: Frozen and no longer maintained. The final version on this branch is 3.1.0.
No API backwards compatibility guarantees even within the same major version, so, if necessary, pin an exact version and upgrade manually.
Demo
https://nishanths.github.io/zoom.js
Zoom on an image by clicking on it.
Dismiss the zoom by either clicking again on the image, clicking the overlay
around the image, scrolling away, or hitting the esc
key.
Usage
Install the package:
npm i @nishanths/zoom.js
Link the src/zoom.css
file in your application:
<link href="zoom.css" rel="stylesheet">
Import and use symbols from the package:
import { zoom } from "@nishanths/zoom.js"
The js files in the dist
directory are ES modules.
Note that the package.json
for the package specifies the module
property but
not the main
property. You may need a module-aware tool to correctly include
the package in your bundle. For further reading, see this Stack Overflow
answer as a starting point.
Building locally
To build the package locally, clone the repo, then run the following from the root directory:
% make deps
% make build
This should write files into the dist
directory.
Documentation
API
// Config is the configuration provided to the zoom function.
export type Config = {
// padding defines the horizontal space and the vertical space around
// the zoomed image.
padding: number
// paddingNarrow is similar to the padding property, except that it is
// used if the viewport width is too narrow, such that the use of the
// larger padding property may produce poor results.
//
// paddingNarrow should be <= padding, however this is not validated.
paddingNarrow: number
// dismissScrollDelta defines the vertical scrolling threshold at which
// the zoomed image is dismissed by user interaction. The value is the
// pixel difference between the original vertical scroll position and
// the subsequent vertical scroll positions.
dismissScrollDelta: number
// dismissTouchDelta defines the vertical touch movement threshold at
// which the zoomed image is dismissed by user interaction. The value is
// the pixel difference between the initial vertical touch position and
// subsequent vertical touch movements.
dismissTouchDelta: number
}
// zoom zooms the specified image.
//
// The image will not be zoomed if its naturalWidth or naturalHeight property
// is 0 (usually because the values are unavailable).
export function zoom(img: HTMLImageElement, cfg: Config = defaultConfig): void
// dismissZoom programmatically dismisses the presently active zoom. It is a
// no-op if there is no zoom active at the time of the call.
export function dismissZoom(): void
Examples
The following TypeScript program makes all existing <img>
elements on the page
zoomable. Images are zoomed when they are clicked.
import { zoom } from "@nishanths/zoom.js"
function setup(img: HTMLImageElement) {
img.classList.add("zoom-cursor") // use "cursor: zoom-in" style on hover
img.addEventListener("click", () => { zoom(img) })
}
const imgs = [...document.querySelectorAll("img")]
imgs.forEach(img => { setup(img) })
The following TypeScript program customizes only certain properties of a
Config
, keeping the defaults for the other properties.
import { Config, defaultConfig } from "@nishanths/zoom.js"
const customConfig: Config = {
...defaultConfig,
padding: 30,
}
Notes
All CSS class names used by the package are prefixed with zoom-
.
Add the class name zoom-cursor
to a zoomable <img>
element to use an
zoom-in
cursor instead of the default cursor for the
image.
The program appends the DOM node for the overlay element, which appears when an
image is zoomed, to the end of document.body
.
While an image is zoomed, the program listens for click
events on
document.body
with useCapture
set to true
, and the handler function calls
e.stopPropagation()
. This may interfere with other click
event handlers on
the page. The event listener is removed when the zoom is dismissed.
When an image is zoomed, its transform
style is replaced with a new value that
is necessary for zooming. The old transform
is restored when the zoom is
dismissed.
Browser compatibility
Popular web browser versions released after 2016 should be supported by this package. Please read the source code for exact details.
License
The software in this repository is based on the original fat/zoom.js
project. The copyright notices and license notices from the original project are
present in the LICENSE.original
file at the root of this repository.
New source code and modifications in this repository are licensed under an MIT
license. See the LICENSE
file at the root of the repository.
Top Related Projects
A lightweight script to animate scrolling to anchor links.
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
Animate on scroll library
🛤 Detection of elements in viewport & smooth scrolling with parallax.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot