czajkovsky

.container
  .photo
  

czajkovsky

.box
  .child.child--top
  .child.child--middle
  .child.child--bottom

czajkovsky

.box

czajkovsky

.box

czajkovsky

.box

czajkovsky

.klass {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
}

czajkovsky

W sporym uproszczeniu wygląda to tak:
* Początkowo wysokość .main-line.active to 0px.
* Scrollując sprawdzam czy obecna wartość scrolla jest większa od górnej krawędzie .main-line
* Jeśli tak, to zwiększam wysokość .main-line.active

Punkty zaczepienia:
* http://api.jquery.com/scroll/
* http://api.jquery.com/scrolltop/

czajkovsky

%ul.menu
  %li.menu__item
    %a{ href: '#1' }
  %li.menu__item
    %a{ href: '#2' }
  %li.menu__item
    %a{ href: '#3' }
  %li.menu__item
    %a{ href: '#4' }
  %li.menu__item

czajkovsky

%body
  %span.heart
    %span.heart-full
    %span.heart-spot
    %span.heart-empty

czajkovsky

.animation-box