Mouse Position Background Focus Effect

index.html

<div id="blur-layer">
  <div id="image-layer"></div>
</div>

<div id="static-image"></div>

Mouse Position Background Focus Effect.markdown

Mouse Position Background Focus Effect

A little demo of a technique I'm working on for a client to draw attention towards the center of the screen.

A Pen by Jake Albaugh on CodePen.

License.

script.coffee

# handling transforms
transform = (elem, transform) ->
  elem.style.webkitTransform = transform
  elem.style.transform = transform
  
# handling blur and fade
blur_fade = (elem, blur, fade) ->
  elem.setAttribute 'style', '-webkit-filter: blur(' + blur + '); filter: blur(' + blur + '); opacity: ' + fade + ';'

# window vars
win_w = window.innerWidth
win_h = window.innerHeight
center_x = win_w / 2
center_y = win_h / 2
max_x = win_w * 0.04
max_y = win_h * 0.04
max_z = 30

# style vars
perspective = 1200
max_blur = 300
min_opacity = 0.75
blur_throttle = 8
# max fade down from 1
fade_length = 1 - min_opacity 

# selections
$image_layer = document.getElementById 'image-layer'
$blur_layer = document.getElementById 'blur-layer'

#mouse move handler
mouse_move_handler = (mouse_x, mouse_y, ratio_x, ratio_y) ->
  
  # build transform string
  transform_val = 'perspective(' + perspective + ') translate3d(' + (max_x * ratio_x) + 'px, '+ (max_y * ratio_y) + 'px, ' + (max_x * ratio_x) + 'px)'
  
  # transform on the image layer
  transform $image_layer, transform_val
  
  # blur amount for the blur layer
  blur_px = ( Math.abs( mouse_x - center_x ) / center_x * blur_throttle ) + 'px'
  
  # fade amount for the blur layer
  fade_i = 1 - (fade_length * ( Math.abs( mouse_x - center_x ) / center_x )) 
  
  # blur fade on the blur layer
  blur_fade $blur_layer, blur_px, fade_i

  
  
# on mouse move
document.addEventListener 'mousemove', ((event) ->
  
  # ie fix
  event = window.event  if window.event

  # mouse x & y
  mouse_x = event.clientX
  mouse_y = event.clientY
  
  # ratio from center on x and y axis
  ratio_x = 1 - (mouse_x / center_x)
  ratio_y = 1 - (mouse_y / center_y)
  
  # call mouse move handler
  mouse_move_handler mouse_x, mouse_y, ratio_x, ratio_y
  
  return
), false

style.sass

// image offset around window edge
$img-offset: 10%
#image-layer
  position: absolute
  display: block

  top: $img-offset * -1
  left: $img-offset * -1
  width: 100% + ($img-offset * 2)
  height: 100% + ($img-offset * 2)
  
  opacity: 0.3
  transform-origin: 50% 50%
  
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/celebration.jpg")
  background-position: center
  background-size: cover
  
  

// global style
html, body
  height: 100%
  width: 100%
body
  background-color: #121212
  overflow: hidden

// center image
#static-image
  display: block
  position: absolute
  height: 200px
  width: 200px
  top: 50%
  left: 50%
  transform: translate(-50%,-50%)
  border-radius: 50%
  box-shadow: 0px 0px 12px rgba(0,0,0,0.2)
  overflow: hidden

  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/profile_pic.jpg)
  background-repeat: no-repeat
  background-size: cover

  transition: opacity 400ms ease-in-out
  cursor: pointer
  opacity: 0.8
    
  &:hover
    opacity: 1