❤
npm
Sign UpSign In

move-into-view

0.1.0 • Public • Published

moveIntoView() shim (demo, animated demo)

Build Status Coveralls npm version license Standard - JavaScript Style Guide semantic-release

moveIntoView() is such as scrollIntoView() Element shim but without scrolling, it move element into aspect ratio based position instead. Very useful for css driven scroll animations instead of heavy cpu based animations often used for scrolls.

Schema

Installation

Using npm:

npm install move-into-view

CDN version:

minified:
 
<script src="https://unpkg.com/move-into-view@latest/miw.min.js"></script>
 
debug
<script src="https://unpkg.com/move-into-view@latest/miw.js"></script>

Usage

html markup for example

 </style>
 
  <div class="parent">
    <div class="wrapper">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div id="center-me" class="child"></div>
      <div class="child"></div>
    </div>
  </div>

shim usage example

 document.getElementById('center-me').moveIntoView() // both x and y
 document.getElementById('center-me').moveIntoView({x: 0})
 document.getElementById('center-me').moveIntoView({y: 0.3})
 document.getElementById('center-me').moveIntoView({x: 1})

Commonjs usage:

var MoveIntoView = require('move-into-view');
 
MoveIntoView(childElement).move.x(0.3);
MoveIntoView(childElement).move.y(1);
MoveIntoView(childElement).move.both(1);

Animate it using css:

  .wrapper {
    transition: left .2s ease; /* anything */
  }

Only calculated position without applying it into element:

MoveIntoView(childElement).position(); // default 0.5 0.5
MoveIntoView(childElement).position(1); // x: 1  y default 0.5
 
MoveIntoView(childElement).position(0.5, 0.5); 
 
// returns { x: Number, y: Number }

License

MIT 2017 Svetlana Linuxenko

Readme

Keywords

Package Sidebar

Install

npm i move-into-view

Repository

github.com/linuxenko/move-into-view

Homepage

github.com/linuxenko/move-into-view#readme

Weekly Downloads

27

Version

0.1.0

License

MIT

Unpacked Size

16.7 kB

Total Files

7

Last publish

Collaborators

  • linuxenko
Try on RunKit
Report malware