Cannon Safe® Branding Guidelines

In this example below you will see how to do a Cannon Safe® Branding Guidelines with some HTML / CSS and Javascript

This is a book I made some time ago, but the pen is a quick exploration of page turning using transitions and transforms.

Thumbnail
This awesome code was written by Ángel Valdez, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ángel Valdez ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Cannon Safe® Branding Guidelines</title>
  <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="book bound">
  <div class="pages">
    <div class="page">
      <h1>Cannon Safe®</h1>
      <h2>by Ángel Valdez</h2>
    </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/aveart/cannon-safeandxae-branding-guidelines-QgRKrN */
.book {
  transition: opacity 0.4s 0.2s;
}
.page {
  width: 516px;
  height: 311px;
  background-colour: #fff;
  float: left;
  margin-bottom: 0.5em;
}
.page:first-child {
  float: right;
}
.page:nth-child(even) {
  clear: both;
}
.bound {
  -webkit-perspective: 250vw;
          perspective: 250vw;
}
.bound .pages {
  width: 1032px;
  height: 311px;
  position: relative;
  -webkit-transform: rotateX(12deg);
          transform: rotateX(12deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 4px;
  box-shadow: 0 0 0 1px transparent;
}
.bound .page {
  float: none;
  clear: none;
  margin: 0;
  position: absolute;
  top: 0;
  width: 516px;
  height: 311px;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  transition: -webkit-transform 1.4s;
  transition: transform 1.4s;
  transition: transform 1.4s, -webkit-transform 1.4s;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.bound .page:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.7s;
  z-index: 2;
}
.bound .page:nth-child(odd) {
  pointer-events: all;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  right: 0;
  border-radius: 0 4px 4px 0;
}
.bound .page:nth-child(odd):hover {
  -webkit-transform: rotateY(-10deg);
          transform: rotateY(-10deg);
}
.bound .page:nth-child(odd):hover:before {
  background: rgba(0, 0, 0, 0.03);
}
.bound .page:nth-child(odd):before {
  background: rgba(0, 0, 0, 0);
}
.bound .page:nth-child(even) {
  pointer-events: none;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  left: 0;
  border-radius: 4px 0 0 4px;
}
.bound .page:nth-child(even):before {
  background: rgba(0, 0, 0, 0.2);
}
.bound .page.grabbing {
  transition: none;
}
.bound .page.flipped:nth-child(odd) {
  pointer-events: none;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
.bound .page.flipped:nth-child(odd):before {
  background: rgba(0, 0, 0, 0.2);
}
.bound .page.flipped:nth-child(even) {
  pointer-events: all;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
.bound .page.flipped:nth-child(even):hover {
  -webkit-transform: rotateY(10deg);
          transform: rotateY(10deg);
}
.bound .page.flipped:nth-child(even):hover:before {
  background: rgba(0, 0, 0, 0.03);
}
.bound .page.flipped:nth-child(even):before {
  background: rgba(0, 0, 0, 0);
}
*,
* :before,
*:after {
  box-sizing: border-box;
}
html,
body {
  background: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em 0;
  line-height: 1.5em;
}
.page {
  color: transparent;
  background: left top no-repeat;
  background-size: cover;
}
.page:nth-child(1),
.page:nth-child(2),
.page:nth-child(3),
.page:nth-child(4),
.page:nth-child(5),
.page:nth-child(6),
.page:nth-child(7),
.page:nth-child(8) {
  background-position: right top;
}
.page:nth-child(1) {
  background-image: url('https://i.imgur.com/bNiuO5v.jpg');
}
.page:nth-child(2) {
  background-image: url('https://imgur.com/1aweCsv.jpg');
}
.page:nth-child(3) {
  background-image: url('https://imgur.com/qRgGK1U.jpg');
}
.page:nth-child(4) {
  background-image: url('https://imgur.com/MELoWlF.jpg');
}
.page:nth-child(5) {
  background-image: url('https://imgur.com/oNagEBG.jpg');
}
.page:nth-child(6) {
  background-image: url('https://imgur.com/HA50yDZ.jpg');
}
.page:nth-child(7) {
  background-image: url('https://imgur.com/OfD9FLk.jpg');
}
.page:nth-child(8) {
  background-image: url('https://imgur.com/SlICa0U.jpg');
}


/*Downloaded from https://www.codeseek.co/aveart/cannon-safeandxae-branding-guidelines-QgRKrN */
var pages = $('.pages').children();
var grabs = false; 

pages.each(function(i) {
  var page = $(this);
  if (i % 2 === 0) {
    page.css('z-index', (pages.length - i)); 
  }
});

$(window).load(function() {
  
  $('.page').click(function() {
    var page = $(this);
    var page_num = pages.index(page) + 1;
    if (page_num % 2 === 0) {
      page.removeClass('flipped');
      page.prev().removeClass('flipped');
    } else {
      page.addClass('flipped');
      page.next().addClass('flipped');
    }
  });

  if (grabs) {
    $('.page').on('mousedown', function(e) {
      var page = $(this);
      var page_num = pages.index(page) + 1;
      var page_w = page.outerWidth();
      var page_l = page.offset().left;
      var grabbed = '';
      var mouseX = e.pageX;
      if (page_num % 2 === 0) {
        grabbed = 'verso';
        var other_page = page.prev();
        var centerX = (page_l + page_w);
      } else {
        grabbed = 'recto';
        var other_page = page.next();
        var centerX = page_l;
      }

      var leaf = page.add(other_page);

      var from_spine = mouseX - centerX;

      if (grabbed === 'recto') {
        var deg = (90 * -(1 - (from_spine/page_w)));
        page.css('transform', 'rotateY(' + deg + 'deg)');

      } else {
        var deg = (90 * (1 + (from_spine/page_w)));
        page.css('transform', 'rotateY(' + deg + 'deg)');
      }

      leaf.addClass('grabbing');

      $(window).on('mousemove', function(e) {
        mouseX = e.pageX;
        if (grabbed === 'recto') {
          centerX = page_l;
          from_spine = mouseX - centerX;
          var deg = (90 * -(1 - (from_spine/page_w)));
          page.css('transform', 'rotateY(' + deg + 'deg)');
          other_page.css('transform', 'rotateY(' + (180 + deg) + 'deg)');
        } else {
          centerX = (page_l + page_w);
          from_spine = mouseX - centerX;
          var deg = (90 * (1 + (from_spine/page_w)));
          page.css('transform', 'rotateY(' + deg + 'deg)');
          other_page.css('transform', 'rotateY(' + (deg - 180) + 'deg)');
        }

        console.log(deg, (180 + deg) );
      });


      $(window).on('mouseup', function(e) {
        leaf
          .removeClass('grabbing')
          .css('transform', '');

        $(window).off('mousemove');
      });
    });
  }
  
  $('.book').addClass('bound');
});

Comments