Ideum

ideum.markdown

Ideum

experimentation of mask-image + canvas

works best in chrome, based on https://dribbble.com/shots/2250809-Ideum

A Pen by Charles Strube on CodePen.

License.

index.html

<div class="wrapper">
  <a href="#"><h1>Ideum</h1></a>
  <nav>
    <form class="search" action="#" method="post">
      <div class="search__anim"></div>
      <button type="submit" value="Submit"></button>
      <input type="text" name="name" placeholder="Search" />
    </form>
    <a class="filter" href="#">Filter</a>
  </nav>
  <div class="poster">
    <img src="https://i.imgur.com/mD9R6IQ.jpg" alt="ava" />
  </div>
  <a class="arrow__container" href="#">
    <svg version="1.1" id="arrow">
      <rect x="0" y="8" width="65.7" height="2"/>
      <rect x="56.5" y="4.2" transform="matrix(0.7071 0.7071 -0.7071 0.7071 22.0808 -42.8911)" width="12.7" height="2" />
      <rect x="56.5" y="11.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 9.3503 48.1621)" width="12.7" height="2" />
    </svg>
    <p>Nope, next!</p>
  </a>
  <div id="fade" class="container-margin">
    <div class="movie">
        <div class="movie__score">93%</div>
        <div class="movie__title__container">
          <h2 class="movie__title">Ex Machina</h2>
          <div class="movie__year">2015</div>
        </div>
        <ul class="movie__type">
          <li>Sci-fi</li>
          <li>Drama</li>
          <li>Mystery</li>
        </ul>
        <p class="movie__description">A young programmer is selected to participate in a ground-breaking experiment in artificial intelligence by evaluating the human qualities of a breath-taking female A.I.</p>
        <a class="movie__trailer">
          <svg version="1.1">
              <path d="M0.8,1.4L11.5,8L0.8,14.6V1.4 M0,0v16l13-8L0,0L0,0z"/>
          </svg>
          <p>Trailer</p>
        </a>
    </div>
    <div class="review">
      <h3 class="review__title">Reviews</h3>
      <ul>
        <li>
          <div class="review__score">95%</div>
          <p class="review__description">"Ex Machina" deals with a familiar theme in a very unique way. It doesn't bombard you with effects or superficial action (although the robot effects are exceptional). Rather, its focus and beauty lie in the subtle and nuanced performances of its tiny cast as the film explores what it means to be human.</p>
        </li>
        <li>
          <div class="review__score">91%</div>
          <p class="review__description">Quiet dialogue scenes between two characters are filmed in such an impactful, making them feel hauntingly austere, sweet and innocent, or terrible and frightening, through meticulous use of composition, light and sound. The film really does run the gamut of emotions, surprisingly funny one minute and gut-wrenchingly tense and weird the next, while the script twists and turns, constantly unsettling your assumptions about what will happen.</p>
        </li>
        <li>
          <div class="review__score">89%</div>
          <p class="review__description">The performances are excellent, most notably Alicia Vikander as the beguiling Ava, who absolutely passes for being 'almost human'. Her precise movements -walking, standing or stooping to pull on a pair of stockings- have just that slight tinge of the uncanny about them to suggest a mechanical skeleton, yet she is undeniably seductive. You can really understand Caleb's mental plight as she begins to show signs of a sexual interest in him!</p>
        </li>
      </ul>
    </div>
  </div>
  <canvas id="bg"></canvas>
</div>

script.js

