Parallax Navbar: HTML, CSS & JavaScript ile Olu\u015fturma<\/p>\n
Merhaba! Bu makalede, sadece HTML, CSS ve JavaScript kullanarak parallax efektli bir navigasyon \u00e7ubu\u011fu (navbar) nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Bu teknik, web sitenize modern ve etkileyici bir g\u00f6r\u00fcn\u00fcm kazand\u0131racakt\u0131r. Haz\u0131rsan\u0131z ba\u015flayal\u0131m!<\/p>\n
\u00d6ncelikle, projemizin temel HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Bu yap\u0131da, navbar’\u0131m\u0131z i\u00e7in bir div ve i\u00e7erik alan\u0131m\u0131z i\u00e7in ba\u015fka bir div kullanaca\u011f\u0131z. Navbar’\u0131n i\u00e7indeki \u00f6\u011feler (logo, men\u00fc \u00f6\u011feleri vb.) nav etiketi i\u00e7inde yer alacakt\u0131r.<\/p>\n
\n<div id=\"navbar\">\n <nav>\n <a href=\"#\">Logo<\/a>\n <ul>\n <li><a href=\"#\">Ana Sayfa<\/a><\/li>\n <li><a href=\"#\">Hakk\u0131m\u0131zda<\/a><\/li>\n <li><a href=\"#\">\u0130leti\u015fim<\/a><\/li>\n <\/ul>\n <\/nav>\n<\/div>\n<div id=\"content\">\n <!-- \u0130\u00e7erik burada yer alacak -->\n<\/div>\n<\/code><\/pre>\nCSS Stili<\/h2>\n
\u015eimdi, HTML yap\u0131m\u0131z\u0131 stil verelim. Parallax efektini olu\u015fturmak i\u00e7in, navbar’\u0131n pozisyonunu fixed olarak ayarlayaca\u011f\u0131z. Ayr\u0131ca, sayfa kayd\u0131r\u0131ld\u0131\u011f\u0131nda navbar’\u0131n arka plan pozisyonunu de\u011fi\u015ftirmek i\u00e7in background-position \u00f6zelli\u011fini kullanaca\u011f\u0131z. Bunun yan\u0131nda, responsive tasar\u0131m i\u00e7in medya sorgular\u0131 da ekleyelim.<\/p>\n
\n#navbar {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n background-color: #333;\n color: #fff;\n z-index: 1000; \/* Di\u011fer \u00f6\u011felerin \u00fcst\u00fcnde kalmas\u0131n\u0131 sa\u011flar *\/\n transition: background-position 0.5s ease; \/* Ge\u00e7i\u015f efekti ekler *\/\n}\n\n#navbar nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 20px;\n}\n\n#navbar ul {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n}\n\n#navbar li {\n margin-left: 20px;\n}\n\n\/* Parallax efekti i\u00e7in *\/\nbody {\n background-attachment: fixed;\n}\n\nbody.parallax-scrolling #navbar {\n background-position: 50% calc(50vh + 50%);\n}\n<\/code><\/pre>\nJavaScript \u0130\u015flemleri<\/h2>\n
Son olarak, JavaScript kullanarak sayfan\u0131n kayd\u0131r\u0131lma olay\u0131n\u0131 dinleyip, navbar’\u0131n arka plan pozisyonunu dinamik olarak de\u011fi\u015ftirece\u011fiz. Bu sayede parallax efekti olu\u015facakt\u0131r.<\/p>\n
\nwindow.addEventListener('scroll', function() {\n document.body.classList.add('parallax-scrolling')\n});\n<\/code><\/pre>\nBu kod, sayfa kayd\u0131r\u0131ld\u0131\u011f\u0131nda parallax-scrolling s\u0131n\u0131f\u0131n\u0131 body’ye ekler. CSS’deki .parallax-scrolling se\u00e7icisi bu s\u0131n\u0131fa sahip oldu\u011funda background-position \u00f6zelli\u011finin de\u011ferini de\u011fi\u015ftirir ve b\u00f6ylece parallax efekti ortaya \u00e7\u0131kar.<\/p>\n