Файлы для сайта

2026-09-17 02:08:49 +00:00 · 2021-11-26 20:10:06 +07:00
parent 31a64bf0e5
commit c768d8ed92
9 changed files with 10207 additions and 0 deletions
@@ -0,0 +1,2 @@
+# shevelevdesign.github.io
+Мой сайт
@@ -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>
@@ -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;
+}