Как уменьшить размер canvas?

724
07 июня 2017, 01:45

Проблема такая: при загрузке страницы Canvas увеличен в размере, хотя я задал ему меньший размер. В чем проблема и как её решить?

$(document).ready(function() { 
  $('.pure-g').hide(); 
  $('#animation_container').css('height', '40px'); 
  $('#animation_container').css('width', '110px'); 
  $('#canvas').css('height', '40px'); 
  $('#canvas').css('width', '110px'); 
  $('#dom_overlay_container').css('height', '40px'); 
  $('#dom_overlay_container').css('width', '110px'); 
  setTimeout(function() { 
    $("#animation_container").hide(); 
  }, 5000); 
  setTimeout(function() { 
    $(".pure-g").show(); 
  }, 5000); 
}); 
setTimeout(function() { 
  $('.container').addClass('slideInRight'); 
  $('.slide-1').focus(); 
  $('.number-1').css('font-weight', 'bold'); 
  $('.number-1').css('color', 'rgb(255, 255, 255)'); 
  $('.number-1').css('margin-left', '2vw'); 
  $('.arrow-1').css('display', 'none'); 
  $('.down-1').css('display', 'flex'); 
}, 5500); 
(function(lib, img, cjs, ss, an) { 
  var p; // shortcut to reference prototypes 
  lib.webFontTxtInst = {}; 
  var loadedTypekitCount = 0; 
  var loadedGoogleCount = 0; 
  var gFontsUpdateCacheList = []; 
  var tFontsUpdateCacheList = []; 
  lib.ssMetadata = []; 
  lib.updateListCache = function(cacheList) { 
    for (var i = 0; i < cacheList.length; i++) { 
      if (cacheList[i].cacheCanvas) 
        cacheList[i].updateCache(); 
    } 
  }; 
  lib.addElementsToCache = function(textInst, cacheList) { 
    var cur = textInst; 
    while (cur != exportRoot) { 
      if (cacheList.indexOf(cur) != -1) 
        break; 
      cur = cur.parent; 
    } 
    if (cur != exportRoot) { 
      var cur2 = textInst; 
      var index = cacheList.indexOf(cur); 
      while (cur2 != cur) { 
        cacheList.splice(index, 0, cur2); 
        cur2 = cur2.parent; 
        index++; 
      } 
    } else { 
      cur = textInst; 
      while (cur != exportRoot) { 
        cacheList.push(cur); 
        cur = cur.parent; 
      } 
    } 
  }; 
  lib.gfontAvailable = function(family, totalGoogleCount) { 
    lib.properties.webfonts[family] = true; 
    var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || []; 
    for (var f = 0; f < txtInst.length; ++f) 
      lib.addElementsToCache(txtInst[f], gFontsUpdateCacheList); 
    loadedGoogleCount++; 
    if (loadedGoogleCount == totalGoogleCount) { 
      lib.updateListCache(gFontsUpdateCacheList); 
    } 
  }; 
  lib.tfontAvailable = function(family, totalTypekitCount) { 
    lib.properties.webfonts[family] = true; 
    var txtInst = lib.webFontTxtInst && lib.webFontTxtInst[family] || []; 
    for (var f = 0; f < txtInst.length; ++f) 
      lib.addElementsToCache(txtInst[f], tFontsUpdateCacheList); 
    loadedTypekitCount++; 
    if (loadedTypekitCount == totalTypekitCount) { 
      lib.updateListCache(tFontsUpdateCacheList); 
    } 
  }; 
  // symbols: 
  // helper functions: 
  function mc_symbol_clone() { 
    var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop)); 
    clone.gotoAndStop(this.currentFrame); 
    clone.paused = this.paused; 
    clone.framerate = this.framerate; 
    return clone; 
  } 
 
  function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) { 
    var prototype = cjs.extend(symbol, cjs.MovieClip); 
    prototype.clone = mc_symbol_clone; 
    prototype.nominalBounds = nominalBounds; 
    prototype.frameBounds = frameBounds; 
    return prototype; 
  } 
  (lib.Symbol2 = function(mode, startPosition, loop) { 
    this.initialize(mode, startPosition, loop, {}); 
    // Layer 1 
    this.shape = new cjs.Shape(); 
    this.shape.graphics.f("#373535").s().p("ACsFDIisnRIitHRIiSAAIDzqFICZAAIDzKFg"); 
    this.shape.setTransform(0, 0, 1.151, 1.151); 
    this.timeline.addTween(cjs.Tween.get(this.shape).wait(1)); 
  }).prototype = getMCSymbolPrototype(lib.Symbol2, new cjs.Rectangle(-36.7, -37.1, 73.6, 74.3), null); 
  // stage content: 
  (lib.Rofas_Levitation = function(mode, startPosition, loop) { 
    this.initialize(mode, startPosition, loop, {}); 
    // Layer 3 
    this.instance = new lib.Symbol2(); 
    this.instance.parent = this; 
    this.instance.setTransform(391.2, 75.7); 
    this.timeline.addTween(cjs.Tween.get(this.instance).wait(84).to({ 
      y: 45.4 
    }, 55, cjs.Ease.get(-1)).wait(96).to({ 
      y: 75.7 
    }, 22, cjs.Ease.get(1)).wait(1)); 
    // Layer 1 
    this.shape = new cjs.Shape(); 
    this.shape.graphics.f("#373535").s().p("EAhEAJ9IgkgEIgNgBQgdgDgUgEQhVgRhSgpQgHgDAAgIIABiwQBVBFBiAaQAaAHAaAEQBBAKA+gLQBJgNAuguQAmgmAJg1QAJg5gdgvQgfg0g4gjQhHgvhzhJIgYgPQgygegUgPQgmgbgagbQhGhIgOhaIgFgiIAAgxIABgJIAHgiQADgUAEgOQAghoBeg8QAugdA8gQQAjgJAogEIBegEIA+AHQBfAPBLAqQAHAEAAAIIAACgIgBAIIgIgGQhZhBhpgTQhQgOhCARQgiAJgZAPQgqAYgUApQgmBNApBKQAWAkAlAcIAOAJQBQA1B7BMQA7AlAbATQAuAiAfAjQA5A/AQBOQACAIAGApIAAAtIgJA6QgaBwhaBEQhSA/h8ANIhVAEgAv2J/IgHgCQhngFheglQi8hIhuioQhUiCgPiiIgDgdIAAhEIACgJQADhEAUhHQA5jGCdh8QCQhwC9gTIBlgDIAJACQBUAFBMAYQCCApBjBZQBkBbA1B7QAmBYAKBdIAFAwIAABEIgCAJQgEBSgZBPQg/DGioB3QiJBiivAQIgeAEgAyEnBQiZA8hQCNQhcCjAmC+QAaCBBVBfQBqB1CcAdQBhATBigWQB+gaBdhWQCNiFALjNQAFhbgchVQgviRh1hYQh9hfiegBQhjAAhTAigAYEJsIh+lSQgDgJgKAAQjxABjygBQgKAAgDAJIh6FSIiqAAIgHgCIC8nxILfAAIC8HzgAh7JsIAAzXIKaAAIAACVIn+AAIAAG5IHaAAIAACVInaAAIAAH0gA9XJsIgQhLQgiiHg6hmQgrhLgxgxQgPgOgPgMQhLg8hUAEIhzAAIAAIGIidAAIAAzYIGJAAIAGACQAsAEASADIAGABQBeAQBIA1QBQA8AdBjQAbBagSBgQgRBSg2A7Qg+BEhiAbIgRAFIAKAGQA/AgA5BDQA+BJAuBpQA4CAAbCkgEglOgHWIAAGnIDMAAQAxAAAmgLIAMgDQBEgZAkg4QAegwAAhAQAAhxhRg7QgYgSgdgKQgqgQg0AAg"); 
    this.shape.setTransform(275, 100.7); 
    this.timeline.addTween(cjs.Tween.get(this.shape).wait(258)); 
  }).prototype = p = new cjs.MovieClip(); 
  p.nominalBounds = new cjs.Rectangle(296, 136.8, 508.2, 127.8); 
  // library properties: 
  lib.properties = { 
    width: 550, 
    height: 200, 
    fps: 50, 
    color: "#FFFFFF", 
    opacity: 1.00, 
    webfonts: {}, 
    manifest: [], 
    preloads: [] 
  }; 
})(lib = lib || {}, images = images || {}, createjs = createjs || {}, ss = ss || {}, AdobeAn = AdobeAn || {}); 
var lib, images, createjs, ss, AdobeAn; 
 
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation; 
 