var drawBG = function(){
  var Model = function(){
    this.width  = Model.getWidth();
    this.height = Model.getHeight();
    this.color  = "80,  0,  0";
    this.alpha  = ".4";
    this.img    = "https://i.imgur.com/mD9R6IQ.jpg";
    return this;
  };
  Model.getHeight = function(){
    var viewportheight = window.innerHeight
    return viewportheight;
  };
  Model.getWidth = function(){
    var viewportwidth = window.innerWidth;
    return viewportwidth;
  };
  Model.load = function(){
    var model = new Model();
    return model;
  };
  var View = function(data){
    this.model = data;
    var height      = data.height;
    var width       = data.width;
    var circleSize  = this.circleSize(height, width);
    this.size = {
      x1: width/4,
      y1: height/8,
      r1: 0,

      x2: width/4,
      y2: height/8,
      r2: circleSize/2,

      x3: width/1.2,
      y3: height/1.2,
      r3: 0,

      x4: width/1.1,
      y4: height/1.1,
      r4: circleSize/3.5
    };
    return this;
  };
  View.load = function(data){
    var view = new View(data);
    return view;
  };

  View.prototype.render = function(){
    var height    = this.model.height,
        width     = this.model.width,
        color     = this.model.color,
        alpha     = this.model.alpha,
        src       = this.model.img,
        
        x1        = this.size.x1,
        y1        = this.size.y1,
        r1        = this.size.r1,

        x2        = this.size.x2,
        y2        = this.size.y2,
        r2        = this.size.r2,

        x3        = this.size.x3,
        y3        = this.size.y3,
        r3        = this.size.r3,

        x4        = this.size.x4,
        y4        = this.size.y4,
        r4        = this.size.r4,

        canvas    = document.getElementById("bg"),
        context   = canvas.getContext("2d");

    canvas.height = height;
    canvas.width  = width;
    //this.image(context, src, width, height);
    this.radialGradient(context, x1, y1, r1, x2, y2, r2, color, alpha, width, height);
    this.radialGradient(context, x3, y3, r3, x4, y4, r4, color, alpha, width, height);

  };

  View.prototype.circleSize = function(height, width){
    var circleSize;
    if(height >= width){
      circleSize = height;
    }else{
      circleSize = width;
    }
    return circleSize;
  };
  View.prototype.radialGradient = function(context, x1, y1, r1, x2, y2, r2, color, alpha, width, height){
    var radialGradient = context.createRadialGradient(x1, y1, r1, x2, y2, r2);
    radialGradient.addColorStop(0, 'rgba(' + color +',  ' + alpha + ')');
    radialGradient.addColorStop(1, 'rgba(' + color +',  0)');
    context.fillStyle = radialGradient;
    context.fillRect(0,0, width, height);
  };
  View.prototype.image = function(context, src, width, height){
    var image = null;
    function drawImgBg() {
      image = new Image();
      image.src = src;
      image.addEventListener('load', drawImage);
    }
    function drawImage() {
      var imgWidth        = this.width,
          imgHeight       = this.height,
          widthByHeight   = imgWidth/imgHeight,
          sizeY           = height*0.8,
          sizeX           = sizeY*widthByHeight;
      context.drawImage(image, 0, 0, sizeX, sizeY);
    }
    drawImgBg();
  };
  var controller = function(){
    var model   = Model.load();
    var view    = View.load(model);
    view.render();
  };
  window.addEventListener('resize', controller);
  controller();
}
var scroll = function(){
  var Model = function(){
    this.currentPosition     = Model.getCurrentPosition();
    this.height              = Model.getHeight();
    this.width               = Model.getWidth();
    this.elem                = document.getElementById('fade');
    this.elemHeight          = Model.getElemHeight(this.elem);
    this.elemCurrentPosition = Model.getElemCurrentPosition(this.elem);
    return this;
  };
  Model.getHeight = function(){
    var viewportheight = window.innerHeight
    return viewportheight;
  };
  Model.getWidth = function(){
    var viewportwidth = window.innerWidth;
    return viewportwidth;
  };
  Model.getElemHeight = function(data){
    var elemHeight = data.clientHeight;
    return elemHeight;
  };
  Model.getElemCurrentPosition = function(data){
    var elemCurrentPosition = data.offsetTop;
    return elemCurrentPosition;
  };
  Model.getCurrentPosition = function(){
    var currentPosition = window.pageYOffset || document.documentElement.scrollTop;
    return currentPosition;
  };
  Model.load = function(){
    var model = new Model();
    return model;
  };
  var View = function(data){
    this.model = data;
    var height              = this.model.height,
        width               = this.model.width,
        currentPosition     = this.model.currentPosition,
        elemHeight          = this.model.elemHeight,
        elemCurrentPosition = this.model.elemCurrentPosition,
        startZero,
        startOne,
        endOne,
        endZero;
    if(width <= 600){
        startZero = (-elemCurrentPosition+currentPosition)*100/elemHeight;
        startOne  = ((-elemCurrentPosition+currentPosition)+height*10/100)*100/elemHeight;
        endOne    = ((-elemCurrentPosition+currentPosition)+height*90/100)*100/elemHeight;
        endZero   = ((-elemCurrentPosition+currentPosition)+height)*100/elemHeight;
    }else{
        startZero = currentPosition*100/elemHeight;
        startOne  = (currentPosition+height*10/100)*100/elemHeight;
        endOne    = (currentPosition+height*90/100)*100/elemHeight;
        endZero   = (currentPosition+height)*100/elemHeight;
    }
    this.data = {
      startZero: startZero,
      startOne:  startOne,
      endOne:    endOne,
      endZero:   endZero
    }
    return this;
  };
  View.load = function(data){
    var view = new View(data);
    return view;
  };
  var controller = function(){
    var model   = Model.load();
    var view    = View.load(model);
    view.render();
  };
  View.prototype.render = function(){
    var elem        = this.model.elem,
        startZero   = this.data.startZero,
        startOne    = this.data.startOne,
        endOne      = this.data.endOne,
        endZero     = this.data.endZero,
        styleChrome = "-webkit-linear-gradient(top, rgba(0,0,0,0) "+startZero+"%, rgba(0,0,0,1) "+startOne+"%, rgba(0,0,0,1) "+endOne+"%, rgba(0,0,0,0) "+endZero+"%)";
    elem.style.WebkitMaskImage = styleChrome;
  };
  controller();
  window.addEventListener('scroll', controller);
  window.addEventListener('resize', controller);
};
/*
    disable the scroll opacity
    webkit only
 */
