Smooth scroll in ff

nosov33 · May 27, 2014 · ce6dfc7 · ce6dfc7
1 parent c8eb3f7
commit ce6dfc7
Show file tree

Hide file tree

Showing 10 changed files with 290 additions and 107 deletions.
diff --git a/coffee/maxmertkit.coffee b/coffee/maxmertkit.coffee
@@ -304,6 +304,15 @@ class MaxmertkitHelpers
 		el.style.oTransform = transform
 		el.style.transform = transform
 
+	_setCSSFilter: ( el, filter ) ->
+		el = el or @el
+
+		el.style.webkitFilter = filter
+		el.style.mozFilter = filter
+		el.style.msFilter = filter
+		el.style.oFilter = filter
+		el.style.filter = filter
+
 	_setCSSOpacity: ( el, opacity ) ->
 		el = el or @el
 

diff --git a/coffee/wall.coffee b/coffee/wall.coffee
@@ -21,24 +21,26 @@ class Wall extends MaxmertkitHelpers
 			# String; type of user insteractive
 			kind: @el.getAttribute( 'data-kind' ) or _name
 
-			# String; selector of the scrolling block
-			# target: @el.getAttribute( 'data-target' ) or 'body'
-
-			# Number; in px, vertical offset from the top
-			# offset: @el.getAttribute( 'data-offset' ) or 5
-
 			# String; selector for the scrolling background element. For example figure or video or #video-id
 			target: @el.getAttribute( 'data-target' ) or '.-thumbnail'
 
+			# String; selector for the header in scrolling element.
 			header: @el.getAttribute( 'data-target' ) or '.-header'
+
+			# Boolean; hide header while scrolling
 			headerFade: @el.getAttribute( 'data-fade' ) or yes
 
-			# Number between 0 and 1; 0 – element stands, 1 – element scrolls as usual
+			# Number between 0 and 1; 1 – element stands, 0 – element scrolls as usual
 			speed: @el.getAttribute( 'data-speed' ) or 0.7
 
+			# Boolean; zoom element while scrolling
 			zoom: @el.getAttribute( 'data-zoom' ) or no
+
+			### Extrimely slow ###
+			# Blur element while scrilling down
+			# blur: @el.getAttribute( 'data-blur' ) or yes
 
-			# String; inside string should be measures like % or px
+			# String; height of the wall, inside should be measures like % or px
 			height: @el.getAttribute( 'data-height' ) or '100%'
 
 			# Boolean; on spying on mobile devices
@@ -94,10 +96,20 @@ class Wall extends MaxmertkitHelpers
 				when 'target'
 					@target = @el.querySelector @options.target
 
-			switch key
 				when 'header'
 					@header = @el.querySelector @options.header
 
+			### Extrimely slow ###
+				# when 'blur'
+				# 	if @blur? then @blur.parentNode.removeChild @blur
+				# 	if value
+				# 		target = @el.querySelector(@options.target)
+				# 		@noblur = target.querySelector('img')
+				# 		@blur = @noblur.cloneNode(true)
+				# 		@_setCSSFilter @blur, "blur(15px)"
+				# 		target.appendChild @blur
+
+
 			@options[key] = value
 			if typeof value is 'function' then @[key] = value
 
@@ -110,11 +122,6 @@ class Wall extends MaxmertkitHelpers
 			_beforedeactivate.call @, cb
 
 	activate: ->
-		# if typeof @options.delay is 'function'
-		# 	delay = @options.delay()
-		# else
-		# 	delay = @options.delay
-
 		@_addClass '-start--'
 		@_removeClass '-stop--'
 		@active = yes
@@ -127,24 +134,34 @@ class Wall extends MaxmertkitHelpers
 	refresh: ->
 		_windowSize = _getWindowSize()
 
-		if @options.height[@options.height.length - 1] is '%'
-			percent = parseInt(@options.height) / 100
-			@el.style.height = "#{_windowSize.height * percent}px"
+		if not @header?
+			if @options.height[@options.height.length - 1] is '%'
+				percent = parseInt(@options.height) / 100
+				@el.style.height = "#{_windowSize.height * percent}px"
+			else
+				@el.style.height = @options.height
 		else
-			@el.style.height = @options.height
-
+			if @options.height[@options.height.length - 1] is '%'
+				percent = parseInt(@options.height) / 100
+				@header.style.height = "#{_windowSize.height * percent}px"
+			else
+				@header.style.height = @options.height
+
+			@header.style.width = "#{_windowSize.width}px"
 
+
 		if _windowSize.width / _windowSize.height > 16 / 9
 			@target.style.width = "100%"
 			@target.style.height = "auto"
 		else
 			@target.style.width = "auto"
 			@target.style.height = "100%"
 
-		targetSize = _getTargetSize.call @
+		@targetSize = _getTargetSize.call @
 
-		if targetSize.width - _windowSize.width > 0 then @_setCSSTransform(@target, "translateX(-#{(targetSize.width - _windowSize.width)/2}px)") else if @target.style.transform isnt '' then @_setCSSTransform(@target, "translateX(0)")
+		if @targetSize.width - _windowSize.width > 0 then @_setCSSTransform(@target, "translateX(-#{(@targetSize.width - _windowSize.width)/2}px)") else if @target.style.transform isnt '' then @_setCSSTransform(@target, "translateX(0)")
 		# if targetSize.height - _windowSize.height > 0 then @_setCSSTransform(@target, "translateY(-#{(targetSize.height - _windowSize.height)/2}px)") else if @target.style.transform isnt '' then @_setCSSTransform(@target, "translateY(0)")