function init() { 
  canvas = document.getElementById("canvas"); 
  anim_container = document.getElementById("animation_container"); 
  dom_overlay_container = document.getElementById("dom_overlay_container"); 
  handleComplete(); 
} 
 
function handleComplete() { 
  //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage. 
  exportRoot = new lib.Rofas_Levitation(); 
  stage = new createjs.Stage(canvas); 
  stage.addChild(exportRoot); 
  //Registers the "tick" event listener. 
  fnStartAnimation = function() { 
    createjs.Ticker.setFPS(lib.properties.fps); 
    createjs.Ticker.addEventListener("tick", stage); 
  } 
  //Code to support hidpi screens and responsive scaling. 
  function makeResponsive(isResp, respDim, isScale, scaleType) { 
    var lastW, lastH, lastS = 1; 
    window.addEventListener('resize', resizeCanvas); 
    resizeCanvas(); 
 
    function resizeCanvas() { 
      var w = lib.properties.width, 
        h = lib.properties.height; 
      var iw = window.innerWidth, 
        ih = window.innerHeight; 
      var pRatio = window.devicePixelRatio || 1, 
        xRatio = iw / w, 
        yRatio = ih / h, 
        sRatio = 1; 
      if (isResp) { 
        if ((respDim == 'width' && lastW == iw) || (respDim == 'height' && lastH == ih)) { 
          sRatio = lastS; 
        } else if (!isScale) { 
          if (iw < w || ih < h) 
            sRatio = Math.min(xRatio, yRatio); 
        } else if (scaleType == 1) { 
          sRatio = Math.min(xRatio, yRatio); 
        } else if (scaleType == 2) { 
          sRatio = Math.max(xRatio, yRatio); 
        } 
      } 
      canvas.width = w * pRatio * sRatio; 
      canvas.height = h * pRatio * sRatio; 
      canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w * sRatio + 'px'; 
      canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h * sRatio + 'px'; 
      stage.scaleX = pRatio * sRatio; 
      stage.scaleY = pRatio * sRatio; 
      lastW = iw; 
      lastH = ih; 
      lastS = sRatio; 
    } 
  } 
  makeResponsive(false, 'both', false, 1); 
  fnStartAnimation(); 
}
html { 
  box-sizing: border-box; 
} 
body { 
  overflow: hidden; 
  margin: 0; 
  padding: 0; 
  font-size: 20px; 
} 
a { 
  text-decoration: none; 
} 
header { 
  height: 100vh; 
  background-color: #141516; 
} 
header .header-container { 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  align-items: center; 
  height: 100vh; 
} 
header .logo { 
  max-width: 75%; 
  margin-left: 12.5%; 
} 
header .lang { 
  margin-bottom: 5vh; 
  cursor: pointer; 
  color: #fff; 
} 
header .lang h2 { 
  font-size: 1.125em; 
  font-weight: 100; 
} 
.navbar-header { 
  z-index: 3; 
} 
.preview { 
  float: left; 
  font-family: 'Adineue'; 
  font-size: 1em; 
  width: 0; 
  color: #bababa; 
} 
.preview a { 
  color: #bababa; 
} 
.preview .number { 
  position: relative; 
  top: 5vh; 
  left: 1.5vw; 
  color: #cbcbcb; 
} 
.arrow { 
  transform: rotate(270deg); 
  position: relative; 
  top: 90vh; 
  left: 2vw; 
  white-space: nowrap; 
} 
.fa-arrow-right { 
  margin-left: 1vw; 
} 
.arrow-right-roof { 
  font-weight: 100; 
} 
.arrow-right-roof, 
.arrow-right-fasad, 
.arrow-right-design, 
.arrow-right-industry, 
.arrow-right-eco, 
.arrow-right-stone { 
  opacity: 0; 
} 
.main { 
  height: 100vh; 
} 
.main-text { 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  width: 30vw; 
  margin-top: 44vh; 
  margin-left: 4vw; 
  color: #fff; 
} 
.main-text h1 { 
  font-family: 'Adineue'; 
  font-size: 1.5em; 
  font-weight: 100; 
} 
.main-text span { 
  font-size: 1.3em; 
  font-weight: 600; 
} 
.main-text p { 
  font-family: 'Lato'; 
  font-size: 0.825em; 
  color: #fff; 
} 
.down { 
  width: 0; 
  font-size: 1em; 
  font-family: 'Adineue'; 
  transform: rotate(270deg); 
  display: flex; 
  align-items: center; 
  margin-top: 95vh; 
  margin-left: 4.5vw; 
  white-space: nowrap; 
  display: none; 
} 
.down i { 
  margin-right: 1vw; 
  margin-bottom: 1vh; 
} 
.slides-container { 
  position: relative; 
  height: 100vh; 
  display: flex; 
  z-index: 1; 
  color: #bababa; 
} 
.slide { 
  transition: flex-grow 0.5s ease-in-out; 
  flex-grow: 1; 
  outline: none; 
  cursor: pointer; 
} 
.slide:not(:first-child) { 
  border-left: 1px solid rgba(255,255,255,0.149); 
} 
.slide:not(:first-child) .img { 
  opacity: 0; 
} 
.slide:focus { 
  flex-grow: 15; 
} 
.slide:focus .img { 
  opacity: 1; 
} 
.slide .img { 
  transition: opacity 0.3s; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background-size: cover; 
  background-position: 50% 50%; 
  z-index: -1; 
} 
.toggle-button { 
  height: 5vh; 
  width: 5vw; 
  cursor: pointer; 
  margin-top: 5vh; 
  z-index: 3; 
} 
.toggle-button:hover { 
  opacity: 1; 
} 
.bar { 
  background-color: #fff; 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: 30px; 
  height: 1px; 
  border: 0; 
  transition: all 0.35s ease; 
  cursor: pointer; 
} 
.bar +.bar { 
  margin-top: 4px; 
} 
.middle { 
  top: 11px; 
} 
.bottom { 
  top: 22px; 
} 
.toggle-active .bar { 
  background-color: #fff; 
} 
.toggle-active .top { 
  transform: translateY(0px) translateX(0) rotate(45deg); 
} 
.toggle-active .middle { 
  opacity: 0; 
} 
.toggle-active .bottom { 
  transform: translateY(-10px) translateX(0) rotate(-45deg); 
} 
.overlay { 
  position: fixed; 
  background: rgba(87,87,87,0.56); 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 0; 
  visibility: hidden; 
  opacity: 0; 
  transition: opacity 0.35s, visibility 0.35s, height 0.35s; 
} 
.overlay .rofas-nav { 
  display: block; 
  position: relative; 
  top: 3vh; 
  left: 10vw; 
  font-family: 'Adineue'; 
  font-size: 1em; 
  font-weight: 400; 
  list-style: none; 
  padding: 0; 
} 
.overlay .info-nav { 
  display: block; 
  position: relative; 
  top: 30vh; 
  left: 10vw; 
  font-family: 'Adineue'; 
  font-size: 1em; 
  font-weight: 400; 
  list-style: none; 
  padding: 0; 
} 
.overlay ul li { 
  display: block; 
  margin-bottom: 1vh; 
} 
.overlay ul li a { 
  display: block; 
  color: #fff; 
  text-decoration: none; 
} 
.overlay ul li a span { 
  font-family: "Adineue-bold"; 
  font-size: 1em; 
} 
.nav-active { 
  opacity: 1; 
  visibility: visible; 
  height: 100vh; 
  z-index: 2; 
} 
.roof-link:hover { 
  color: #e64e4e; 
} 
.fasad-link:hover { 
  color: #f7a550; 
} 
.design-link:hover { 
  color: #fedd32; 
} 
.industry-link:hover { 
  color: #51b9f1; 
} 
.eco-link:hover { 
  color: #70ca57; 
} 
.stone-link:hover { 
  color: #956ccc; 
} 
.roof { 
  color: #e64e4e; 
} 
.fasad { 
  color: #f7a550; 
} 
.design { 
  color: #fedd32; 
} 
.industry { 
  color: #51b9f1; 
} 
.eco { 
  color: #70ca57; 
} 
.stone { 
  color: #956ccc; 
}
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<link href="https://use.fontawesome.com/8770d2be1c.css" rel="stylesheet"/> 
<link href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css" rel="stylesheet"/> 
<link href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" rel="stylesheet"/> 
<body onload="init();" style="margin:0px;"> 
  <div id="animation_container" style="margin-left: auto; margin-right: auto; padding-top: 40vh"> 
    <canvas id="canvas" width="110" height="40" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0.7)"></canvas> 
    <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; position: absolute; left: 0px; top: 0px; display: block"> 
    </div> 
  </div> 
  <div class="pure-g"> 
    <header class="pure-u-1 pure-u-sm-1 pure-u-md-1 pure-u-lg-1-12"> 
      <div class="header-container"> 
        <div class="navbar-header"> 
          <div class="toggle-button" id="toggle"> 
            <span class="bar top"></span> 
            <span class="bar middle"></span> 
            <span class="bar bottom"></span> 
          </div> 
        </div> 
        <nav class="overlay" id="overlay"> 
          <ul class="rofas-nav"> 
            <li><a href="slide1.html">Rofas <span class="roof-link">Roof</span><i class="fa fa-arrow-right roof arrow-right-roof"></i></a></li> 
            <li><a href="slide2.html">Rofas <span class="fasad-link">Фасад</span><i class="fa fa-arrow-right fasad arrow-right-fasad"></i></a></li> 
            <li><a href="slide3.html">Rofas <span class="design-link">Design</span><i class="fa fa-arrow-right design arrow-right-design"></i></a></li> 
            <li><a href="slide4.html">Rofas <span class="industry-link">Industry</span><i class="fa fa-arrow-right industry arrow-right-industry"></i></a></li> 
            <li><a href="slide5.html">Rofas <span class="eco-link">Eco</span><i class="fa fa-arrow-right eco arrow-right-eco"></i></a></li> 
            <li><a href="slide6.html">Rofas <span class="stone-link">Stone</span><i class="fa fa-arrow-right stone arrow-right-stone"></i></a></li> 
          </ul> 
          <ul class="info-nav"> 
            <li><a href="#">Блог</a></li> 
            <li><a href="#">О компании</a></li> 
            <li><a href="#"><span>Партнёры</span></a></li> 
            <li><a href="#">Контакты</a></li> 
          </ul> 
        </nav> 
        <a href="index.html"><img src="images/logo.png" class="logo" alt="Логотип Рофас"></a> 
        <div class="lang"> 
          <h2>RU</h2> 
        </div> 
      </div> 
    </header> 
    <div class="pure-u-1 pure-u-sm-1 pure-u-md-1 pure-u-lg-11-12 container animated hinge"> 
      <div class="slides-container"> 
        <div class="slide slide-1 animated" tabindex='1'> 
          <div class="pure-g img img-1" style="background-image: url('images/roof-bg.png');"> 
            <div class="pure-u-1 pure-u-sm-1 pure-u-md-1 pure-u-lg-3-8 main"> 
              <div class="main-text main-text-1"> 
                <h1>Rofas <span class="roof">Roof</span></h1> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p> 
              </div> 
            </div> 
          </div> 
          <div class="preview preview-1"> 
            <span class="number number-1">01</span> 
            <div class="arrow arrow-1"> 
              <span>Rofas Roof</span> 
            </div> 
          </div> 
          <a href="slide1.html" class="down down-1 roof"> 
            <i class="fa fa-arrow-left"></i> 
            <p>Rofas Roof</p> 
          </a> 
        </div> 
        <div class="slide slide-2 animated slideInRight" tabindex='2'> 
          <div class="pure-g img img-2" style="background-image: url('images/fasad-bg.png');"> 
            <div class="pure-u-1 pure-u-sm-1 pure-u-md-3-5 main" style="margin-left: 5vw"> 
              <div class="main-text main-text-2"> 
                <h1>Rofas <span class="fasad">Фасад</span></h1> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p> 
              </div> 
            </div> 
          </div> 
          <div class="preview preview-2"> 
            <span class="number number-2">02</span> 
            <div class="arrow arrow-2"> 
              <span>Rofas Фасад</span> 
            </div> 
          </div> 
          <a href="slide2.html" class="down down-2 fasad"> 
            <i class="fa fa-arrow-left"></i> 
            <p>Rofas Фасад</p> 
          </a> 
        </div> 
        <div class="slide slide-3 animated" tabindex='3'> 
          <div class="pure-g img" style="background-image: url('images/design-bg.png');"> 
            <div class="pure-u-1 pure-u-sm-1 pure-u-md-3-5 main" style="margin-left: 10vw"> 
              <div class="main-text"> 
                <h1>Rofas <span class="design">Design</span></h1> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p> 
              </div> 
            </div> 
          </div> 
          <div class="preview preview-3"> 
            <span class="number number-3">03</span> 
            <div class="arrow arrow-3"> 
              <span>Rofas Design</span> 
            </div> 
          </div> 
          <a href="slide3.html" class="down down-3 design"> 
            <i class="fa fa-arrow-left"></i> 
            <p>Rofas Design</p> 
          </a> 
        </div> 
        <div class="slide slide-4 animated" tabindex='4'> 
          <div class="pure-g img" style="background-image: url('images/industry-bg.png');"> 
            <div class="pure-u-1 pure-u-sm-1 pure-u-md-3-5 main" style="margin-left: 15vw"> 
              <div class="main-text"> 
                <h1>Rofas <span class="industry">Industry</span></h1> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p> 
              </div> 
            </div> 
          </div> 
          <div class="preview preview-4"> 
            <span class="number number-4">04</span> 
            <div class="arrow arrow-4"> 
              <span>Rofas Industry</span> 
            </div> 
          </div> 
          <a href="slide4.html" class="down down-4 industry"> 
            <i class="fa fa-arrow-left"></i> 
            <p>Rofas Industry</p> 
          </a> 
        </div> 
        <div class="slide slide-5 animated" tabindex='5'> 
          <div class="pure-g img" style="background-image: url('images/eco-bg.png');"> 
            <div class="pure-u-1 pure-u-sm-1 pure-u-md-3-5 main" style="margin-left: 20vw"> 
              <div class="main-text"> 
                <h1>Rofas <span class="eco">Eco</span></h1> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p> 
              </div> 
            </div> 
          </div> 
          <div class="preview preview-5"> 
            <span class="number number-5">05</span> 
            <div class="arrow arrow-5"> 
              <span>Rofas Eco</span> 
            </div> 
          </div> 
          <a href="slide5.html" class="down down-5 eco"> 
            <i class="fa fa-arrow-left"></i> 
            <p>Rofas Eco</p> 
          </a> 
        </div> 
        <div class="slide slide-6 animated" tabindex='6'> 
          <div class="pure-g img" style="background-image: url('images/stone-bg.png');"> 
            <div class="pure-u-1 pure-u-sm-1 pure-u-md-3-5 main" style="margin-left: 25vw"> 
              <div class="main-text"> 
                <h1>Rofas <span class="stone">Stone</span></h1> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p> 
              </div> 
 
            </div> 
          </div> 
          <div class="preview preview-6"> 
            <span class="number number-6">06</span> 
            <div class="arrow arrow-6"> 
              <span>Rofas Stone</span> 
            </div> 
          </div> 
          <a href="slide6.html" class="down down-6 stone"> 
            <i class="fa fa-arrow-left"></i> 
            <p>Rofas Stone</p> 
          </a> 
        </div> 
      </div> 
    </div> 
  </div> 
</body>

READ ALSO
Как спрятать элемент в jquery?

Как спрятать элемент в jquery?

У меня есть видимый квадрат(#square) и такой код:

345
SASS mexin при изменении viewport

SASS mexin при изменении viewport

Создал мексиин для мобильной версии, делаю копию мексина у viewport для планшета и десктопа из измененными значениями для их изменения в этих...

320
Ввод текста в сайте

Ввод текста в сайте

У меня такой вопрос я сайт делаю для смартфонов да я тут у меня такой код

333
Подгрузка из input

Подгрузка из input

ЗдравствуйтеПомогите написать скрипт подгрузки текста из Input в value

476