• 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

VPS Starter Arubacloud
0 głosów
401 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,060 p.)

Podobne pytania

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

92,453 zapytań

141,262 odpowiedzi

319,087 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...