Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                div(data-scroll)
	div.smooth-scroll(data-scroll-content)
		section.space
		section.space
		section.society.e-hvh.e-wvw.e-rel
			.society__hold.e-hold.e-hp
				.inline.e-wp.e-hp
					.society__ctn-imgs


						.society__ctn-imgs__bigger.e-abs
							each list, index in['1','2','3','4','5','6']
								.society__ctn-imgs__travel__each.e-abs
									.society-hold-img.e-rel.e-hidden
										img(src="https://raw.githubusercontent.com/Efetivos/gallery/master/nicole/slider-nicole0"+list+".jpg", alt="").img-load.e-wp.e-hp.e-img-fit
										//-img(src="https://www.tvo.org/sites/default/files/media-library/Current%20Affairs/Shared%20Values/Article%20images/October%202018/Self%20portrait%201915.JPG").img-load.e-wp.e-hp.e-img-fit


						.society__ctn-imgs__smaller.e-abs
							each list, index in['1','2','3','4','5','6']
								.society__ctn-imgs__travel__each.e-abs
									.society-hold-img.e-rel.e-hidden
										img(src="https://raw.githubusercontent.com/Efetivos/gallery/master/nicole/slider-nicole0"+list+".jpg", alt="").img-load.e-wp.e-hp.e-img-fit
										//-img(src="https://www.dw.com/image/39599354_304.jpg").img-load.e-wp.e-hp.e-img-fit



					.society__texts
						.society__texts__circle.e-flex.e-color
							.ctn-texts
								.e-serif.t-soft Society
								span.t-soft SOMETHING

						.society__texts__parag
							p I am an outdoor design expert. I elevate walkways, gardens, yards and terraces with premium furniture and accessories that offer unparalleled comfort and design. I make for a seamless transition from inside to outdoors with high-quality, open-air arrangements that blend beautifully with your inspired approach to interior design. I prioritize personalized style, from the fabrics that swathe your seating to the convertible constructions of our adaptable designs. I am at once Jardin de Ville and exclusive brands such as Roda, Tonon, Joli and Royal Botania. I am many things.
							button.e-bold SEE PICTURES


							
							
		section.release-society
		section.space
		section.space


              
            
!

CSS

              
                // ALIAS MIXINS ALREADY INCLUDED //
\:root
	--color: #696169
	--soft: #DEDCDD
.t-soft
	color: var(--soft)
body
	background: var(--soft)
	color: var(--color)
	font-family: sans-serif

.e-hold
	margin: 0 auto
	width: 85.5vw


section.space
	height: 100vh
	width: 100vw

.release-society
	border-top: 1px solid red
	height: 100vh
	width: 100vw

.society
	height: 400vh

	&__hold
		display: flex
		left: 7.5vw
	
	.inline
		height: 100vh
		@include desk
		display: inline-flex
	
	&__ctn-imgs
		height: 100%
		width: 60%
	
		&__bigger
			margin-top: 10vh
		
			.society-hold-img
				width: 37vw
				height: 80vh
		
		
		&__smaller
			margin-top: 30vh
			margin-left: 30vw
		
			.society-hold-img
				height: 40vh
				width: 27vw		


	&__texts
		margin-left: 1%
		margin-top: 8vh
		z-index: 1
		width: 36%
	
		&__circle
			width: 205px
			height: 205px
			border-radius: 50%
			text-align: right
			
			.e-serif
				font-size: 28px
				text-transform: uppercase
			span
				font-size: 10px
		
		&__parag
			font-size: 13px
			text-align: justify
			margin-top: 22%
			width: 69%
			margin-left: 39%
	
			button
				margin-top: 25px
				text-decoration: underline
				color: var(--color)
				font-weight: bold
		
		

		
              
            
!

JS

              
                
console.clear();

let h = window.innerHeight
let w = window.innerWidth
let hPercent = (h / 100) //percentage height


let $eachWrapImgSocietyBigger = $('.society__ctn-imgs__bigger .society-hold-img'),
		$eachImgSocietyBigger =  $('.society__ctn-imgs__bigger .society-hold-img img'),
		$eachWrapImgSocietySmaller = $('.society__ctn-imgs__smaller .society-hold-img'),
		$eachImgSocietySmaller =  $('.society__ctn-imgs__smaller .society-hold-img img'),
		$holdSociety = document.querySelector('.society__hold'),
		$Society = document.querySelector('.society'),
		$releaseSociety = document.querySelector('.release-society')
		
