Floating Title Experiment

Floating Title Experiment.markdown

Floating Title Experiment

A title that gives the appearance of floating in the ocean

Original code base from Manuel Ro's codepen

A Pen by James Freund on CodePen.

License.

index.html

<div class="container">
  <canvas id="canvas" class="floating">
  </canvas>
</div>
<div class="container">
  <div class="cover floatingAlternate">
    <h1 class="deepshadow">Text Here</h1>
  </div>
</div>

script.js

"use strict";

onloadDo = () ->
  # Canvas settings
  canvas = document.getElementById 'canvas'
  paper.setup canvas
  
  # Getting the view
  view = paper.project.view

  # The fun part
  paths = new paper.Group

  addPoints = (path, quantity) ->
    # Opening point
    path.add view.bounds.bottomLeft
    
    # Middle points
    for i in [-1..quantity+1] by 1
      x = view.viewSize.width/quantity * i
      y = view.viewSize.height / 1.618
      path.add new paper.Point x, y
      
    # Closing point
    path.add view.bounds.bottomRight
    
  addPath = (quantity, color, opacity) ->
    path = new paper.Path()
    path.fillColor = color
    path.opacity = opacity
    
    addPoints path, quantity
    path.smooth()
    
    path
    
  animatePath = (path, event, index) ->
    for segment, i in path.segments
      if i > 0 and i < path.segments.length - 1
        sin = Math.sin event.time * 3 + i - index
        segment.point.y = sin * 15 + view.viewSize.height / 1.618 +  index * 15
    
  # Creating 4 paths
  n = 8
  opacity = 1 / (n/2)
  for i in [1..n] by 1
    path = addPath 8-i, '#21f8f6', i * opacity
    path.position.y += 25 * i
    paths.addChild path
    
  # View events
  view.onFrame = (event) ->
    for path, i in paths.children
      animatePath path, event, i
    
  # Logs
  console.log '###'
  
  # Draw results
  view.draw()
    
  null

  
# ----- onload do -----
window.onload = onloadDo

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.23/paper-full.js"></script>

style.css

html, body {
  height: 100%;
  text-align: center;
  background-color: #21f8f6;
}

.container {
  height:100%;
  width:100%;
  position:absolute;
}

.cover {
  padding:50px;
}

.cover h1 {
  color: #21f8f6;
    background-color: none;
    letter-spacing: .1em;
    text-shadow: 
      -1px -1px 1px #fff, 
      2px 2px 1px #21f8f6;
}

canvas#canvas {
  color:black;
  background-color: #dbfeff;
  border-radius: 100%;
  position: relative;
  //transform: translateY(-50%);
  transition: all 0.5s ease-in-out;
  height:500px;
  width:500px;
  // border:3px dotted #21f8f6;
}

.floating{
    -webkit-animation-name: Floatingx;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floating;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
}

.floatingAlternate{
    -webkit-animation-name: FloatingxAlternate;
    -webkit-animation-duration: 2.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: FloatingAlternate;
    -moz-animation-duration: 2.5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes Floatingx{
    from {-webkit-transform:translate(0, 0px);}
    65% {-webkit-transform:translate(0, 15px);}
    to {-webkit-transform: translate(0, -0px);    }    
}
    
@-moz-keyframes Floating{
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(0, 15px);}
    to {-moz-transform: translate(0, -0px);}    
}

@-webkit-keyframes FloatingxAlternate{
    from {-webkit-transform:translate(0, 0px);}
    60% {-webkit-transform:translate(0, 33px);}
    to {-webkit-transform: translate(0, -0px);    }    
}
    
@-moz-keyframes FloatingAlternate{
    from {-moz-transform:translate(0, 0px);}
    60% {-moz-transform:translate(0, 33px);}
    to {-moz-transform: translate(0, -0px);}    
}

h1 {
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size: 76px;
  padding: 80px 50px;
  text-align: center;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}