-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (104 loc) · 5.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1, user-scalable=no" >
<title>Theydesign</title>
<style>
#animation_container {
position: absolute;
margin: auto;
left: -100%;
right: -100%;
top: -100%;
bottom: -100%;
}
</style>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="logoanimation.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script>
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");
var comp=AdobeAn.getComposition("4C7DDEC39291444E964807A3FDBB1EA9");
var lib=comp.getLibrary();
handleComplete({},comp);
}
function handleComplete(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
exportRoot = new lib.logoanimation();
stage = new lib.Stage(canvas);
stage.enableMouseOver();
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.framerate = lib.properties.fps;
createjs.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true,'both',true,2,[canvas,anim_container,dom_overlay_container]);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
</script>
<!-- Bootstrap -->
<link href="bootstrap-4.4.1.css" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body onload="init();" style="margin:0px; background-color:rgba(68, 146, 170, 0);">
<!--<main> The overlay -->
<div id="mySidenav" class="sidenav" style="background-color: rgba(255,255,255,0.00)"> <a href="javascript:void(0)" class="closebtn " onclick="closeNav()">×</a> <img src="images/logo.svg" class"logo"> <a class="ripple" href="#one" onclick="closeNav()">Home</a> <a class="ripple" href="#two" onclick="closeNav()">About</a> <a class="ripple" href="#three" onclick="closeNav()">Services</a> <a class="ripple" href="#four" onclick="closeNav()">Clients</a> <a class="ripple" href="#five" onclick="closeNav()">Contact</a>
<div class="row align-content-between"> <i href="https://www.facebook.com/they.webdesign" class="col fa fa-facebook-square" style="font-size:36px" ></i> <i class="col fa fa-twitter-square" style="font-size:36px" href="https://twitter.com/THEYDESIGN1" ></i> </div>
</div>
<!-- Use any element to open the sidenav -->
<span class="span fas fa-bars openbtn" style="color: rgba(255,255,255,1.00)" onclick="openNav()"> </span>
<!--home-->
<div class="slider">
<section class="home" id="one">
<div id="animation_container" style="background-color:rgba(68, 146, 170, 1.00); width:auto; height:auto">
<canvas id="canvas" class="responsive-canvas" style="width:225px; height:225px; position: absolute; display: block; background-color:rgba(68, 146, 170, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:225px; height:225px; position: absolute; left: 0px; top: 0px; display: block;"> </div>
</div>
<!-- -->
</section>
<!--about-->
<section class="about" id="two">
<div class="jumbotron">
<h1 class="logoRoto text-center ">THEY. <span class="txt-rotate" data-period="2000" data-rotate="[ "DESIGN", "CREATE", "IMAGINE", "MAKE" ]"></span> </h1>
<p class="lead">They put you at the heart of all requests, sure they might take a little longer than the rest but perfection takes time, right? and they save you time and money.</p>
<hr class="my-4">
<!-- <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>-->
<p class="lead"> <a class="btn btn-primary btn-lg" href="#three" role="button">Learn more</a> </p>
</div>
</section>
<!--serv-->
<section class="services" id="three">
</section>
<section class="clients" id="four">
<h1>Section Four</h1>
</section>
<section class="contact" id="five">
<h1>Section Five</h1>
</section>
</div>
<script src="typer.js"></script>
<script src="scroll.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/jquery-mousewheel/jquery.mousewheel.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="popper.min.js"></script>
<script src="bootstrap-4.4.1.js"></script>
<script src="NAV.js"></script>
<!-- </main>-->
</body>
</html>