• 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
69 wizyt
pytanie zadane 29 maja 2018 w HTML i CSS przez bugs55 Użytkownik (990 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,300 p.)
position: relative albo position:absolute powinno rozwiązać problem.
komentarz 29 maja 2018 przez bugs55 Użytkownik (990 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,300 p.)
To co za problem wycentrować marginem? :)
komentarz 29 maja 2018 przez bugs55 Użytkownik (990 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,490 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,300 p.)

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

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

Podobne pytania

0 głosów
3 odpowiedzi 70 wizyt
pytanie zadane 21 marca 2017 w HTML i CSS przez leemish Użytkownik (740 p.)
0 głosów
1 odpowiedź 127 wizyt
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

65,642 zapytań

112,267 odpowiedzi

236,888 komentarzy

46,640 pasjonatów

Przeglądających: 155
Pasjonatów: 9 Gości: 146

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.

...