Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Logo #1

Open
krzysztofprz opened this issue Jul 5, 2023 · 5 comments
Open

Logo #1

krzysztofprz opened this issue Jul 5, 2023 · 5 comments

Comments

@krzysztofprz
Copy link
Collaborator

Aktualny kod:

function logoSwitch(sectionLogoClass, prevSectionLogoClass, colorClass)
{
    $(sectionLogoClass).each(function ()
    {
        var prevSectionLogo = $(prevSectionLogoClass);
        var row = $(this).closest('.row');

        // Sprawdzenie, czy poprzednie logo i wiersz są widoczne
        if (prevSectionLogo.is(':visible') && row.is(':visible'))
        {
            var prevSectionLogoTop = prevSectionLogo.offset().top;
            var rowOffsetTop = row.offset().top;
            $(this).css('top', prevSectionLogoTop - rowOffsetTop);

            // Zmiana koloru
            var color = $(colorClass).css('color');
            $(this).css('color', color);
        }
    });
}

$(document).scroll(function ()
{
    logoSwitch('.section-2-logo', '.section-1-logo', '.section-1-logo');
    logoSwitch('.section-3-logo', '.section-2-logo', '.section-1-logo');
    logoSwitch('.section-4-logo', '.section-3-logo', '.section-2-logo');
    logoSwitch('.section-5-logo', '.section-4-logo', '.section-1-logo');
});

logoSwitch('.section-2-logo', '.section-1-logo', '.section-1-logo');
logoSwitch('.section-3-logo', '.section-2-logo', '.section-1-logo');
logoSwitch('.section-4-logo', '.section-3-logo', '.section-2-logo');
logoSwitch('.section-5-logo', '.section-4-logo', '.section-1-logo');

ChatGPT -> zoptymalizuj poniższy kod JS

function logoSwitch(sectionLogoClass, prevSectionLogoClass, colorClass) {
  var prevSectionLogo = $(prevSectionLogoClass);
  var color = $(colorClass).css('color');

  $(sectionLogoClass).each(function() {
    var row = $(this).closest('.row');

    // Sprawdzenie, czy poprzednie logo i wiersz są widoczne
    if (prevSectionLogo.is(':visible') && row.is(':visible')) {
      var prevSectionLogoTop = prevSectionLogo.offset().top;
      var rowOffsetTop = row.offset().top;
      $(this).css('top', prevSectionLogoTop - rowOffsetTop);

      // Zmiana koloru
      $(this).css('color', color);
    }
  });
}

$(document).scroll(function() {
  logoSwitch('.section-2-logo', '.section-1-logo', '.section-1-logo');
  logoSwitch('.section-3-logo', '.section-2-logo', '.section-1-logo');
  logoSwitch('.section-4-logo', '.section-3-logo', '.section-2-logo');
  logoSwitch('.section-5-logo', '.section-4-logo', '.section-1-logo');
});

logoSwitch('.section-2-logo', '.section-1-logo', '.section-1-logo');
logoSwitch('.section-3-logo', '.section-2-logo', '.section-1-logo');
logoSwitch('.section-4-logo', '.section-3-logo', '.section-2-logo');
logoSwitch('.section-5-logo', '.section-4-logo', '.section-1-logo');

Oto opis wprowadzonych zmian:

  1. Przeniesiono inicjalizację prevSectionLogo i color poza pętlę .each(). Nie ma potrzeby inicjalizować ich za każdym razem wewnątrz pętli, ponieważ są stałe dla danego wywołania logoSwitch().

  2. Przeniesiono pobieranie row poza pętlę .each(). Pobieranie .closest('.row') jest niezależne od elementów .section-2-logo, .section-3-logo itd. Nie ma potrzeby wykonywać tej samej operacji w każdej iteracji pętli.

  3. Pobranie wartości $(colorClass).css('color') przeniesiono przed pętlę .each(). Ponownie, ta wartość nie zmienia się w trakcie iteracji i nie ma potrzeby pobierania jej za każdym razem.

Te zmiany zmniejszą liczbę operacji i przyspieszą wykonanie kodu. Dodatkowo, jeśli możliwe, upewnij się, że używasz najnowszych wersji bibliotek JavaScript, takich jak jQuery, aby zapewnić optymalność i wydajność działania kodu.
@krzysztofprz
Copy link
Collaborator Author