let boudRectSociety =  $('.society')[0].getBoundingClientRect().top // distance between pinElem. and top page
let distanceCounterSociety =  $('.release-society')[0].getBoundingClientRect().top  // distance between releaseEl. and top page
let totalSociety = (distanceCounterSociety ) - boudRectSociety //qtd of px to run animation (duration)

		
		let $circleSociety = document.querySelector('.society__texts__circle')
		
	let TweenRotateCircleSociety = new TimelineMax({ paused: true})
		.to($circleSociety, 1, {rotation: 360, transformOrigin: 'center center', ease: Power1.easeInOut})
		let TweenSociety = new TimelineMax({paused:true})
		// -1
		.to($eachWrapImgSocietyBigger.eq(-1), 1, {yPercent: -101, ease: Power1.easeInOut},0)
		.to($eachWrapImgSocietySmaller.eq(-1), 1, {yPercent: 101, ease: Power1.easeInOut},0)
		.to($eachImgSocietyBigger.eq(-1), 1, {yPercent: 101, ease: Power1.easeInOut},0)
		.to($eachImgSocietySmaller.eq(-1), 1, {yPercent: -101, ease: Power1.easeInOut},0)
		.add('eq2')
		.to($eachWrapImgSocietyBigger.eq(-2), 1, {yPercent: -101, ease: Power1.easeInOut}, 'eq2')
		.to($eachWrapImgSocietySmaller.eq(-2), 1, {yPercent: 101, ease: Power1.easeInOut}, 'eq2')
		.to($eachImgSocietyBigger.eq(-2), 1, {yPercent: 101, ease: Power1.easeInOut}, 'eq2')
		.to($eachImgSocietySmaller.eq(-2), 1, {yPercent: -101, ease: Power1.easeInOut}, 'eq2')
		.add('eq3')
		.to($eachWrapImgSocietyBigger.eq(-3), 1, {yPercent: -101, ease: Power1.easeInOut}, 'eq3')
		.to($eachWrapImgSocietySmaller.eq(-3), 1, {yPercent: 101, ease: Power1.easeInOut}, 'eq3')
		.to($eachImgSocietyBigger.eq(-3), 1, {yPercent: 101, ease: Power1.easeInOut}, 'eq3')
		.to($eachImgSocietySmaller.eq(-3), 1, {yPercent: -101, ease: Power1.easeInOut}, 'eq3')
		.add('eq4')
		.to($eachWrapImgSocietyBigger.eq(-4), 1, {yPercent: -101, ease: Power1.easeInOut}, 'eq4')
		.to($eachWrapImgSocietySmaller.eq(-4), 1, {yPercent: 101, ease: Power1.easeInOut}, 'eq4')
		.to($eachImgSocietyBigger.eq(-4), 1, {yPercent: 101, ease: Power1.easeInOut}, 'eq4')
		.to($eachImgSocietySmaller.eq(-4), 1, {yPercent: -101, ease: Power1.easeInOut}, 'eq4')
		.add('eq5')
		.to($eachWrapImgSocietyBigger.eq(-5), 1, {yPercent: -101, ease: Power1.easeInOut}, 'eq5')
		.to($eachWrapImgSocietySmaller.eq(-5), 1, {yPercent: 101, ease: Power1.easeInOut}, 'eq5')
		.to($eachImgSocietyBigger.eq(-5), 1, {yPercent: 101, ease: Power1.easeInOut}, 'eq5')
		.to($eachImgSocietySmaller.eq(-5), 1, {yPercent: -101, ease: Power1.easeInOut}, 'eq5')
		
		
