Проблема такая: при загрузке страницы 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>
Как развивать веб-проекты в 2026 году: технологии, контент E-E-A-T и факторы доверия
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники