{"id":2,"date":"2026-03-05T01:05:21","date_gmt":"2026-03-05T01:05:21","guid":{"rendered":"https:\/\/lonepeak4wheelers.com\/?page_id=2"},"modified":"2026-03-14T12:42:13","modified_gmt":"2026-03-14T18:42:13","slug":"home","status":"publish","type":"page","link":"https:\/\/lonepeak4wheelers.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n<style>\n.parallax-hero {\n  width: 100%;\n  background: #5d6771 url('https:\/\/lonepeak4wheelers.com\/wp-content\/uploads\/topography.jpg') repeat;\n  margin-block-start: 0;\n}\n.parallax-hero__content {\n  position: relative;\n  width: 100%;\n  height: clamp(200px, 70vw, 700px);\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n  margin-block-start: 0;\n  max-width: 1440px;\n  margin: 0 auto;\n}\n.hero-bounded {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden; \/* This is what crops layers 1-4 *\/\n  z-index: 1;\n}\n.parallax-layer {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  \/* Extra height so the image doesn't run out when pushed down by JS *\/\n  \/* height: 120%; *\/\n  background-size: cover;\n  background-position: bottom center;\n  background-repeat: no-repeat;\n  will-change: transform; \/* Optimizes browser rendering for smooth animation *\/\n}\n.layer-1 {\n  background-image: url('https:\/\/lonepeak4wheelers.com\/wp-content\/uploads\/hero-layer-1.webp');\n  z-index: 1;\n  aspect-ratio: 16 \/ 9;\n  background-position: top center;\n  top: 0;\n  bottom: unset;\n  transform: translateY(-150px);\n}\n.layer-2 {\n  background-image: url('https:\/\/lonepeak4wheelers.com\/wp-content\/uploads\/hero-layer-2.webp');\n  z-index: 2;\n  aspect-ratio: 2.54 \/ 1;\n  transform: translateY(-100px);\n}\n.layer-3 {\n  background-image: url('https:\/\/lonepeak4wheelers.com\/wp-content\/uploads\/hero-layer-3-2.webp');\n  z-index: 3;\n  aspect-ratio: 2.33 \/ 1;\n  transform: translateY(-50px);\n}\n.layer-4 {\n  background-image: url('https:\/\/lonepeak4wheelers.com\/wp-content\/uploads\/hero-layer-4-2.webp');\n  z-index: 4;\n  aspect-ratio: 1 \/ 1;\n  transform: translateY(50px);\n  top: 0;\n  bottom: unset;\n}\n\/* Layer 5 (Jeep) is outside the bounded container *\/\n.layer-5 {\n  background-image: url('https:\/\/lonepeak4wheelers.com\/wp-content\/uploads\/hero-jeep1.webp');\n  z-index: 10;\n  height: 100%;\n  background-size: 70%;\n  \/* Pushes the jeep down slightly so it overlaps the content section *\/\n  transform: translateY(150px);\n  background-position-x: 35%;\n}\n.layer-5:hover {\n  cursor: pointer;\n}\n\n.layer-text {\n  font-size: 100px;\n  font-weight: 900;\n  color: white;\n  z-index: 4;\n  transform: translateY(-350px);\n  text-align: center;\n  border: 8px solid white;\n  width: fit-content;\n  left: 50%;\n  padding: 0px 50px;\n  text-shadow: 0 0 20px rgba(0,0,0,0.7);\n  letter-spacing: -8px;\n  background: rgba(0,0,0,0.1);\n}\n\n@media screen and (max-width: 800px) {\n  .layer-5 {\n    background-size: 110%;\n    background-position-x: 100%;\n  }\n  .layer-text {\n    left: 42%;\n    transform: translateY(-250px);\n  }\n}\n\n@media screen and (max-width: 600px) {\n  .layer-text {\n    left: 32%;\n    transform: translateY(-210px);\n  }\n}\n\n@media screen and (max-width: 530px) {\n  .layer-text {\n    left: 32%;\n    transform: translateY(-180px);\n    font-size: 80px;\n    padding: 0 40px;\n    letter-spacing: -6px;\n  }\n}\n\n@media screen and (max-width: 440px) {\n  .layer-text {\n    left: 32%;\n    transform: translateY(-150px);\n    font-size: 60px;\n    padding: 0 27px;\n    letter-spacing: -4px;\n    border-width: 6px;\n  }\n}\n<\/style>\n<section class=\"parallax-hero\">\n  <div class=\"parallax-hero__content\">\n    <div class=\"hero-bounded\">\n      <div class=\"parallax-layer layer-1\" data-speed=\"0.2\" data-offset=\"-150\"><\/div>\n      <div class=\"parallax-layer layer-2\" data-speed=\"0.3\" data-offset=\"-100\"><\/div>\n      <div class=\"parallax-layer layer-3\" data-speed=\"0.4\" data-offset=\"-50\"><\/div>\n      <div class=\"parallax-layer layer-text\" data-speed=\"0.25\" data-offset=\"-350\">LP4W<\/div>\n      <div class=\"parallax-layer layer-4\" data-speed=\"0.5\" data-offset=\"50\"><\/div>\n    <\/div>\n    <div class=\"parallax-layer layer-5\" data-speed=\"0.2\" data-offset=\"150\"><\/div>\n  <\/div>\n<\/section>\n\n<script>\n\n\/\/ Random Jeep Selector\nfunction randomJeep() {\n  const jeepLayer = document.querySelector('.layer-5');\n  const randomNumber = Math.floor(Math.random() * 7) + 1; \/\/ Generates 1 through 7\n  const selectedJeep = `hero-jeep${randomNumber}.webp`;\n  \/\/ Apply the random image\n  jeepLayer.style.backgroundImage = `url('https:\/\/lonepeak4wheelers.com\/wp-content\/uploads\/${selectedJeep}')`;\n}\n\nfunction clickJeepChangeColor() {\n  document.querySelector('.layer-5').addEventListener('click', function(e) {\n    e.preventDefault();\n    e.stopPropagation();\n    randomJeep();\n  })\n}\n\nfunction parallaxScroll(layers) {\n  let scrollY = window.pageYOffset;\n  layers.forEach(layer => {\n    \/\/ Get the speed from the HTML data attribute\n    let speed = layer.getAttribute('data-speed');\n    let offset = layer.getAttribute('data-offset');\n    let minOffset = layer.getAttribute('data-min-offset');\n    \/\/ Calculate how far to move the layer, dont move a layer beyond its minimum.\n    let yPos = (offset)-(scrollY * speed);\n    yPos = (minOffset === null || yPos > minOffset) ? yPos : minOffset;\n    \/\/ Apply the movement using CSS transform\n    layer.style.transform = `translateY(${yPos}px)`;\n  });\n}\n\n\/\/ Parallax scroll javascript\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  const layers = document.querySelectorAll('.parallax-layer');\n\n  layers.forEach(layer => {\n    const style = window.getComputedStyle(layer);\n    const matrix = style.transform || style.webkitTransform || style.mozTransform;\n\n    let translateYValue = 0;\n\n    if (matrix && matrix !== 'none') {\n        \/\/ matrix(a, b, c, d, tx, ty) or matrix3d(a1, b1, ... a4, b4, c4, d4)\n        const values = matrix.match(\/matrix.*\\((.+)\\)\/)[1].split(', ');\n        const is3D = matrix.includes('3d');\n\n        \/\/ 2D matrix: translateY is the 6th value (index 5)\n        \/\/ 3D matrix: translateY is the 14th value (index 13)\n        translateYValue = is3D ? parseFloat(values[13]) : parseFloat(values[5]);\n    }\n\n    layer.setAttribute('data-offset', translateYValue);\n});\n\n  window.addEventListener('scroll', function() {\n    parallaxScroll(layers);\n  });\n\n  randomJeep();\n  clickJeepChangeColor();\n});\n<\/script>\n\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading is-style-text-display is-style-text-display--2 content-width has-accent-2-color\">\n  4WD Required&#8230;<br \/>\n  <span id=\"typewriter\"><\/span> Optional\n<\/h2>\n\n<script>\nconst words = [\"Pavement\", \"Car Wash\", \"Paint Job\", \"Cell Service\", \"Street Signs\", \"Sway Bar\", \"Doors\", \"Rubber Ducks\"];\nconst target = document.getElementById(\"typewriter\");\nlet wordIndex = 0;\n\nasync function typeEffect() {\n    while (true) {\n        let word = words[wordIndex];\n\n        \/\/ Type the word\n        for (let i = 0; i <= word.length; i++) {\n            target.innerText = word.substring(0, i);\n            await new Promise(res => setTimeout(res, 150)); \/\/ Typing speed\n        }\n\n        await new Promise(res => setTimeout(res, 5000)); \/\/ Pause at end\n\n        \/\/ Delete the word\n        for (let i = word.length; i >= 0; i--) {\n            target.innerText = word.substring(0, i);\n            await new Promise(res => setTimeout(res, 75)); \/\/ Deleting speed\n        }\n\n        wordIndex = (wordIndex + 1) % words.length; \/\/ Cycle to next word\n        await new Promise(res => setTimeout(res, 500)); \/\/ Pause before next word\n    }\n}\n\n\/\/ Start the loop\ntypeEffect();\n<\/script>\n\n\n\n<p class=\"is-style-default, content-width\">Welcome to the <strong>Lone Peak 4 Wheelers<\/strong>, the premier Jeep club serving off-road enthusiasts across the Wasatch Front. Based primarily in the Salt Lake City and Utah County areas, our club is a community of adventure-seekers dedicated to exploring the rugged beauty of the Beehive State. Whether we&#8217;re navigating the iconic red rock technical trails of Southern and Central Utah or climbing the scenic, pine-covered switchbacks of the Norther Utah Canyons, our members share a passion for the &#8220;Jeep Life,&#8221; responsible trail stewardship, and the camaraderie that only comes from a day spent in 4-Low.<\/p>\n\n\n\n<div style=\"height:52px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading is-style-text-display content-width has-accent-2-color has-text-color has-link-color wp-elements-cf25c92f2ba7f8fa10710915a6e9a6bf is-style-text-display--1\">Trail Stewardship<\/h2>\n\n\n\n<p class=\"is-style-default, content-width has-medium-font-size\">At the heart of the Lone Peak 4 Wheelers is a deep commitment to preserving the trails we love through active stewardship and responsible recreation. We don&#8217;t just use the land; we protect it. As proud members of the <strong>Blue Ribbon Coalition<\/strong>, we advocate for continued access to public lands while promoting the &#8220;Tread Lightly!&#8221; principles that keep our ecosystems healthy. Our dedication is most visible during our annual <strong>National Public Lands Day<\/strong> projects, where our members trade their steering wheels for pruning shears and trash bags to maintain trails, remove debris, and ensure that Utah\u2019s stunning backcountry remains pristine for the next generation of explorers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>LP4W 4WD Required&#8230; Optional Welcome to the Lone Peak 4 Wheelers, the premier Jeep club serving off-road enthusiasts across the Wasatch Front. Based primarily in the Salt Lake City and Utah County areas, our club is a community of adventure-seekers dedicated to exploring the rugged beauty of the Beehive State. Whether we&#8217;re navigating the iconic [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lonepeak4wheelers.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lonepeak4wheelers.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lonepeak4wheelers.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lonepeak4wheelers.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lonepeak4wheelers.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":5,"href":"https:\/\/lonepeak4wheelers.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/lonepeak4wheelers.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/189"}],"wp:attachment":[{"href":"https:\/\/lonepeak4wheelers.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}