/*let $eachTravelImgSculp = $('.sculptures__ctn-imgs__travel'),
		$animaSculpTravel = $('.js-sculp-anima'),
		heightEachImgSculp = $('.js-sculp-anima img').outerHeight(true)


let tlSculpOnScroll = new TimelineMax({paused:true})
	.to('.sculptures__ctn-imgs', 8, {yPercent: -115, ease: Power2.easeInOut})
	.to($animaSculpTravel, 8, {y: heightEachImgSculp * 1.40, ease: Power1.easeInOut},0)

console.log(heightEachImgSculp)
function animaSculp(){
	
}

$('body').click(function(){
	 animaSculp()
})







      let boudRectSociety =  $('.sculptures')[0].getBoundingClientRect().top // distance between pinElem. and top page
      let distanceCounter =  $('.release-sculp')[0].getBoundingClientRect().top  // distance between releaseEl. and top page
      let totalSociety = (distanceCounter + h) - boudRectSociety //qtd of px to run animation (duration)
*/
  
    //
    // Pin Works
    //-------------------------------------------------
  function pinned(scrolledSmoth){
  
      let sculpDistSociety =  $Society.getBoundingClientRect().top // dynamic distance between pinElem. and top page
      let topDistanceReleaseSociety =  $releaseSociety.getBoundingClientRect().top //dynamic  distance between releaseEl. and top page     

        //pin pinEl. while viewport watching these element
        if(sculpDistSociety < 0 && topDistanceReleaseSociety >  0 ){
          
          //transform distance in percentage ( 0 >> 0.5 >> 1)
          let percentageDurationSociety  = (scrolledSmoth - boudRectSociety)  / totalSociety
          TweenMax.set($holdSociety, { position: 'fixed', top: scrolledSmoth, ease: Linear.easeNone })
          
          //Anime duration (.progress) based in percetange of 
          TweenMax.set(TweenSociety, { progress: percentageDurationSociety})
          TweenMax.set(TweenRotateCircleSociety, { progress: percentageDurationSociety})
          console.log(  percentageDurationSociety )

        }
        

} //close pinned 

        

function smoothScroll() {
  if($(window).width() > 80) {
  
    const math = {
        lerp: (a, b, n) => {
            return (1 - n) * a + n * b
        },
        norm: (value, min, max) => {
              return (value - min) / (max - min)
        }
      
    }
    
    const config = {
      height: window.innerHeight,
      width: window.innerWidth
    }
    
    class Smooth {
      constructor() {
        this.bindMethods()
    
        this.data = {
          ease: 0.045,
          current: 0,
          last: 0
        }
    
        this.dom = {
          el: document.querySelector('[data-scroll]'),
          content: document.querySelector('[data-scroll-content]')
        }
    
        this.rAF = null
    
        this.init()
      }
    
      bindMethods() {
        ['scroll', 'run', 'resize']
        .forEach((fn) => this[fn] = this[fn].bind(this))
      }
    
      setStyles() {
        this.dom.el.style.position = 'fixed';
        this.dom.el.style.top = 0;
        this.dom.el.style.left = 0;
        this.dom.el.style.height = '100%'
        this.dom.el.style.width = '100%'
        this.dom.el.style.overflow = 'hidden'   
      }
    
      setHeight() {
        document.body.style.height = `${this.dom.content.offsetHeight}px`
      }
    
      resize() {
        this.setHeight()
        this.scroll()
      }
    
    
    
      scroll() {
        this.data.current = window.scrollY
      }
    
      run() {
        this.data.last = math.lerp(this.data.last, this.data.current, this.data.ease)
        this.data.last = Math.floor(this.data.last * 100) / 100
        
        const diff = this.data.current - this.data.last
        const acc = diff / config.width
        const velo =+ acc
        
          //console.log(velo)
        this.dom.content.style.transform = `translate3d(0, -${this.data.last.toFixed(0)}px, 0) `
        
        
        //call pinned
        pinned(this.data.last.toFixed(0))
        
        this.requestAnimationFrame()
      }
        
    
      on(requestAnimationFrame = true) { 
        this.setStyles()
        this.setHeight()
        this.addEvents()
    
        requestAnimationFrame && this.requestAnimationFrame()
      }
    
      off(cancelAnimationFrame = true) {
        cancelAnimationFrame && this.cancelAnimationFrame()
    
        this.removeEvents()
      }
    
      requestAnimationFrame() {
        this.rAF = requestAnimationFrame(this.run)
      }
    
      cancelAnimationFrame() {
        cancelAnimationFrame(this.rAF)
      }
    
      destroy() {
        document.body.style.height = ''
    
        this.data = null
    
        this.removeEvents()
        this.cancelAnimationFrame()
      }
    
      resize() {
        this.setHeight()
      }
    
      addEvents() {
        window.addEventListener('resize', this.resize, { passive: true })
        window.addEventListener('scroll', this.scroll, { passive: true })
      }
    
      removeEvents() {
        window.removeEventListener('resize', this.resize, { passive: true })
        window.removeEventListener('scroll', this.scroll, { passive: true })
      }
    
      init() {
        this.on()
      }
    }
    const smooth = new Smooth()
  }
}//close menu


smoothScroll() 
	

              
            
!
999px

Console