+
 
 		@spyParams =
 			offset: @_getPosition @el
@@ -153,6 +170,7 @@ class Wall extends MaxmertkitHelpers
 
 # ===============
 # PRIVATE METHODS
+
 _getTargetSize = ->
 	width: @_outerWidth @target
 	height: @_outerHeight @target
@@ -203,7 +221,8 @@ _getWindowSize = ->
 
 _onScroll = (event)  ->
 	_lastScrollY = if event.target.nodeName is '#document' then (document.documentElement && document.documentElement.scrollTop) or event.target.body.scrollTop else event.target.scrollTop
-	_requestTick.call @
+	@spy()
+	# _requestTick.call @
 
 _requestTick = ->
 	if not @ticking
@@ -219,31 +238,33 @@ _spy = ->
 		current = _lastScrollY - @spyParams.offset.top
 		percent = (1 - current / max) / 2
 
-		transform = "translateY(#{current * @options.speed}px)"
+		transform = "translateY(#{Math.round(current * @options.speed)}px) translateZ(0)"
+
+		if @targetSize.width - _windowSize.width > 0 then transform += " translateX(-#{(@targetSize.width - _windowSize.width)/2}px)" else if @target.style.transform isnt '' then transform += " translateX(0)"
 
 		if @options.zoom
 			transform += " scale(#{1 + percent})"
-		
+
 		@_setCSSTransform(@target, transform)
 
 		if @header?
 			if percent / 2 < 0.25
 				if not (@_hasClass('_top_') or @_hasClass('_bottom_'))
-					@_setCSSTransform(@header, "translateY(#{current / 2}px)")
+					@_setCSSTransform(@header, "translateY(#{Math.round(current / 2.5)}px) translateZ(0)")
 
 				if @_hasClass('_bottom_')
-					@_setCSSTransform(@header, "translateY(#{-current / 10}px)")
+					@_setCSSTransform(@header, "translateY(#{Math.round(-current / 10)}px) translateZ(0)")
 
 				if @_hasClass('_top_')
-					@_setCSSTransform(@header, "translateY(#{current / 1.1}px)")
+					@_setCSSTransform(@header, "translateY(#{Math.round(current / 1.1)}px) translateZ(0)")
 
-				@_setCSSOpacity(@header, percent * 2) if @options.headerFade
+				@_setCSSOpacity(@header, percent * 2.5) if @options.headerFade
 
-		# if not @active
-			# @activate()
-	# else
-	# 	if @active
-	# 		@deactivate()
+		### Extrimely slow ###
+		# if @options.blur
+		# 	@_setCSSOpacity(@noblur, percent * 2)
+
+		
 
 	@ticking = no
 

diff --git a/css/main.css b/css/main.css
@@ -18303,14 +18303,15 @@ a.-avatar {
   min-height: 480px;
   background-size: cover;
   overflow: visible;
-  display: table; }
+  display: block; }
   .-wall .-item {
     overflow: hidden;
     width: 100%;
-    height: 100%;
+    height: auto;
     position: relative;
-    display: table-cell;
-    vertical-align: middle; }
+    display: block;
+    vertical-align: middle;
+    min-height: 100%; }
     .-wall .-item > figure, .-wall .-item > video {
       top: 0;
       left: 0;
@@ -18321,11 +18322,18 @@ a.-avatar {
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none; }
+    .-wall .-item .-content {
+      position: relative;
+      padding-top: 25px;
+      padding-bottom: 25px; }
     .-wall .-item header, .-wall .-item .-header {
-      position: relative; }
-  .-wall._top_ .-item {
+      height: 100%;
+      position: relative;
+      display: table-cell;
+      vertical-align: middle; }
+  .-wall._top_ .-item header, .-wall._top_ .-item .-header {
     vertical-align: top; }
-  .-wall._bottom_ .-item {
+  .-wall._bottom_ .-item header, .-wall._bottom_ .-item .-header {
     vertical-align: bottom; }
 
 .-modal {

diff --git a/docs/css/main.css b/docs/css/main.css
@@ -18303,14 +18303,15 @@ a.-avatar {
   min-height: 480px;
   background-size: cover;
   overflow: visible;
-  display: table; }
+  display: block; }
   .-wall .-item {
     overflow: hidden;
     width: 100%;
-    height: 100%;
+    height: auto;
     position: relative;
-    display: table-cell;
-    vertical-align: middle; }
+    display: block;
+    vertical-align: middle;
+    min-height: 100%; }
     .-wall .-item > figure, .-wall .-item > video {
       top: 0;
       left: 0;
@@ -18321,11 +18322,18 @@ a.-avatar {
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none; }
+    .-wall .-item .-content {
+      position: relative;
+      padding-top: 25px;
+      padding-bottom: 25px; }
     .-wall .-item header, .-wall .-item .-header {
-      position: relative; }
-  .-wall._top_ .-item {
+      height: 100%;
+      position: relative;
+      display: table-cell;
+      vertical-align: middle; }
+  .-wall._top_ .-item header, .-wall._top_ .-item .-header {
     vertical-align: top; }
-  .-wall._bottom_ .-item {
+  .-wall._bottom_ .-item header, .-wall._bottom_ .-item .-header {
     vertical-align: bottom; }
 
 .-modal {

diff --git a/docs/js/app.js b/docs/js/app.js