• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Animowane tło i tekst - dwa divy nie chcą się nałożyć na siebie

0 głosów
60 wizyt
pytanie zadane 29 maja 2018 w HTML i CSS przez bugs55 Użytkownik (970 p.)

Cześć!
Przychodzę do was dzisiaj z takim oto problemem. Robię stronę internetową dla własnych potrzeb i chciałem do headera, za napisem, dodać jakąś fajną interaktywną animację. Jednak nie mam pojęcia jak ustawić je nad sobą, żeby dana animacja była pod spodem. Ważne aby napis był wyśrodkowany. Wrzucam to co najważniejsze.

Chciałbym, żeby napis Brandline z opisem w divie "center" był nad divem "large-header" (animowanym tłem)
Dodaję też kod js animacji.

Proszę o pomoc! :)

<header>
<div id="center">
			<div id="title">BRANDLINE</div>
			<div id="description">Nowe oblicze Twojej marki</div>
		</div>
		<div id="large-header" class="large-header">
			<canvas id="demo-canvas"></canvas>
		</div>
	</header>
header{
	height: 100vh;
	width: 100%;
	line-height: 100vh;
	background-color: #1a1a1a;
	/*overflow: hidden;*/
}

#center{
	width: 100%;
	text-align: center;
	line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

#title{
	font-weight: 700;
	font-size: 130px;
	font-family: 'Jaap';
	color: #ff4d4d;
}

#description{
	font-size: 30px;
	color: #999999;
	font-family: 'Lato', sans-serif;
}
(function() {

    var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;

    // Main
    initHeader();
    initAnimation();
    addListeners();

    function initHeader() {
        width = window.innerWidth;
        height = window.innerHeight;
        target = {x: width/2, y: height/2};

        largeHeader = document.getElementById('large-header');
        largeHeader.style.height = height+'px';

        canvas = document.getElementById('demo-canvas');
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext('2d');

        // create points
        points = [];
        for(var x = 0; x < width; x = x + width/20) {
            for(var y = 0; y < height; y = y + height/20) {
                var px = x + Math.random()*width/20;
                var py = y + Math.random()*height/20;
                var p = {x: px, originX: px, y: py, originY: py };
                points.push(p);
            }
        }

        // for each point find the 5 closest points
        for(var i = 0; i < points.length; i++) {
            var closest = [];
            var p1 = points[i];
            for(var j = 0; j < points.length; j++) {
                var p2 = points[j]
                if(!(p1 == p2)) {
                    var placed = false;
                    for(var k = 0; k < 5; k++) {
                        if(!placed) {
                            if(closest[k] == undefined) {
                                closest[k] = p2;
                                placed = true;
                            }
                        }
                    }

                    for(var k = 0; k < 5; k++) {
                        if(!placed) {
                            if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
                                closest[k] = p2;
                                placed = true;
                            }
                        }
                    }
                }
            }
            p1.closest = closest;
        }

        // assign a circle to each point
        for(var i in points) {
            var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
            points[i].circle = c;
        }
    }

    // Event handling
    function addListeners() {
        if(!('ontouchstart' in window)) {
            window.addEventListener('mousemove', mouseMove);
        }
        window.addEventListener('scroll', scrollCheck);
        window.addEventListener('resize', resize);
    }

    function mouseMove(e) {
        var posx = posy = 0;
        if (e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY)    {
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        target.x = posx;
        target.y = posy;
    }

    function scrollCheck() {
        if(document.body.scrollTop > height) animateHeader = false;
        else animateHeader = true;
    }

    function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        largeHeader.style.height = height+'px';
        canvas.width = width;
        canvas.height = height;
    }

    // animation
    function initAnimation() {
        animate();
        for(var i in points) {
            shiftPoint(points[i]);
        }
    }

    function animate() {
        if(animateHeader) {
            ctx.clearRect(0,0,width,height);
            for(var i in points) {
                // detect points in range
                if(Math.abs(getDistance(target, points[i])) < 4000) {
                    points[i].active = 0.3;
                    points[i].circle.active = 0.6;
                } else if(Math.abs(getDistance(target, points[i])) < 20000) {
                    points[i].active = 0.1;
                    points[i].circle.active = 0.3;
                } else if(Math.abs(getDistance(target, points[i])) < 40000) {
                    points[i].active = 0.02;
                    points[i].circle.active = 0.1;
                } else {
                    points[i].active = 0;
                    points[i].circle.active = 0;
                }

                drawLines(points[i]);
                points[i].circle.draw();
            }
        }
        requestAnimationFrame(animate);
    }

    function shiftPoint(p) {
        TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
            y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
            onComplete: function() {
                shiftPoint(p);
            }});
    }

    // Canvas manipulation
    function drawLines(p) {
        if(!p.active) return;
        for(var i in p.closest) {
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p.closest[i].x, p.closest[i].y);
            ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
            ctx.stroke();
        }
    }

    function Circle(pos,rad,color) {
        var _this = this;

        // constructor
        (function() {
            _this.pos = pos || null;
            _this.radius = rad || null;
            _this.color = color || null;
        })();

        this.draw = function() {
            if(!_this.active) return;
            ctx.beginPath();
            ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')';
            ctx.fill();
        };
    }

    // Util
    function getDistance(p1, p2) {
        return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
    }
    
})();

 

2 odpowiedzi

0 głosów
odpowiedź 29 maja 2018 przez Paweł Mansfeld Obywatel (1,260 p.)
position: relative albo position:absolute powinno rozwiązać problem.
komentarz 29 maja 2018 przez bugs55 Użytkownik (970 p.)
Próbowałem, ale kiedy dałem do #center top:0 i position:absolute to napis był na samej górze a musi być na środku
komentarz 29 maja 2018 przez Paweł Mansfeld Obywatel (1,260 p.)
To co za problem wycentrować marginem? :)
komentarz 29 maja 2018 przez bugs55 Użytkownik (970 p.)
z marginesem z lewej i prawej nie ma problemu, chodzi mi o to, żeby to było po środku wysokości, ja to zrobiłem line-height, a kiedy dodam to co wymieniłem to napis jest na samej górze a nie w połowie wysokości
komentarz 29 maja 2018 przez kenjiro244 Mądrala (7,380 p.)

No może być ciężko bo musisz ustawić chyba wartości manualnie jest taka powiedzmy sztuczka jak wyśrodkować element z position aboslute:

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

I to wyśrodkuje element względem elementu z position: relative

komentarz 29 maja 2018 przez Paweł Mansfeld Obywatel (1,260 p.)

@bugs55, Mamy jeszcze coś takiego jak jednostkę vh :)

0 głosów
odpowiedź 29 maja 2018 przez pablop76 Szeryf (91,270 p.)

Podobne pytania

0 głosów
3 odpowiedzi 69 wizyt
pytanie zadane 21 marca 2017 w HTML i CSS przez leemish Użytkownik (740 p.)
0 głosów
1 odpowiedź 125 wizyt
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

63,237 zapytań

109,481 odpowiedzi

228,702 komentarzy

43,243 pasjonatów

Przeglądających: 293
Pasjonatów: 18 Gości: 275

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...