CodePen Embed - Take me to the beach

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Best Beaches in the World</title>
</head>

<body>
  <header>
    <h1>Best Beaches in the World</h1>
  </header>
  <main>
    <section>
      <h2>Take me to the beach!</h2>
      <p>Welcome to our curated list of the best beaches in the world. Select a beach from the dropdown to Take me to the beach!</p>
    </section>
    <section>
      <h2>Select a Beach</h2>
      <select id="beach-select">
        <option value="" disabled selected>Select a beach</option>
        <option value="whitehaven">Whitehaven Beach, Australia</option>
        <option value="gracebay">Grace Bay, Turks and Caicos</option>
        <option value="baia">Baia do Sancho, Brazil</option>
        <option value="navagio">Navagio Beach, Greece</option>
        <option value="playa">Playa Paraiso, Mexico</option>
        <option value="anse">Anse Source d'Argent, Seychelles</option>
        <option value="sevenmile">Seven Mile Beach, Cayman Islands</option>
        <option value="borabora">Bora Bora, French Polynesia</option>
        <option value="lanikai">Lanikai Beach, Hawaii</option>
        <option value="pink">Pink Sands Beach, Bahamas</option>
      </select>
    </section>
    <section id="animation-section">
      <div id="beach-container">
        <div class="me">
          
          <div class="torso">
            <div class="left leg">
              <div class="left thigh">
                <div class="left shin">
                  <div class="left foot">
                    <div class="left toes"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right leg">
              <div class="right thigh">
                <div class="right shin">
                  <div class="right foot">
                    <div class="right toes"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="left arm">
              <div class="left bicep">
                <div class="left forearm"></div>
              </div>
            </div>
            <div class="right arm">
              <div class="right bicep">
                <div class="right forearm"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="shadow"></div>
      </div>
    </section>
  </main>
</body>

</html>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f8ff;
  color: #333;
}

header {
  background: url("https://www.thetopvillas.com/blog/wp-content/uploads/2021/07/Florida-beaches.jpg")
    no-repeat center center/cover;
  color: white;
  padding: 20px 0;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
  margin: 0;
  font-size: 3em;
}

main {
  padding: 20px;
}

section {
  margin-bottom: 20px;
}

h2 {
  font-size: 2em;
  border-bottom: 2px solid #ff7f50;
  padding-bottom: 10px;
}

#beach-select {
  padding: 10px;
  width: 100%;
  max-width: 700px;
  font-size: 1em;
  border: 2px solid #ccc;
  border-radius: 4px;
  margin-top: 10px;
}

#animation-section {
  position: relative;
  height: 700px;
  /*   background-color: #87ceeb; */
  background-image: url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YmVhdXRpZnVsJTIwYmVhY2h8ZW58MHx8MHx8fDA%3D");
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  background-repeat: no-repeat;
  background-size: cover;
}

#beach-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease;
}

.me {
  position: absolute;
  top: 90px;
  left: -100px;
  animation: me-walk 10s linear infinite;
}

.torso {
  width: 86px;
  height: 275px;
  background-image: url("https://andrew.wang-hoyer.com/experiments/walking/assets/images/me/torso.png");
}

.leg,
.arm,
.bicep,
.forearm,
.thigh,
.shin,
.foot,
.toes {
  position: absolute;
  background-repeat: no-repeat;
}

.arm {
  width: 51px;
  transform-origin: 20px 10px;
  -webkit-transform-origin: 20px 10px;
  animation-duration: 1.75s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.right.arm {
  top: 95px;
  -webkit-animation-name: right-bicep;
}
.left.arm {
  top: 75px;
  left: 8px;
  -webkit-animation-name: left-bicep;
}

.bicep {
  height: 124px;
  width: 51px;
}

.right.bicep {
  background-image: url("https://andrew.wang-hoyer.com/experiments/walking/assets/images/me/right-bicep.png");
}
.left.bicep {
  background-image: url("https://andrew.wang-hoyer.com/experiments/walking/assets/images/me/left-bicep.png");
}

.leg {
  left: 6px;
  animation-duration: 1.75s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 30px 20px;
  -webkit-transform-origin: 30px 20px;
  -webkit-animation-name: thigh;
}
.right.leg {
  top: 240px;
  -webkit-animation-name: right-thigh;
}

.left.leg {
  top: 220px;
  -webkit-animation-name: left-thigh;
}

.forearm {
  top: 108px;
  left: 14px;
  width: 36px;
  height: 121px;
  transform-origin: 3px 7px;
  -webkit-transform-origin: 3px 7px;
  animation-duration: 1.75s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.right.forearm {
  background-image: url("https://andrew.wang-hoyer.com/experiments/walking/assets/images/me/right-forearm.png");
  -webkit-animation-name: right-forearm;
}

.left.forearm {
  background-image: url("https://andrew.wang-hoyer.com/experiments/walking/assets/images/me/left-forearm.png");
  -webkit-animation-name: left-forearm;
}

.thigh {
  width: 70px;
  height: 145px;
}

.left.thigh {
  background-image: url("https://andrew.wang-hoyer.com/experiments/walking/assets/images/me/left-thigh.png");
}
.right.thigh {
  background-image: url("https://andrew.wang-hoyer.com/experiments/walking/assets/images/me/right-thigh.png");
}

.shin {
  top: 115px;
  width: 50px;
  height: 170px;
  background-image: url("https://andrew.wang-hoyer.com/experiments/walking/assets/images/me/shin.png");
  transform-origin: 30px 25px;
  -webkit-transform-origin: 30px 25px;
  animation-duration: 1.75s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.right.shin {
  animation-name: right-shin;
}
.left.shin {
  animation-name: left-shin;
}

.foot {
  top: 155px;
  left: 2px;
  width: 67px;
  height: 34px;
  background-image: url("https://andrew.wang-hoyer.com/experiments/walking/assets/images/me/foot.png");
  transform-origin: 0 50%;
  -webkit-transform-origin: 0 50%;
  animation-duration: 1.75s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.right.foot {
  animation-name: right-foot;
}
.left.foot {
  animation-name: left-foot;
}

.toes {
  top: 9px;
  left: 66px;
  width: 28px;
  height: 25px;
  background-image: url("https://andrew.wang-hoyer.com/experiments/walking/assets/images/me/toes.png");
  transform-origin: 0% 100%;
  -webkit-transform-origin: 0% 100%;
  animation-duration: 1.75s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.right.toes {
  animation-name: right-toes;
}
.left.toes {
  animation-name: left-toes;
}

.shadow {
  position: absolute;
  background-repeat: no-repeat;
  width: 600px;
  height: 70px;
  left: -175px;
  bottom: 30px;
  background-image: url("https://andrew.wang-hoyer.com/experiments/walking/assets/images/misc/shadow.png");
  animation: me-walk 10s linear infinite;
}

/* setting proper z-indexes so that limbs show up correctly */

div.right.arm {
  z-index: 1;
}
div.left.arm {
  z-index: -3;
}
div.arm > div.bicep > div.forearm {
  z-index: -1;
}

div.right.leg {
  z-index: -1;
}
div.left.leg {
  z-index: -2;
}
div.leg > div.thigh > div.shin {
  z-index: -1;
}

@keyframes me-walk {
  0% {
    transform: rotate(5deg) translate(5px, 0px);
  }
  25% {
  }
  100% {
    transform: rotate(5deg) translate(calc(100vw - 100px), 30px);
  }
}

@-webkit-keyframes right-bicep {
  0% {
    -webkit-transform: rotate(26deg);
  }
  50% {
    -webkit-transform: rotate(-20deg);
  }
  100% {
    -webkit-transform: rotate(26deg);
  }
}

@-webkit-keyframes left-bicep {
  0% {
    -webkit-transform: rotate(-20deg);
  }
  50% {
    -webkit-transform: rotate(26deg);
  }
  100% {
    -webkit-transform: rotate(-20deg);
  }
}

@-webkit-keyframes right-forearm {
  0% {
    -webkit-transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(-45deg);
  }
  100% {
    -webkit-transform: rotate(-10deg);
  }
}

@-webkit-keyframes left-forearm {
  0% {
    -webkit-transform: rotate(-45deg);
  }
  50% {
    -webkit-transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(-45deg);
  }
}

@-webkit-keyframes right-thigh {
  0% {
    -webkit-transform: rotate(-45deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(-45deg);
  }
}

@-webkit-keyframes left-thigh {
  0% {
    -webkit-transform: rotate(10deg);
  }
  50% {
    -webkit-transform: rotate(-45deg);
  }
  100% {
    -webkit-transform: rotate(10deg);
  }
}

@-webkit-keyframes right-shin {
  0% {
    -webkit-transform: rotate(30deg);
  }
  25% {
    -webkit-transform: rotate(20deg);
  }
  50% {
    -webkit-transform: rotate(20deg);
  }
  75% {
    -webkit-transform: rotate(85deg);
  }
  100% {
    -webkit-transform: rotate(30deg);
  }
}

@-webkit-keyframes left-shin {
  0% {
    -webkit-transform: rotate(20deg);
  }
  25% {
    -webkit-transform: rotate(85deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
  }
  75% {
    -webkit-transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(20deg);
  }
}

@-webkit-keyframes right-foot {
  0% {
    -webkit-transform: rotate(-5deg);
  }
  25% {
    -webkit-transform: rotate(-7deg);
  }
  50% {
    -webkit-transform: rotate(-16deg);
  }
  75% {
    -webkit-transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(-5deg);
  }
}

@-webkit-keyframes left-foot {
  0% {
    -webkit-transform: rotate(-16deg);
  }
  25% {
    -webkit-transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(-5deg);
  }
  75% {
    -webkit-transform: rotate(-7deg);
  }
  100% {
    -webkit-transform: rotate(-16deg);
  }
}

@-webkit-keyframes right-toes {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(-10deg);
  }
  75% {
    -webkit-transform: rotate(-25deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

@-webkit-keyframes left-toes {
  0% {
    -webkit-transform: rotate(-10deg);
  }
  25% {
    -webkit-transform: rotate(-25deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(-10deg);
  }
}

@keyframes shadow {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(calc(100vw - 600px));
  }
}

document.getElementById("beach-select").addEventListener("change", function () {
  const selectedBeach = this.value;
  const beachContainer = document.getElementById("beach-container");
  let backgroundImage = "";
  switch (selectedBeach) {
    case "whitehaven":
      backgroundImage =
        'url("https://www.zastavki.com/pictures/originals/2014/World___Australia_Whitehaven_Beach_in_Australia_060422_.jpg")';
      break;
    case "gracebay":
      backgroundImage =
        'url("https://turksandcaicostourism.com/wp-content/uploads/2021/03/grace-bay-beach-turks-caicos-islands.jpg")';
      break;
    case "baia":
      backgroundImage =
        'url("https://edition.cnn.com/interactive/travel/best-beaches/baia-do-sancho/images/photo2.jpg")';
      break;
    case "navagio":
      backgroundImage =
        'url("https://wedding.beleon.com/media/8899-beleontoursgreeceweddingzakynthosbeachnavagio05.jpg")';
      break;
    case "playa":
      backgroundImage =
        'url("https://travel.usnews.com/images/playa_paraiso_MrXjJaO.jpg")';
      break;
    case "anse":
      backgroundImage =
        'url("https://images.locationscout.net/2021/09/anse-source-dargent-seychelles-12eo.jpg")';
      break;
    case "sevenmile":
      backgroundImage =
        'url("https://ik.imgkit.net/3vlqs5axxjf/external/http://images.ntmllc.com/v4/destination/Cayman-Islands/Seven-Mile-Beach/5683420_SCN_Seven-Mile-Beach_iStock24011818_ZCFE39.jpg?tr=w-1200%2Cfo-auto")';
      break;
    case "borabora":
      backgroundImage =
        'url("https://media.shermanstravel.com/cruises/thumb/larger/7631_istock_21340242_large-jpg.jpg")';
      break;
    case "lanikai":
      backgroundImage =
        'url("https://wpcdn.us-east-1.vip.tn-cloud.net/www.hawaiimagazine.com/content/uploads/2022/10/h/s/20221018-lanikaiparking-ctf-gettyimages-509805766-1024x683.jpg")';
      break;
    case "pink":
      backgroundImage =
        'url("https://hf-s3.hotelfriend.com/pages/288/pink-sands-beach-harbour-island-bahamas-90971.jpg")';
      break;
    default:
      backgroundImage = "none";
  }

  beachContainer.style.backgroundImage = backgroundImage;
});

This Pen is owned by Chintan Dhokai on CodePen.

See more by @chintan-dhokai on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.