• 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

Cloud VPS
0 głosów
775 wizyt
pytanie zadane 29 maja 2018 w HTML i CSS przez bugs55 Obywatel (1,090 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,420 p.)
position: relative albo position:absolute powinno rozwiązać problem.
komentarz 29 maja 2018 przez bugs55 Obywatel (1,090 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,420 p.)
To co za problem wycentrować marginem? :)
komentarz 29 maja 2018 przez bugs55 Obywatel (1,090 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 Dyskutant (8,600 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,420 p.)

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

0 głosów
odpowiedź 29 maja 2018 przez pablop76 VIP (123,580 p.)

Podobne pytania

0 głosów
3 odpowiedzi 475 wizyt
0 głosów
3 odpowiedzi 447 wizyt
pytanie zadane 21 marca 2017 w HTML i CSS przez leemish Użytkownik (780 p.)
0 głosów
1 odpowiedź 389 wizyt

93,487 zapytań

142,423 odpowiedzi

322,773 komentarzy

62,910 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Kursy INF.02 i INF.03
...