How to transition full page using CSS3 and support IE8, IE9?

Question

I'm working on a Q and A quiz game, where I should show only one question per page (full page). Each page has 2 buttons YES and NO .

Without scrolling, when a user click on NO the full page transit left and show the correct answer. When user click YES the full page transit down for next question.

I have checked the FullPageJs JS libraries such as, but I want to do it without any library.

I have tried transition full page from top to bottom only, but wasn't able to do transition form left to right.
How could I go about such transition for full page and support IE8 & IE9?
Thanks!

Html:

    <body>
    <div class="site-wrapper">
        <div class="site-wrapper-inner">
            <div class="container">
                <div class="row">
                    <div class="brand-image-container">
                        <div class="centerer"></div>
                        <img src="http://placehold.it/150x70" alt="" /> 
                    </div>                      
                </div>
                <div class="row">
                    <div class="img-container">
                        <div class="centerer"></div>
                        <img src="http://placehold.it/400x250" alt="" />    
                    </div>

                <div class="wrapper">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus amet optio vel alias nobis nostrum quaerat quas doloremque, libero dicta pariatur cupiditate, reiciendis quo nihil dolorem. Tempora saepe suscipit consequatur!
                    </p>                    
                </div>
            </div>
            </div>

        <div class="footer">
            <a href="#" class="button btn-medium btn-true">TRUE</a>
            <a href="#" class="button btn-medium btn-false">FALSE</a>
        </div>              
        </div>
    </div>
</body>

CSS:

* {
  box-sizing: border-box; }

html {
  font-family: "Lucida Sans", sans-serif, Arial;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

p {
  margin: 0; }

.site-wrapper {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: #CBD7F5;
  overflow: hidden; }

.site-wrapper-inner {
  vertical-align: middle;
  width: 100%;
  height: 100%;
  background-color: #aaa;
  overflow: hidden; }

.container {
  width: 100%;
  background-color: #eeeeee;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  height: 100%;
  float: left; }

.wrapper {
  width: 100%;
  margin: 10px auto;
  text-align: center;
  padding: 0 10px; }

.img-container, .brand-image-container {
  position: relative;
  padding: 0 10px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  /* Align center inline elements */
  font: 0/0 a;
  /* Hide the characters like spaces */ }

.brand-image-container {
  margin-bottom: 10px; }

.centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%; }

.img-container img {
  vertical-align: middle;
  display: inline-block;
  max-height: 100%;
  /* <-- Set maximum height to 100% of its parent */
  max-width: 100%;
  /* <-- Set maximum width to 100% of its parent */ }

.footer {
  padding: 15px 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  background-color: #345; }

.button {
  display: inline-block;
  margin: 0;
  font-weight: 400;
  line-height: 1.42857143;
  white-space: nowrap;
  vertical-align: middle;
  padding: 0;
  border: 1px solid transparent;
  background-image: none;
  cursor: pointer; }

.btn-medium {
  margin: 10px 15px;
  font-size: 20px;
  line-height: 1.33333333;
  text-shadow: none; }

.btn-true, .btn-false {
  padding: 5px 20px;
  color: #ffffff;
  border-radius: 0;
  border: 1px solid #336699;
  background-color: #337799; }

a {
  text-decoration: none; }

.go-down-section {
  margin-top: -1000px;
  transition: all 0.7s ease-in-out;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out; }

.go-right-section {
  margin-left: -100%;
  transition: all 0.7s ease-in-out;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out; }

.go-away {
  top: 0;
  position: absolute; }

@media (min-width: 640px) {
  .wrapper {
    width: 400px; } }
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .wrapper {
    width: 400px; }

  .footer {
    font-size: 21px; } }

JS:

$(document).ready( function() {
  $('#true1').click( function(){
    $('.section-one').addClass('go-down-section');
  });
  $('#false2').click( function(){
    $('.section-two').addClass('go-right-section');
    $('.section-three').addClass('go-away');
  });

});

UPDATE:

Here is a codepen page with full code

Answer 1

I have checked the FullPageJs JS libraries such as, but I want to do it without any library.

You can go for it if you want to learn or do it as an exercise.

If you really want to have a good end product , tested by thousands, I would strongly suggest you to go for a library. Why? Well, libraries don't become big and popular just because people is lazy to code 200 lines. Here are some reasons:

Highly tested in different devices and browsers by thousands of persons (Windows Phone, Adroid, iOS, touch screen computers, Opera, Safari...)
Compatibility with touch devices.
Compatibility with kinetic scrolling (Apple laptops, magic mouse...).
Compatibility with old browsers (IE 8, Opera 12...).
Good performance for modern browsers and touch devices (css3).
Recalculate of sections and slides when resizing the viewport.
Returning anchors in the URL.
Responsive mode.
Accessibility features (keyboard, scroll bar, browser history).
Use of callbacks to fire actions.
Plenty of methods and options.

And you get all of that for just 7Kb gzipped if you use fullPage.js.

How to transition full page using CSS3 and support IE8, IE9?

Question

1 answers

solution1
1 2015-05-26 16:06:08

How to transition full page using CSS3 and support IE8, IE9?

Question

1 answers

solution1 1 2015-05-26 16:06:08

solution1
1 2015-05-26 16:06:08