#codevember Lorem Ipsum Bicycle

codevember-lorem-ipsum-bicycle.markdown

#codevember Lorem Ipsum Bicycle

A Pen by Anton Kuzniatsou on CodePen.

License.

index.haml

.carcass
  .chains
    .chain
      .chain__container
        .chain__content lorem ipsum dolor sit lorem ipsum dolor sit
    .chain.chain--bottom
      .chain__container
        .chain__content lorem ipsum dolor sit lorem ipsum dolor sit 
    .chain__wheel
      .wheel.wheel--chain
        - (1..50).each do |c|
          .wheel__elm.txt{:class => "wheel__elm--#{c}"}
        .wheel.wheel--inner
          - (1..50).each do |e|
            .wheel__elm.txt{:class => "wheel__elm--#{e}"}
        - (1..5).each do |s|
          .spoke{:class => "spoke--#{s}"} lorem ipsume oooo rsit amet co
        
  .wheel__container
    .wheel 
      - (1..50).each do |c|
        .wheel__elm.txt{:class => "wheel__elm--#{c}"}
      .wheel.wheel--inner
        - (1..50).each do |e|
          .wheel__elm.txt{:class => "wheel__elm--#{e}"}
      - (1..5).each do |s|
        .spoke{:class => "spoke--#{s}"} lorem ipsume oooo rsit amet co
    .wheel.wheel--front 
      - (1..50).each do |c|
        .wheel__elm.txt{:class => "wheel__elm--#{c}"}
      .wheel.wheel--inner
        - (1..50).each do |e|
          .wheel__elm.txt{:class => "wheel__elm--#{e}"}
      - (1..5).each do |s|
        .spoke{:class => "spoke--#{s}"} lorem ipsume oooo rsit amet co
  .tubes
    .tube.tube--left    
    .tube.tube--top
    .tube.tube--bottom
    .tube.tube--right
    .tube.tube--seat-bottom
    .tube.tube--seat
    .tube.tube--front
    .tube.tube--wheel-top

script.js

const lorem = "lorem ipsum dolor sit amet consectetur adipisicing elit deserunt natus ipsa recusandae nesciunt molestiae sed consequuntur repellendus consequatur iusto eligendi quas voluptatibus et quia nisi magnam error corporis nostrum officia";
const txts = document.querySelectorAll(".txt");
const tubes = document.querySelectorAll(".tube");
const speed = 200;

addSomeText();
fillTubes();

function addSomeText() { 
  txts.forEach((elm, i) => {
     elm.textContent = lorem[i > lorem.length ? i % lorem.length : i];
  });
}

function fillTubes() {
  tubes.forEach((tube, i) => tube.textContent = lorem.slice(0,30));
}

style.scss

body {
  font: {
    family: "Courier New", Courier, monospace;
    size: 2vmin;
  }
  margin: 0;
  padding: 0;
}

.wheel {
  // border: 1px solid red;
  animation: wheel 6s linear infinite;
  box-sizing: border-box;
  border-radius: 50%;
  display: inline-block;
  font-weight: bold;
  height: 35vmin;
  padding: 2vmin;
  position: relative;
  transform-origin: initial;
  width: 35vmin;
  
  &--inner {
    animation: none;
    font-weight: normal;
    height: 31vmin;
    width: 31vmin;
  }
  
  &--front {
    float: right;
  }
  
  &--chain {
    background: #fff;
  }
  
  &__container {
    // border: 1px solid blue;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

.wheel__elm {
  display: inline-block;
  height: 50%;
  left: 50%;
  position: absolute;
  text-align: center;
  top: 0;
  transform-origin: bottom left;
  @for $m from 1 through 50 {
    &--#{$m} {
      transform: rotate($m*7.2deg);
    } 
  }
}

@keyframes wheel {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spoke {
  font-size: 1.5vmin;
  font-weight: 300;
  left: 4vmin;
  height: 2vmin;
  line-height: 1.5;
  position: absolute;
  top: 50%;
  
  @for $i from 1 through 5 {
    &--#{$i} {
      transform: translateY(-50%) rotate($i*36deg);
    }
  }
}

.carcass {
  // border: 1px solid red;
  display: block;
  height: 35vmin;
  margin: 50vh 0 0 50vw;
  position: relative;
  transform: translate(-50%, -50%);
  // overflow: hidden;
  width: 90vmin;
}

.chain {
  left: 18.5vmin;
  position: absolute;
  top: 14vmin;
  transform: rotate(-5deg);
  &--bottom {
    top: 18.5vmin;
    transform: rotate(185deg);
  }
  
  &__container {
    display: inline-block;
    height: 2vmin;
    overflow: hidden;
    position: relative;
    width: 25vmin;
  }
  
  &__wheel {
    transform: scale(.25) translateX(25vmin);
  }
}

.chain__content {
  // border: 1px solid red;
  animation: chain 6s linear infinite;
  position: absolute;
  right: 0;
  width: 210%;
}

@keyframes chain {
  0% {
    right: 0%;
  }
  100% {
    right: -105%;
  }
}

.tube {
  // background: red;
  font-weight: bold;
  height: 2vmin;
  overflow: hidden;
  position: absolute;
  
  &--left {
    left: 13vmin;
    top: 7vmin;
    transform: rotate(-45deg);
    width: 28vmin;
  }
  &--top {
    left: 36vmin;
    top: -2.5vmin;
    width: 30vmin;
  }
  &--bottom {
    left: 18vmin;
    top: 16vmin;
    width: 26.5vmin;
    z-index: -1;
  }
  &--right {
    left: 39.5vmin;
    top: 6.5vmin;
    transform: rotate(-45deg);
    width: 28vmin;
    z-index: -1;
  }
  &--seat {
    left: 30vmin;
    top: -9vmin;
    text-transform: uppercase;
    width: 6vmin;
  }
  &--seat-bottom {
    left: 25.5vmin;
    top: 4.5vmin;
    transform: rotate(65deg);
    width: 27vmin;
    z-index: -1;
  }
  &--front {
    left: 50vmin;
    top: 3vmin;
    transform: rotate(65deg);
    width: 33vmin;
  }
  &--wheel-top {
    left: 58vmin;
    top: -13vmin;
    width: 9.6vmin;
    white-space: nowrap;
  }
}