Ten kod zostaw:

function logoSwitch(sectionLogoClass, prevSectionLogoClass, colorClass) {
  const prevSectionLogo = $(prevSectionLogoClass);
  const color = $(colorClass).css('color');

  $(sectionLogoClass).each(function() {
    const row = $(this).closest('.row');

    // Sprawdzenie, czy poprzednie logo i wiersz są widoczne
    if (prevSectionLogo.is(':visible') && row.is(':visible')) {
      $(this).css('top', prevSectionLogo.offset().top - row.offset().top);

      // Zmiana koloru
      $(this).css('color', color);
    }
  });
}

$(document).scroll(function() {
  logoSwitch('.section-2-logo', '.section-1-logo', '.section-1-logo');
  logoSwitch('.section-3-logo', '.section-2-logo', '.section-1-logo');
  logoSwitch('.section-4-logo', '.section-3-logo', '.section-2-logo');
  logoSwitch('.section-5-logo', '.section-4-logo', '.section-1-logo');
});

logoSwitch('.section-2-logo', '.section-1-logo', '.section-1-logo');
logoSwitch('.section-3-logo', '.section-2-logo', '.section-1-logo');
logoSwitch('.section-4-logo', '.section-3-logo', '.section-2-logo');
logoSwitch('.section-5-logo', '.section-4-logo', '.section-1-logo');

@przwojwwp
Copy link
Owner

przwojwwp commented Jul 5, 2023 via email

@przwojwwp
Copy link
Owner

logo w tagu svg.txt

@krzysztofprz
Copy link
Collaborator Author

krzysztofprz commented Jul 5, 2023 •
edited
Loading 

function logoSwitch(sectionLogoClass, prevSectionLogoClass, colorClass) {
	$(sectionLogoClass).each(function () {
		var prevSectionLogo = $(prevSectionLogoClass);
		var row = $(this).closest(".row");

		// Sprawdzenie, czy poprzednie logo i wiersz są widoczne
		if (prevSectionLogo.is(":visible") && row.is(":visible")) {
			var prevSectionLogoTop = prevSectionLogo.offset().top;
			var rowOffsetTop = row.offset().top;
			$(this).css("top", prevSectionLogoTop - rowOffsetTop);

			// Zmiana koloru
			var color = $(colorClass).css("color");
			$(this).css("color", color);
		}
	});
}


var section1Height;
var section2Height;
var section3Height;
var section4Height;

$(document).ready(function () {
	section1Height = $(".section-1").outerHeight(true) + $(".section-1-logo").outerHeight(true);
	section2Height = section1Height + $(".section-2").outerHeight(true);
	section3Height = section2Height + $(".section-3").outerHeight(true);
	section4Height = section3Height + $(".section-4").outerHeight(true);

	console.log(section1Height);
	console.log(section2Height);
	console.log(section3Height);
	console.log(section4Height);
});

$(document).scroll(function () {
	let fromTop = $(window).scrollTop();

	if (fromTop > section1Height && fromTop < section2Height) {
		console.log("section1");
		logoSwitch(".section-2-logo", ".section-1-logo", ".section-1-logo");
	}

	if (fromTop > section2Height && fromTop < section3Height) {
		console.log("section2");

		logoSwitch(".section-3-logo", ".section-2-logo", ".section-1-logo");
	}

	if (fromTop > section3Height && fromTop < section4Height) {
		console.log("section3");

		logoSwitch(".section-4-logo", ".section-3-logo", ".section-2-logo");
	}

	if (fromTop > section4Height) {
		console.log("section4");

		logoSwitch(".section-5-logo", ".section-4-logo", ".section-1-logo");
	}
});

// logoSwitch(".section-2-logo", ".section-1-logo", ".section-1-logo");
// logoSwitch(".section-3-logo", ".section-2-logo", ".section-1-logo");
// logoSwitch(".section-4-logo", ".section-3-logo", ".section-2-logo");
// logoSwitch(".section-5-logo", ".section-4-logo", ".section-1-logo");

image

@krzysztofprz
Copy link
Collaborator Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@krzysztofprz @przwojwwp