baseframe-js
Advanced tools
baseframe-js - npm Package Compare versions
Comparing version 4.10.0 to 4.11.0
@@ -24,3 +24,2 @@ import type { Selector } from "cash-dom"; | ||
| navLeavingCss: string; | ||
| submenuBtnCss: string; | ||
| navLeavingDelay: number; | ||
@@ -27,0 +26,0 @@ hoverCss: string; |
@@ -17,4 +17,3 @@ import $ from 'cash-dom'; | ||
| navLeavingDelay: 800, | ||
| hoverCss: 'hover', | ||
| submenuBtnCss: 'btn-nav--mb-submenu i i-arrow-b' | ||
| hoverCss: 'hover' | ||
| }; | ||
@@ -21,0 +20,0 @@ export default class NavDesktop { |
@@ -6,3 +6,5 @@ import { Cash } from "cash-dom"; | ||
| speed?: number; | ||
| zSpeed?: number; | ||
| axis?: axis; | ||
| zAxis?: boolean; | ||
| relativeElem?: false | Cash; | ||
@@ -16,6 +18,9 @@ $heightElem?: Cash | null; | ||
| scrollMaxPxStop?: number; | ||
| zScrollMaxPxStop?: number; | ||
| } | ||
| export interface IParallaxDefaults { | ||
| speed: number; | ||
| zSpeed: number; | ||
| axis: axis; | ||
| zAxis: boolean; | ||
| relativeElem: false | Cash; | ||
@@ -29,2 +34,3 @@ $heightElem: Cash | null; | ||
| scrollMaxPxStop: number; | ||
| zScrollMaxPxStop: number; | ||
| } | ||
@@ -45,7 +51,11 @@ export default class Parallax { | ||
| speed: number; | ||
| zSpeed: number; | ||
| bgFillRatio: number; | ||
| bgFill: boolean; | ||
| axis: axis; | ||
| zAxis: boolean; | ||
| outStop: number; | ||
| scrollMaxPxStop: number; | ||
| zScrollMaxPxStop: number; | ||
| lastZSpeed: number; | ||
| minWidthIfSet: boolean; | ||
@@ -66,2 +76,3 @@ maxWidthIfSet: boolean; | ||
| get _speed(): number; | ||
| get _zSpeed(): number; | ||
| get _relElem(): Cash; | ||
@@ -68,0 +79,0 @@ } |
| import $ from 'cash-dom'; | ||
| import parseObjectFromString from './util/parse-object-from-string'; | ||
| import elemData from "./util/elem-data"; | ||
| const VERSION = "1.1.0"; | ||
| const VERSION = "1.2.0"; | ||
| const DATA_NAME = 'Parallax'; | ||
@@ -9,3 +9,5 @@ const EVENT_NAME = 'parallax'; | ||
| speed: 7, | ||
| zSpeed: 5, | ||
| axis: 'y', | ||
| zAxis: false, | ||
| relativeElem: false, | ||
@@ -17,2 +19,3 @@ $heightElem: null, | ||
| scrollMaxPxStop: 5000, | ||
| zScrollMaxPxStop: 2000, | ||
| minWidth: null, | ||
@@ -40,7 +43,11 @@ maxWidth: null | ||
| speed; | ||
| zSpeed; | ||
| bgFillRatio; | ||
| bgFill; | ||
| axis; | ||
| zAxis; | ||
| outStop; | ||
| scrollMaxPxStop; | ||
| zScrollMaxPxStop; | ||
| lastZSpeed; | ||
| minWidthIfSet; | ||
@@ -97,8 +104,12 @@ maxWidthIfSet; | ||
| _.speed = _._speed; | ||
| _.zSpeed = _._zSpeed; | ||
| _.bgFillRatio = _._bgFillRatio; | ||
| _.bgFill = _.params.bgFill; | ||
| _.axis = _.params.axis; | ||
| _.zAxis = _.params.zAxis; | ||
| _.$relElem = _._relElem; | ||
| _.outStop = _.params.outStop; | ||
| _.scrollMaxPxStop = _.params.scrollMaxPxStop; | ||
| _.zScrollMaxPxStop = _.params.zScrollMaxPxStop; | ||
| _.lastZSpeed = 0; | ||
| _.initOffsetSet = false; | ||
@@ -124,3 +135,3 @@ _.minWidthIfSet = _.params.minWidth ? _.winWidth > _.params.minWidth : true; | ||
| const elemTop = _.$relElem.offset().top; | ||
| const scrollTop = window.pageYOffset; | ||
| const scrollTop = window.scrollY || window.pageYOffset; | ||
| const withinMinAndMaxIfSet = (_.minWidthIfSet && _.maxWidthIfSet); | ||
@@ -130,2 +141,3 @@ if (_._isScrolledIntoView(elemTop, scrollTop) && withinMinAndMaxIfSet) { | ||
| const speed = (speedInZeroInView * _.speed); | ||
| const zSpeed = (speedInZeroInView * _.zSpeed); | ||
| const bgFillRatio = _.bgFillRatio; | ||
@@ -140,20 +152,10 @@ if (!_.initOffsetSet && _.initiallyInView) { | ||
| return; | ||
| const cssParams = (_.axis === 'y') ? | ||
| !_.bgFill ? | ||
| { | ||
| 'transform': `translate3d(0,${speed - _.initOffset}px,0)` | ||
| } | ||
| : { | ||
| 'transform': `translate3d(0,${(speed - _.initOffset) - bgFillRatio}px,0)`, | ||
| 'height': `calc(100% + ${bgFillRatio}px)` | ||
| } : | ||
| !_.bgFill ? | ||
| { | ||
| 'transform': `translate3d(${speed - _.initOffset}px,0,0)` | ||
| } : | ||
| { | ||
| 'transform': `translate3d(${(speed - _.initOffset) - bgFillRatio}px,0,0)`, | ||
| 'width': `calc(100% + ${bgFillRatio}px)`, | ||
| }; | ||
| _.$element.css(cssParams); | ||
| const speedPx = speed - _.initOffset; | ||
| const zSpeedPx = _.params.zAxis ? ((Math.abs(_.lastZSpeed) < _.zScrollMaxPxStop) ? zSpeed - _.initOffset : _.lastZSpeed) : 0; | ||
| const translateParams = _.axis === 'y' ? `0,${speedPx}px,${zSpeedPx}px` : `${speedPx}px,0,${zSpeedPx}px`; | ||
| _.lastZSpeed = zSpeedPx; | ||
| _.$element.css({ | ||
| transform: `translate3d(${translateParams})`, | ||
| height: _.bgFill ? `calc(100% + ${bgFillRatio}px)` : null | ||
| }); | ||
| _.effectCleared = true; | ||
@@ -193,2 +195,6 @@ } | ||
| } | ||
| get _zSpeed() { | ||
| const _ = this; | ||
| return _.params.zSpeed / 100; | ||
| } | ||
| get _relElem() { | ||
@@ -195,0 +201,0 @@ const _ = this; |
| { | ||
| "name": "baseframe-js", | ||
| "version": "4.10.0", | ||
| "version": "4.11.0", | ||
| "description": "A suite of useful Javascript plugins and functions to help with Front-end Development on websites", | ||
@@ -5,0 +5,0 @@ "repository": { |
@@ -919,3 +919,3 @@ # Base_Frame Plugins & Functions | ||
| ### Features | ||
| This plugin is for parallaxing page elements (and yes background images). Use the `bgFill` option and it'll magically expand to the height of its container if using a background image. It uses the `translate3d` property as its more efficient than using a `top` or `left` as well as `requestAnimationFrame`. Can be used to move elements either with a Y or X axis. | ||
| This plugin is for parallaxing page elements (and yes background images). Use the `bgFill` option and it'll magically expand to the height of its container if using a background image. It uses the `translate3d` property as its more efficient than using a `top` or `left` as well as `requestAnimationFrame`. Can be used to move elements either with a Y or X axis, also a Z axis for zooming (use `perspective` CSS prop on parent to work). | ||
@@ -936,2 +936,5 @@ ### Settings | ||
| scrollMaxPxStop | number | 5000 | max an item can scroll. Make this less should you want it to stop prior to exiting the screen. Good for when you have content that it shouldn't overlap. | ||
| zAxis | boolean | false | Turns on a potential Z axis for zooming in (or out) of the element. | ||
| zSpeed | number | 5 | Zoom speed of the element. | ||
| zScrollMaxPxStop| number | 2000 | The maximum amount of pixels the Z axis can move. | ||
@@ -945,4 +948,4 @@ ### Example | ||
| <div class="container v-space"> | ||
| <div class="relative col"> | ||
| <div class="parallax-bg" data-parallax-options="{speed:-10, initOffset:true, bgFill: false, scrollMaxPxStop: 120}"> | ||
| <div class="relative col" style="perspective: 800px;"> | ||
| <div class="parallax-bg" data-parallax-options="{speed:-10, initOffset:true, bgFill: false, scrollMaxPxStop: 120, zAxis: true}"> | ||
| <img src="https://placehold.it/768x768/565656" alt="Placeholder" /> | ||
@@ -949,0 +952,0 @@ </div> |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.29%
230914
- Lines of code
- increased by0.38%
3951
- Number of lines in readme file
- increased by0.24%
1229