Member Avatar for hrushi9

Need help to add css transition effects to this https://jsfiddle.net/az9yt611/

floor item 1 is selected, when it changes to floor item 2 is selected add effect to its inner div's, i.e. Left & Right.
Add cube To Top transition to left div & To Bottom to right div, on next click. When Previous is clicked add To Bottom to left div & To Top to right div

When next or previous item is displayed animate left div & ight div, back n forth

PageTransitions
https://tympanus.net/Development/PageTransitions/

  • 5 Contributors
  • 4 Replies
  • 310 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by pdsubbu

Recommended Answers

All 4 Replies

Member Avatar for Lena_2

hi guys ,, i am a new member here.. i guess i can find several interesting posts....

Member Avatar for ryantroop

I dont think there is a good way to do this with pure CSS. It likely requires some javascript, using a "data-" tag on the parent element, and show which item you want displayed. the Javascript click event would then update the data- tag value to whichever element should be displayed.

However, their logic uses JS to put classes on elements in the grid, and uses on "transitionEnd" event to clean itself up. Internally, it seems to keep track on which "view" is currently displayed.

Lots of ways to do this. If you want to make a page like theirs, though, just debug and see what is happening when you click buttons :-/ Only way to learn is to try yourself or learn from others - and from the example page you provided, someone has already done the latter for you...

Member Avatar for essential

Hi, hrushi9

here's a simple demo that ive created to give you an idea on how things work using the CSS animation. You may also use CSS Transition in repalce of this example. Just mix things up, experiment and you are good to go.

<!-- By: Essential  kindly keep this along with your docs thanks-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="description" content="freecodecamp Challenge #3 - Build A Random Quote Machine">
  <title>Transitioning Sample</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <!-- custom stylesheet -->
  <style type="text/css">
  @import url('https://fonts.googleapis.com/css?family=Oswald');
  body {
    font-family: 'Oswald', sans-serif;
    background-color: #000;
    overflow: hidden;
  }
    .twt {
      background-color: #0084b4;
    }
    .pin {
      background-color: #C92228;
    }
    div.animateMe {
    position: absolute;
    width: 100%;
    height: 100vh;
    }
 div.animation1    {
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;

  -webkit-animation-name: slidein;
  -moz-animation-name: slidein;
  -o-animation-name: slidein;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    left: -100%;
  }
  to {
    left: 0;
  }
}
div.animation2 {
  /* avoiding the shorthand to make it in details */
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;

  -webkit-animation-name: slidein2;
  -moz-animation-name: slidein2;
  -o-animation-name: slidein2;
  animation-name: slidein2;
}
@keyframes slidein2 {
  from {
    margin-left: 100%;
    width : 300%;
  }
  to {
    margin-left: 0;
    width: 100%;
  }
}
    div a[role='button'] {
      position: fixed;
      display: block;
      top: 30px;
      right: 50px;

      z-index: 100;
    }
  </style>
  <!-- Custom Script -->
  <script type="text/javascript">
  var tags = ( function(str) {
    str = str;
    return document.getElementById(str) || document.querySelector(str) || document.all[str];
  });
  var counter = 0;
  window.addEventListener( 'load', function() {
          tags('trig').addEventListener('click', function() {
          if ( counter === 2) counter = 0;
          var classes = ['pin animateMe animation1','twt animateMe animation2', ['slide from the left', 'slide from the right']];
          this.innerHTML = '<span class="glyphicon glyphicon-play" aria-hidden="true"></span> ' + classes[2][counter];
          tags('myTransition').className = classes[counter];
          counter++;
        });
  });
  </script>
</head>
  <body>
    <div class="container-fluid">
      <!-- here is the div tat we will use to hold our transitoning animation -->
      <div class="row">
        <a id="trig" class="btn btn-default" href="#" role="button"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> PLAY</a>
        <div id="myTransition" class="animateMe"></div>
      </div>
    </div>

  </body>
</html>
Member Avatar for pdsubbu

Combination of CSS and JS would work better!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.