Question 108126 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I keep the size of the header fixed and animate the title with a flip?

I’m a beginner and I wanted to replicate this site as a personal project: https://olhauzhykova.com/

I want the header section to remain the same size while the title changes. Also could anyone suggest how I can animate a top-down flip everytime the title changes?

HTML:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="webcss.css">
    <script src="webjs.js"></script>
</head>
<body>
    <div class="header">
        <div class="logo"><img src="C:UsersengarDesktopWebsite 2logo.png"></div>
        <h1 class="title">Data Analyst</h1>
        <h1 class="title hidden">Mentor</h1>
        <h1 class="title hidden">Musician</h1>
        <h1 class="title hidden">Tech Enthusiast</h1>
    </div>
</body>
</html>

CSS:

.header {
    background-color: #f1f1f1;
    padding: 10px 40px; /* Change the padding value to adjust the width */
    border-radius: 20px; /* Round all corners */
    position: fixed;
    top: 2vh;
    left: 2vw;
    z-index: 999;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
  }
  
  .logo {
    display: inline-block;
    margin-right: 10px;
    border: 2px solid #333;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    transition: all 0.3s ease-in-out;
  }

  img {
    max-width: 100%;
    max-height: 150%;
}
  
  .title {
    display: inline-block;
    font-size: 24px;
    margin: 0;
    font-weight: bold;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
  }
  
  .title.hidden {
    display: none; /* hide hidden titles */
  }
  
  .header:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  }
  
  .header:hover .logo {
    transform: rotate(360deg);
  }
  
  .header:hover .title {
    margin-left: 10px;
  }
  
  .title.hidden {
    display: none;
  }

JAVASCRIPT

.header {
    background-color: #f1f1f1;
    padding: 10px 40px; /* Change the padding value to adjust the width */
    border-radius: 20px; /* Round all corners */
    position: fixed;
    top: 2vh;
    left: 2vw;
    z-index: 999;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
  }
  
  .logo {
    display: inline-block;
    margin-right: 10px;
    border: 2px solid #333;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    transition: all 0.3s ease-in-out;
  }

  img {
    max-width: 100%;
    max-height: 150%;
}
  
  .title {
    display: inline-block;
    font-size: 24px;
    margin: 0;
    font-weight: bold;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
  }
  
  .title.hidden {
    display: none; /* hide hidden titles */
  }
  
  .header:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  }
  
  .header:hover .logo {
    transform: rotate(360deg);
  }
  
  .header:hover .title {
    margin-left: 10px;
  }
  
  .title.hidden {
    display: none;
  }

It would be great if you could suggest tutorials too!

Tags:

2

Answers


  1. 0

    Here is a good source for CSS related topics, this post is related to transitions is a great site for reference.

    Login or Signup to reply.
  2. 0

    Welcome to Stack Overflow. This sounds like an ambitious project.

    The reason the width of your header is changing is because you’re using display: none for the hidden class. This takes it out of the layout, so the container resizes. (https://developer.mozilla.org/en-US/docs/Web/CSS/display)

    Instead, what you probably want is visibility: hidden or opacity: 0, which leaves the element in the layout. (https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)

    Since you’ll be working with transitions to create the effect from Olya’s website, I’d recommend going with opacity so that you can transition the fade in/out.

    As for the animation to do the title effect, look into transforms and keyframes. I’d recommend getting familiar with your browser’s Dev Tools so you can investigate for yourself (Ctrl+Shift+I should pull up the inspector). This is taken from Olya’s source code (although, this is unlikely done by hand and probably uses a library of some sort like Framer Motion):

    @keyframes logo-title1 {
 0% {
  -webkit-transform:translateY(20px);
  transform:translateY(20px);
  opacity:0;
 }
 8.25% {
  -webkit-transform:translateY(0);
  transform:translateY(0);
  opacity:1;
 }
 30% {
  -webkit-transform:translateY(0);
  transform:translateY(0);
  opacity:1;
 }
 38% {
  -webkit-transform:translateY(-20px);
  transform:translateY(-20px);
  opacity:0;
 }
 100% {
  -webkit-transform:translateY(-20px);
  transform:translateY(-20px);
  opacity:0;
 }
}
.header .header__logo-animation .header__menu-item:nth-child(n+1) {
 -webkit-animation-name:logo-title1;
 animation-name:logo-title1;
 -webkit-animation-duration:6.6s;
 animation-duration:6.6s;
 -webkit-animation-delay:2.15s;
 animation-delay:2.15s;
 -webkit-animation-iteration-count:infinite;
 animation-iteration-count:infinite;
 -webkit-animation-timing-function:ease-in-out;
 animation-timing-function:ease-in-out;
}
.header .header__logo-animation .header__menu-item:nth-child(n+2) {
 -webkit-animation-name:logo-title1;
 animation-name:logo-title1;
 -webkit-animation-duration:6.6s;
 animation-duration:6.6s;
 -webkit-animation-delay:4.3s;
 animation-delay:4.3s;
 -webkit-animation-iteration-count:infinite;
 animation-iteration-count:infinite;
 -webkit-animation-timing-function:ease-in-out;
 animation-timing-function:ease-in-out;
}
.header .header__logo-animation .header__menu-item:nth-child(n+3) {
 -webkit-animation-name:logo-title1;
 animation-name:logo-title1;
 -webkit-animation-duration:6.6s;
 animation-duration:6.6s;
 -webkit-animation-delay:6.45s;
 animation-delay:6.45s;
 -webkit-animation-iteration-count:infinite;
 animation-iteration-count:infinite;
 -webkit-animation-timing-function:ease-in-out;
 animation-timing-function:ease-in-out;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search