drawBG();
scroll();

style.scss

$font:              'Open Sans', sans-serif;
$light:             300;
$normal:            400;
$half-bold:         600;
$bold:              700;
$white:             #FFFFFF;
$grey:              #979596;
$darker-grey:       #857F7F;
$color-score:       #E1262D;
$edge:              4rem;
$edge-small:        1rem;
$ease:              .3s all;
$break-small:       600px;

@mixin maxContainer($width, $margin) {
  max-width: $width;
  width:100%;
  margin:0 $margin;
}
%afterSpace{
  	&::after{
		content:" ";
		display:block;
		clear:both;
		visibility:hidden;
	}
}


html,
body{
  width: 100%;
  height: 100%;
  font-family: $font;
  color: $white;
}
a{
  color: $white;
}
body{
  background-color: #000;
  position: relative;
}
.poster{
  position: fixed;
  z-index: -999;
  left: 60%;
  //transform: translateX(-50%);
  top: 0;
  height: 100%;
  width: auto;
  img{
    width: auto;
    height: 100%;
    display: block;
    margin: 0 auto;
    @media screen and (max-width: $break-small) {
      margin: 0 auto;
    }
  }
  @media screen and (max-width: $break-small) {
    position: relative;
    height: 25rem;
    left:auto;
    top: auto;
    //transform: translateX(0);
  }
}
#bg{
  top: 0;
  left: 0;
  position: fixed;
  z-index: -998;
}
h1{
  z-index: 1;
  font-weight: $light;
  text-transform: uppercase;
  letter-spacing: .15rem;
  position: fixed;
  top: $edge+.2;
  left: $edge;
  @media screen and (max-width: $break-small) {
    top: $edge-small+.2;
    left: $edge-small;
  }
}
nav{
  z-index: 1;
  position: fixed;
  top: $edge;
  right: $edge;
  @media screen and (max-width: $break-small) {
    top: $edge-small;
    right: $edge-small;
  }
}
.wrapper{
  position: relative;
  height: 100vh;
}
.search{
  float:right;
  position: relative;
  %typing{
    padding: .2rem 1rem .2rem 1rem;
    width: 10rem;
  }
  &__anim{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: solid 2px $grey;
    position: relative;
    float: right;
    &::after{
      content:"";
      width: 2px;
      height: 12px;
      background-color: $grey;
      position: absolute;
      top: 12px;
      left: 18px;
      transform: rotate(135deg);
    }
  }
  input{
    float: right;
    border: 0;
    padding: .2rem 0 .2rem 0;
    height: 1rem;
    width: 0;
    margin-right: 1rem;
    border-radius: 1.4rem;
    transition: $ease;
    margin-left: 1rem;
    font-family: $font;
    color: $white;
    background-color: rgba($white, 0.1);
    -webkit-appearance:none;
    outline: none;
    &:focus{
      @extend %typing;
    }
  }
  button{
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    opacity: 0;
  }
  &:hover{
    input{
      @extend %typing;
    }
  }
}
.filter{
  padding-top: .2rem;
  float:right;
  font-weight: $light;
  text-transform: uppercase;
  letter-spacing: .15rem;
  text-decoration: none;
}
#arrow{
  fill: $white;
  width: 68px;
  height: 18px;
  float:right;
}
.arrow{
  &__container{
    position: fixed;
    bottom: $edge;
    right: $edge;
    z-index: 1;
    @media screen and (max-width: $break-small) {
      bottom: $edge-small;
      right: $edge-small;
    }
    p{
      float:right;
      padding-right: 1rem;
      @media screen and (max-width: $break-small) {
        display: none;
      }
    }
  }
}
.container-margin{
  padding: 0 $edge+6;
  @media screen and (max-width: $break-small) {
    padding: 1rem 1rem 0 1rem;
  }
}
.movie{
  @include maxContainer(1150px, auto);
  &__score{
    @include maxContainer(55%, 0);
    padding-top: 30vh;
    color: $color-score;
    font-size: 1.3rem;
    @media screen and (max-width: $break-small) {
      padding-top: 0;
      max-width: 100%;
    }
  }
  &__title{
    font-size: 4.5rem;
    display: inline;
    margin-right: 1rem;
    @media screen and (max-width: $break-small) {
      font-size: 2rem;
    }
    &__container{
      @include maxContainer(55%, 0);
      padding-top: 1rem;
      transform: translateX(-.25rem);
      @media screen and (max-width: $break-small) {
        max-width: 100%;
      }
    }
  }
  &__year{
      font-size: 4.5rem;
      display: inline;
      color: $grey;
      @media screen and (max-width: $break-small) {
        font-size: 2rem;
        max-width: 100%;
      }
  }
  &__type{
    @include maxContainer(55%, 0);
    li{
      padding-right: 1.5rem;
      padding-top: 1.5rem;
      float: left;
      color: $darker-grey;
      font-weight: $light;
      text-transform: uppercase;
      letter-spacing: .1rem;
    }
    @media screen and (max-width: $break-small) {
      max-width: 100%;
    }
    @extend %afterSpace;
  }
  &__description{
    @include maxContainer(55%, 0);
    float: none;
    display: block;
    color: $grey;
    font-size: 1.1rem;
    padding-top: 3rem;
    line-height: 2rem;
    @media screen and (max-width: $break-small) {
      max-width: 100%;
    }
  }
  &__trailer{
    margin-top: 3rem;
    display: inline-block;
    padding: 1.2rem 2.5rem 1.2rem 2.5rem;
    border: solid 1px darken($darker-grey, 23%);
    cursor: pointer;
    color: $grey;
    transition: $ease;
    svg{
      width: 13px;
      height: 16px;
      fill: $grey;
      float:left;
      transition: $ease;
    }
    p{
      padding-left: 1rem;
      float:left;
      text-transform: uppercase;
      letter-spacing: .1rem;
      transition: $ease;
      font-size: .95rem;
    }
    &:hover{
      border-color: $white;
      svg{
        fill: $white;
      }
      p{
        color: $white;
      }
    }
  }
  @extend %afterSpace;
}
.review{
  @include maxContainer(1150px, auto);
  padding-top: 5rem;
  padding-bottom: 5rem;
  &__score{
    @extend .movie__score;
    padding-top: 2rem;
  }
  &__title{
    font-size: 1rem;
    display: inline;
    color: $grey;
    text-transform: uppercase;
    letter-spacing: .1rem;
    @media screen and (max-width: $break-small) {
      font-size: 2rem;
    }
  }
  &__description{
    @extend .movie__description;
    padding-top: 1rem;
  }
}