Offset feature #17

Activity

1. adeoh commented on May 4, 2018

   

   adeoh

   on May 4, 2018

   More actions

   Also could work to add points in between the actual relative position values
2. sjelfull commented on Nov 22, 2018

   

   sjelfull

   on Nov 22, 2018

   More actions

   Any idea on how to hack this in?
3. pngarland commented on Dec 12, 2018

   

   pngarland

   on Dec 12, 2018

   More actions

   @sjelfull this worked for me: 8dbca50
4. electerious commented on Dec 20, 2018

   

   electerious

   on Dec 20, 2018

   OwnerAuthor

   More actions

   Recommended solution

   A custom anchor can be used to adjust from and to of an element.

   

   Anchor = Orange; Elem = Gray

   .elem {
   	position: relative;
   }
   
   .anchor {
   	position: absolute;
   	top: -100px;
   	left: 0;
   	right: 0;
   	bottom: -100px;
   	pointer-events: none;
   
   	/* For debugging */
   	right: 50%;
   	background: orange;
   	opacity: .5;
   }

   <div class="elem">
   	<div class="anchor"></div>
   </div>

   basicScroll.create({
   	elem: document.querySelector('.anchor'),
   	from: 'top-bottom',
   	to: 'bottom-top',
   	direct: document.querySelector('.elem'),
   	props: {
   		'--opacity': {
   			from: .01,
   			to: .99
   		}
   	}
   })

   This will change --opacity from 0.01 to 0.99. It starts when the top of the anchor is at the bottom of the viewport and ends when the bottom of the anchor is at the top of the viewport. The anchor starts 100px in front of the element and 100px after the element thanks to the size specified in the CSS.

   See direct mode for more details.
5. electerious

   closed this as completedon Dec 20, 2018
6. electerious

   added a commit that references this issue on Dec 20, 2018

   Add links to recommended viewport and offset positions #17 #26

   5653f3f