how to say happy birthday in html 5

7:05 PM aknow 0 Comments

1.Overview of the project

This project was a gift ,and i thought to share it ,in our community.

2.Structure of the project

The HTML is fairly simple. We have the two buttons wrapped inside. And the inner content for each button that gets shown when the button expands to a modal, is placed just outside of the container for the button

3.HTML

<div class="buttons-ctn">LEFT</span></a>
  <a href="" class="button button--right"><span>IHEB</span></a>
</div>
<div class="button__content button__content--left">
  <h2>You chose left!</h2>
  <a href="">Happy bday iheb</a>
</div>
<div class="button__content button__content--right">
  <h2>Youchose Iheb</h2>
  <a href="">Happy bday Iheb </a>
</div>

4.Styling

The buttons are floated to the left so their side by side with no gap in-between. The modal content is positioned in the center of the container and is hidden. We reveal the modal content by adding the class .button__content--active with jQuery. A few key things to note are the z-index values. The modal content must be given a higher z-index than the buttons so it doesn’t get placed behind the background of the buttons.

5.CSS

@mixin easeOut {
  transition: all .35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

$black: lighten(black, 8);

* {
  box-sizing: border-box;
}

body {
  background: #38c5b9;
  font-family: 'Lato';
  font-weight: 300;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}

.buttons-ctn {
  will-change: transform;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -140px;
  margin-top: -30px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.button {
  will-change: transform;
  position: relative;
  float: left;
  display: inline-block;
  padding: 20px;
  width: 140px;
  text-align: center;
  line-height: normal;
  @include easeOut;
  
  &--left {
    background: $black;
    color: white;
  }
  
  &--right {
    background: darken(white, 8);
    color: $black;
  }
  
  &--active {
   cursor: default;
    
   span {
     opacity: 0;
    }
  }
}

.button__content {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 60px 20px;
  text-align: center;
  width: 600px;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
  color: white;
  
  &--left {
    color: white;
    
    a {
      color: $black;
      background: white;
    }
  }
  
  &--right {
    color: $black;
    
    a {
      color: white;
      background: $black;
    }
  }
  
  &--active {
    opacity: 1;
    visibility: visible;
  }
  
  a {
    display: inline-block;
    padding: 10px 20px;
  }
  
  h2 {
    font-size: 36px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 300;
  }
  
  @media (max-width: 650px) {
    width: 295px;
  }
}

main {
  color: white;
  text-align: center;
  h1 {
    font-weight: 300;
    margin-bottom: 8px;
    margin-top: 24px;
  }
  
  p {
    margin-top: 0;
    
    a {
      font-size: 20px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 24px;
      color: rgba(black, 0.6);
    }
  } 
}

6.Animation

Here is where most of the magic lies. When a button is clicked, we find out which button was selected, and which one wasn’t, and move them both into the center of the screen by subtracting their offset().left value and.innerWidth() / 2 from half of the window width. It sounds more complicated than it is. We give the ‘unselected’ button a transition-delay so it moves to the center slightly after the first button. When that transition is complete we transform the scale value of the selected button to match the size of the inner content of that modal. We do this by dividing the .innerWidth() of the content by the .innerWidth() of the button. This value is what we use as the transform: scale(x) value; we do the same for the height and use that as the transform: scale(y) value

var button    = $('.button');
var content   = $('.button__content');
var win     = $(window);

var expand = function() {
  if (button.hasClass('button--active')) {
    return false;
  } else {
    var W      = win.width();
    var xc      = W / 2;

    var that     = $(this);
    var thatWidth  = that.innerWidth() / 2;
    var thatOffset  = that.offset();
    var thatIndex  = that.index();
    var other;

    if (!that.next().is('.button')) {
      other = that.prev();
    } else {
      other = that.next();
    }

    var otherWidth  = other.innerWidth() / 2;
    var otherOffset  = other.offset();

    // content box stuff
    var thatContent = $('.button__content').eq(thatIndex);
    var thatContentW = thatContent.innerWidth();
    var thatContentH = thatContent.innerHeight();

    // transform values for button
    var thatTransX  = xc - thatOffset.left - thatWidth;
    var otherTransX = xc - otherOffset.left - otherWidth;
    var thatScaleX = thatContentW / that.innerWidth();
    var thatScaleY = thatContentH / that.innerHeight();

    that.css({
      'z-index': '2',
      'transform': 'translateX(' + thatTransX + 'px)'
    });

    other.css({
      'z-index': '0',
      'opacity': '0',
      'transition-delay': '0.05s',
      'transform': 'translateX(' + otherTransX + 'px)'
    });

    that.on('transitionend webkitTransitionEnd', function() {
      that.css({
        'transform': 'translateX(' + thatTransX + 'px) scale(' + thatScaleX +',' + thatScaleY + ')',
      });

      that.addClass('button--active');
      thatContent.addClass('button__content--active');
      thatContent.css('transition', 'all 1s 0.1s cubic-bezier(0.23, 1, 0.32, 1)');
      that.off('transitionend webkitTransitionEnd');
    });

    return false;
  }
};

var hide = function(e) {
  var target= $(e.target);
  if (target.is(content)) {
    return;
  } else {
    button.removeAttr('style').removeClass('button--active');
    content.removeClass('button__content--active').css('transition', 'all 0.2s 0 cubic-bezier(0.23, 1, 0.32, 1)');
  }
};

var bindActions = function() {
  button.on('click', expand);
  win.on('click', hide);
};

var init = function() {
  bindActions();
};

init();