mirror of
https://github.com/exituser/exituser.github.io.git
synced 2026-09-17 05:38:50 +00:00
Файлы для сайта
This commit is contained in:
exituser
Vendored
+12
File diff suppressed because one or more lines are too long
Vendored
+17
File diff suppressed because one or more lines are too long
Vendored
+30
File diff suppressed because one or more lines are too long
Vendored
+7
File diff suppressed because one or more lines are too long
+36
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- partial:index.partial.html -->
|
||||
<div id="container">
|
||||
<div id="container-bg">
|
||||
<div class="bg black"></div>
|
||||
<div class="bg white"></div>
|
||||
</div>
|
||||
<div id="c-container">
|
||||
<div id="ideas">
|
||||
<div class="idea">
|
||||
<div id="idea-text-left" class="idea-text">Мой</div>
|
||||
</div>
|
||||
<div class="idea">
|
||||
<div id="idea-text-right" class="idea-text">Сайт</div>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="c">Извините.</canvas>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- partial -->
|
||||
<script src='TimelineMax.min.js'></script>
|
||||
<script src='TweenMax.min.js'></script>
|
||||
<script src='jquery-2.2.4.js'></script>
|
||||
<script src='browser.min.js'></script>
|
||||
<script src='imagesloaded.pkgd.min.js'></script><script src="./script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+9814
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,177 @@
|
||||
$(window).bind('load', function () {
|
||||
const raf = function (entry) {
|
||||
window.requestAnimationFrame(entry);
|
||||
};
|
||||
const random = function (min, max) {
|
||||
max = max + 1;
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
var app = {
|
||||
init: function () {
|
||||
this.cacheDOM();
|
||||
this.style();
|
||||
},
|
||||
cacheDOM: function () {
|
||||
this.container = $('#container');
|
||||
this.images = $('img');
|
||||
|
||||
this.mouseX = null;
|
||||
this.mouseY = null;
|
||||
|
||||
this.ideas = $('#ideas');
|
||||
},
|
||||
style: function () {
|
||||
this.images.imagesLoaded(function () {
|
||||
$(window).resize(function initial() {
|
||||
TweenMax.set(app.container, {
|
||||
opacity: 1,
|
||||
userSelect: 'none'
|
||||
});
|
||||
TweenMax.set(app.ideas, {
|
||||
y: (app.container.height() / 2) - (app.ideas.height() / 2),
|
||||
opacity: 1
|
||||
});
|
||||
return initial;
|
||||
}());
|
||||
});
|
||||
},
|
||||
cursorEvents: function (e) {
|
||||
app.mouseX = e.clientX;
|
||||
app.mouseY = e.clientY;
|
||||
}
|
||||
}
|
||||
|
||||
app.init();
|
||||
|
||||
var cContainer = $('#c-container'),
|
||||
c = document.getElementById('c'),
|
||||
cx = c.getContext('2d'),
|
||||
Particle,
|
||||
Line,
|
||||
canvas,
|
||||
mouseX,
|
||||
mouseY;
|
||||
|
||||
c.width = $('#c').outerWidth();
|
||||
c.height = $('#c').outerHeight();
|
||||
|
||||
function curveFactory(thisCanvas, thisContext, thisLineName, thisCanvasFunction) {
|
||||
|
||||
var particleIndex = 0,
|
||||
particles = {},
|
||||
particleNum = 1,
|
||||
particlesLoaded = false,
|
||||
w = thisCanvas.width,
|
||||
h = thisCanvas.height;
|
||||
|
||||
thisParticleName = function () {
|
||||
this.randomY = random(0, h);
|
||||
this.lwStart = 5;
|
||||
this.lw = 30;
|
||||
this.lwChange = 0.5;
|
||||
this.grayscaleLwStart = 5;
|
||||
this.grayscaleLw = 30;
|
||||
this.grayscaleLwChange = 0.5;
|
||||
this.lwReversed = false;
|
||||
this.x;
|
||||
this.xInitial = w / 2;
|
||||
this.yInitial = random(0, h);
|
||||
this.y = random(0, h);
|
||||
this.xInterval = 5;
|
||||
this.yInterval = 5;
|
||||
this.angle = 0;
|
||||
this.limit = (Math.PI * 4);
|
||||
this.xMultiplier = 50;
|
||||
this.yMultiplier = 50;
|
||||
this.speed = 0.1;
|
||||
this.hue = random(0, 360);
|
||||
this.grayscaleColor = random(220, 240);
|
||||
this.opacity = 0;
|
||||
this.grayscaleOpacity = 0;
|
||||
this.opacityChange = 0.05;
|
||||
this.grayscaleOpacityChange = 0.01;
|
||||
this.opacityLimit = 1;
|
||||
this.grayscaleOpacityLimit = 1;
|
||||
this.ease = this.limit * 0.00796178344;
|
||||
this.opposite = random(1, 2) === 1;
|
||||
particles[particleIndex] = this;
|
||||
this.id = particleIndex;
|
||||
particleIndex++;
|
||||
}
|
||||
|
||||
thisParticleName.prototype.addX = function () {
|
||||
|
||||
thisContext.beginPath();
|
||||
if (this.opposite) {
|
||||
//MOVING RIGHT
|
||||
this.angle += this.speed;
|
||||
this.ease *= 0.99205;
|
||||
this.x = this.xInitial + (this.angle * 10 * (this.xInterval));
|
||||
this.y = this.yInitial - (Math.sin(this.angle) * 10 * this.yInterval) / 2;
|
||||
if (this.grayscaleLwStart < this.grayscaleLw) {
|
||||
this.grayscaleLwStart += this.grayscaleLwChange;
|
||||
}
|
||||
if (this.x > w) {
|
||||
delete particles[this.id];
|
||||
}
|
||||
if (this.grayscaleOpacity < this.grayscaleOpacityLimit) {
|
||||
this.grayscaleOpacity += this.grayscaleOpacityChange;
|
||||
}
|
||||
thisContext.fillStyle = `rgba(${this.grayscaleColor},${this.grayscaleColor},${this.grayscaleColor},${this.grayscaleOpacity})`;
|
||||
thisContext.arc(this.x, this.y, this.grayscaleLwStart, 0, Math.PI * 2);
|
||||
} else {
|
||||
//MOVING LEFT
|
||||
thisContext.moveTo(this.x, this.y);
|
||||
this.angle -= this.speed;
|
||||
this.ease *= 0.99205;
|
||||
this.x = this.xInitial + (this.angle * 10 * (this.xInterval));
|
||||
this.y = this.yInitial - (Math.sin(this.angle) * 10 * this.yInterval);
|
||||
if (this.lwStart < this.lw) {
|
||||
this.lwStart += this.lwChange;
|
||||
}
|
||||
if (this.x < 0) {
|
||||
delete particles[this.id];
|
||||
}
|
||||
if (this.opacity < this.opacityLimit) {
|
||||
this.opacity += this.opacityChange;
|
||||
}
|
||||
thisContext.fillStyle = `hsla(${this.hue},100%,50%,${this.opacity})`;
|
||||
thisContext.arc(this.x, this.y, this.lwStart, 0, Math.PI * 2);
|
||||
}
|
||||
thisContext.fill();
|
||||
}
|
||||
|
||||
thisCanvasFunction = function () {
|
||||
$(window).resize(function () {
|
||||
c.width = $('#c').outerWidth();
|
||||
c.height = $('#c').outerHeight();
|
||||
w = thisCanvas.width;
|
||||
h = thisCanvas.height;
|
||||
});
|
||||
thisContext.globalCompositeOperation = 'source-over';
|
||||
thisContext.fillStyle = 'rgba(0,0,0,0.07)';
|
||||
thisContext.fillRect(0, 0, c.width / 2, c.height);
|
||||
cx.fillStyle = 'rgba(255,255,255,0.1)';
|
||||
cx.fillRect(c.width / 2, 0, c.width / 2, c.height);
|
||||
if (!particlesLoaded) {
|
||||
for (var i = 0; i < particleNum; i++) {
|
||||
new thisParticleName();
|
||||
}
|
||||
}
|
||||
|
||||
// thisContext.globalCompositeOperation = 'lighter';
|
||||
for (var i in particles) {
|
||||
particles[i].addX();
|
||||
}
|
||||
window.requestAnimationFrame(thisCanvasFunction);
|
||||
}
|
||||
window.requestAnimationFrame(thisCanvasFunction);
|
||||
}
|
||||
|
||||
function cursorEvents(e) {
|
||||
mouseX = e.clientX;
|
||||
mouseY = e.clientY;
|
||||
}
|
||||
|
||||
curveFactory(c, cx, Line, canvas);
|
||||
});
|
||||
@@ -0,0 +1,112 @@
|
||||
@import 'https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i';
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Lato', sans-serif;
|
||||
background-color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
a,
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
float: left;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#container-bg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.black {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.white {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#c-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#c {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#ideas {
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.idea {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.idea-text {
|
||||
width: calc(100% - 20px);
|
||||
height: 100%;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 70px;
|
||||
padding: 0 10px;
|
||||
font-weight: 600;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/*GREAT IDEAS BURN*/
|
||||
#idea-text-left {
|
||||
color: white;
|
||||
text-align: right;
|
||||
text-shadow: 0px 0px 20px rgba(0,0,0,0.5)
|
||||
}
|
||||
|
||||
/*FUEL*/
|
||||
#idea-text-right {
|
||||
color: black;
|
||||
text-align: left;
|
||||
margin-top: 2em;
|
||||
}
|
||||
Reference in New Issue
Block a user